// WashData - Home Assistant integration for appliance cycle monitoring via smart plugs.
// Copyright (C) 2026 Lukas Bandura
// SPDX-License-Identifier: AGPL-3.0-or-later
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published
// by the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// ha-washdata-panel.js - WashData full-screen panel
// Registers the <ha-washdata-panel> custom element.
//
// Display constants (state colors, device types) come from the backend
// (ha_washdata/get_constants) so they are defined in exactly one place. State
// and device-type labels are localized via hass.localize against the
// integration translations, with the backend values as canonical fallback.
'use strict';

const _DOMAIN = 'ha_washdata';
// Cache-buster for on-demand asset fetches (per-language translation files). The
// panel module is imported as ha-washdata-panel.js?v=<mtime>, so reuse that same
// version: translation files are then cached per release and busted on upgrade.
// Empty when unavailable (e.g. loaded without a query) — we simply omit ?v=.
const _PANEL_VERSION = (() => {
  try { return new URL(import.meta.url).searchParams.get('v') || ''; }
  catch (_) { return ''; }
})();
// The panel is push-driven: HA calls set hass() on every entity state change
// (realtime), and subscribe_events / subscribe_tasks push cycle + task updates.
// So the interval poll is only a slow SAFETY heartbeat for store-derived data
// (suggestions/feedback counts) that isn't reflected in an entity state, and the
// set-hass refresh is coalesced. Previously these were a tight 5s poll + a 2s
// refetch-on-every-global-change, which did ~30 full refetches/min for nothing.
const _POLL_MS = 20000;
const _HASS_REFRESH_MS = 6000;
// Cycles-tab page size. Kept modest so the "Load more" control actually engages
// for typical histories instead of loading everything in one page.
const _CYCLE_PAGE_SIZE = 25;
// playground.MAX_BATCH_CYCLES: the most cycles one Test-on-history / Optimize run replays.
const _PG_MAX_BATCH_CYCLES = 50;
// The external integration the Maintenance section points to (#461). It reads the
// cycle-count sensor (translation_key "cycle_count", unit "cycles"), a public contract.
const _MAINTENANCE_SUPPORTER_URL = 'https://github.com/iluebbe/maintenance_supporter';

// Detector states that mean "a cycle is in flight". Single source for the device
// bar dot, the status header and the pause/resume/force-stop controls -- these
// used to be three hand-copied lists and the controls one had drifted (it was
// missing 'paused', so an auto-paused cycle showed no buttons at all).
const _ACTIVE_STATES = ['running', 'starting', 'paused', 'user_paused', 'ending', 'anti_wrinkle'];

// Declarative community-store preference toggles, rendered in the gear's Online &
// Community pane. To ship a new online setting: add one row here AND one default in
// store_account._DEFAULT_PREFS -- the generic get_prefs / store_set_prefs plumbing
// carries it end-to-end (no per-setting wiring). All are booleans.
const _STORE_PREFS = [
  { key: 'show_contributor', def: true, labelKey: 'lbl.show_contributor', labelFb: 'Show contributor names',
    docKey: 'setting.show_contributor.doc', docFb: 'Show the "by <contributor>" attribution on community appliances and reference cycles.' },
  // Opt-in (audit STORE-14): cycles you share carry no uploader name unless this is on.
  { key: 'share_name', def: false, labelKey: 'lbl.share_name', labelFb: 'Show my name on what I share',
    docKey: 'setting.share_name.doc', docFb: 'Show your account name as the uploader of cycles you share. Off: shared without a name.' },
];
// Height (CSS px) of the band above the Playground plot where event pin heads
// sit, out of the busy curve area. Shared by _pgDrawCanvas and the pointer
// layout() closure so threshold-drag math stays aligned with the drawn plot.
const _PG_PIN_BAND_H = 34;

// Chart gesture tuning (see _attachGraphGestures).
// A double tap / double click halves the visible window, i.e. zooms 2x. HA uses
// a fixed +/-15% slice of the axis; a relative step composes better because our
// charts start from wildly different cycle lengths (a 3 min air-fryer run and a
// 4 h wash both live in these canvases).
const _CANVAS_DBLTAP_ZOOM = 0.5;
// Deepest zoom, as a multiple of the full trace. Without a floor a runaway
// pinch collapses the axis onto a single sample and both edge labels read the
// same minute.
const _CANVAS_MAX_ZOOM = 200;
// ...and never below this many seconds, which keeps very short cycles usable.
const _CANVAS_MIN_VIEW_S = 5;
// Grab radius (CSS px) of the axis-pointer handle. 22 is a touch target, not a
// pixel-hunt: HA draws its handle at size 20.
const _AXIS_HANDLE_GRAB = 22;
// Minutes of recorder history the cycle dialog can draw either side of a cycle
// (item 513, discussion #463). Same list ws_set_user_prefs accepts; 0 = off.
const _CYCLE_CONTEXT_CHOICES = [0, 5, 10, 30, 60];
const _CYCLE_CONTEXT_DEFAULT_MIN = 10;

// Floor for the measured panel height (_syncPanelHeight), so a bad measurement in a
// hidden/zero-height container cannot collapse the UI to nothing.
const _MIN_PANEL_HEIGHT = 320;

// Distinct colors for overlaying many cycle curves (history cleanup).
const _PALETTE = [
  '#e6194B', '#3cb44b', '#4363d8', '#f58231', '#911eb4', '#42d4f4',
  '#f032e6', '#bfef45', '#fabed4', '#469990', '#dcbeff', '#9A6324',
  '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#a9a9a9',
];

// ─── Settings schema (single declarative source) ───────────────────────────────
// Each field: {key, label, type, unit?, step?, min?, max?, def?, hint?, doc?, opts?}
// type: number | text | textarea | checkbox | select | entity | device | devicetype | list
// `doc` is shown in a hover tooltip (condensed from SETTINGS_VISUALIZED.md).
// Defined before _SETTINGS_SECTIONS because notification field docs reference it.
const _NOTIFY_VARS = '{device}, {duration}, {minutes}, {program}, {energy_kwh}, {cost}, {time_finished}, {vs_typical}, {cycle_count}';
const _SETTINGS_SECTIONS = [
  { id: 'basic', label: 'Basic', intro: 'Core identity and the essentials most setups need.', groups: [
    { sub: 'Device info', fields: [
      { key: 'name', label: 'Device Name', basic: true, type: 'text',
        doc: 'Name shown in Home Assistant for this device.' },
      { key: 'device_type', label: 'Device Type', basic: true, type: 'devicetype',
        doc: 'Sets detection defaults (thresholds, off delay, end handling) for this kind of appliance. Change it only if the device was set up as the wrong type.' },
      { key: 'store_brand', label: 'Appliance Brand', type: 'storebrand', optional: true, basic: true,
        doc: 'Optional. Your appliance brand from the community catalog, used to find and share reference recordings. Leave blank if you do not use online features.' },
      { key: 'store_model', label: 'Appliance Model', type: 'storemodel', optional: true, basic: true,
        doc: 'Optional. Your appliance model from the community catalog (pick a brand first). If it is not listed, you can add it.' },
    ] },
    { sub: 'Basic configuration', fields: [
      { key: 'power_sensor', label: 'Power Sensor', basic: true, type: 'entity', domain: 'sensor',
        doc: 'The sensor that reports this appliance\'s live power in watts (e.g. sensor.washer_power). All detection is based on it.' },
      { key: 'min_power', label: 'Minimum Power', unit: 'W', type: 'number', step: 0.1, min: 0, def: 2.0, basic: true,
        doc: 'Readings below this count as 0 W (standby). Filters out the idle draw of smart plugs and standby LEDs.' },
      { key: 'off_delay', label: 'Off Delay', unit: 's', type: 'number', min: 0, def: 180, basic: true,
        doc: 'How long power must stay low before the cycle is finished. Power coming back within this time continues the cycle. Dishwashers can be idle 20-60 min while drying, so set it longer than that.' },
      { key: 'linked_device', label: 'Group Under Device', type: 'device',
        doc: 'Optional. Show this WashData device under another device (e.g. the smart plug) in Home Assistant, as "Connected via ...".' },
    ] },
    // Energy and cost moved here from Notifications (audit UI-25): the price drives
    // every cost figure, not just the peak-rate tip that stays with the messages.
    { sub: 'Energy', fields: [
      { key: 'energy_sensor', label: 'Energy Meter Entity', type: 'entity', domain: 'sensor', optional: true,
        doc: 'Optional kWh or Wh counter (total_increasing, e.g. the plug\'s own meter). Cycle energy is then read from it, which is more accurate than computing it from a slow power sensor. If its reading is unusable, the computed value is used.' },
      { key: 'energy_price_entity', label: 'Energy Price Entity', type: 'entity', domain: 'sensor', basic: true, notPrice: true,
        doc: 'Sensor with the current price per kWh (e.g. a dynamic tariff). It overrides the static price below, so it must be a price, not the plug\'s power or energy sensor.' },
      { key: 'energy_price_static', label: 'Static Energy Price (per kWh)', type: 'number', step: 0.001, min: 0, basic: true,
        doc: 'Fixed price per kWh, used when no price entity is set.' },
      { key: 'energy_price_dynamic', label: 'Time-Weighted Cost', type: 'checkbox', def: true, basic: true,
        doc: 'Charge each cycle at the price at each moment it ran, instead of the price when it finished. Needs a price entity. Process History (Diagnostics) recosts older cycles.' },
    ] },
  ] },
  { id: 'detection', label: 'Detection', intro: 'How a cycle is detected as starting, running and finishing.', groups: [
    { sub: 'Thresholds & Gap', fields: [
      { key: 'start_threshold_w', label: 'Start Threshold', unit: 'W', type: 'number', step: 1, min: 0,
        doc: 'Power must rise above this to start a cycle. Too low: standby power causes false starts. Too high: slow-starting programs (cold fill) are missed.' },
      { key: 'stop_threshold_w', label: 'Stop Threshold', unit: 'W', type: 'number', step: 0.1, min: 0,
        doc: 'Power must fall below this before the off delay starts counting. Keep it below the Start Threshold. Too high, and low-power phases (rinse holds, anti-crease) start the end countdown by mistake.' },
      { key: 'min_off_gap', label: 'Min Off Gap', unit: 's', type: 'number', min: 0,
        doc: 'An off period shorter than this does not split a cycle, so soak pauses stay in one wash. Keep it shorter than the gap between back-to-back loads, or those merge into one cycle.' },
    ] },
    { sub: 'Cycle Start', fields: [
      { key: 'start_duration_threshold', label: 'Start Duration', internal: true, unit: 's', type: 'number', min: 0, def: 5,
        doc: 'Power must stay above the Start Threshold this long before a cycle starts, so brief on/off blips are ignored.' },
      { key: 'start_energy_threshold', label: 'Start Energy', internal: true, unit: 'Wh', type: 'number', step: 0.01, min: 0, def: 0.2,
        doc: 'Energy the appliance must use before the cycle counts as running. A short power spike uses little energy, so it does not start a cycle.' },
      { key: 'completion_min_seconds', label: 'Min Cycle Duration', unit: 's', type: 'number', min: 0, def: 600,
        doc: 'Cycles shorter than this (test runs, opening the door to add a sock) are saved as Interrupted and get no finish notification.' },
      { key: 'curve_preroll_seconds', label: 'Curve Pre-roll', unit: 's', type: 'number', step: 10, min: 0, max: 600, def: 0,
        doc: 'Adds readings from failed start attempts to the front of a cycle, for machines that probe before starting (door lock, first fill). 300 s covers most; 0 = off. Recorded starts move earlier, so learned durations drift for a while.' },
    ] },
    { sub: 'Cycle End', fields: [
      { key: 'end_energy_threshold', label: 'End Energy', unit: 'Wh', type: 'number', step: 0.001, min: 0, def: 0.05,
        doc: 'Energy allowed during the off delay. More than this and the cycle keeps going, so tumbles and drying tails stay attached. Lower it if cycles end during a tail; raise it if finished cycles keep waiting.' },
      { key: 'smart_termination_duration_ratio', label: 'Smart Termination Ratio', type: 'number', step: 0.01, min: 0.5, max: 1.0,
        doc: 'Fraction of the program\'s average duration a cycle must reach before Smart Termination may end it early. If run times vary (water temperature, sensor-dry, load size), lower it (e.g. 0.85). Leave empty for 0.98 (0.99 on dishwashers).' },
    ] },
    { sub: 'Power Off', fields: [
      { key: 'power_off_threshold_w', label: 'Power Off Threshold', unit: 'W', type: 'number', step: 0.1, min: 0, def: 0,
        doc: 'After a cycle, power below this for the Power Off Delay sets the state to Off, instead of the Progress Reset Delay doing it. Set it above the switched-off draw, below standby and the Stop Threshold. 0 disables it (default).' },
      { key: 'power_off_delay', label: 'Power Off Delay', unit: 's', type: 'number', min: 0, def: 30,
        doc: 'How long power must stay below the Power Off Threshold after a cycle before the state returns to Off. Only used when that threshold is above 0. Checked periodically, so the real wait can be slightly longer.' },
    ] },
    { sub: 'Signal Processing', fields: [
      { key: 'sampling_interval', label: 'Sampling Interval', internal: true, unit: 's', type: 'number', min: 1, def: 30,
        doc: 'Minimum time between processed readings. Readings that arrive sooner are skipped (low readings during a cycle are always kept). Set it to your plug\'s reporting interval or lower; a higher value only throws readings away.' },
    ] },
  ] },
  { id: 'matching', label: 'Matching', intro: 'How finished cycles are matched to learned profiles and labelled.', notDeviceTypes: ['other'], groups: [
    { sub: 'Match Scoring', fields: [
      { key: 'profile_match_threshold', label: 'Match Threshold', type: 'number', step: 0.01, min: 0, max: 1, def: 0.4,
        doc: 'Live match score a cycle needs before Smart Termination or the anti-crease finish may end it early. It does not change the shown program. Raise it if weak matches end cycles early; lower it if clear matches wait the off delay.' },
      { key: 'profile_unmatch_threshold', label: 'Unmatch Threshold', internal: true, type: 'number', step: 0.01, min: 0, max: 1, def: 0.35,
        doc: 'If the live match score drops below this, the current program guess is cleared. Keep it a little below the Match Threshold so a brief dip does not reset it.' },
      { key: 'profile_match_interval', label: 'Match Interval', internal: true, unit: 's', type: 'number', min: 0,
        doc: 'How often to match a running cycle against profiles. Default 300 s (5 min).' },
    ] },
    { sub: 'Duration Gates', fields: [
      { key: 'profile_match_min_duration_ratio', label: 'Min Duration Ratio', internal: true, type: 'number', step: 0.01, min: 0, max: 1, def: 0.1,
        doc: 'A program is only considered after the cycle has run this fraction of its typical duration. 0.10: a 2-hour program becomes a candidate after 12 minutes. Not applied in a cycle\'s first 15 minutes.' },
      { key: 'profile_match_max_duration_ratio', label: 'Max Duration Ratio', internal: true, type: 'number', step: 0.01, min: 0, def: 1.8,
        doc: 'A program is dropped once the cycle has run longer than this multiple of its typical duration. 1.8: a cycle 80% longer than the program no longer matches it.' },
      { key: 'duration_tolerance', label: 'Estimate Tolerance', internal: true, type: 'number', step: 0.01, min: 0, max: 1, def: 0.1,
        doc: 'Learning feedback only: a cycle within +/-X% of its estimated duration counts as a good estimate. Does not affect matching.' },
    ] },
    { sub: 'Profile Evidence', fields: [
      { key: 'profile_evidence_sources', label: 'Cycles that shape a program', type: 'checkboxlist', def: ['real_cycles', 'reference_cycles', 'backfill_cycles'],
        choices: [['real_cycles', 'Cycles this machine ran'], ['reference_cycles', 'Downloaded from the community store'], ['backfill_cycles', 'Found in imported power history']],
        doc: 'Which kinds of cycles shape each program\'s curve and matching. Unticking a kind deletes nothing; useful if you do not trust imported data. Statistics always count only this machine\'s cycles. Unticking all is ignored.' },
    ] },
    { sub: 'Auto-Labeling', fields: [
      { key: 'auto_label_confidence', label: 'Auto-Label Confidence', type: 'number', step: 0.01, min: 0, max: 1, def: 0.9,
        doc: 'Match score at cycle end at or above which the program is labelled without asking. Raise it for more certainty; lower it to label more cycles automatically. Keep it above Learning Confidence.' },
      { key: 'learning_confidence', label: 'Learning Confidence', internal: true, type: 'number', step: 0.01, min: 0, max: 1, def: 0.6,
        doc: 'Lowest match score for labelling a finished cycle. A clear winner is labelled; a close call goes to the review queue in Cycles. Below this, nothing is labelled or asked. Keep it below Auto-Label Confidence.' },
    ] },
  ] },
  { id: 'timing', label: 'Timing & Watchdog', intro: 'Background cadence, the offline watchdog and housekeeping.', groups: [
    { sub: 'Watchdog', fields: [
      { key: 'watchdog_interval', label: 'Watchdog Interval', internal: true, unit: 's', type: 'number', min: 1, def: 30,
        doc: 'How often the background check looks for stalled sensors and timeouts. Default 30 s.' },
      { key: 'no_update_active_timeout', label: 'No-Update Timeout', internal: true, unit: 's', type: 'number', min: 0, def: 600,
        doc: 'If no power update arrives for this long during a cycle, assume the plug went offline and force-stop the cycle. The default 600 s allows for cloud or mesh delays.' },
    ] },
    { sub: 'Housekeeping', fields: [
      { key: 'progress_reset_delay', label: 'Progress Reset Delay', unit: 's', type: 'number', min: 0, def: 1800,
        doc: 'After a cycle, keep progress at 100% this long before resetting to Idle.' },
      { key: 'auto_maintenance', label: 'Auto Maintenance (nightly cleanup)', type: 'checkbox', def: true,
        doc: 'Nightly cleanup: label old cycles that now clearly match a program, rebuild program curves, refresh anomaly marks and cycle health, and remove debug traces if Save Debug Traces is off. Cycles and their power traces are always kept.' },
      { key: 'power_profile_interval_min', label: 'Power Profile Interval', unit: 'min', type: 'number', min: 1, def: 15,
        doc: 'Bucket size of the power_profile attribute (average watts per slot) used by planners such as EMHASS and tibber_prices. Smaller keeps short spikes; larger smooths the curve. Default 15 min. Does not affect detection.' },
    ] },
    { sub: 'Debug', fields: [
      { key: 'expose_debug_entities', label: 'Expose Debug Entities', internal: true, type: 'checkbox',
        doc: 'Add diagnostic entities (match confidence, ambiguity, internal state). Off keeps the entity list clean.' },
      { key: 'save_debug_traces', label: 'Save Debug Traces', type: 'checkbox',
        doc: 'Also store the matcher\'s debug data (every candidate\'s scores) with each cycle, for troubleshooting. Adds about 20 KB per cycle.' },
    ] },
  ] },
  { id: 'anti_wrinkle', label: 'Anti-Wrinkle', intro: 'Keeps a dryer\'s low-power tumble pulses after the main phase attached to the finished cycle.', onlyDeviceTypes: ['washing_machine', 'dryer', 'washer_dryer'], fields: [
    { key: 'anti_wrinkle_enabled', label: 'Enable Anti-Wrinkle Detection', basic: true, type: 'checkbox',
      doc: 'Keep a dryer\'s short low-power tumble pulses after the main heat phase with the finished cycle, instead of reading them as new cycles.' },
    { key: 'anti_wrinkle_max_power', label: 'Max Anti-Wrinkle Power', unit: 'W', type: 'number', step: 10, min: 0, def: 400,
      doc: 'A pulse above this power counts as a real new cycle, not a tumble. Set it just above your tumble-pulse power.' },
    { key: 'anti_wrinkle_max_duration', label: 'Max Duration', unit: 's', type: 'number', min: 0, def: 60,
      doc: 'A pulse longer than this counts as a real cycle, not an anti-wrinkle tumble.' },
    { key: 'anti_wrinkle_exit_power', label: 'Exit Power Threshold', internal: true, unit: 'W', type: 'number', step: 0.1, min: 0, def: 0.8,
      doc: 'In anti-wrinkle mode, power below this counts as quiet between tumble pulses, and quiet for longer than the Max Pulse Gap ends the mode. The Stop Threshold is used when it is higher, so this only changes anything when set above the Stop Threshold.' },
    { key: 'anti_wrinkle_idle_timeout', label: 'Max Pulse Gap', unit: 's', type: 'number', step: 30, min: 0, def: 120,
      doc: 'How long the dryer may stay quiet between tumble pulses before anti-wrinkle mode ends. Set it above your dryer\'s longest gap, or later pulses are read as false starts.' },
    { key: 'anti_crease_finalize_ratio', label: 'Anti-Crease Finalize Ratio', type: 'number', step: 0.01, min: 0.5, max: 1.0, def: 0.98,
      doc: 'Fraction of the program\'s average duration a cycle must reach before its low-power tumbling counts as the anti-crease tail. Lower it (e.g. 0.75) on load-sensing dryers. Keep washers at the default (0.98), or a wash can end halfway.' },
  ] },
  { id: 'dishwasher', label: 'Dishwasher', intro: 'End handling for dishwashers, which often dry quietly for a long time before a short final drain.', onlyDeviceTypes: ['dishwasher'], fields: [
    { key: 'dishwasher_end_spike_quiet_release', label: 'Passive-Dry Quiet Release', unit: 's', type: 'number', step: 60, min: 0, def: 600,
      doc: 'After the expected duration, how long the dishwasher must stay below the Stop Threshold before WashData stops waiting for the final drain. Raise it if a late drain after a long dry is missed. The wait never exceeds 30 minutes.' },
  ] },
  { id: 'delay', label: 'Delay Start', intro: 'Detects an appliance that is on and waiting for a delayed start.', fields: [
    { key: 'delay_start_detect_enabled', label: 'Enable Delay-Start Detection', type: 'checkbox',
      doc: 'Detect an appliance that is on and waiting for a delayed start, so its standby draw is not taken for a running cycle.' },
    { key: 'delay_confirm_seconds', label: 'Confirm Seconds', unit: 's', type: 'number', min: 0, def: 60,
      doc: 'Power must stay in the standby band this long before the appliance counts as waiting to start.' },
    { key: 'delay_timeout_hours', label: 'Timeout Hours', unit: 'h', type: 'number', step: 0.5, min: 0, def: 8.0,
      doc: 'Give up waiting for a delayed start after this many hours and return to idle.' },
  ] },
  { id: 'triggers', label: 'Triggers & Door', intro: 'Optional extras: end trigger, door sensor, pause switch and unload reminder.', groups: [
    { sub: 'External End Trigger', fields: [
      { key: 'external_end_trigger_enabled', label: 'Enable External End Trigger', type: 'checkbox',
        doc: 'Let a binary sensor signal the end of a cycle, in addition to power-based detection.' },
      { key: 'external_end_trigger', label: 'External Trigger Entity', type: 'entity', domain: 'binary_sensor',
        doc: 'Binary sensor whose change marks the cycle end (e.g. a "finished" contact or another integration).' },
      { key: 'external_end_trigger_inverted', label: 'Invert External Trigger (trigger on OFF)', type: 'checkbox',
        doc: 'Treat the sensor turning OFF (not ON) as the end signal.' },
    ] },
    { sub: 'Door & Pause', fields: [
      { key: 'door_sensor_entity', label: 'Door Sensor Entity', basic: true, type: 'entity', domain: 'binary_sensor',
        doc: 'Optional door sensor. Shows when the appliance was opened to unload after a cycle.' },
      { key: 'door_opens_at_end', label: 'Door Opens Automatically At End', type: 'checkbox',
        doc: 'For dishwashers that open the door at the end to dry (e.g. AirDry). A door left open for the dwell time below ends the cycle instead of pausing it; a brief open is ignored. Needs a Door Sensor Entity.' },
      { key: 'door_end_dwell_seconds', label: 'Door-Open End Dwell', unit: 's', type: 'number', min: 1, def: 60,
        doc: 'With "Door Opens Automatically At End" on: how long the door must stay open before the cycle ends. Long enough to ignore adding a dish (default 60 s).' },
      { key: 'pause_cuts_power', label: 'Pause Also Cuts Power (via switch)', type: 'checkbox',
        doc: 'When a cycle is paused, also switch off the Switch Entity below. Only for appliances that can safely lose power mid-cycle.' },
      { key: 'switch_entity', label: 'Switch Entity', type: 'entity', domain: 'switch',
        doc: 'Optional switch turned off on pause and back on when resuming, with "Pause Also Cuts Power".' },
    ] },
    { sub: 'Unload Reminder', fields: [
      { key: 'notify_unload_delay_minutes', label: 'Unload Nag Delay', unit: 'min', type: 'number', min: 0, def: 60, basic: true,
        doc: 'Minutes after a cycle ends before the "unload the machine" reminder. 0 disables it.' },
      { key: 'notify_unload_repeat', label: 'Repeat Until Unloaded', type: 'checkbox',
        doc: 'Resend the unload reminder every "Unload Nag Delay" minutes until the unload is confirmed or you tap "Stop reminding" (mobile app). Needs a Door Sensor Entity, an Unload Confirmation Entity, or "Confirm Unload Manually".' },
      { key: 'unload_confirm_entity', label: 'Unload Confirmation Entity', type: 'entity',
        domains: ['event', 'button', 'input_button', 'binary_sensor', 'sensor', 'input_boolean', 'switch', 'scene', 'tag'],
        doc: 'Optional. Any entity that confirms the load was taken out, for machines without a door sensor (a button, input_button, motion sensor, scene). Every state change counts except turning off or unavailable. Also enables the unload reminder.' },
      { key: 'unload_track_without_door', label: 'Confirm Unload Manually', type: 'checkbox',
        doc: 'Run the unload reminder without a door sensor or confirmation entity. Confirm the unload from your own automation with the "Mark Unloaded" button or the ha_washdata.mark_unloaded service. Ignored when a Door Sensor Entity is set.' },
      { key: 'pump_stuck_duration', label: 'Pump Stuck Duration', unit: 's', type: 'number', min: 0, def: 1800,
        onlyDeviceType: 'pump', doc: 'How long a pump may run nonstop before the stuck-pump event fires.' },
    ] },
  ] },
  { id: 'notifications', label: 'Notifications', groups: [
    { sub: 'Services', fields: [
      { key: 'notify_start_services', label: 'Start Services', type: 'entitylist', domain: 'notify', placeholder: 'add a notify service…', basic: true,
        doc: 'notify.* services to call when a cycle starts (phone, dashboard, ...). Leave empty for none.' },
      { key: 'notify_finish_services', label: 'Finish Services', type: 'entitylist', domain: 'notify', placeholder: 'add a notify service…', basic: true,
        doc: 'notify.* services to call when a cycle finishes. Leave empty for none.' },
      { key: 'notify_live_services', label: 'Live Progress Services', basic: true, type: 'entitylist', domain: 'notify', placeholder: 'add a notify service…',
        doc: 'notify.* services for live progress updates while a cycle runs. Leave empty to turn them off.' },
      { key: 'notify_people', label: 'People (for Only When Home)', type: 'entitylist', domain: 'person', placeholder: 'add a person…',
        doc: 'person.* entities that "Notify Only When Home" checks.' },
      { key: 'notify_only_when_home', label: 'Notify Only When Home', type: 'checkbox',
        doc: 'Only notify when at least one of the people above is home.' },
      { key: 'notify_fire_events', label: 'Fire HA Events for Notifications', type: 'checkbox', def: true,
        doc: 'Also fire ha_washdata_* events on cycle start and finish for your own automations.' },
    ] },
    { sub: 'Timing', fields: [
      { key: 'notify_before_end_minutes', label: 'Pre-End Alert', unit: 'min', type: 'number', min: 0, def: 0,
        doc: 'Send an Almost Done alert when estimated time remaining drops below this. 0 disables it.' },
      { key: 'notify_live_interval_seconds', label: 'Live Update Interval', unit: 's', type: 'number', min: 30, def: 300,
        doc: 'How often live-progress notifications are refreshed while a cycle runs.' },
      { key: 'notify_live_overrun_percent', label: 'Live Overrun % Before Alert', unit: '%', type: 'number', min: 0, def: 20,
        doc: 'Live updates stop once a cycle runs this percent past its expected duration (20 = up to 1.2x the expected time).' },
      { key: 'notify_live_chronometer', label: 'Use Live Chronometer', type: 'checkbox',
        doc: 'Show a live countdown timer in the notification (where supported) instead of a fixed estimate.' },
      { key: 'notify_live_silent', label: 'Silent Live Updates', type: 'checkbox', def: true,
        doc: 'iOS only. Update live progress silently, at a battery-saving priority that iOS may batch. The first update and the start/finish notifications still alert. Off: every update alerts.' },
      { key: 'notify_live_sticky', label: 'Keep Live Notification On Tap', type: 'checkbox',
        doc: 'Android only. Keep the live progress notification when tapped. Off: a tap dismisses it.' },
      { key: 'notify_live_click_action', label: 'Notification Tap Target', type: 'text', optional: true,
        doc: 'What a tap on this appliance\'s notification opens. Blank: the WashData panel on this appliance. Enter a dashboard path (e.g. /lovelace/laundry) or URL, or "none" for no tap action.' },
      { key: 'notify_timeout_seconds', label: 'Auto-Dismiss After', unit: 's', type: 'number', min: 0, def: 0,
        doc: 'Dismiss the notification after this many seconds (where supported). 0 keeps it until you dismiss it.' },
    ] },
    { sub: 'Messages', fields: [
      { key: 'notify_title', label: 'Notification Title', type: 'text', def: 'WashData: {device}',
        doc: 'Notification title. Only {device} is substituted; any other variable falls back to the default title.' },
      { key: 'notify_icon', label: 'Notification Icon', type: 'text', def: '',
        doc: 'Small icon on the notification (e.g. mdi:washing-machine). Sent only to mobile_app targets, not notify groups. On iOS it replaces the app icon and needs companion app 2026.8 or newer. Blank: platform default.' },
      { key: 'notify_icon_color', label: 'Notification Colour', type: 'color', def: '', placeholder: '#03A9F4',
        doc: 'Accent colour for this appliance\'s notifications, so washer, dryer and dishwasher are easy to tell apart. On iOS it fills the circle behind the icon and colours the Live Activity bar. Many Android phones (Samsung especially) ignore it. Use hex, e.g. #03A9F4. Blank: platform default.' },
      { key: 'notify_start_message', label: 'Start Message', type: 'textarea', def: '{device} started.',
        doc: 'Body sent when a cycle starts. Template variables: {device}, {program}. Any other variable falls back to the default text.' },
      { key: 'notify_finish_message', label: 'Finish Message', type: 'textarea', def: '{device} finished. Duration: {duration} min.', basic: true,
        doc: 'Body sent when a cycle finishes. Variables: {device}, {program}, {duration} (minutes), {duration_hm} (1 h 05 min), {energy_kwh}, {cost}, {time_finished}, {vs_typical}, {cycle_count}, {status} (completed or force_stopped; interrupted cycles send nothing). Any other variable falls back to the default text.' },
      { key: 'notify_pre_complete_message', label: 'Pre-Complete Message', type: 'textarea', def: '{device}: Less than {minutes} minutes remaining.',
        doc: 'Text of each live progress update. Template variables: {device}, {program}, {minutes} (minutes left). Any other variable falls back to the default text.' },
      { key: 'notify_reminder_message', label: 'Reminder Message', type: 'textarea', def: '',
        doc: 'Text of the one-time Pre-End Alert. Template variables: {device}, {program}, {minutes} (the Pre-End Alert setting). Any other variable falls back to the default text.' },
      { key: 'notify_channel', label: 'Android Channel (start/live)', type: 'text', def: '',
        placeholder: 'e.g. WashData', suggestions: ['WashData', 'WashData Status', 'Appliance Status'],
        doc: 'Android channel for start and live messages; the channel sets sound and priority. Blank: app default.' },
      { key: 'notify_finish_channel', label: 'Android Channel (finish)', type: 'text', def: '',
        placeholder: 'e.g. WashData Finished', suggestions: ['WashData Finished', 'WashData Alerts', 'Appliance Finished'],
        doc: 'Android channel for the finish message. Blank reuses the start/live channel.' },
      { key: 'peak_rate_threshold', label: 'Peak-Rate Threshold (per kWh)', type: 'number', step: 0.001, min: 0, def: 0, clearable: true,
        doc: 'If the price per kWh is at or above this when a cycle starts, add a peak-rate tip to the start notification. 0 or blank disables it.' },
      { key: 'peak_rate_message', label: 'Peak-Rate Message', type: 'text', def: '', placeholder: 'Running at peak rate ({price}/kWh).',
        doc: 'Custom text for the peak-rate tip. Template variables: {device}, {price}. Blank uses the default.' },
    ] },
    { sub: 'Cycle Timers', fields: [
      { key: 'notify_cycle_timers', label: 'Cycle Timers', type: 'timerlist',
        doc: 'Notifications at set minutes into a cycle (e.g. to add softener). Message supports {device}, {program}, {minutes}. With Auto-pause, the cycle also pauses there and the notification gets a Resume button.' },
    ] },
    { sub: 'Quiet Hours & Milestones', fields: [
      { key: 'notify_quiet_start_hour', label: 'Quiet Hours Start', basic: true, unit: 'h', type: 'number', min: 0, max: 23, clearable: true,
        doc: 'Start of a do-not-disturb window (0-23). Finish, reminder and clean-laundry notifications in this window are held until it ends. Can cross midnight (e.g. 22 to 7). Blank disables it.' },
      { key: 'notify_quiet_end_hour', label: 'Quiet Hours End', basic: true, unit: 'h', type: 'number', min: 0, max: 23, clearable: true,
        doc: 'End of the do-not-disturb window (0-23); held notifications are sent then. Blank disables it.' },
      { key: 'notify_milestones', label: 'Cycle Milestones', type: 'intlist', def: '50, 100, 500, 1000', placeholder: '50, 100, 500, 1000',
        doc: 'Cycle counts that trigger a one-off celebration notification, comma-separated (e.g. 50, 100, 500, 1000). Blank disables them.' },
      { key: 'notify_milestone_message', label: 'Milestone Message', type: 'textarea', def: '{device} has completed {cycle_count} cycles!',
        doc: 'Message for the milestone notification. Template variables: {device}, {cycle_count}.' },
    ] },
  ] },
  { id: 'ml_training', label: 'ML Training', fields: [
    { key: 'enable_ml_models', label: 'Apply smart models during a cycle', type: 'checkbox', def: false,
      doc: 'Use a model trained on this machine to predict a running cycle\'s energy and cost, and let a well-known program that stops unusually early finish without the full off delay. Off: power-based logic only.' },
    { key: 'ml_training_enabled', label: 'Learn from this machine', type: 'checkbox', def: false,
      doc: 'Retrain the energy model on this machine\'s finished cycles from time to time. A new model is kept only if it beats the simple estimate on test cycles.' },
    { key: 'ml_training_hour', label: 'Learn at hour', unit: 'h', type: 'number', min: 0, max: 23, def: 2,
      doc: 'Hour of day (0-23) for overnight training. Pick a quiet hour, e.g. 2.' },
    { key: 'ml_training_min_cycles', label: 'Cycles needed first', type: 'number', min: 5, def: 30,
      doc: 'Wait for at least this many recorded cycles before training.' },
    { key: 'ml_training_interval_days', label: 'Check at most every', unit: 'days', type: 'number', min: 1, def: 7,
      doc: 'Retrain at most once every this many days.' },
  ] },
];

// Flat key -> field-definition map (built from the schema; drives save coercion).
const _FIELD_BY_KEY = {};
for (const sec of _SETTINGS_SECTIONS) {
  const groups = sec.groups || [{ fields: sec.fields }];
  for (const grp of groups) for (const f of (grp.fields || [])) _FIELD_BY_KEY[f.key] = f;
}

// Offline fallback defaults for the two Stage-1 matcher ratios the Playground
// shows (the backend ships the real ones as pg_match_defaults).
const _PG_MATCH_DEFAULTS = {
  profile_match_min_duration_ratio: 0.1,
  profile_match_max_duration_ratio: 1.8,
};

// ─── Setting conflict rules ───────────────────────────────────────────────────
// Each rule describes a cross-parameter invariant. `check(vals, ctx)` returns true
// when the invariant is violated. `fieldErrors(vals, ctx)` maps each affected key to
// an error descriptor: `{msgKey, msgVars, msgFb, fixVal}` where `fixVal` is the
// suggested value for THAT field (always actionable in the current section).
// `ctx.stateOf(entity_id)` reaches the hass state for rules that need an entity's
// attributes; every numeric rule ignores it.

// ─── Setting notes (informational, not conflicts) ─────────────────────────────
// Same shape as _SETTING_CONFLICTS, but these describe a value the integration
// DERIVES from more than one setting. They are not violations - nothing here is
// misconfigured - so they render as a neutral note rather than an error with a
// fix button, and they never contribute to the section conflict dots.
const _SETTING_NOTES = [
  {
    // #445: the detector waits max(off_delay, min_off_gap), so a min_off_gap
    // above off_delay silently governs the end of the cycle. The reporter set
    // off_delay to 180 s, waited 6 minutes and force-stopped three cycles,
    // because the 480 s their washing machine actually waited was never shown.
    keys: ['off_delay', 'min_off_gap'],
    check: v => v.off_delay != null && v.min_off_gap != null && v.min_off_gap > v.off_delay,
    fieldNotes: v => ({
      off_delay: {
        msgKey: 'note.off_delay.effective',
        msgVars: { eff: v.min_off_gap, gap: v.min_off_gap, delay: v.off_delay },
        msgFb: `A finished cycle actually waits ${v.min_off_gap} s, not ${v.off_delay} s: Min Off Gap (${v.min_off_gap} s) is longer and takes precedence.`,
      },
    }),
  },
];

// Device classes and units that prove a sensor is not a price per kWh (#439).
// Mirrors manager._NON_PRICE_DEVICE_CLASSES / _NON_PRICE_UNITS - keep in step.
const _NON_PRICE_DEVICE_CLASSES = new Set(['energy', 'energy_storage', 'power', 'gas', 'water', 'current', 'voltage']);
const _NON_PRICE_UNITS = new Set(['w', 'kw', 'mw', 'wh', 'kwh', 'mwh', 'va', 'kva', 'varh', 'a', 'ma', 'v', 'mv']);

// Why the chosen Energy Price Entity cannot be a price per kWh, or null (#439).
// Only positive evidence rejects, exactly as the backend does: an entity HA has
// not loaded yet has no attributes to judge and is left alone.
function _nonPriceReason(id, vals, ctx) {
  if (!id) return null;
  if (id === vals.power_sensor) {
    return { msgKey: 'conflict.price_entity.power_sensor', msgVars: {},
      msgFb: 'This is the device\'s Power Sensor, not a price. Cycles would be costed in watts per kWh; clear this field.' };
  }
  if (id === vals.energy_sensor) {
    return { msgKey: 'conflict.price_entity.energy_sensor', msgVars: {},
      msgFb: 'This is the device\'s Energy Meter, not a price. Cycles would be costed at the meter reading per kWh; clear this field.' };
  }
  const st = (ctx && ctx.stateOf) ? ctx.stateOf(id) : null;
  if (!st) return null;
  const attrs = st.attributes || {};
  const dc = String(attrs.device_class == null ? '' : attrs.device_class).trim().toLowerCase();
  if (_NON_PRICE_DEVICE_CLASSES.has(dc)) {
    return { msgKey: 'conflict.price_entity.device_class', msgVars: {dc},
      msgFb: `This sensor measures ${dc}, not a price per kWh. Clear this field or pick a tariff sensor.` };
  }
  const unit = String(attrs.unit_of_measurement == null ? '' : attrs.unit_of_measurement).trim();
  if (_NON_PRICE_UNITS.has(unit.toLowerCase())) {
    return { msgKey: 'conflict.price_entity.unit', msgVars: {unit},
      msgFb: `This sensor reads in ${unit}, not a price per kWh. Clear this field or pick a tariff sensor.` };
  }
  return null;
}

const _SETTING_CONFLICTS = [
  {
    // energy_price_entity pointing at something that is provably not a price (#439).
    // The picker lists every sensor, and a price entity outranks the static price, so
    // choosing the plug's own kWh counter silently costs every cycle at
    // energy * meter_reading. No fix button: the fix is to clear the field.
    keys: ['energy_price_entity', 'energy_sensor', 'power_sensor'],
    check: (v, ctx) => _nonPriceReason(v.energy_price_entity, v, ctx) != null,
    fieldErrors: (v, ctx) => ({ energy_price_entity: _nonPriceReason(v.energy_price_entity, v, ctx) }),
  },
  {
    // start_threshold_w > stop_threshold_w (hysteresis band must be positive)
    keys: ['start_threshold_w', 'stop_threshold_w'],
    check: v => v.start_threshold_w != null && v.stop_threshold_w != null && v.start_threshold_w <= v.stop_threshold_w,
    fieldErrors: v => ({
      start_threshold_w: { msgKey: 'conflict.hysteresis.start', msgVars: {stop: v.stop_threshold_w}, msgFb: `Must be above Stop Threshold (${v.stop_threshold_w} W)`, fixVal: +Math.max(v.stop_threshold_w + 0.5, v.stop_threshold_w * 1.25).toFixed(1) },
      stop_threshold_w:  { msgKey: 'conflict.hysteresis.stop',  msgVars: {start: v.start_threshold_w}, msgFb: `Must be below Start Threshold (${v.start_threshold_w} W)`, fixVal: +Math.min(v.start_threshold_w - 0.5, v.start_threshold_w * 0.8).toFixed(1) },
    }),
  },
  {
    // min_power <= stop_threshold_w (noise gate must sit below the stop floor)
    keys: ['min_power', 'stop_threshold_w'],
    check: v => v.min_power != null && v.stop_threshold_w != null && v.min_power > v.stop_threshold_w,
    fieldErrors: v => ({
      min_power:        { msgKey: 'conflict.min_power.min_power', msgVars: {stop: v.stop_threshold_w}, msgFb: `Must be at or below Stop Threshold (${v.stop_threshold_w} W)`, fixVal: +(v.stop_threshold_w * 0.8).toFixed(1) },
      stop_threshold_w: { msgKey: 'conflict.min_power.stop',      msgVars: {min: v.min_power},  msgFb: `Must be at or above Min Power (${v.min_power} W)`, fixVal: +(v.min_power * 1.25).toFixed(1) },
    }),
  },
  {
    // power_off_threshold_w < stop_threshold_w when > 0 (else feature silently ignored)
    keys: ['power_off_threshold_w', 'stop_threshold_w'],
    check: v => v.power_off_threshold_w != null && v.power_off_threshold_w > 0 && v.stop_threshold_w != null && v.power_off_threshold_w >= v.stop_threshold_w,
    fieldErrors: v => ({
      power_off_threshold_w: { msgKey: 'conflict.power_off.threshold', msgVars: {stop: v.stop_threshold_w}, msgFb: `Must be below Stop Threshold (${v.stop_threshold_w} W) to take effect`, fixVal: +(v.stop_threshold_w * 0.6).toFixed(1) },
      stop_threshold_w:      { msgKey: 'conflict.power_off.stop',      msgVars: {pot: v.power_off_threshold_w}, msgFb: `Must be above Power Off Threshold (${v.power_off_threshold_w} W)`, fixVal: +(v.power_off_threshold_w * 1.67).toFixed(1) },
    }),
  },
  {
    // off_delay <= min_off_gap (effective_off_delay = max(off_delay, min_off_gap))
    keys: ['off_delay', 'min_off_gap'],
    check: v => v.off_delay != null && v.min_off_gap != null && v.off_delay > v.min_off_gap,
    fieldErrors: v => ({
      off_delay:  { msgKey: 'conflict.off_delay.off_delay', msgVars: {gap: v.min_off_gap},  msgFb: `Off Delay (${v.off_delay} s) overrides Min Off Gap (${v.min_off_gap} s); cycles within the gap may merge`, fixVal: v.min_off_gap },
      min_off_gap: { msgKey: 'conflict.off_delay.gap',     msgVars: {delay: v.off_delay},  msgFb: `Min Off Gap should be at least Off Delay (${v.off_delay} s)`, fixVal: v.off_delay },
    }),
  },
  {
    // watchdog_interval >= 2 * sampling_interval (avoid false-zero injections)
    keys: ['watchdog_interval', 'sampling_interval'],
    check: v => v.watchdog_interval != null && v.sampling_interval != null && v.watchdog_interval < 2 * v.sampling_interval,
    fieldErrors: v => ({
      watchdog_interval:  { msgKey: 'conflict.watchdog.interval',  msgVars: {si: v.sampling_interval}, msgFb: `Should be at least 2× Sampling Interval (${v.sampling_interval} s)`, fixVal: +(2 * v.sampling_interval + 1) },
      sampling_interval:  { msgKey: 'conflict.watchdog.sampling',  msgVars: {wi: v.watchdog_interval}, msgFb: `Sampling Interval should be at most half of Watchdog Interval (${v.watchdog_interval} s)`, fixVal: +Math.floor(v.watchdog_interval / 2) },
    }),
  },
  {
    // no_update_active_timeout > watchdog_interval (timeout must outlast one tick)
    keys: ['no_update_active_timeout', 'watchdog_interval'],
    check: v => v.no_update_active_timeout != null && v.watchdog_interval != null && v.no_update_active_timeout <= v.watchdog_interval,
    fieldErrors: v => ({
      no_update_active_timeout: { msgKey: 'conflict.no_update_timeout.timeout', msgVars: {wi: v.watchdog_interval}, msgFb: `Must be greater than Watchdog Interval (${v.watchdog_interval} s)`, fixVal: v.watchdog_interval * 2 },
      watchdog_interval:        { msgKey: 'conflict.no_update_timeout.watchdog', msgVars: {to: v.no_update_active_timeout}, msgFb: `Must be less than No-Update Timeout (${v.no_update_active_timeout} s)`, fixVal: +Math.floor(v.no_update_active_timeout / 2) },
    }),
  },
  {
    // start_duration_threshold >= sampling_interval (debounce must span at least one sample)
    keys: ['start_duration_threshold', 'sampling_interval'],
    check: v => v.start_duration_threshold != null && v.sampling_interval != null && v.start_duration_threshold < v.sampling_interval,
    fieldErrors: v => ({
      start_duration_threshold: { msgKey: 'conflict.start_dur.threshold', msgVars: {si: v.sampling_interval}, msgFb: `Should be at least one Sampling Interval (${v.sampling_interval} s) to prevent single-sample false starts`, fixVal: v.sampling_interval },
      sampling_interval:        { msgKey: 'conflict.start_dur.sampling',  msgVars: {sdt: v.start_duration_threshold}, msgFb: `Sampling Interval exceeds Start Duration (${v.start_duration_threshold} s); single-sample spikes can open a cycle`, fixVal: v.start_duration_threshold },
    }),
  },
  {
    // learning_confidence >= profile_match_threshold (#396): the verify-band floor
    // must sit at or above the live match-trust gate. The correct confidence ladder
    // is unmatch < match < learning < auto_label; flagging learning BELOW match
    // (the old rule) was backwards and tripped the shipped defaults (0.6 vs 0.4).
    keys: ['learning_confidence', 'profile_match_threshold'],
    check: v => v.learning_confidence != null && v.profile_match_threshold != null && v.learning_confidence < v.profile_match_threshold,
    fieldErrors: v => ({
      learning_confidence:    { msgKey: 'conflict.confidence.learning',  msgVars: {match: v.profile_match_threshold}, msgFb: `Must be at or above Match Threshold (${v.profile_match_threshold})`, fixVal: +(v.profile_match_threshold).toFixed(2) },
      profile_match_threshold: { msgKey: 'conflict.confidence.match_for_learning', msgVars: {lc: v.learning_confidence}, msgFb: `Must be at or below Learning Confidence (${v.learning_confidence})`, fixVal: +(v.learning_confidence).toFixed(2) },
    }),
  },
  {
    // profile_match_threshold <= auto_label_confidence
    keys: ['profile_match_threshold', 'auto_label_confidence'],
    check: v => v.profile_match_threshold != null && v.auto_label_confidence != null && v.profile_match_threshold > v.auto_label_confidence,
    fieldErrors: v => ({
      profile_match_threshold: { msgKey: 'conflict.confidence.match_for_auto', msgVars: {alc: v.auto_label_confidence}, msgFb: `Must be at or below Auto-Label Confidence (${v.auto_label_confidence})`, fixVal: +(v.auto_label_confidence).toFixed(2) },
      auto_label_confidence:   { msgKey: 'conflict.confidence.auto',           msgVars: {match: v.profile_match_threshold}, msgFb: `Must be at or above Match Threshold (${v.profile_match_threshold})`, fixVal: +(v.profile_match_threshold).toFixed(2) },
    }),
  },
  {
    // profile_unmatch_threshold < profile_match_threshold (committed match must not immediately un-match)
    keys: ['profile_unmatch_threshold', 'profile_match_threshold'],
    check: v => v.profile_unmatch_threshold != null && v.profile_match_threshold != null && v.profile_unmatch_threshold >= v.profile_match_threshold,
    fieldErrors: v => ({
      profile_unmatch_threshold: { msgKey: 'conflict.unmatch.unmatch', msgVars: {match: v.profile_match_threshold}, msgFb: `Must be below Match Threshold (${v.profile_match_threshold}); otherwise a committed match un-matches instantly`, fixVal: +(v.profile_match_threshold - 0.05).toFixed(2) },
      profile_match_threshold:   { msgKey: 'conflict.unmatch.match',   msgVars: {un: v.profile_unmatch_threshold},   msgFb: `Must be above Unmatch Threshold (${v.profile_unmatch_threshold})`, fixVal: +(v.profile_unmatch_threshold + 0.05).toFixed(2) },
    }),
  },
  // (No anti_wrinkle_exit_power vs stop_threshold_w rule: the detector counts quiet
  // below the higher of the two, so any pair is valid and the old "must be below
  // stop" fix moved the exit power to where it does nothing; #285 #296 #325.)
  {
    // anti_wrinkle_max_power > start_threshold_w — only for devices that support anti-wrinkle
    keys: ['anti_wrinkle_max_power', 'start_threshold_w'],
    check: v => ['washing_machine','dryer','washer_dryer'].includes(v.device_type) && v.anti_wrinkle_max_power != null && v.start_threshold_w != null && v.anti_wrinkle_max_power <= v.start_threshold_w,
    fieldErrors: v => ({
      anti_wrinkle_max_power: { msgKey: 'conflict.anti_wrinkle_max.max',   msgVars: {start: v.start_threshold_w}, msgFb: `Must be above Start Threshold (${v.start_threshold_w} W); otherwise anti-wrinkle duration limit is bypassed`, fixVal: +(v.start_threshold_w * 2.0).toFixed(0) },
      start_threshold_w:      { msgKey: 'conflict.anti_wrinkle_max.start', msgVars: {max: v.anti_wrinkle_max_power}, msgFb: `Must be below Anti-Wrinkle Max Power (${v.anti_wrinkle_max_power} W)`, fixVal: +(v.anti_wrinkle_max_power * 0.5).toFixed(1) },
    }),
  },
  {
    // pump_stuck_duration < no_update_active_timeout — only for pump/sump-pump devices
    keys: ['pump_stuck_duration', 'no_update_active_timeout'],
    check: v => v.device_type === 'pump' && v.pump_stuck_duration != null && v.no_update_active_timeout != null && v.no_update_active_timeout <= v.pump_stuck_duration,
    fieldErrors: v => ({
      pump_stuck_duration:      { msgKey: 'conflict.pump_stuck.duration', msgVars: {to: v.no_update_active_timeout}, msgFb: `Must be below No-Update Timeout (${v.no_update_active_timeout} s) so the stuck alarm can fire first`, fixVal: v.no_update_active_timeout - 60 },
      no_update_active_timeout: { msgKey: 'conflict.pump_stuck.timeout',  msgVars: {ps: v.pump_stuck_duration}, msgFb: `Must exceed Pump Stuck Duration (${v.pump_stuck_duration} s) so the stuck alarm can fire first`, fixVal: v.pump_stuck_duration + 60 },
    }),
  },
  {
    // profile_match_min_duration_ratio < profile_match_max_duration_ratio (matching window must be non-empty)
    keys: ['profile_match_min_duration_ratio', 'profile_match_max_duration_ratio'],
    check: v => v.profile_match_min_duration_ratio != null && v.profile_match_max_duration_ratio != null && v.profile_match_min_duration_ratio >= v.profile_match_max_duration_ratio,
    fieldErrors: v => ({
      profile_match_min_duration_ratio: { msgKey: 'conflict.duration_ratio.min', msgVars: {max: v.profile_match_max_duration_ratio}, msgFb: `Must be less than Max Duration Ratio (${v.profile_match_max_duration_ratio})`, fixVal: +(v.profile_match_max_duration_ratio * 0.5).toFixed(2) },
      profile_match_max_duration_ratio: { msgKey: 'conflict.duration_ratio.max', msgVars: {min: v.profile_match_min_duration_ratio}, msgFb: `Must be greater than Min Duration Ratio (${v.profile_match_min_duration_ratio})`, fixVal: +(v.profile_match_min_duration_ratio * 2.0).toFixed(2) },
    }),
  },
  {
    // end_energy_threshold >= stop_threshold_w * off_delay / 3600  (#376)
    // The energy gate is evaluated over an off_delay-long window, so it implies a
    // wattage. Below this it forbids what stop_threshold_w (the power gate) allows,
    // and the cycle can only close through a fallback path (smart termination,
    // watchdog force-end) — surfacing only as an unexplained late completion.
    keys: ['end_energy_threshold', 'stop_threshold_w', 'off_delay'],
    check: v => v.end_energy_threshold != null && v.stop_threshold_w != null && v.off_delay != null
      && v.off_delay > 0 && v.end_energy_threshold < v.stop_threshold_w * v.off_delay / 3600,
    fieldErrors: v => ({
      end_energy_threshold: { msgKey: 'conflict.end_energy.energy', msgVars: {w: v.stop_threshold_w, d: v.off_delay},
        msgFb: `Too strict for Stop Threshold (${v.stop_threshold_w} W) over Off Delay (${v.off_delay} s); the cycle can only end through a fallback path`,
        fixVal: Math.ceil(v.stop_threshold_w * v.off_delay / 3600 * 1000) / 1000 },
      stop_threshold_w: { msgKey: 'conflict.end_energy.stop', msgVars: {e: v.end_energy_threshold, d: v.off_delay, p: +(v.end_energy_threshold * 3600 / v.off_delay).toFixed(2)},
        msgFb: `End Energy Threshold (${v.end_energy_threshold} Wh over ${v.off_delay} s) only permits ${+(v.end_energy_threshold * 3600 / v.off_delay).toFixed(2)} W`,
        fixVal: Math.floor(v.end_energy_threshold * 3600 / v.off_delay * 10) / 10 },
    }),
  },
];

// ─── Styles ──────────────────────────────────────────────────────────────────
const _CSS = `
:host {
  /* The panel owns the full height it is given and scrolls INTERNALLY (.wd-main).
     HA renders a non-iframe custom panel into a plain container that sets only
     display/background and the safe-area padding, and no height at all
     (frontend src/panels/custom/ha-panel-custom.ts), so the old min-height: 100%
     resolved against an auto-height parent and the panel simply grew with its
     content: the DOCUMENT scrolled, .wd-main's overflow never engaged, and a
     dropdown opened near the bottom was cut off by the window edge with no way
     to reach the rest of it (scrolling the page moves the anchor and closes it).
     The insets are subtracted because that same container adds them as padding
     around us, so 100dvh alone would overflow by exactly that much. */
  /* NOT display:flex, and the layout must not depend on it: a rule in the embedding
     document targeting our tag beats any :host rule regardless of specificity, and
     both HA and the E2E fixture set display:block on the panel element. The height
     survives that because _syncPanelHeight writes it inline. .wd-root below takes
     height:100% of it and is the flex column everything else resolves against. */
  display: block;
  height: calc(100dvh - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: var(--primary-background-color);
  color: var(--primary-text-color);
  font-family: var(--paper-font-body1_-_font-family, Roboto, sans-serif);
  --wd-radius-sm: 4px;
  --wd-radius-md: 8px;
  --wd-radius-lg: 12px;
  --wd-space-xs: 4px;
  --wd-space-sm: 6px;
  --wd-space-md: 10px;
  --wd-space-lg: 16px;
  --wd-space-xl: 24px;
  --wd-font-sm: 0.75em;
  --wd-font-xs: 0.7em;
  --wd-white: #fff;
  --wd-tint-xs: rgba(0,0,0,0.04);
  --wd-tint-sm: rgba(0,0,0,0.08);
  --wd-tint-md: rgba(0,0,0,0.12);
}
.wd-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  background: var(--app-header-background-color, var(--primary-color));
  color: var(--app-header-text-color, #fff);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.wd-header h1 { margin: 0; font-size: 1.25em; font-weight: 600; letter-spacing: .01em; }
.wd-logo { flex-shrink: 0; opacity: .95; }
.wd-burger { display: none; align-items: center; justify-content: center; background: transparent; border: none; color: inherit; cursor: pointer; padding: 5px; margin: -2px 2px -2px -4px; border-radius: var(--wd-radius-md); flex-shrink: 0; }
.wd-burger:hover { background: rgba(255,255,255,.16); }
.wd-gear-btn { background: transparent; border: none; color: inherit; cursor: pointer; padding: 5px; margin-left: 4px; border-radius: var(--wd-radius-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; opacity: .8; }
.wd-gear-btn:hover { background: rgba(255,255,255,.16); opacity: 1; }
@media (max-width: 870px) { .wd-burger { display: inline-flex; } }
.wd-burger.wd-burger--force { display: inline-flex; }
.wd-header .wd-sub { font-size: .72em; opacity: .75; margin-top: 2px; }
.wd-header .wd-ts { margin-left: auto; font-size: .7em; opacity: .65; white-space: nowrap; }
.wd-body { max-width: 1160px; margin: 0 auto; padding: 20px 16px 60px; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wd-chip {
  padding: 5px 16px; border-radius: 16px;
  border: 1px solid var(--divider-color, rgba(0,0,0,.12));
  background: var(--card-background-color); color: var(--primary-text-color);
  cursor: pointer; font-size: .85em; transition: background .15s, color .15s;
}
.wd-chip:hover { background: var(--secondary-background-color); }
.wd-chip.active { background: var(--primary-color); color: var(--wd-white); border-color: var(--primary-color); }
.wd-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--divider-color, rgba(0,0,0,.1));
  margin-bottom: 20px; overflow-x: auto;
}
/* The device list and the tab bar are the app's navigation: they stay put while only
   the pane below them scrolls. Sticky rather than hoisted out of .wd-main, so the DOM
   order and the tablist/tabpanel relationship are untouched. The negative margins
   bleed the opaque background over .wd-body's own padding, so a card scrolling past
   cannot show through above or beside the nav; the padding puts that space back
   inside the sticky box. */
.wd-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--primary-background-color);
  margin: -20px -16px 20px; padding: 20px 16px 0;
}
.wd-nav .wd-tabs { margin-bottom: 0; }
.wd-tab {
  padding: 10px 22px; border: none; background: transparent;
  color: var(--secondary-text-color); font-size: .8em; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.wd-tab:hover { color: var(--primary-text-color); }
.wd-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.wd-pane { display: none; }
.wd-pane.active { display: block; }
.wd-card {
  background: var(--card-background-color); border-radius: var(--wd-radius-lg);
  padding: 20px 22px; margin-bottom: 16px;
  box-shadow: var(--ha-card-box-shadow, 0 2px 6px rgba(0,0,0,.08));
}
.wd-card-title {
  margin: 0 0 14px; font-size: .72em; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--secondary-text-color);
  display: flex; align-items: center; gap: 8px;
}
.wd-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.wd-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 20px; font-size: .85em; font-weight: 500;
  margin-bottom: 18px;
}
.wd-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.wd-running .wd-dot { animation: wd-pulse 1.4s ease-in-out infinite; }
@keyframes wd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.wd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.wd-stat { background: var(--secondary-background-color); border-radius: var(--wd-radius-md); padding: 14px 10px; text-align: center; }
.wd-stat-val { font-size: 1.5em; font-weight: 600; line-height: 1.1; }
.wd-stat-lbl { margin-top: 5px; font-size: .72em; color: var(--secondary-text-color); }
.wd-prog-bg { background: var(--secondary-background-color); border-radius: 6px; height: 10px; overflow: hidden; }
.wd-prog-fill { height: 100%; background: var(--primary-color); border-radius: 6px; transition: width .6s ease; }
.wd-prog-row { display: flex; justify-content: space-between; margin-top: 6px; font-size: .78em; color: var(--secondary-text-color); }
/* D1: compact phase timeline below the progress bar */
.wd-ptl-wrap { margin-top: 8px; }
.wd-ptl { position: relative; height: 12px; border-radius: 6px; overflow: hidden; background: var(--secondary-background-color); }
.wd-ptl-seg { position: absolute; top: 0; bottom: 0; }
.wd-ptl-seg-lbl { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 8px; line-height: 1; color: var(--wd-white); white-space: nowrap; overflow: hidden; max-width: calc(100% - 6px); text-shadow: 0 0 2px rgba(0,0,0,.55); pointer-events: none; }
.wd-ptl-cursor { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--primary-text-color, #111); box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.wd-ptl-cur { margin-top: 5px; font-size: .74em; color: var(--secondary-text-color); }
.wd-cycle-ctrl { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.wd-table { width: 100%; border-collapse: collapse; font-size: .875em; }
.wd-table th {
  text-align: left; padding: 8px 12px;
  color: var(--secondary-text-color); font-weight: 600; font-size: .72em;
  letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--divider-color);
}
.wd-table td { padding: 10px 12px; border-bottom: 1px solid var(--divider-color, rgba(0,0,0,.05)); vertical-align: middle; }
.wd-table tr:last-child td { border-bottom: none; }
.wd-table tbody tr:hover td { background: var(--secondary-background-color); }
.wd-table-wrap { overflow-x: auto; }
/* Audit UI-20: a horizontal scroller that hides content past an edge gets a shadow on
   that edge, so on a phone the tab strip and wide tables visibly continue instead of
   looking cut off. A shadow rather than a fade: past a table's last visible column
   there is usually only whitespace, where a fade shows nothing. _syncScrollAffordances
   sets the classes only while there really is more content on that side; backgrounds
   do not affect layout, and nothing overflows at desktop widths, so the desktop view
   is unchanged. The background of a scroll container does not scroll with it, so the
   shadow stays on the visible edge. Mid-grey reads on light and dark themes alike. */
.wd-ovf-l, .wd-ovf-r { background-repeat: no-repeat; background-size: 22px 100%; }
.wd-ovf-r { background-image: linear-gradient(to left, rgba(127,127,127,.42), rgba(127,127,127,0)); background-position: right center; }
.wd-ovf-l { background-image: linear-gradient(to right, rgba(127,127,127,.42), rgba(127,127,127,0)); background-position: left center; }
.wd-ovf-l.wd-ovf-r { background-image: linear-gradient(to right, rgba(127,127,127,.42), rgba(127,127,127,0)), linear-gradient(to left, rgba(127,127,127,.42), rgba(127,127,127,0)); background-position: left center, right center; }
.wd-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.wd-th-sort:hover { color: var(--primary-color); }
.wd-tc-date { white-space: nowrap; color: var(--secondary-text-color); font-size: .82em; }
.wd-tc-num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
/* Dedicated flags/icons column: keep every badge on one line so review/anomaly/source
   icons never overwrite each other or spill into the profile name. */
.wd-tc-flags { white-space: nowrap; font-size: .9em; }
th.wd-tc-flags { color: var(--secondary-text-color); font-weight: 500; }
.wd-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wd-filter-input { flex: 1; min-width: 120px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--divider-color); background: var(--card-background-color); color: var(--primary-text-color); font-size: .84em; }
.wd-filter-select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--divider-color); background: var(--card-background-color); color: var(--primary-text-color); font-size: .84em; }
.wd-row-link { cursor: pointer; }
.wd-pill { display: inline-block; padding: 2px 9px; border-radius: var(--wd-radius-sm); background: var(--secondary-background-color); color: var(--secondary-text-color); font-size: .78em; }
.wd-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 10px; font-size: .72em; font-weight: 600; vertical-align: middle; background: var(--secondary-background-color); color: var(--secondary-text-color); margin-left: 4px; }
.wd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer;
  font-size: .85em; font-weight: 500; transition: opacity .15s;
  white-space: nowrap;
}
.wd-btn:hover { opacity: .85; }
.wd-btn:disabled { opacity: .55; cursor: default; }
.wd-btn-primary { background: var(--primary-color); color: var(--wd-white); }
.wd-btn-secondary { background: var(--secondary-background-color); color: var(--primary-text-color); border: 1px solid var(--divider-color); }
.wd-btn-danger { background: var(--error-color, #f44336); color: var(--wd-white); }
.wd-btn-sm { padding: 4px 10px; font-size: .78em; }
.wd-btn-xs { padding: 2px 8px; font-size: .72em; }
.wd-spin {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: wd-rot .7s linear infinite; vertical-align: -2px;
}
@keyframes wd-rot { to { transform: rotate(360deg); } }
.wd-field { margin-bottom: 16px; }
.wd-field label { display: block; font-size: .82em; font-weight: 600; margin-bottom: 5px; color: var(--secondary-text-color); letter-spacing: .04em; text-transform: uppercase; }
.wd-field input[type=text], .wd-field input[type=number], .wd-field select, .wd-field textarea {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--divider-color, rgba(0,0,0,.2));
  background: var(--secondary-background-color);
  color: var(--primary-text-color); font-size: .9em; font-family: inherit;
}
.wd-field textarea { min-height: 64px; resize: vertical; }
.wd-field input[type=checkbox] { width: auto; margin-right: 8px; }
/* Switch-style boolean settings (replaces the old plain checkbox). Scoped under
   .wd-field-switch so the switch label wins over the generic ".wd-field label"
   (display:block, higher specificity) rule and stays a centered flex row. */
.wd-field-switch label { margin: 0; }
.wd-field-switch .wd-switch-row { display: flex; align-items: center; gap: 10px; min-height: 22px; }
/* Switch label: a flex row [toggle][text], vertically centred. The .wd-field
   .wd-switch-lbl selector is needed to beat .wd-field label (display:block +
   .82em + uppercase, specificity 0,1,1) which otherwise leaks in and both breaks
   the vertical centring (align-items is a no-op on a block) and shrinks the label.
   The bare .wd-switch-lbl covers inline use outside a .wd-field (e.g. adopt). */
.wd-switch-lbl,
.wd-field .wd-switch-lbl {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  min-width: 0; margin: 0; font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: none;
}
/* Match the switch label to every other setting name (see .wd-field label). */
.wd-switch-text { font-size: .82em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary-text-color); }
#wd-settings-form .wd-switch-text, #wd-ml-form .wd-switch-text { color: var(--primary-text-color); }
/* Normal-case, readable label for switches outside the Settings form (store /
   panel prefs / access control), whose labels are descriptive sentences. */
.wd-switch-text--plain { font-size: .9em; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--primary-text-color); }
.wd-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 40px; height: 22px; }
.wd-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.wd-switch-slider { position: absolute; inset: 0; border-radius: 22px; background: var(--switch-unchecked-track-color, rgba(120,120,120,.5)); transition: background .2s; }
.wd-switch-slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; border-radius: 50%; background: var(--switch-unchecked-button-color, #fafafa); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s; }
.wd-switch input:checked + .wd-switch-slider { background: var(--switch-checked-track-color, var(--primary-color, #03a9f4)); }
/* Force a light thumb: some themes set --switch-checked-button-color to the accent,
   which made the knob vanish into the (also-accent) track. A white thumb reads on
   any track colour. */
.wd-switch input:checked + .wd-switch-slider::before { transform: translateX(18px); background: #fff; }
.wd-switch input:focus-visible + .wd-switch-slider { outline: 2px solid var(--primary-color, #03a9f4); outline-offset: 2px; }
/* A11y: a shared keyboard focus ring for all interactive controls (many HA themes
   suppress the UA default outline). */
.wd-tab:focus-visible, .wd-btn:focus-visible, .wd-chip:focus-visible,
.wd-sec-btn:focus-visible, .wd-subtab:focus-visible, .wd-mini-tab:focus-visible,
.wd-devcard:focus-visible, [tabindex]:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary-color, #03a9f4); outline-offset: 2px; border-radius: var(--wd-radius-sm);
}
/* A11y: honor the user's reduced-motion preference — drop non-essential animation. */
@media (prefers-reduced-motion: reduce) {
  .wd-dot, .wd-devdot, .wd-rec-active, .wd-spin, .wd-toast { animation: none !important; }
  * { scroll-behavior: auto !important; }
}
/* Notifications > Automations: split "New" dropdown + pills. */
.wd-auto-dd summary { cursor: pointer; list-style: none; }
.wd-auto-dd summary::-webkit-details-marker { display: none; }
.wd-auto-dd summary::marker { content: ''; }
.wd-auto-pill { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; background: var(--secondary-background-color); border: 1px solid var(--divider-color); border-radius: 16px; padding: 3px 4px 3px 12px; }
.wd-auto-pill-link { text-decoration: none; color: var(--primary-text-color); font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-auto-pill-link:hover { text-decoration: underline; }
.wd-auto-pill-x { flex: 0 0 auto; border: none; background: transparent; color: var(--secondary-text-color); cursor: pointer; font-size: 1.15em; line-height: 1; padding: 0 5px; border-radius: 50%; }
.wd-auto-pill-x:hover { background: var(--error-color, #f44336); color: var(--wd-white); }
.wd-field-hint { font-size: .78em; color: var(--secondary-text-color); margin-top: 4px; }
/* Derived-value note (#445): informational, never an error - no red, no fix button. */
.wd-setting-note { font-size: .78em; color: var(--secondary-text-color); margin-top: 4px;
  padding: 5px 9px; border-radius: var(--wd-radius-sm);
  background: var(--secondary-background-color); border-left: 3px solid var(--primary-color); }
/* Entity-pill multi-picker (compact chips + inline add input) */
.wd-pillbox { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 5px 6px; min-height: 34px;
  border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); background: var(--card-background-color); }
.wd-pillbox:focus-within { border-color: var(--primary-color); }
.wd-pillbox .wd-pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 9px;
  font-size: .82em; line-height: 1.4; border-radius: var(--wd-radius-lg); background: var(--primary-color); color: var(--wd-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The label shrinks and ellipsizes; the remove button never does (#467: a long
   notify service pushed it out of the clipped pill). */
.wd-pill-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-pill-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.25); color: var(--wd-white); font-size: 13px; line-height: 1;
  cursor: pointer; flex: none; }
.wd-pill-x:hover { background: rgba(255,255,255,.45); }
.wd-pill-add { flex: 1; min-width: 90px; border: 0 !important; background: transparent !important; padding: 3px 4px !important;
  font-size: .88em; color: var(--primary-text-color); outline: none; }
.wd-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 20px; }
/* Cycle timer list */
.wd-timerlist { display: flex; flex-direction: column; gap: 8px; }
.wd-timer-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); background: var(--card-background-color); }
.wd-timer-top { display: flex; align-items: center; gap: 8px; }
.wd-timer-top input[type="number"] { width: 70px; flex: 0 0 auto; }
.wd-timer-top textarea { flex: 1 1 auto; min-width: 0; box-sizing: border-box; resize: vertical; min-height: 32px; height: 34px; }
.wd-timer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wd-timer-footer .wd-switch-lbl { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wd-timer-add { align-self: flex-start; margin-top: 4px; }
/* Roomier Settings layout (scoped so modals keep their compact spacing) */
#wd-settings-form .wd-form-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px 28px; align-items: start; }
#wd-settings-form .wd-field { margin-bottom: 0; background: var(--secondary-background-color); border-radius: 10px; padding: 12px 14px; }
#wd-settings-form .wd-field label { color: var(--primary-text-color); }
#wd-settings-form .wd-field input[type=text], #wd-settings-form .wd-field input[type=number], #wd-settings-form .wd-field select, #wd-settings-form .wd-field textarea { background: var(--card-background-color); padding: 9px 11px; }
#wd-settings-form .wd-subhead { margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--divider-color); }
.wd-sec-intro { font-size: .85em; color: var(--secondary-text-color); margin: 0 0 16px; line-height: 1.5; }
.wd-label-row { display: flex; align-items: center; }
.wd-tip {
  display: inline-flex; width: 15px; height: 15px; border-radius: 50%;
  align-items: center; justify-content: center; font-size: 10px; font-style: italic;
  background: var(--secondary-background-color); color: var(--secondary-text-color);
  cursor: help; margin-left: 6px; position: relative; border: 1px solid var(--divider-color);
  font-weight: 700; text-transform: none; letter-spacing: normal;
}
.wd-tip-pop {
  display: none; position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
  width: 264px; background: var(--card-background-color); color: var(--primary-text-color);
  border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); padding: 10px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35); z-index: 60;
  text-align: left; font-weight: 400; text-transform: none; letter-spacing: normal;
}
.wd-tip:hover .wd-tip-pop, .wd-tip:focus .wd-tip-pop { display: block; }
.wd-tip:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.wd-tip-txt { font-size: 12px; line-height: 1.5; display: block; }
.wd-dg { display: block; width: 100%; height: auto; margin-bottom: 8px; background: var(--secondary-background-color); border-radius: 6px; }
.wd-dg .ln { fill: none; stroke: var(--primary-color); stroke-width: 2.5; }
.wd-dg .ln2 { fill: none; stroke: var(--secondary-text-color); stroke-width: 1.5; opacity: .7; }
.wd-dg .ok { fill: none; stroke: var(--success-color, #4caf50); stroke-width: 2; }
.wd-dg .bad { fill: none; stroke: var(--error-color, #f44336); stroke-width: 2; }
.wd-dg .dash { stroke-dasharray: 4 3; }
.wd-dg .fz { fill: var(--primary-color); opacity: .18; }
.wd-dg .fw { fill: var(--warning-color, #ff9800); opacity: .2; }
.wd-dg .fb { fill: var(--error-color, #f44336); opacity: .14; }
.wd-dg text { fill: var(--secondary-text-color); font-size: 9px; }
.wd-dg .ax { stroke: var(--divider-color); stroke-width: 1; }
.wd-sug {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 6px 10px; border-radius: var(--wd-radius-md); font-size: .82em;
  background: rgba(255,152,0,.10); border: 1px solid rgba(255,152,0,.40);
  box-sizing: border-box; flex-wrap: wrap;
}
.wd-sug.wd-sug-split { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.wd-sug-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; }
.wd-sug-opt:not(:last-child) { border-bottom: 1px solid rgba(255,152,0,.28); }
.wd-sug-chip {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: .75em; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 10px; white-space: nowrap;
}
.wd-sug-chip-obs { background: rgba(255,152,0,.22); }
.wd-sug-val { font-weight: 700; flex-shrink: 0; }
.wd-sug-impact-line { flex-basis: 100%; font-size: .86em; opacity: .70; font-style: italic; margin-top: 2px; }
.wd-confirm-list { margin: 0 0 12px; padding-left: 18px; max-height: 50vh; overflow-y: auto; }
.wd-confirm-list li { margin: 4px 0; }
.wd-sug-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wd-sug-sep { display: none; }
.wd-sug-impact { display: none; }
.wd-sug-use { border: none; background: var(--warning-color, #ff9800); color: var(--wd-white); border-radius: var(--wd-radius-sm); padding: 2px 8px; font-size: .92em; cursor: pointer; flex-shrink: 0; }
.wd-sug-lock { border: none; background: transparent; color: var(--secondary-text-color); border-radius: var(--wd-radius-sm); padding: 2px 6px; font-size: .92em; cursor: pointer; flex-shrink: 0; opacity: .65; }
.wd-sug-lock:hover { opacity: 1; background: rgba(255,152,0,.15); }
.wd-conflict-err { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.wd-conflict-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8em; color: var(--error-color, #b71c1c); padding: 5px 9px; border-left: 3px solid var(--error-color, #b71c1c); background: rgba(183,28,28,.07); border-radius: 0 5px 5px 0; }
.wd-conflict-fix { border: 1px solid var(--error-color, #b71c1c); background: none; color: var(--error-color, #b71c1c); border-radius: var(--wd-radius-sm); padding: 1px 7px; font-size: .92em; cursor: pointer; white-space: nowrap; flex: none; }
.wd-conflict-fix:hover { background: var(--error-color, #b71c1c); color: var(--wd-white); }
.wd-conflict-sug-note { font-style: italic; opacity: 0.85; flex: none; }
#wd-settings-form .wd-field.wd-has-conflict { outline: 2px solid var(--error-color, #b71c1c); outline-offset: -1px; }
.wd-rev-sub { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font-size: .85em; font-weight: 600; color: var(--primary-text-color); }
.wd-rev-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wd-rev-tag { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--wd-radius-md); background: var(--secondary-background-color); border: 1px solid var(--divider-color); font-size: .85em; cursor: pointer; }
.wd-rev-tag input { margin: 0; }
.wd-rev-notes { width: 100%; box-sizing: border-box; background: var(--card-background-color); color: var(--primary-text-color); border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); padding: 9px 11px; font: inherit; resize: vertical; }
.wd-sug-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 10px; margin-bottom: 16px;
  background: rgba(255,152,0,.12); border: 1px solid rgba(255,152,0,.4);
}
.wd-subhead { font-size: .76em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-color); margin: 8px 0 10px; grid-column: 1 / -1; }
.wd-section-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.wd-sec-btn {
  padding: 5px 14px; border-radius: 14px; border: 1px solid var(--divider-color);
  background: transparent; color: var(--secondary-text-color); font-size: .8em; cursor: pointer; transition: background .15s;
}
.wd-sec-btn.active { background: var(--primary-color); color: var(--wd-white); border-color: var(--primary-color); }
.wd-level-toggle { display: inline-flex; gap: 4px; }
.wd-sec-btn { position: relative; }
/* Basic/Advanced slide toggle */
.wd-mode-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .82em; user-select: none; white-space: nowrap; }
.wd-mode-switch-label { color: var(--secondary-text-color); transition: color .15s; }
.wd-mode-switch-label.active { color: var(--primary-color); font-weight: 600; }
.wd-toggle-track { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.wd-toggle-track input { opacity: 0; width: 0; height: 0; position: absolute; }
.wd-toggle-knob { position: absolute; inset: 0; border-radius: 20px; background: var(--divider-color); transition: background .2s; }
.wd-toggle-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.wd-toggle-track input:checked + .wd-toggle-knob { background: var(--primary-color); }
.wd-toggle-track input:checked + .wd-toggle-knob::after { transform: translateX(16px); }
.wd-sec-sug-dot { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--warning-color, #ff9800); display: inline-block; pointer-events: none; }
.wd-sec-conf-dot { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--error-color, #b71c1c); display: inline-block; pointer-events: none; }
.wd-subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--divider-color); margin-bottom: 18px; flex-wrap: wrap; }
.wd-subtab { padding: 8px 18px; border: none; background: transparent; color: var(--secondary-text-color); font-size: .8em; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s; }
.wd-subtab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.wd-profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.wd-profile-card {
  background: var(--card-background-color); border-radius: 10px; padding: 16px;
  border: 1px solid var(--divider-color, rgba(0,0,0,.08)); cursor: pointer; transition: border-color .15s, transform .1s;
}
.wd-profile-card:hover { border-color: var(--primary-color); transform: translateY(-1px); }
/* #444: these are the only cards rendered as a button element, and resetting
   font without color left them on the UA buttontext system color - which follows
   the BROWSER/OS color scheme, not the HA theme. On a light HA theme served to a
   dark-mode browser (Catppuccin Auto Latte Macchiato, the reporter's setup) the
   profile titles came out near-white on a light card. Everything beside them was
   readable because it names a theme token explicitly; only the inherited color
   was wrong. (No backticks in this block: it lives inside a JS template literal.) */
button.wd-attn-card, button.wd-profile-card { appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; }
button.wd-profile-card { display: block; }
.wd-prof-wrap { position: relative; }
.wd-profile-name { font-weight: 600; font-size: 1em; margin-bottom: 6px; }
.wd-profile-meta { font-size: .8em; color: var(--secondary-text-color); }
/* Profile-card header: name on the left, mini power-signature sparkline on the
   right, both on one line and vertically aligned regardless of badge count. */
.wd-profile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wd-profile-head .wd-profile-name { margin: 0; flex: 1 1 auto; min-width: 0; }
/* Status-pill row: wraps cleanly on its own line below the name, and every pill
   (health / trend / warm-up / imported) shares one uniform compact pill shape. */
.wd-profile-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.wd-profile-badges .wd-badge { margin: 0; padding: 2px 9px; border-radius: 999px; font-size: .72em; font-weight: 600; gap: 4px; }
/* D2: mini duration sparkline on profile cards */
.wd-prof-spark { width: 64px; height: 20px; display: block; flex-shrink: 0; }
/* Community Store */
.wd-store-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; font-size: .85em; }
.wd-crumb { background: none; border: none; color: var(--primary-color); cursor: pointer; padding: 2px 4px; font: inherit; }
.wd-crumb:hover { text-decoration: underline; }
.wd-crumb.active { color: var(--primary-text-color); font-weight: 700; cursor: default; }
.wd-crumb-sep { color: var(--secondary-text-color); }
.wd-store-search { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.wd-store-search input { flex: 1; min-width: 180px; padding: 8px 11px; border-radius: 6px; border: 1px solid var(--divider-color); background: var(--secondary-background-color); color: var(--primary-text-color); font-size: .9em; }
/* The box is a combobox (#416), so the flex child is the wrapper, not the input. */
.wd-store-search .wd-combo { flex: 1 1 auto; min-width: 180px; }
.wd-store-list { display: flex; flex-direction: column; gap: 8px; }
/* Browse rows (appliances / programs): tappable list rows with a hover affordance
   and a chevron, instead of flat cards. */
.wd-store-rows { display: flex; flex-direction: column; gap: 6px; }
.wd-store-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%; cursor: pointer; padding: 11px 14px; background: var(--secondary-background-color); border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); color: var(--primary-text-color); transition: border-color .12s ease, background .12s ease; }
.wd-store-row:hover { border-color: var(--primary-color); background: var(--card-background-color); }
.wd-store-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wd-store-row-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wd-store-row-sub { display: flex; align-items: center; gap: 10px; font-size: .8em; color: var(--secondary-text-color); }
.wd-store-chip { background: var(--accent-dim, rgba(0,180,216,.14)); color: var(--primary-color); border-radius: 999px; padding: 1px 8px; font-size: .92em; text-transform: capitalize; }
.wd-store-fav { color: var(--warning-color, #f0b429); }
.wd-store-row-arrow { color: var(--secondary-text-color); font-size: 1.3em; flex-shrink: 0; }
.wd-store-cycle-top { display: flex; align-items: center; gap: 12px; }
.wd-store-cycle-stats { flex: 1; min-width: 0; }
.wd-store-spark { width: 120px; height: 36px; flex-shrink: 0; display: block; background: var(--secondary-background-color); border-radius: 6px; }
.wd-store-conn { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wd-store-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wd-tag-pending { background: rgba(56,139,253,.18); color: var(--info-color, #58a6ff); }
.wd-tag-approved { background: rgba(63,185,80,.18); color: var(--success-color, #3fb950); }
.wd-store-picker-detail { margin-top: 6px; font-size: .85em; color: var(--secondary-text-color); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.wd-store-picker-actions { display: flex; align-items: center; gap: 8px; flex-basis: 100%; margin-top: 4px; flex-wrap: wrap; }
.wd-star-row { display: inline-flex; gap: 2px; }
.wd-star-btn { background: none; border: none; cursor: pointer; color: var(--warning-color, #f0b429); font-size: 1.1em; padding: 0 1px; line-height: 1; }
.wd-star-btn:hover { transform: scale(1.15); }
/* Share-device selection tree (profile -> its reference cycles). */
.wd-sd-tree { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow-y: auto; margin-bottom: 16px; }
/* #460: a group's overflow:hidden drops its automatic min-height to 0, so past the
   max-height above the groups shrank and clipped their own rows instead of the tree
   scrolling (a phone hits the cap at once). Rows keep their height; the tree scrolls. */
.wd-sd-tree > * { flex-shrink: 0; }
.wd-sd-group { border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); background: var(--secondary-background-color); overflow: hidden; }
.wd-sd-prof { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-weight: 600; }
.wd-sd-prof-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-sd-count { font-size: .8em; font-weight: 400; color: var(--secondary-text-color); }
.wd-sd-cycles { display: flex; flex-direction: column; border-top: 1px solid var(--divider-color); }
.wd-sd-cyc { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 28px; cursor: pointer; font-size: .9em; }
.wd-sd-cyc:hover, .wd-sd-prof:hover { background: var(--card-background-color); }
.wd-sd-cyc-meta { color: var(--secondary-text-color); }
.wd-sd-phase { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--divider-color); cursor: pointer; font-size: .85em; color: var(--secondary-text-color); }
.wd-sd-phase:hover { background: var(--card-background-color); }
.wd-sd-settings { display: flex; align-items: center; gap: 8px; padding: 10px 2px 2px; cursor: pointer; font-size: .9em; }
.wd-sd-consent { display: flex; align-items: flex-start; gap: 8px; padding: 10px 2px 2px; cursor: pointer; font-size: .9em; }
.wd-sd-group-nocyc { opacity: .65; }
.wd-sd-prof-disabled { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; font-weight: 600; flex-wrap: wrap; }
.wd-sd-nocyc-note { font-size: .8em; font-weight: 400; color: var(--secondary-text-color); }
.wd-share-guide { margin-bottom: 10px; border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); overflow: hidden; }
.wd-share-guide > summary { padding: 8px 12px; cursor: pointer; font-size: .85em; font-weight: 600; color: var(--secondary-text-color); list-style: none; }
.wd-share-guide > summary::-webkit-details-marker { display: none; }
.wd-share-guide > summary::before { content: '▶ '; font-size: .7em; }
.wd-share-guide[open] > summary::before { content: '▼ '; }
.wd-share-guide-list { margin: 0; padding: 4px 12px 10px 28px; font-size: .85em; color: var(--secondary-text-color); line-height: 1.5; }
.wd-share-guide-list li { margin-bottom: 4px; }
.wd-linkbtn { background: none; border: none; padding: 0; color: var(--primary-color); cursor: pointer; font: inherit; text-decoration: underline; }
.wd-gear-body { margin-top: 12px; }
.wd-empty { text-align: center; padding: 48px 24px; color: var(--secondary-text-color); }
.wd-empty .wd-icon { font-size: 3em; margin-bottom: 10px; }
.wd-stale { margin: 6px 0 0; padding: 6px 12px; border-radius: var(--wd-radius-md); background: var(--secondary-background-color); border: 1px solid var(--warning-color, #ffa600); color: var(--primary-text-color); font-size: .85em; }
.wd-error-state { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 10px; border-radius: var(--wd-radius-md); background: var(--secondary-background-color); border: 1px solid var(--divider-color); color: var(--error-color, #b71c1c); font-size: .9em; }
.wd-info { font-size: .9em; color: var(--secondary-text-color); line-height: 1.6; margin: 0; }
.wd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; display: flex; align-items: center; justify-content: center; }
.wd-modal { background: var(--card-background-color); border-radius: var(--wd-radius-lg); padding: 24px; max-width: 480px; width: calc(100% - 32px); max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.wd-modal-lg { max-width: 880px; }
.wd-modal h2 { margin: 0 0 16px; font-size: 1.1em; display: flex; align-items: center; gap: 10px; }
.wd-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.wd-canvas-wrap { position: relative; margin: 10px 0; background: var(--secondary-background-color); border-radius: var(--wd-radius-md); padding: 6px; }
/* touch-action: pan-y is load-bearing, not cosmetic. With "none" (the pre-0.5.6
   value) a one-finger swipe that started on a graph was swallowed, so every chart
   was a 160-240px band the user could not scroll past on a phone (issue #413).
   With pan-y the browser keeps the vertical swipe (page scrolls) while still
   handing us the horizontal drag AND both pointers of a two-finger pinch, which
   is what makes touch zoom possible at all. Mirrors what Home Assistant's own
   ha-chart-base does via moveOnMouseMove/preventDefaultMouseMove. */
.wd-canvas-wrap canvas { width: 100%; height: 240px; display: block; touch-action: pan-y; cursor: crosshair; }
/* Zoom reset affordance, mirroring HA's mdiRestart chart button: only rendered
   while the canvas actually has a zoom viewport. */
.wd-zoom-reset {
  position: absolute; top: 10px; right: 12px; z-index: 2; display: none;
  align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--divider-color);
  background: var(--card-background-color); color: var(--primary-text-color);
  cursor: pointer; font-size: 15px; line-height: 1; opacity: .92;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.wd-zoom-reset.wd-zoom-reset--on { display: inline-flex; }
.wd-zoom-reset:hover { opacity: 1; border-color: var(--primary-color); }
.wd-mode-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.wd-mini-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--divider-color); margin-bottom: 16px; flex-wrap: wrap; }
.wd-mini-tab { padding: 7px 16px; border: none; background: transparent; color: var(--secondary-text-color); font-size: .82em; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
.wd-mini-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.wd-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.wd-kv-item { background: var(--secondary-background-color); border-radius: var(--wd-radius-md); padding: 10px; text-align: center; }
.wd-kv-val { font-size: 1.25em; font-weight: 700; }
.wd-kv-lbl { font-size: .7em; color: var(--secondary-text-color); margin-top: 3px; }
.wd-seg-row, .wd-phase-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wd-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.wd-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; padding: 10px 20px; border-radius: var(--wd-radius-md); font-size: .9em; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,.25); animation: wd-toast-in .2s ease; }
@keyframes wd-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.wd-toast-success { background: var(--success-color, #4caf50); color: var(--wd-white); }
.wd-toast-error   { background: var(--error-color, #f44336); color: var(--wd-white); }
.wd-toast-info    { background: var(--info-color, #2196f3); color: var(--wd-white); }
/* D4: undo toast — action button + row layout */
.wd-toast { display: flex; align-items: center; gap: 14px; }
.wd-toast-action { background: rgba(255,255,255,.22); color: inherit; border: none; border-radius: 6px; padding: 5px 12px; font: inherit; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; font-size: .85em; }
.wd-toast-action:hover { background: rgba(255,255,255,.34); }
/* D7: "changed since last save" marker beside a settings field label */
.wd-chg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--info-color, #2196f3); margin-left: 6px; flex-shrink: 0; cursor: help; }
.wd-diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.wd-diag-stat { background: var(--secondary-background-color); border-radius: var(--wd-radius-md); padding: 12px; text-align: center; }
.wd-diag-val { font-size: 1.6em; font-weight: 700; }
.wd-diag-lbl { font-size: .72em; color: var(--secondary-text-color); margin-top: 4px; }
.wd-feedback-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider-color); }
.wd-feedback-item:last-child { border-bottom: none; }
.wd-feedback-body { flex: 1; }
.wd-feedback-profile { font-weight: 600; }
.wd-feedback-meta { font-size: .78em; color: var(--secondary-text-color); }
.wd-rec-status { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wd-rec-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.wd-rec-active { background: var(--error-color, #f44336); animation: wd-pulse 1s ease-in-out infinite; }
.wd-rec-ready  { background: var(--success-color, #4caf50); }
.wd-rec-idle   { background: var(--disabled-color, #bdbdbd); }
/* Graph hover tooltip (follows the cursor) */
.wd-gtip { position: fixed; z-index: 300; display: none; pointer-events: none; background: var(--card-background-color); color: var(--primary-text-color); border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md); padding: 7px 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 4px 16px rgba(0,0,0,.4); white-space: nowrap; }
.wd-gtip b { font-weight: 700; }
.wd-gtip--pinned { border-color: var(--primary-color); }
.wd-gtip-dismiss { display: block; margin-top: 4px; opacity: .55; font-size: 11px; }
/* Status chart legend + toggles */
.wd-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .8em; color: var(--secondary-text-color); }
.wd-leg-i { display: inline-flex; align-items: center; gap: 6px; }
.wd-leg-i input { margin: 0 2px 0 0; width: auto; }
.wd-leg-sw { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
/* Status program selector */
.wd-prog-ctl { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.wd-prog-ctl label { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--secondary-text-color); margin: 0; }
.wd-prog-ctl select { padding: 8px 11px; border-radius: 6px; border: 1px solid var(--divider-color); background: var(--secondary-background-color); color: var(--primary-text-color); min-width: 200px; font-size: .9em; }
.wd-prog-tag { font-size: .78em; padding: 3px 9px; border-radius: 10px; }
.wd-prog-tag.auto { background: rgba(76,175,80,.18); color: var(--success-color, #4caf50); }
.wd-prog-tag.manual { background: rgba(255,152,0,.2); color: var(--warning-color, #ff9800); }
/* Status-rich device selector */
.wd-devbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.wd-devcard { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: var(--wd-radius-lg); border: 1px solid var(--divider-color); background: var(--card-background-color); color: var(--primary-text-color); cursor: pointer; font-size: .9em; }
.wd-devcard.active { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
.wd-devadd { border-style: dashed; color: var(--secondary-text-color); }
.wd-devadd:hover { border-color: var(--primary-color); color: var(--primary-color); }
.wd-devdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wd-devdot.run { animation: wd-pulse 1.4s ease-in-out infinite; }
.wd-devname { font-weight: 600; }
.wd-devsub { font-size: .72em; color: var(--secondary-text-color); }
.wd-dbadge { font-size: .72em; padding: 1px 7px; border-radius: 10px; background: var(--secondary-background-color); }
.wd-dbadge.rec { background: var(--error-color, #f44336); color: var(--wd-white); }
.wd-dbadge.fb { background: rgba(33,150,243,.22); }
.wd-dbadge.conf { background: rgba(183,28,28,.18); color: var(--error-color, #b71c1c); }
/* Attention cards (status dashboard) */
.wd-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
.wd-attn-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 10px; background: var(--card-background-color); border: 1px solid var(--divider-color); cursor: pointer; transition: border-color .15s; }
.wd-attn-card:hover { border-color: var(--primary-color); }
.wd-attn-icon { font-size: 1.5em; line-height: 1; }
.wd-attn-body { flex: 1; min-width: 0; }
.wd-attn-title { font-weight: 600; }
.wd-attn-sub { font-size: .76em; color: var(--secondary-text-color); }
/* F1 first-run onboarding card (Status power-chart area) */
.wd-onboard { margin-top: 12px; padding: 16px; border-radius: 10px; border: 1px dashed var(--divider-color); background: var(--secondary-background-color); }
.wd-onboard .wd-card-title { margin-top: 0; }
.wd-onboard-skip { font-size: .8em; color: var(--secondary-text-color); text-decoration: underline; cursor: pointer; }
.wd-onboard-skip:hover { color: var(--primary-color); }
/* Setup card (replaces getting-started card, phases 0-3) and phase-4 chip */
.wd-setup-card { margin-top: 12px; padding: 16px; border-radius: 10px; border: 1px solid var(--primary-color, #03a9f4); background: color-mix(in srgb, var(--primary-color, #03a9f4) 8%, var(--card-background-color, var(--ha-card-background))); }
.wd-setup-card .wd-card-title { margin-top: 0; }
.wd-setup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: .82em; font-weight: 600; cursor: pointer; border: 1px solid var(--divider-color); background: var(--secondary-background-color); margin-top: 12px; }
.wd-setup-chip--healthy { border-color: var(--success-color, #4caf50); background: color-mix(in srgb, var(--success-color, #4caf50) 10%, var(--card-background-color, transparent)); }
.wd-setup-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wd-setup-dot--green { background: var(--success-color, #4caf50); }
.wd-link { background: none; border: none; padding: 0; color: var(--primary-color); cursor: pointer; font: inherit; text-decoration: underline; display: inline; }
.wd-link:hover { opacity: .8; }
/* Logs page */
.wd-logbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.wd-logs { font-family: monospace; font-size: .76em; background: var(--secondary-background-color); border-radius: var(--wd-radius-md); padding: 10px; height: 56vh; min-height: 140px; overflow: auto; resize: vertical; }
#wd-log-lines-page { height: auto; min-height: 200px; resize: none; }
/* Grouped stat blocks (profile overview) */
.wd-sg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.wd-sg { background: var(--secondary-background-color); border-radius: 10px; padding: 14px; }
.wd-sg-h { font-size: .7em; text-transform: uppercase; letter-spacing: .08em; color: var(--secondary-text-color); margin-bottom: 6px; }
.wd-sg-main { font-size: 1.55em; font-weight: 700; line-height: 1.1; }
.wd-sg-main span { font-size: .5em; font-weight: 400; color: var(--secondary-text-color); margin-left: 4px; }
.wd-sg-sub { font-size: .78em; color: var(--secondary-text-color); margin-top: 5px; line-height: 1.5; }
.wd-logline { padding: 2px 0; border-bottom: 1px solid var(--divider-color); white-space: pre-wrap; word-break: break-word; }
.wd-logline:last-child { border-bottom: none; }
/* Entity combobox */
.wd-combo { position: relative; width: 100%; }
.wd-combo-drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--card-background-color,#fff); border: 1px solid var(--divider-color);
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
  max-height: 220px; overflow-y: auto; margin-top: 3px; }
/* Flipped above the input when there is more room there (_positionComboDrop). */
.wd-combo-drop.wd-drop-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 3px; }
.wd-combo-item { padding: 7px 12px; cursor: pointer; font-size: .86em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.wd-combo-item:hover, .wd-combo-item.kbd { background: var(--secondary-background-color); }
.wd-combo-row { display: flex; gap: 6px; align-items: center; }
.wd-combo-row .wd-combo { flex: 1 1 auto; }
/* Colour field: swatch + hex text box + clear (#454) */
.wd-colorfield { display: flex; gap: 6px; align-items: center; width: 100%; }
.wd-colorfield input[type="text"] { flex: 1 1 auto; min-width: 0; }
.wd-color-sw { flex: 0 0 auto; width: 34px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--divider-color); border-radius: var(--wd-radius-md);
  background: var(--secondary-background-color); }
.wd-color-sw::-webkit-color-swatch-wrapper { padding: 0; }
.wd-color-sw::-webkit-color-swatch { border: none; border-radius: 4px; }
.wd-color-sw::-moz-color-swatch { border: none; border-radius: 4px; }
.wd-color-clear { flex: 0 0 auto; width: 30px; height: 34px; border-radius: var(--wd-radius-md);
  border: 1px solid var(--divider-color); background: var(--secondary-background-color);
  color: var(--secondary-text-color); font-size: 1.1em; line-height: 1; cursor: pointer; }
.wd-color-clear:hover { color: var(--primary-text-color); }
.wd-addbtn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--wd-radius-md); border: 1px solid var(--divider-color); background: var(--secondary-background-color); color: var(--primary-text-color); font-size: 1.25em; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wd-addbtn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.wd-loglvl { font-weight: 700; margin-right: 6px; }
.wd-logcomp { display: inline-block; font-size: .72em; color: var(--secondary-text-color); background: var(--secondary-background-color); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.wd-logdev { display: inline-block; font-size: .72em; color: var(--primary-color); margin-right: 6px; }
.wd-logts { color: var(--secondary-text-color); margin-right: 6px; }
.wd-lvl-ERROR, .wd-lvl-CRITICAL { color: var(--error-color, #f44336); }
.wd-lvl-WARNING { color: var(--warning-color, #ff9800); }
.wd-lvl-INFO { color: var(--info-color, #2196f3); }
.wd-lvl-DEBUG { color: var(--secondary-text-color); }
/* Compact cycle list */
.wd-clist { display: flex; flex-direction: column; }
.wd-crow { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--divider-color); cursor: pointer; }
.wd-crow:hover { background: var(--secondary-background-color); }
.wd-crow:last-child { border-bottom: none; }
.wd-cmain { flex: 1; min-width: 0; overflow: hidden; }
.wd-cprog { font-weight: 600; }
.wd-cdate { font-size: .74em; color: var(--secondary-text-color); }
.wd-cmeta { text-align: right; font-size: .76em; color: var(--secondary-text-color); white-space: nowrap; }
/* Responsive / touch (portrait, phones, side panel) */
@media (max-width: 680px) {
  .wd-body { padding: 12px 10px 64px; }
  .wd-nav { margin: -12px -10px 12px; padding: 12px 10px 0; }
  .wd-card { padding: 14px; margin-bottom: 12px; }
  .wd-form-grid { grid-template-columns: 1fr; }
  .wd-stats { grid-template-columns: repeat(2, 1fr); }
  .wd-kv { grid-template-columns: repeat(2, 1fr); }
  .wd-tab { padding: 9px 13px; }
  .wd-modal { padding: 16px; width: calc(100% - 18px); }
  .wd-modal-lg { max-width: 100%; }
  .wd-sd-prof-name { white-space: normal; overflow-wrap: anywhere; }  /* #460: wrap, never ellipsise a choice */
  .wd-canvas-wrap canvas { height: 200px; }
  .wd-zoom-reset { width: 36px; height: 36px; top: 8px; right: 8px; font-size: 17px; }
  .wd-gtip { white-space: normal; max-width: calc(100vw - 24px); }
  .wd-header { padding: 12px 14px; }
  .wd-btn { padding: 9px 15px; }  /* larger touch targets */
  .wd-tip-pop { width: 210px; }
  .wd-pg-lane-lbl { flex: 0 1 120px; max-width: 120px; }
  #wd-settings-form .wd-form-grid { grid-template-columns: 1fr; gap: 12px 0; }
}
/* Log drawer */
/* The render target between :host and .wd-shell (created in _boot). It must be a
   full-height flex column of its own: an unstyled wrapper is a block box sized by its
   content, so .wd-shell's flex:1 had no flex container to resolve against and the whole
   chain down to .wd-main fell back to content height. .wd-main then never overflowed
   (scrollHeight == clientHeight, so no scrollbar) and instead spilled out of the
   clipped host, stranding the bottom of every long tab where no scrolling reaches it. */
.wd-root { height: 100%; display: flex; flex-direction: column; }
/* min-height:0 so the row below can actually shrink and hand its overflow to
   .wd-main, instead of the shell growing to fit and pushing past the host. */
.wd-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wd-content-row { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.wd-main { flex: 1; overflow-y: auto; min-width: 0; }
.wd-log-drawer {
  position: relative; width: 0; overflow: hidden;
  transition: width .28s cubic-bezier(.4,0,.2,1);
  border-left: 1px solid var(--divider-color);
  display: flex; flex-direction: column;
  background: var(--primary-background-color);
}
.wd-log-drawer.open { width: 380px; }
.wd-log-resize {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 2;
  transition: background .15s;
}
.wd-log-resize:hover, .wd-log-resize.dragging { background: var(--primary-color, #03a9f4); opacity: .35; }
.wd-log-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--divider-color);
  font-weight: 600; font-size: .9em; flex-shrink: 0; white-space: nowrap;
}
.wd-log-drawer-body { flex: 1; overflow-y: auto; padding: 10px 14px; min-width: 0; }
.wd-log-close-btn {
  background: none; border: none; cursor: pointer; color: inherit; opacity: .65;
  padding: 3px 6px; border-radius: var(--wd-radius-sm); font-size: 1.1em; line-height: 1;
}
.wd-log-close-btn:hover { opacity: 1; background: var(--secondary-background-color); }
.wd-gear-btn.log-active { background: rgba(255,255,255,.22); }
@media (max-width: 680px) {
  .wd-log-drawer.open { width: 100vw !important; position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; border-left: none; }
  .wd-log-resize { display: none; }
}
.wd-pg-delta-up { color: var(--success-color, #4caf50); font-weight: 700; }
.wd-pg-delta-down { color: var(--error-color, #f44336); font-weight: 700; }
.wd-pg-delta-flat { color: var(--secondary-text-color); }
/* F3: Unified Playground */
.wd-pg-canvas-wrap { position: relative; width: 100%; }
/* Same pan-y contract as .wd-canvas-wrap canvas above: page keeps the vertical
   swipe, we keep horizontal drags and pinch. This canvas previously had no
   touch-action at all (default auto), so on touch the browser cancelled every
   gesture and none of the pan / threshold-drag / hover features worked. */
#wd-pg-canvas { display: block; width: 100%; height: 330px; cursor: crosshair; touch-action: pan-y; border-radius: 6px; background: var(--secondary-background-color); margin: 10px 0 0; }
.wd-pg-strip { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: .88em; font-variant-numeric: tabular-nums; flex-wrap: wrap; border-bottom: 1px solid var(--divider-color, rgba(127,127,127,.2)); margin-bottom: 12px; }
.wd-pg-strip-state { padding: 2px 10px; border-radius: 20px; font-weight: 700; font-size: .83em; white-space: nowrap; }
.wd-pg-strip-pbar { display: inline-flex; align-items: center; gap: 5px; }
.wd-pg-strip-track { width: 60px; height: 6px; background: var(--secondary-background-color); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; }
.wd-pg-strip-fill { height: 100%; background: var(--primary-color); border-radius: 3px; transition: width .15s; }
.wd-pg-params { display: flex; flex-direction: column; gap: 2px; }
.wd-pg-param-row { display: flex; align-items: center; gap: 6px; }
.wd-pg-param-lbl { flex: 1; font-size: .83em; color: var(--secondary-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-pg-param-inp { width: 76px; flex: 0 0 76px; }
.wd-pg-param-drag { font-size: .75em; color: var(--primary-color); cursor: default; flex: 0 0 12px; }
.wd-pg-cand-row { display: flex; align-items: center; gap: 6px; font-size: .82em; margin: 3px 0; }
.wd-pg-cand-name { flex: 0 0 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-pg-cand-track { flex: 1; height: 7px; background: var(--secondary-background-color); border-radius: var(--wd-radius-sm); overflow: hidden; }
.wd-pg-cand-fill { height: 100%; border-radius: var(--wd-radius-sm); }
.wd-pg-cand-pct { flex: 0 0 34px; text-align: right; color: var(--secondary-text-color); }
/* Playground: settings control panel (live-settings source + named presets) */
.wd-pg-ctrl { border: 1px solid var(--divider-color, rgba(127,127,127,.25)); border-radius: var(--wd-radius-md, 10px); padding: 8px 10px; margin: 0 0 10px; background: var(--secondary-background-color); }
.wd-pg-ctrl .wd-btn { white-space: nowrap; }
.wd-pg-preset-sel { min-width: 150px; max-width: 220px; font-size: .82em; }
.wd-pg-preset-name { flex: 1 1 150px; min-width: 120px; max-width: 220px; font-size: .82em; }
/* Per-setting publish arrow. The empty slot keeps every row's value column aligned
   whether or not that row currently has a publishable change. */
.wd-pg-pub { width: 20px; height: 20px; flex: 0 0 20px; padding: 0; border: none; border-radius: 5px; cursor: pointer; background: var(--primary-color); color: var(--text-primary-color, #fff); font-size: .8em; line-height: 1; }
.wd-pg-pub:hover { filter: brightness(1.15); }
.wd-pg-pub-slot { width: 20px; flex: 0 0 20px; display: inline-block; }
/* Playground: unified workbench (graph+settings always on top) + "Across your
   cycles" drawer with History/Optimize sub-tabs. */
.wd-pg-drawer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider-color, rgba(127,127,127,.25)); }
.wd-pg-drawer-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.wd-pg-subtabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--secondary-background-color); }
.wd-pg-subtab { border: none; background: transparent; color: var(--secondary-text-color); font: inherit; font-size: .84em; font-weight: 600; padding: 5px 13px; border-radius: 8px; cursor: pointer; }
.wd-pg-subtab:hover { color: var(--primary-text-color); }
.wd-pg-subtab.active { background: var(--card-background-color, var(--primary-background-color)); color: var(--primary-color); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wd-pg-hrow { cursor: pointer; }
.wd-pg-hrow:hover td { background: var(--secondary-background-color); }
.wd-pg-hrow.selected td { background: color-mix(in srgb, var(--primary-color) 14%, transparent); box-shadow: inset 2px 0 0 var(--primary-color); }
.wd-pg-sim-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 4px; }
.wd-pg-sim-main, .wd-pg-sim-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wd-pg-simbar { height: 6px; border-radius: 3px; background: var(--secondary-background-color); overflow: hidden; margin: 6px 0 0; }
.wd-pg-simbar-fill { height: 100%; width: 40%; border-radius: 3px; background: var(--primary-color); animation: wd-pg-indeterminate 1.1s ease-in-out infinite; }
@keyframes wd-pg-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.wd-pg-batchbar-fill { height: 100%; width: 0%; border-radius: 3px; background: var(--primary-color); transition: width .18s ease; }
/* Header activity pills (background-task registry) */
.wd-task-pills { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 0 12px; }
.wd-task-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 12px; background: rgba(255,255,255,.16); color: var(--app-header-text-color, #fff); font-size: .78em; line-height: 1; }
.wd-task-pill-lbl { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-task-pill-pct { font-variant-numeric: tabular-nums; opacity: .95; }
.wd-task-pill-eta { opacity: .75; }
.wd-task-pill-x { border: none; background: rgba(0,0,0,.18); color: inherit; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; font-size: .9em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.wd-task-pill-x:hover { background: rgba(0,0,0,.32); }
.wd-task-pill--cancelling { background: rgba(255,160,0,.28); }
.wd-task-pill-cancelling { opacity: .9; font-style: italic; }
.wd-task-pill-x--cancelling { opacity: .4; cursor: default; pointer-events: none; }
.wd-task-spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wd-spin-kf .8s linear infinite; opacity: .9; }
@keyframes wd-spin-kf { to { transform: rotate(360deg); } }
.wd-pg-batchrow { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.wd-pg-batchrow .wd-pg-simbar { flex: 1; margin: 0; }
#wd-pg-canvas.wd-pg-panning { cursor: grabbing; }
.wd-pg-alerts-card { background: var(--secondary-background-color); border-radius: 10px; padding: 12px; }
.wd-pg-outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wd-pg-outcome-item { text-align: center; background: var(--card-background-color, var(--primary-background-color)); border-radius: 8px; padding: 8px 4px; }
.wd-pg-outcome-val { font-size: 1.05em; font-weight: 700; }
.wd-pg-outcome-lbl { font-size: .68em; color: var(--secondary-text-color); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.wd-pg-alert { border-left: 3px solid var(--info-color, #2196f3); padding: 4px 0 4px 10px; }
/* History table */
.wd-pg-htable { width: 100%; border-collapse: collapse; font-size: .84em; }
.wd-pg-htable th { text-align: left; font-weight: 600; color: var(--secondary-text-color); padding: 6px 8px; border-bottom: 1px solid var(--divider-color, rgba(127,127,127,.2)); font-size: .82em; }
.wd-pg-htable td { padding: 6px 8px; border-bottom: 1px solid var(--divider-color, rgba(127,127,127,.12)); }
.wd-pg-htable tr[data-action] { cursor: pointer; }
.wd-pg-htable tr[data-action]:hover { background: var(--secondary-background-color); }
.wd-pg-diffbadge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .82em; font-weight: 600; margin: 0 6px 6px 0; }
/* Sweep heatmap */
@media (max-width: 720px) {
  .wd-pg-sim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wd-pg-strip { gap: 7px; font-size: .82em; }
}
`;

// ─── Helpers ─────────────────────────────────────────────────────────────────

// The _fmt* helpers below feed HTML templates directly, often with values that
// came from outside (a community-store document is untyped: audit STORE-19), so
// they never echo their input: anything that is not a finite number renders '-'.
function _fmtDuration(s) {
  const n = Number(s);
  if (s == null || !isFinite(n) || n < 0) return '-';
  s = n;
  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = Math.floor(s % 60);
  if (h > 0) return `${h}h ${m}m`;
  if (m > 0) return `${m}m ${sec}s`;
  return `${sec}s`;
}
function _fmtPower(w) {
  const n = Number(w);
  if (w == null || !isFinite(n)) return '-';
  return n >= 100 ? `${_fmtNum(Math.round(n), 0)} W` : `${_fmtNum(n, 1)} W`;
}
// Watt label for a chart axis / grid line. #453: a fixed Math.round() prints "0W"
// on every tick of a standby trace, so an appliance idling at 0.3 W got three
// identical zero labels next to a perfectly legible curve. The decimal count
// follows the distance between ticks rather than the value, so the labels always
// resolve one grid step (capped at 4 decimals to keep them inside the axis gutter).
function _fmtAxisW(v, step) {
  const s = Math.abs(step || v || 0);
  const dec = s > 0 ? Math.min(4, Math.max(0, Math.ceil(-Math.log10(s)) + 1)) : 0;
  return `${Number(v.toFixed(dec))}W`;
}
// Round grid step (1/2/2.5/5 x 10^n) covering `span` in about `divisions` lines.
// Scale free, so it gives 500 W steps on a 2 kW cycle and 0.1 W steps on a standby
// tail, and always lands on a value that reads as a round number.
function _niceStep(span, divisions) {
  const raw = Math.abs(span) / Math.max(1, divisions);
  if (!(raw > 0) || !isFinite(raw)) return 1;
  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
  const norm = raw / mag;
  return (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10) * mag;
}
function _fmtEnergy(kwh) {
  if (kwh == null || !isFinite(Number(kwh))) return '-';
  return `${_fmtNum(kwh, 2)} kWh`;
}
// Current cycle-date display mode ('relative' | 'absolute'), synced from the
// user's persisted "Cycle date display" preference by _render() on each paint.
let _datePref = 'relative';

// The HA user's display locale (audit UI-08), synced by _render() like _datePref
// so the module-level formatters follow the user's language and number format
// instead of the browser's. `undefined` means "browser default", which is what
// HA itself does for the "system" choices.
let _uiDateLocale;       // panel language (lang_override, else HA language)
let _uiNumLocale;        // HA number_format mapped to a locale, as HA's frontend does
let _uiNumGrouping = true;
let _uiHour12;           // HA time_format '12' / '24'; undefined = locale default
const _nfCache = new Map();
function _syncUiLocale(lang, locale) {
  const loc = locale || {};
  _uiDateLocale = lang || undefined;
  const nf = loc.number_format;
  _uiNumLocale = nf === 'comma_decimal' ? ['en-US', 'en']
    : nf === 'decimal_comma' ? ['de', 'es', 'it']
    : nf === 'space_comma' ? ['fr', 'sv', 'cs']
    : nf === 'quote_decimal' ? ['de-CH']
    : nf === 'system' ? undefined
    : (lang || undefined);
  _uiNumGrouping = nf !== 'none';
  _uiHour12 = loc.time_format === '12' ? true : loc.time_format === '24' ? false : undefined;
}
function _numFmt(opts) {
  const key = JSON.stringify([_uiNumLocale, _uiNumGrouping, opts]);
  let f = _nfCache.get(key);
  if (!f) {
    const o = Object.assign({ useGrouping: _uiNumGrouping }, opts);
    try { f = new Intl.NumberFormat(_uiNumLocale, o); } catch (_) { f = new Intl.NumberFormat(undefined, o); }
    _nfCache.set(key, f);
  }
  return f;
}
// Display-only number: `dec` fraction digits (fixed, like toFixed). Never use the
// result for a value that is sent back to the backend. A non-number renders '-',
// never the input itself: callers drop the result straight into innerHTML (STORE-19).
function _fmtNum(v, dec = 0) {
  const n = Number(v);
  if (!isFinite(n)) return '-';
  return _numFmt({ minimumFractionDigits: dec, maximumFractionDigits: dec }).format(n);
}
// A community-store counter (downloads, favourites, ratings) as a non-negative
// number. Store documents are untyped, so a missing, negative or non-numeric
// counter reads as 0 rather than reaching the page as-is (audit STORE-19).
function _storeCount(v) {
  const n = Number(v);
  return isFinite(n) && n > 0 ? Math.floor(n) : 0;
}
// Money in HA's configured currency, formatted for the user's locale ("€0.21",
// "0,21 €"). A currency that is not an ISO 4217 code keeps the old "0.21 XYZ".
function _fmtCost(v, cur) {
  const n = Number(v);
  if (v == null || !isFinite(n)) return '-';
  if (cur) {
    try { return _numFmt({ style: 'currency', currency: cur }).format(n); } catch (_) { /* not ISO 4217 */ }
  }
  return `${_fmtNum(n, 2)}${cur ? ' ' + cur : ''}`;
}
function _dateOpts(opts) {
  return _uiHour12 === undefined ? opts : Object.assign({ hour12: _uiHour12 }, opts);
}
function _fmtTimeOfDay(d) {
  const opts = _dateOpts({ hour: '2-digit', minute: '2-digit', second: '2-digit' });
  try { return d.toLocaleTimeString(_uiDateLocale, opts); } catch (_) { return d.toLocaleTimeString(undefined, opts); }
}
function _fmtDay(ts) {
  const d = new Date(ts);
  try { return d.toLocaleDateString(_uiDateLocale); } catch (_) { return d.toLocaleDateString(); }
}

// ─── History-import date picker helpers ──────────────────────────────────────
// The recorder read is bounded by a start DATE ("import since ..."), which is what a
// user actually knows, rather than a day count they have to work out. These produce
// LOCAL calendar days in the `yyyy-mm-dd` form <input type="date"> requires (toISOString
// would shift across the UTC boundary and offer "tomorrow" or skip today).
const _HIST_MAX_DAYS = 3700;  // mirrors HISTORY_IMPORT_RECORDER_MAX_DAYS (~10 years)
function _histDayStr(d) {
  const p = (n) => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
}
function _histShiftDays(n) {
  const d = new Date();
  d.setDate(d.getDate() - n);
  return _histDayStr(d);
}
function _histToday() { return _histDayStr(new Date()); }
function _histDefaultSince() { return _histShiftDays(10); }  // HA's default purge_keep_days
function _histMinSince() { return _histShiftDays(_HIST_MAX_DAYS - 1); }

// Locale-aware "3 hours ago" / "in 2 days" formatting. Intl handles localization,
// so this needs no translation strings; falls back to absolute if unsupported.
function _relTime(ms) {
  const diffSec = Math.round((ms - Date.now()) / 1000);  // < 0 = in the past
  let rtf;
  try { rtf = new Intl.RelativeTimeFormat(_uiDateLocale, { numeric: 'auto' }); }
  catch (_) { return _fmtAbsDate(ms); }
  const abs = Math.abs(diffSec);
  const units = [['year', 31536000], ['month', 2592000], ['week', 604800], ['day', 86400], ['hour', 3600], ['minute', 60]];
  for (const [name, span] of units) {
    if (abs >= span) return rtf.format(Math.round(diffSec / span), name);
  }
  return rtf.format(diffSec, 'second');
}
function _fmtAbsDate(ms) {
  const opts = _dateOpts({ month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
  try { return new Date(ms).toLocaleString(_uiDateLocale, opts); }
  catch (_) { return new Date(ms).toLocaleString(undefined, opts); }
}
// Normalize any timestamp (ISO string, unix seconds, unix millis, or a bare
// YYYY-MM-DD calendar date) to epoch millis, then format per the date-display
// preference. `mode` overrides the preference for a single call site.
function _fmtDate(ts, mode) {
  if (!ts) return '-';
  let ms;
  if (typeof ts === 'number') {
    // Numeric epoch: ms (Date.now(), ~1e12+) vs seconds (~1e9). Anything >= 1e12
    // is already-milliseconds — handles Date.now() values consistently.
    ms = ts >= 1e12 ? ts : ts * 1000;
  } else {
    const s = String(ts);
    const md = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
    // Bare calendar dates (maintenance YYYY-MM-DD) parse as LOCAL midnight, not
    // UTC, so they don't shift a day in negative-offset timezones.
    ms = md ? new Date(+md[1], +md[2] - 1, +md[3]).getTime() : new Date(s).getTime();
  }
  if (isNaN(ms)) return '-';
  return (mode || _datePref) === 'relative' ? _relTime(ms) : _fmtAbsDate(ms);
}
// Home Assistant rejects a WebSocket command with a plain {code, message} object,
// which every browser console renders as a collapsed "Object". That made a panel
// fetch failure unreportable: the user sees `fetch error: Object` and has to expand
// it by hand to learn anything. Render the identity inline instead.
//
// The common case worth recognising is `unknown_command` right after a Home Assistant
// restart: the sidebar panel loads and starts polling before the integration has
// finished setting up and registering its commands, so the first few polls fail and
// then it self-heals. Saying so beats leaving the user to guess.
function _wsErrText(err) {
  if (err == null) return 'unknown error';
  if (err instanceof Error) return `${err.name}: ${err.message}`;
  const code = err.code != null ? String(err.code) : '';
  const msg = err.message != null ? String(err.message) : '';
  if (!code && !msg) { try { return JSON.stringify(err); } catch (_) { return String(err); } }
  const hint = code === 'unknown_command'
    ? ' (the integration is probably still starting up; this should stop on its own)'
    : '';
  return `${code || 'error'}${msg ? ': ' + msg : ''}${hint}`;
}

function _esc(s) {
  return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}
// A _t() var that is markup on purpose (built from escaped parts). _t() escapes
// every other var, so wrapping one in _html() is the explicit, greppable opt-out
// (audit UI-21: a raw search term reached innerHTML through a translated string).
class _TrustedHtml {
  constructor(html) { this.html = String(html == null ? '' : html); }
  toString() { return this.html; }
}
function _html(s) { return new _TrustedHtml(s); }
// CLDR plural category ('one', 'few', 'other', ...) of `n` in `lang`; one cached
// Intl.PluralRules per language. An unknown tag degrades to English rules.
const _pluralRules = new Map();
function _pluralCat(lang, n) {
  let pr = _pluralRules.get(lang);
  if (pr === undefined) {
    try { pr = new Intl.PluralRules(lang || 'en'); } catch (_) { pr = null; }
    _pluralRules.set(lang, pr);
  }
  return pr ? pr.select(n) : (n === 1 ? 'one' : 'other');
}
// Allow only http(s) links. Community-supplied URLs (e.g. a device's manualUrl)
// must never render a `javascript:`/`data:` href, which _esc does not neutralise.
// Returns '' for anything that is not an absolute http(s) URL.
function _safeHttpUrl(u) {
  const s = String(u == null ? '' : u).trim();
  return /^https?:\/\//i.test(s) ? s : '';
}
// Apply an alpha channel to any CSS color and return a valid rgba() string.
// The base color may come from a theme's `--primary-color` (issues #314/#315),
// which `getPropertyValue` returns as the raw declared token: `#03a9f4` for hex
// themes but `rgb(238, 147, 0)` for many custom themes / HA's accent picker.
// The old `col + '55'` alpha-suffix concatenation produced `rgb(238, 147, 0)55`,
// an invalid color that made canvas `addColorStop`/`fillStyle` throw and froze
// the panel. This parses hex (#rgb/#rgba/#rrggbb/#rrggbbaa) and rgb()/rgba(),
// and never throws -- an unrecognised color falls back to itself so the draw
// still succeeds (worst case: no transparency) rather than aborting the render.
function _withAlpha(col, alpha) {
  const s = String(col == null ? '' : col).trim();
  let m = s.match(/^#([0-9a-fA-F]{3,8})$/);
  if (m) {
    let h = m[1];
    if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
    if (h.length === 6 || h.length === 8) {
      const r = parseInt(h.slice(0, 2), 16);
      const g = parseInt(h.slice(2, 4), 16);
      const b = parseInt(h.slice(4, 6), 16);
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
  }
  m = s.match(/^rgba?\(([^)]+)\)$/i);
  if (m) {
    const parts = m[1].split(',').map(p => p.trim());
    if (parts.length >= 3) return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${alpha})`;
  }
  return s;
}
function _num(v, def) { const n = parseFloat(v); return isNaN(n) ? def : n; }
// Visible, keyboard-focusable descendants of `root` (for modal focus trapping).
// A selector that finds "the same control" after a full re-render: its id, else the
// data-* attributes the panel uses to identify buttons, rows and inputs.
const _FOCUS_ATTRS = ['data-action', 'data-cid', 'data-idx', 'data-tab', 'data-sec', 'data-gtab',
  'data-ptab', 'data-hsub', 'data-proftab', 'data-opt', 'data-pgkey', 'data-gname', 'data-sugkey'];
function _focusKey(el) {
  if (!el || !el.getAttribute || el.tagName === 'BODY') return null;
  const esc = (v) => (window.CSS && CSS.escape) ? CSS.escape(v) : String(v).replace(/["\\]/g, '\\$&');
  if (el.id) return '#' + esc(el.id);
  const parts = _FOCUS_ATTRS.filter(a => el.hasAttribute(a)).map(a => `[${a}="${esc(el.getAttribute(a))}"]`);
  return parts.length ? el.tagName.toLowerCase() + parts.join('') : null;
}

function _focusableEls(root) {
  if (!root) return [];
  const sel = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
  return Array.from(root.querySelectorAll(sel)).filter(el => el.getClientRects().length > 0);
}
// D7: humanize a changelog value for display (null → em-dash-free placeholder).
function _chgVal(v) {
  if (v == null || v === '') return '(none)';
  if (v === true) return 'on';
  if (v === false) return 'off';
  if (Array.isArray(v)) return v.join(', ') || '(none)';
  return String(v);
}

// Sort an array by a getter function, direction +1=asc -1=desc.
function _sortBy(arr, getter, dir) {
  return arr.slice().sort((a, b) => {
    const av = getter(a), bv = getter(b);
    if (av == null && bv == null) return 0;
    if (av == null) return 1;
    if (bv == null) return -1;
    return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
  });
}
// Sortable <th> element: shows ▲/▼ on the active column, ↕ on others.
// Pass align='right' for numeric columns, tipText for a native title= tooltip (no icon needed).
function _th(label, col, active, dir, action, align, tipText) {
  const icon = active ? (dir === 1 ? ' ▲' : ' ▼') : ' <span style="opacity:.35">↕</span>';
  const alignStyle = align === 'right' ? 'text-align:right;' : '';
  const titleAttr = tipText ? ` title="${_esc(tipText)}"` : '';
  return `<th class="wd-th-sort" data-sortcol="${col}" data-sortact="${action}" style="cursor:pointer;user-select:none;${alignStyle}"${titleAttr}>${label}${icon}</th>`;
}

// mm:ss for a seconds value (graph hover readout).
function _fmtClock(s) {
  s = Math.max(0, Math.round(s));
  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
  if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
  return `${m}:${String(sec).padStart(2, '0')}`;
}

// Plain label for a detected cycle artifact type.
function _artifactLabel(type, t) {
  const entries = { pause: ['lbl.artifact_interruption', 'Interruption'], dip: ['lbl.artifact_low_power', 'Low power'], spike: ['lbl.artifact_high_power', 'High power'] };
  const [key, fb] = entries[type] || ['lbl.artifact_anomaly', 'Anomaly'];
  return t ? t(key, {}, fb) : fb;
}

// Slugify a sub-group label to a translation key fragment.
// "Door & Pause" → "door_pause", "Auto-Labeling" → "auto_labeling", etc.
function _slugSub(s) {
  return s.toLowerCase().replace(/[\s&/\-]+/g, '_').replace(/^_+|_+$/g, '').replace(/_+/g, '_');
}

// Normalise a device name for a ?device= deep link (#428): fold case and
// diacritics, then reduce every run of spaces/punctuation to one dash, so
// "Waschmaschine (Keller)" is also reachable as waschmaschine-keller. The class
// is \p{L}\p{N} rather than a-z0-9 so a Cyrillic or CJK name keeps its letters
// instead of slugging away to an empty string that would match anything.
function _deviceSlug(s) {
  let t = String(s == null ? '' : s).trim().toLowerCase();
  try { t = t.normalize('NFKD').replace(/[\u0300-\u036f]/g, ''); } catch (_) { /* keep as-is */ }
  return t.replace(/[^\p{L}\p{N}]+/gu, '-').replace(/^-+|-+$/g, '');
}

// Parse a comma-separated string into a sorted list of unique positive ints.
// Backs the `intlist` setting type (e.g. notify_milestones), which the backend
// stores as a list of ints but the panel edits as a comma-separated string.
function _parseIntList(s) {
  const seen = new Set();
  String(s == null ? '' : s).split(',').forEach(part => {
    const n = parseInt(part.trim(), 10);
    if (Number.isFinite(n) && n > 0) seen.add(n);
  });
  return Array.from(seen).sort((a, b) => a - b);
}

// Linear-interpolated y at offset x for a sorted [[x,y],...] series.
// Like _valueAt, but null where the series has no reading: before its first point,
// after its last, and inside a gap (a null-power point breaks the run). The cycle
// chart's series are read this way while recorder context is drawn around them
// (item 513), so the lead-in does not show the trace's first reading as "Power".
function _valueInRun(pts, x) {
  if (!pts || !pts.length) return null;
  for (let i = 0; i < pts.length; i++) {
    const b = pts[i];
    if (b[0] < x) continue;
    if (b[0] === x) return b[1] == null ? null : b[1];
    if (i === 0) return null;
    const a = pts[i - 1];
    if (a[1] == null || b[1] == null) return null;
    const span = (b[0] - a[0]) || 1;
    return a[1] + (b[1] - a[1]) * ((x - a[0]) / span);
  }
  return null;
}

function _valueAt(pts, x) {
  if (!pts || !pts.length) return null;
  if (x <= pts[0][0]) return pts[0][1];
  if (x >= pts[pts.length - 1][0]) return pts[pts.length - 1][1];
  for (let i = 1; i < pts.length; i++) {
    if (pts[i][0] >= x) {
      const a = pts[i - 1], b = pts[i];
      const span = (b[0] - a[0]) || 1;
      return a[1] + (b[1] - a[1]) * ((x - a[0]) / span);
    }
  }
  return pts[pts.length - 1][1];
}

// A full `#rrggbb` value, which is the only form `<input type="color">` accepts.
// Anything else the user types (a CSS name, a short #rgb) stays in the text box and
// simply leaves the swatch showing the placeholder colour.
const _COLOR_HEX_RE = /^#[0-9a-fA-F]{6}$/;
// The swatch value for an UNSET colour field. The swatch cannot be empty, so it
// falls back to the field's placeholder, which is what _field() renders initially.
const _COLOR_SWATCH_FALLBACK = '#03A9F4';
function _colorSwatchDefault(placeholder) {
  return _COLOR_HEX_RE.test(String(placeholder || '')) ? String(placeholder) : _COLOR_SWATCH_FALLBACK;
}

// Build one form field group. `f` is a schema field; opts are resolved by caller.
function _field(f, value, extra) {
  extra = extra || {};
  const key = f.key;
  const labelText = f.unit ? `${f.label} (${f.unit})` : f.label;
  const _u = f.unit ? ` ${f.unit}` : '';
  const tip = f.doc ? _tip(f.doc, f.diagram || _DIAGRAM_BY_KEY[key], extra.tText) : '';
  // D7: "changed" marker (a small dot with a tooltip) when this field has a
  // recorded change in the settings changelog.
  const chgDot = extra.changed ? `<span class="wd-chg-dot" title="${_esc(extra.changed)}" aria-label="${_esc(extra.changed)}"></span>` : '';

  if (f.type === 'checkbox') {
    const chk = value ? 'checked' : '';
    // Switch style. The tooltip sits inline at the end of the row (outside the
    // <label> so hovering/clicking it never toggles the switch), matching how
    // non-checkbox fields render their tip.
    return `<div class="wd-field wd-field-switch"><div class="wd-switch-row"><label class="wd-switch-lbl"><span class="wd-switch"><input type="checkbox" data-opt="${key}" ${chk}><span class="wd-switch-slider"></span></span><span class="wd-switch-text">${_esc(f.label)}</span></label>${chgDot}${tip}</div>${f.hint ? `<div class="wd-field-hint">${_esc(f.hint)}</div>` : ''}</div>`;
  }

  let input = '';
  const v = value == null ? '' : value;
  if (f.type === 'select' || f.type === 'devicetype' || f.type === 'device') {
    const opts = extra.opts || [];
    const optHtml = opts.map(([val, lbl]) =>
      `<option value="${_esc(val)}" ${String(v) === String(val) ? 'selected' : ''}>${_esc(lbl)}</option>`
    ).join('');
    input = `<select data-opt="${key}" data-ftype="${f.type}">${optHtml}</select>`;
  } else if (f.type === 'textarea') {
    input = `<textarea data-opt="${key}" data-ftype="textarea">${_esc(v)}</textarea>`;
  } else if (f.type === 'json') {
    // Structured value (list/object) edited as JSON text; round-trips on save.
    const jt = (v === '' || v == null) ? '' : (typeof v === 'string' ? v : JSON.stringify(v, null, 2));
    input = `<textarea data-opt="${key}" data-ftype="json" rows="3" placeholder='${_esc(extra.t('placeholder.json_buttons', {}, '[{"action":"ID","title":"Label"}]'))}'>${_esc(jt)}</textarea>`;
  } else if (f.type === 'checkboxlist') {
    // Several checkboxes writing ONE option as a list of the ticked values. The inner
    // boxes carry data-choice, never data-opt, so the collectors below see one field.
    // An empty stored value is not a valid "none" state - the backend treats an empty
    // evidence selection as all-three (a profile with no cycles could never match), so
    // render the field's default set rather than all-unchecked, which would tell the
    // user matching is starved while it is actually using every source.
    const chosen = (Array.isArray(value) && value.length)
      ? value.map(String)
      : (Array.isArray(f.def) ? f.def.map(String) : []);
    input = `<div data-opt="${key}" data-ftype="checkboxlist" class="wd-checkboxlist">` +
      (f.choices || []).map(([val, lbl]) =>
        `<label class="wd-switch-lbl" style="display:flex;align-items:center;gap:8px;margin:2px 0">` +
        `<span class="wd-switch"><input type="checkbox" data-choice="${_esc(val)}" ${chosen.includes(String(val)) ? 'checked' : ''}><span class="wd-switch-slider"></span></span>` +
        `<span class="wd-switch-text">${_esc(extra.t ? extra.t('lbl.evidence_' + val, {}, lbl) : lbl)}</span></label>`
      ).join('') + `</div>`;
  } else if (f.type === 'entitylist') {
    // Chip/pill multi-picker: existing values as removable pills + a combobox
    // add-input. Managed by DOM (no re-render) and collected on save.
    const vals = Array.isArray(value) ? value : (value ? [value] : []);
    const pills = vals.map(x => `<span class="wd-pill" data-val="${_esc(x)}" title="${_esc(x)}"><span class="wd-pill-txt">${_esc(x)}</span><button type="button" class="wd-pill-x" aria-label="${_esc(extra.t ? extra.t('btn.remove', {}, 'Remove') : 'Remove')}">×</button></span>`).join('');
    input = `<div class="wd-pillbox" data-opt="${key}" data-ftype="entitylist">${pills}` +
      `<div class="wd-combo wd-combo-pill">` +
      `<input type="text" class="wd-pill-add" autocomplete="off" spellcheck="false" placeholder="${_esc(extra.t('placeholder.' + (f.domain || 'add'), {}, f.placeholder || 'add…'))}">` +
      `<div class="wd-combo-drop" hidden></div>` +
      `</div></div>`;
  } else if (f.type === 'timerlist') {
    const timers = Array.isArray(v) ? v : [];
    const tMin = extra.t ? extra.t('lbl.timer_min', {}, 'min') : 'min';
    const tMsgPh = extra.t ? extra.t('lbl.timer_msg_placeholder', {}, 'Message (optional, {device}/{program}/{minutes})') : 'Message (optional, {device}/{program}/{minutes})';
    const tAutoPause = extra.t ? extra.t('lbl.timer_auto_pause', {}, 'Auto-pause') : 'Auto-pause';
    const tDel = extra.t ? extra.t('btn.remove_timer', {}, 'Delete') : 'Delete';
    const tAddTimer = extra.t ? extra.t('btn.add_timer', {}, '+ Add timer') : '+ Add timer';
    const mkRow = (t, idx) => {
      const mins = (t && t.offset_minutes) ? String(t.offset_minutes) : '';
      const msg = (t && t.message) ? _esc(t.message) : '';
      const paused = (t && t.auto_pause) ? ' checked' : '';
      return `<div class="wd-timer-row" data-tidx="${idx}">` +
        `<div class="wd-timer-top">` +
        `<input type="number" min="1" placeholder="${_esc(tMin)}" data-field="offset_minutes" value="${_esc(mins)}">` +
        `<textarea placeholder="${_esc(tMsgPh)}" data-field="message">${msg}</textarea>` +
        `</div>` +
        `<div class="wd-timer-footer">` +
        `<label class="wd-switch-lbl"><span class="wd-switch"><input type="checkbox" data-field="auto_pause"${paused}><span class="wd-switch-slider"></span></span><span class="wd-switch-text">${_esc(tAutoPause)}</span></label>` +
        `<button type="button" class="wd-btn wd-btn-sm wd-btn-danger wd-timer-remove">${_esc(tDel)}</button>` +
        `</div>` +
        `</div>`;
    };
    const rows = timers.map((t, i) => mkRow(t, i)).join('');
    input = `<div class="wd-timerlist" data-opt="${key}" data-ftype="timerlist">${rows}` +
      `<button type="button" class="wd-btn wd-btn-sm wd-btn-secondary wd-timer-add">${_esc(tAddTimer)}</button></div>`;
  } else if (f.type === 'color') {
    // A native <input type="color"> cannot express "unset" - it always reports a
    // colour - so the text box stays the stored value and the swatch only writes
    // into it. Clearing the text box is how the user goes back to the platform
    // default. Only the text box carries data-opt, so the swatch is never collected.
    const ph = f.placeholder ? ` placeholder="${_esc(f.placeholder)}"` : '';
    const swatch = _COLOR_HEX_RE.test(String(v)) ? String(v) : _colorSwatchDefault(f.placeholder);
    const clearLbl = extra.t ? extra.t('btn.clear', {}, 'Clear') : 'Clear';
    input = `<div class="wd-colorfield">` +
      `<input type="color" class="wd-color-sw" value="${_esc(swatch)}" aria-label="${_esc(f.label)}" tabindex="-1">` +
      `<input type="text" data-opt="${key}" data-ftype="color" value="${_esc(v)}" autocomplete="off" spellcheck="false"${ph}>` +
      `<button type="button" class="wd-color-clear" aria-label="${_esc(clearLbl)}" title="${_esc(clearLbl)}">×</button>` +
      `</div>`;
  } else if (f.type === 'entity') {
    const ph = f.placeholder ? ` placeholder="${_esc(f.placeholder)}"` : '';
    input = `<div class="wd-combo">` +
      `<input type="text" class="wd-combo-inp" data-opt="${key}" data-ftype="entity" value="${_esc(v)}" autocomplete="off" spellcheck="false"${ph}>` +
      `<div class="wd-combo-drop" hidden></div>` +
      `</div>`;
  } else if (f.type === 'list') {
    const joined = Array.isArray(v) ? v.join(', ') : _esc(v);
    input = `<input type="text" data-opt="${key}" data-ftype="list" value="${_esc(joined)}" placeholder="${_esc(extra.t('placeholder.notify_services_list', {}, 'notify.mobile_app_phone, ...'))}">` ;
  } else if (f.type === 'intlist') {
    // Comma-separated ints edited as text; parsed to a sorted unique int list on save.
    const joined = Array.isArray(v) ? v.join(', ') : String(v == null ? '' : v);
    const ph = f.placeholder ? ` placeholder="${_esc(f.placeholder)}"` : '';
    input = `<input type="text" data-opt="${key}" data-ftype="intlist" value="${_esc(joined)}"${ph}>`;
  } else {
    const t = f.type === 'number' ? 'number' : 'text';
    const dl = extra.datalistId ? ` list="${extra.datalistId}"` : '';
    const stepAttr = f.step != null ? ` step="${f.step}"` : '';
    const minAttr = f.min != null ? ` min="${f.min}"` : '';
    const maxAttr = f.max != null ? ` max="${f.max}"` : '';
    const ph = f.placeholder ? ` placeholder="${_esc(f.placeholder)}"` : '';
    input = `<input type="${t}" data-opt="${key}" data-ftype="${f.type}" value="${_esc(v)}"${stepAttr}${minAttr}${maxAttr}${dl}${ph}>${extra.datalist || ''}`;
  }

  // Suggestion pill: dropped when it already equals the current value. The
  // one-line impact says what the change does to the appliance's behaviour.
  const sug = extra.suggestion;
  const classicVal = (sug && sug.suggested != null && !_sugSame(sug.suggested, value)) ? sug.suggested : null;
  const t = extra.t;
  let sugHtml = '';
  if (classicVal != null) {
    // Resolve localized reason text (reason_key + reason_params) with the English
    // reason as fallback. _tip() escapes, so interpolated values are safe.
    // Plain text (tText): _tip() escapes it, so _t()'s HTML escaping would double up.
    const tt = extra.tText || t;
    const sugReason = sug.reason_key ? tt(sug.reason_key, sug.reason_params || {}, sug.reason || '') : (sug.reason || '');
    const reason = sugReason ? _tip(sugReason) : '';
    const nowNote = value != null && value !== '' ? ` <span style="opacity:.6;font-size:.9em">${t('suggestion.now_value', {v: `${value}${_u}`}, '(now {v})')}</span>` : '';
    const impact = _sugImpact(t, key, classicVal, value);
    const useBtn = `<button type="button" class="wd-sug-use" data-sugkey="${key}" data-sugval="${_esc(classicVal)}">${extra.useBtnLabel || 'Use'}</button>`;
    // #343: a "mute" button on each suggestion card so the user can tell the
    // auto-tuner to stop proposing this setting (e.g. a threshold that breaks an
    // anti-crease-tuned device).
    const lockTitle = _esc(t('btn.mute_suggestion', {}, "Stop suggesting this setting"));
    const lockBtn = key ? `<button type="button" class="wd-sug-lock" data-suglock="${key}" title="${lockTitle}" aria-label="${lockTitle}">🔕</button>` : '';
    sugHtml = `<div class="wd-sug"><span class="wd-sug-chip wd-sug-chip-obs">💡 ${_esc(t('suggestion.observed_label', {}, 'Observed'))}</span><span class="wd-sug-val">${_esc(classicVal)}${_u}</span>${nowNote}${useBtn}${reason}${lockBtn}${impact ? `<div class="wd-sug-impact-line">${_esc(impact)}</div>` : ''}</div>`;
  }
  // Accessible name for the control: the <label> is not tied to it (audit UI-05).
  if (labelText && input) {
    input = input.replace(/<(input|select|textarea)\b(?![^>]*\baria-label=)/, `<$1 aria-label="${_esc(labelText)}"`);
  }
  return `<div class="wd-field" data-field="${key}"><div class="wd-label-row"><label style="margin:0">${_esc(labelText)}</label>${chgDot}${tip}</div>${input}${f.hint ? `<div class="wd-field-hint">${_esc(f.hint)}</div>` : ''}<div class="wd-conflict-err" data-cerr="${key}" hidden></div><div class="wd-setting-note" data-cnote="${key}" hidden></div>${sugHtml}</div>`;
}

// Are two suggestion/option values effectively equal? Numeric-tolerant so an
// int option (e.g. 30) matches a float suggestion (30.0); string fallback otherwise.
function _sugSame(a, b) {
  if (a == null || b == null) return false;
  const na = parseFloat(a), nb = parseFloat(b);
  if (!isNaN(na) && !isNaN(nb)) return Math.abs(na - nb) < 1e-6;
  return String(a) === String(b);
}

// What moving a setting from `current` to `suggested` does, from the per-key
// higher/lower impact lines; '' when the key has none or either side is not numeric.
function _sugImpact(t, key, suggested, current) {
  const sN = parseFloat(suggested), cN = parseFloat(current);
  if (isNaN(sN) || isNaN(cN) || sN === cN) return '';
  return t(`suggestion.impact.${key}.${sN > cN ? 'higher' : 'lower'}`, {}, '');
}

// Map setting key -> conceptual diagram id (drawn in the hover tooltip).
const _DIAGRAM_BY_KEY = {
  min_power: 'min_power', off_delay: 'off_delay',
  start_threshold_w: 'hysteresis', stop_threshold_w: 'hysteresis',
  start_energy_threshold: 'start_energy', running_dead_zone: 'dead_zone',
  profile_match_min_duration_ratio: 'match_ratios', profile_match_max_duration_ratio: 'match_ratios',
  progress_reset_delay: 'progress_reset', completion_min_seconds: 'min_duration',
  // New diagrams
  min_off_gap: 'min_off_gap',
  duration_tolerance: 'duration_tolerance',
  start_duration_threshold: 'start_duration',
  end_energy_threshold: 'end_energy_thresh',
  profile_match_threshold: 'confidence', profile_unmatch_threshold: 'confidence',
  auto_label_confidence: 'confidence', learning_confidence: 'confidence',
  no_update_active_timeout: 'watchdog_timeout',
  anti_wrinkle_enabled: 'anti_wrinkle', anti_wrinkle_max_power: 'anti_wrinkle',
  anti_wrinkle_max_duration: 'anti_wrinkle', anti_wrinkle_exit_power: 'anti_wrinkle',
  anti_wrinkle_idle_timeout: 'anti_wrinkle', anti_crease_finalize_ratio: 'anti_wrinkle',
  sampling_interval: 'sampling',
};

// Rect that really clips an absolutely-positioned popover: the viewport
// intersected with every ancestor that scrolls or hides its overflow. `.wd-modal`
// only declares `overflow-y: auto`, but CSS promotes the unset axis to `auto` as
// well, so it clips horizontally too, which is what cut the help bubbles in half
// (#385).
function _clipRectFor(el) {
  let left = 0, right = window.innerWidth;
  let top = 0, bottom = window.innerHeight;
  for (let a = el.parentElement; a; a = a.parentElement) {
    const cs = getComputedStyle(a);
    const clipsX = cs.overflowX !== 'visible';
    const clipsY = cs.overflowY !== 'visible';
    if (!clipsX && !clipsY) continue;
    const r = a.getBoundingClientRect();
    if (clipsX) {
      if (r.left > left) left = r.left;
      if (r.right < right) right = r.right;
    }
    // Vertical half is used by the combobox dropdown (a tall popover anchored to
    // an input that can sit anywhere in the .wd-main scroller); the tooltip only
    // reads left/right.
    if (clipsY) {
      if (r.top > top) top = r.top;
      if (r.bottom < bottom) bottom = r.bottom;
    }
  }
  return { left, right, top, bottom };
}

// Horizontal scrollers that get an edge-shadow affordance (audit UI-20).
const _OVF_SCROLLERS = '.wd-tabs, .wd-table-wrap';
// Toggle .wd-ovf-l / .wd-ovf-r for the side(s) where `el` hides content. Uses the
// distance from the START edge, so a right-to-left page (scrollLeft runs 0 to
// negative) maps onto the right physical side. 1px of slack absorbs subpixel widths.
function _syncOverflowEdges(el) {
  const max = el.scrollWidth - el.clientWidth;
  const fromStart = Math.abs(el.scrollLeft);
  const atStart = max <= 1 || fromStart <= 1;
  const atEnd = max <= 1 || fromStart >= max - 1;
  const rtl = getComputedStyle(el).direction === 'rtl';
  el.classList.toggle(rtl ? 'wd-ovf-r' : 'wd-ovf-l', !atStart);
  el.classList.toggle(rtl ? 'wd-ovf-l' : 'wd-ovf-r', !atEnd);
}

// Tooltip popover with an optional JS-drawn SVG diagram above the text.
// `tText` is the panel's plain-text translator, for the diagram's labels.
function _tip(text, diagram, tText) {
  const dg = diagram ? _diagram(diagram, tText) : '';
  // Focusable, with the text as its accessible name: the 100+ setting docs were
  // hover-only, unreachable by keyboard or screen reader (audit UI-05).
  return `<span class="wd-tip" tabindex="0" role="note" aria-label="${_esc(text)}">i<span class="wd-tip-pop">${dg}<span class="wd-tip-txt">${_esc(text)}</span></span></span>`;
}

// Settings-style toggle switch, reused everywhere instead of raw checkboxes.
// `inner` is the <input> attributes (id / data-* / checked / disabled), `label`
// is plain-case text, `tip` is an optional _tip(...) string placed inline at the
// end of the row. Inline variant (no .wd-field wrapper) fits inside flex rows.
function _switchInline(inner, label, tip = '') {
  return `<label class="wd-switch-lbl"><span class="wd-switch"><input type="checkbox" ${inner}>`
    + `<span class="wd-switch-slider"></span></span>`
    + `<span class="wd-switch-text wd-switch-text--plain">${_esc(label)}</span></label>${tip || ''}`;
}
function _switchRow(inner, label, tip = '', hint = '') {
  return `<div class="wd-field wd-field-switch"><div class="wd-switch-row">${_switchInline(inner, label, tip)}</div>`
    + `${hint ? `<div class="wd-field-hint">${_esc(hint)}</div>` : ''}</div>`;
}

// Small conceptual diagrams illustrating each parameter (from SETTINGS_VISUALIZED).
// Labels are translated (audit UI-07). The parameter is named like the panel method
// so tests/test_panel_i18n_keys.py checks every literal key below against en.json;
// without a translator (or before translations load) the English fallback shows.
function _diagram(id, tText) {
  const _tText = tText || ((key, vars, fallback) => fallback);
  const wrap = inner => `<svg class="wd-dg" viewBox="0 0 200 90" preserveAspectRatio="xMidYMid meet">${inner}</svg>`;
  const base = `<line class="ax" x1="8" y1="78" x2="192" y2="78"/>`;
  switch (id) {
    case 'min_power':
      return wrap(`${base}
        <rect class="fb" x="8" y="64" width="184" height="14"/>
        <line class="bad dash" x1="8" y1="64" x2="192" y2="64"/>
        <polyline class="ln" points="8,72 30,40 60,30 90,34 120,28 150,66 175,72 190,72"/>
        <text x="150" y="60">${_esc(_tText('diagram.min', {}, 'min'))}</text><text x="10" y="14">${_esc(_tText('diagram.below_off', {}, 'below = off'))}</text>`);
    case 'hysteresis':
      return wrap(`${base}
        <rect class="fz" x="8" y="34" width="184" height="24"/>
        <line class="ok dash" x1="8" y1="34" x2="192" y2="34"/>
        <line class="bad dash" x1="8" y1="58" x2="192" y2="58"/>
        <polyline class="ln" points="8,72 40,72 70,24 110,24 140,72 175,72 190,72"/>
        <text x="10" y="30">${_esc(_tText('diagram.start', {}, 'start'))}</text><text x="10" y="70">${_esc(_tText('diagram.stop', {}, 'stop'))}</text>`);
    case 'start_energy':
      return wrap(`${base}
        <polyline class="bad" points="40,78 41,26 42,78"/>
        <text x="14" y="20">${_esc(_tText('diagram.spike_ignored', {}, 'spike ignored'))}</text>
        <rect class="fz" x="110" y="34" width="46" height="44"/>
        <polyline class="ln" points="110,78 110,34 156,34 156,78"/>
        <text x="104" y="28">${_esc(_tText('diagram.energy_counts', {}, 'energy counts'))}</text>`);
    case 'off_delay':
      return wrap(`${base}
        <rect class="fw" x="96" y="20" width="46" height="58"/>
        <polyline class="ln" points="8,40 90,40 96,74 142,74 148,40 175,40 175,74 190,74"/>
        <text x="98" y="16">${_esc(_tText('diagram.off_delay_wait', {}, 'off-delay wait'))}</text>`);
    case 'duration_tolerance':
      return wrap(`${base}
        <rect class="fz" x="60" y="36" width="80" height="22"/>
        <line class="ax" x1="60" y1="47" x2="140" y2="47"/>
        <line class="ln" x1="100" y1="30" x2="100" y2="64"/>
        <text x="62" y="30">${_esc(_tText('diagram.minus_tol', {}, '-tol'))}</text><text x="120" y="30">${_esc(_tText('diagram.plus_tol', {}, '+tol'))}</text><text x="84" y="74">${_esc(_tText('diagram.profile', {}, 'profile'))}</text>`);
    case 'match_ratios':
      return wrap(`${base}
        <line class="ax" x1="20" y1="47" x2="180" y2="47"/>
        <rect class="fz" x="70" y="40" width="60" height="14"/>
        <line class="bad" x1="70" y1="34" x2="70" y2="60"/>
        <line class="bad" x1="130" y1="34" x2="130" y2="60"/>
        <line class="ln" x1="100" y1="30" x2="100" y2="64"/>
        <text x="58" y="28">${_esc(_tText('diagram.min', {}, 'min'))}</text><text x="120" y="28">${_esc(_tText('diagram.max', {}, 'max'))}</text>`);
    case 'dead_zone':
      return wrap(`${base}
        <rect class="fw" x="8" y="20" width="34" height="58"/>
        <polyline class="ln" points="8,72 14,30 20,72 26,32 32,72 42,40 90,36 140,36 175,72 190,72"/>
        <text x="10" y="16">${_esc(_tText('diagram.ignored', {}, 'ignored'))}</text>`);
    case 'progress_reset':
      return wrap(`${base}
        <rect class="fz" x="60" y="24" width="80" height="50"/>
        <polyline class="ln" points="8,74 60,24 140,24 141,74 190,74"/>
        <text x="72" y="20">${_esc(_tText('diagram.held_at_100', {}, 'held at 100%'))}</text>`);
    case 'min_duration':
      return wrap(`${base}
        <polyline class="bad" points="30,78 34,50 38,78"/>
        <text x="20" y="44">${_esc(_tText('diagram.too_short', {}, 'too short'))}</text>
        <polyline class="ln" points="90,78 100,40 150,40 160,78"/>
        <text x="106" y="34">${_esc(_tText('diagram.kept', {}, 'kept'))}</text>`);
    case 'min_off_gap':
      // Two cycle humps separated by an orange off-gap; gap bridged into one cycle.
      return wrap(`${base}
        <rect class="fw" x="68" y="32" width="48" height="46"/>
        <polyline class="ln" points="8,78 14,78 26,44 38,32 52,44 68,78 116,78 128,32 150,32 162,44 174,78 192,78"/>
        <text x="72" y="26">${_esc(_tText('diagram.off_gap', {}, 'off-gap'))}</text>
        <text x="9" y="14">${_esc(_tText('diagram.gap_below_min', {}, 'gap below min = one cycle'))}</text>`);
    case 'start_duration':
      // Brief spike ignored; sustained power above threshold confirms start.
      return wrap(`${base}
        <line class="bad dash" x1="8" y1="50" x2="192" y2="50"/>
        <polyline class="bad" points="34,78 36,28 38,78"/>
        <polyline class="ln" points="8,78 100,78 112,50 192,50"/>
        <rect class="fw" x="112" y="50" width="44" height="28"/>
        <text x="26" y="24">${_esc(_tText('diagram.spike_ignored_short', {}, 'spike: ignored'))}</text>
        <text x="114" y="46">${_esc(_tText('diagram.confirmed', {}, 'confirmed'))}</text>`);
    case 'end_energy_thresh':
      // Low-power tail after main cycle; accumulated energy compared to threshold.
      return wrap(`${base}
        <polyline class="ln" points="8,78 14,78 28,28 66,28 76,60 110,60 125,78 192,78"/>
        <rect class="fz" x="76" y="60" width="49" height="18"/>
        <line class="ax" x1="8" y1="68" x2="192" y2="68"/>
        <text x="10" y="14">${_esc(_tText('diagram.tail_energy_resets', {}, 'tail energy above thresh: timer resets'))}</text>
        <text x="78" y="56">${_esc(_tText('diagram.accum', {}, 'accum'))}</text>
        <text x="168" y="65">${_esc(_tText('diagram.thr', {}, 'thr'))}</text>`);
    case 'confidence':
      // Horizontal 0-1 score bar: red = no match, orange = feedback zone, blue = auto-label.
      return wrap(`
        <rect class="fb" x="8" y="40" width="56" height="22"/>
        <rect class="fw" x="64" y="40" width="90" height="22"/>
        <rect class="fz" x="154" y="40" width="38" height="22"/>
        <line class="ax" x1="8" y1="40" x2="192" y2="40"/>
        <line class="ax" x1="8" y1="62" x2="192" y2="62"/>
        <text x="14" y="36">${_esc(_tText('diagram.no_match', {}, 'no match'))}</text>
        <text x="70" y="36">${_esc(_tText('diagram.feedback', {}, 'feedback'))}</text>
        <text x="156" y="36">${_esc(_tText('diagram.auto', {}, 'auto'))}</text>
        <text x="8" y="74">0.0</text>
        <text x="178" y="74">1.0</text>`);
    case 'watchdog_timeout':
      // Running cycle, then no-update silence (orange), then force-stop.
      return wrap(`${base}
        <polyline class="ln" points="8,40 74,40 82,78"/>
        <rect class="fw" x="82" y="22" width="76" height="56"/>
        <line class="bad" x1="164" y1="26" x2="176" y2="38"/>
        <line class="bad" x1="176" y1="26" x2="164" y2="38"/>
        <text x="86" y="36">${_esc(_tText('diagram.no_updates', {}, 'no updates'))}</text>
        <text x="10" y="14">${_esc(_tText('diagram.sensor_offline', {}, 'sensor offline: force-stop'))}</text>`);
    case 'anti_wrinkle':
      // Main heat cycle followed by low-power tumble pulses (anti-wrinkle zone).
      return wrap(`${base}
        <rect class="fz" x="78" y="44" width="114" height="34"/>
        <polyline class="ln" points="8,78 14,78 24,30 54,30 68,78 84,60 96,78 110,60 122,78 136,60 148,78 162,60 174,78 192,78"/>
        <text x="10" y="14">${_esc(_tText('diagram.heat_phase', {}, 'heat phase'))}</text>
        <text x="82" y="40">${_esc(_tText('diagram.tumble_kept', {}, 'tumble pulses kept'))}</text>`);
    case 'sampling':
      // Vertical tick marks at regular intervals showing sensor cadence.
      return wrap(`${base}
        <line class="ok" x1="24" y1="30" x2="24" y2="78"/>
        <line class="ok" x1="62" y1="30" x2="62" y2="78"/>
        <line class="ok" x1="100" y1="30" x2="100" y2="78"/>
        <line class="ok" x1="138" y1="30" x2="138" y2="78"/>
        <line class="ok" x1="176" y1="30" x2="176" y2="78"/>
        <line class="fz" x1="8" y1="54" x2="192" y2="54"/>
        <text x="36" y="50">${_esc(_tText('diagram.si', {}, 'SI'))}</text>
        <text x="74" y="50">${_esc(_tText('diagram.si', {}, 'SI'))}</text>
        <text x="112" y="50">${_esc(_tText('diagram.si', {}, 'SI'))}</text>
        <text x="10" y="14">${_esc(_tText('diagram.reading_interval', {}, 'typical reading interval'))}</text>`);
    default:
      return '';
  }
}

// ─── Custom element ───────────────────────────────────────────────────────────

class HaWashdataPanel extends HTMLElement {
  constructor() {
    super();
    this._hass = null;
    this._initialized = false;
    this._pollTimer = null;
    this._toastTimer = null;
    this._hassUpdateThrottle = null;
    this._evtUnsubs = [];
    this._hoverRafId = null;   // rAF handle for chart-hover coalescing
    this._hoverPending = null; // last pending hover coords {px, py, id}
    // Data
    this._constants = { stateColors: {}, deviceTypes: [], mlLabEnabled: false, mlTrainingAvailable: false, storeOnlineAvailable: false, storeOnlineEnabled: false, storeWebOrigin: '', storePrefs: {}, pgMatchDefaults: {}, version: '', iconUrl: '' };
    this._constantsLoaded = false;
    this._devices = [];
    this._cycles = [];
    this._refCycles = [];  // imported store recordings (shown alongside real cycles)
    this._shareableCycles = [];  // get_shareable_cycles result for the share-device tree
    this._sharePhasePrograms = [];  // programs (from get_shareable_cycles) with a local phase map
    this._shareAllPrograms = [];   // all known profile names (including those without shareable cycles)
    this._dlSettings = false;       // "also adopt settings" toggle on the store device view
    this._selectMode = false;
    this._cycleSel = new Set();
    this._profiles = [];
    this._profileGroups = { groups: [], min_cohesion: 0.85 };
    this._profileEnvCache = {};
    this._suggestions = [];
    this._lockedSuggestions = [];   // #343: setting keys the user muted from auto-tuning
    this._feedbacks = [];
    this._diag = null;
    this._importUndo = null;  // last replace import's restore point, from get_diagnostics (item 195)
    this._phases = [];
    this._recState = null;
    this._opts = {};
    this._optDefaults = {};  // device-resolved cadence defaults from get_options (#396)
    this._mlComparison = null;
    this._mlById = {};
    this._mlLoading = false;
    this._mlTrainingStatus = null; // {enabled, running, last_trained, cycle_count, min_cycles, ...}
    this._setupStatus = null;      // result of ws_get_setup_status
    // UI state
    this._selIdx = 0;
    this._deepLinkApplied = null;  // last ?device= token honoured (#428)
    this._tab = 'status';
    this._settingsSec = 'basic';
    this._settingsSearch = '';
    this._settingsSugOnly = false;
    this._settingsHistoryOpen = false;
    this._canvasZoom = {};     // canvasId -> {xMin, xMax}; absent = full view
    this._gAxisHandle = {};    // canvasId -> CSS x of the touch axis-pointer handle
    this._gtipPinned = false;  // readout kept up after a touch lifted (#413)
    this._gtipLines = null;    // last readout body, so _pinGraphTip can re-render it
    this._gPinchRaf = null;    // rAF gate for pinch frames
    this._gPinchPending = null; // latest pinch target viewport awaiting that frame
    this._toolsSubtab = 'recording';
    this._loading = true;
    this._tabLoading = false;
    // Scroll preservation state (#443, #449). _scrollNavKey is the _navKey() the last
    // render was for, so _render can tell navigation from a background refresh without
    // every navigation site having to say so. _scrollCarry holds the position across a
    // _tabLoading placeholder render, which is too short to clamp against.
    this._scrollNavKey = null;
    this._scrollCarry = null;
    this._lastRefresh = null;
    this._powerHistory = [];   // [[elapsedSeconds, watts], ...]
    this._powerT0 = null;
    this._statusEnv = null;    // matched profile envelope (expected curve overlay)
    this._statusEnvName = null;
    this._powerData = { live: [], raw: [], cycle_active: false, cycle_elapsed_s: 0 };
    this._stagedSuggestions = false;   // a suggestion was applied to a field this session
    this._pendingSettings = {};        // unsaved edits accumulated across section switches
    this._dirtyOptKeys = new Set();    // #406: setting keys the USER actually edited.
                                      // _snapshotFormToPending captures only these, so a
                                      // value the renderer itself produced (an unresolved
                                      // select collapsing to its first option, a form
                                      // painted from stale _opts) can never be latched into
                                      // _pendingSettings, where it would shadow _opts for
                                      // the rest of the visit and then be saved.
    this._busy = new Set();            // in-flight long operations (drives spinners)
    this._tasks = {};                  // id -> background-task snapshot (registry, reconnect-safe)
    this._cancellingTasks = new Set(); // task ids for which cancel was requested but not yet confirmed
    this._taskCallbacks = {};          // id -> fn(taskSnapshot) run once when a tracked task settles
    this._tasksSubscribed = false;     // subscribe_tasks succeeded (else poll fallback)
    this._pgHistoryTaskId = null;      // active Test-on-history task id
    this._pgSweepTaskId = null;        // active Optimize task id
    this._panelCfg = null;             // panel settings + RBAC + current-user info
    this._panelTrans = null;           // { [lang]: dict } loaded on demand from /ha_washdata/panel-translations/{lang}.json
    this._pollMs = _POLL_MS;
    this._panelSubtab = 'diagnostics';
    this._historySub = 'cycles';      // Cycles tab: 'cycles' | 'maintenance'
    this._gearTab = 'prefs';
    // Store-backed brand/model picker cache (Basic > Device info).
    // brandsFull: the whole brand collection is local, so every search is in-memory.
    // brandPrefixes: prefixes already resolved server-side (a completed "bo" covers "bos").
    // typeDevices/typeDevicesFor: the whole device list for one appliance type, fetched
    // once so the search box can match MODELS in memory (#416 follow-up). modelIndex maps
    // each "MODEL · Brand" label back to its row.
    this._catalog = { brands: undefined, devices: undefined, forBrand: null, approvedOnly: false,
                      brandsFull: false, brandPrefixes: [],
                      typeDevices: undefined, typeDevicesFor: null, modelIndex: new Map() };
    // Resolved catalog identity for the saved brand/model (two point reads), which is
    // all the status badges need. Keyed on brand|model|type so it self-invalidates.
    this._catalogEntry = null;
    this._maintenance = null;          // cached maintenance log/reminders (Cycles → Maintenance)
    this._logs = [];
    this._logLevel = '';
    this._logDevice = '';       // filter by device name ('' = all)
    this._logComponent = '';    // filter by component/module e.g. 'playground' ('' = all)
    this._logSearch = '';       // free-text search across messages
    try {
      this._logOpen = localStorage.getItem('wd-log-open') === '1';
      this._logDrawerWidth = Math.max(280, parseInt(localStorage.getItem('wd-log-width') || '380', 10) || 380);
    } catch (_) {
      this._logOpen = false;
      this._logDrawerWidth = 380;
    }
    this._tabInitialized = false;
    this._modal = null;
    this._prevModal = null;  // profile-panel modal to restore after cycle-detail closes
    this._toast = null;
    // Sort / filter state
    this._cycleSort = { col: 'date', dir: -1 };
    this._cycleFilter = { text: '', status: '' };
    this._cleanupSort = { col: 'date', dir: -1 };
    this._profSubtab = 'profiles'; // 'profiles' | 'phase-catalog'
    // D1: matched-profile phases for the Status-tab phase timeline
    this._statusPhases = [];
    this._statusPhasesName = null;
    // D3: cycle-list pagination. Imported (reference + backfill) cycles page on
    // their own cursor, outside the real-cycle offset/total (register item 129a).
    this._cycleOffset = 0;
    this._cyclesTotal = 0;
    this._cyclesHasMore = false;
    this._importedOffset = 0;
    this._importedHasMore = false;
    // D4: pending optimistic deletions keyed by an undo token
    this._undoBuffer = new Map();
    this._undoSeq = 0;
    // Bound modal keydown handler (Escape / Tab-trap); attached once in _boot.
    this._kbdHandler = null;
    // Bound help-bubble edge nudge (#385); attached once in _boot.
    this._tipHandler = null;
    // D7: settings changelog cache
    this._settingsChangelog = null;
    this._settingsChangeByKey = {};
    // F3: Unified Playground state
    this._pgCycleId = '';           // selected cycle id (compact dropdown)
    this._pgProfileName = '';       // '' = auto-detect from cycle metadata
    this._pgPowerPts = null;        // [{t,w}] — fetched from get_cycle_power_data
    this._pgEnvData = null;         // get_profile_envelope response (±1σ band)
    this._pgAnalysisTab = 'history'; // bottom "Across your cycles" drawer: 'history' | 'sweep'
    this._pgDetail = null;          // run_playground_cycle_detail telemetry (series/events/alerts/outcome)
    this._pgDetailBusy = false;     // detail sim in flight
    this._pgHistory = null;         // run_playground_history result (rows + diff)
    this._pgSweepObjective = 'match_accuracy';
    this._pgSweepNew = null;        // run_playground_sweep result (points or grid)
    this._pgDetailDebounceTimer = null;
    this._pgThreshStart = null;     // null = use live option; number = dragged override (W)
    this._pgThreshStop = null;      // same for stop threshold
    this._pgParamOverrides = {};    // other params: off_delay, min_off_gap, etc.
    // Settings control panel: the device's LIVE effective values (what the running
    // detector/matcher actually use, device-type defaults resolved server-side) are
    // the baseline every field renders against; the three states above are the diff
    // on top of it. Loaded from get_playground_settings on tab entry.
    this._pgEffective = null;       // {key: value} live baseline; null = not loaded yet
    this._pgPublishable = null;     // keys that are real config options (publish allow-list)
    this._pgPresets = [];           // saved sandbox snapshots [{name, values, ...}]
    this._pgPresetLimit = 0;        // server-side per-device preset cap
    this._pgPresetSel = '';         // selected preset name in the dropdown
    this._pgPresetName = '';        // "save as" name input buffer (survives re-render)
    this._pgSuggClassic = {};       // classic auto-tuner suggestions {key: value}
    this._pgView = null;            // {min,max} time-axis zoom window (seconds); null = full
    this._pgHoverT = null;          // hovered time (seconds) for cursor readout; null = none
    this._pgMap = null;             // current time<->x mapping, set by _pgDrawCanvas
    this._pgPanStart = null;        // pan drag anchor {clientX, vMin, vMax, totalDur}
    this._pgHoverEvent = null;      // {t,type} of the event pin under the cursor (tooltip)
    this._pgBatchProgress = null;   // {done,total} for history/sweep chunked runs (determinate bar)
    this._pgBatchCancel = false;    // set by Cancel to stop a chunked batch loop
    this._pgLoadSeq = 0;            // load-sequence token so Cancel drops a stale sim result
    this._pgDragging = null;        // 'start_thr' | 'stop_thr' | 'pan' | null
    this._pgNeedsRestart = false;   // WS playground commands not yet registered
    this._pgSimCycles = 20;         // last-N cycles for history/sweep replay
    this._pgSweepParam = 'off_delay';
    this._pgSweepFrom = '';
    this._pgSweepTo = '';
    this._pgSweepSteps = 5;
    this._pgLoading = false;        // data load in progress
    // Community Store (online features) — breadcrumb browse state
    this._storeView = 'brands';     // 'brands' | 'device' | 'profile'
    this._storeQuery = '';          // brand/model search box text
    this._storeDevices = [];        // store_search_devices results
    this._storeDevice = null;       // selected store device {id, brand, model, ...}
    this._storeProfiles = [];       // store_get_profiles items for the selected device
    this._storeProfile = null;      // selected store profile {id, program, cycleCount}
    this._storeCycles = [];         // store_get_cycles items for the selected profile
    this._storeStatus = null;       // store_status response (null = not yet fetched)
    this._storeConnected = false;   // convenience flag mirrored from store_status
    this._storeLoading = false;     // a store list fetch is in flight
    this._storeConnectListener = null; // bound window 'message' handler (attached once)
  }

  set hass(hass) {
    const prev = this._hass;
    this._hass = hass;
    if (!this._initialized && hass) { this._initialized = true; this._boot(); return; }
    // HA reassigns hass on EVERY global state change (constantly on a busy
    // instance), which is our realtime push signal — but coalesce it so we do at
    // most one refresh per _HASS_REFRESH_MS instead of a full refetch every ~2s.
    // Instant cycle transitions still arrive via subscribe_events; this is the
    // steady-state liveness path for progress/power. See _POLL_MS (slow safety
    // heartbeat) — together these replace the old tight 2s/5s polling.
    if (prev !== hass && this._initialized && !this._loading && !this._hassUpdateThrottle) {
      this._hassUpdateThrottle = setTimeout(() => {
        this._hassUpdateThrottle = null;
        this._fetchAll();
      }, _HASS_REFRESH_MS);
    }
  }
  set panel(p) { this._panel = p; }
  set narrow(n) { this._narrow = n; }

  connectedCallback() {
    if (this._initialized) {
      this._startPoll();
      // Restore WS push subscriptions (cycle events + task registry) that
      // disconnectedCallback tore down. Without this, navigate-away/back leaves
      // the panel relying only on the _POLL_MS (20 s) fallback poll - live cycle transitions
      // and task progress no longer update, and modal Escape/Tab are dead.
      this._setupSubscriptions();
      // Immediately refresh state so a navigate-away/back shows current data
      // instead of waiting up to 30s for the next poll tick.
      this._fetchAll();
      // Re-attach the modal keyboard handler (removed on disconnect).
      if (this.shadowRoot && !this._kbdHandler) {
        this._kbdHandler = (e) => this._onKeydown(e);
        this.shadowRoot.addEventListener('keydown', this._kbdHandler);
      }
      if (this.shadowRoot && !this._tipHandler) {
        this._tipHandler = (e) => {
          const t = e.target;
          const anchor = t && t.closest ? t.closest('.wd-tip') : null;
          if (anchor) this._positionTip(anchor);
        };
        this.shadowRoot.addEventListener('pointerover', this._tipHandler);
      }
      if (this.shadowRoot && !this._gtipDismissHandler) {
        this._gtipDismissHandler = (e) => this._maybeDismissGraphTip(e);
        this.shadowRoot.addEventListener('pointerdown', this._gtipDismissHandler);
      }
    }
    this._onResize = () => { this._syncPanelHeight(); this._resizeLogsPage(); };
    window.addEventListener('resize', this._onResize);
    // Deep links (#428): HA fires `location-changed` on every in-app navigation
    // (popstate covers back/forward), which is the only signal that the ?device=
    // query changed while this element stayed mounted.
    this._onLocChanged = () => this._onLocationChanged();
    window.addEventListener('location-changed', this._onLocChanged);
    window.addEventListener('popstate', this._onLocChanged);
    // Unsaved Settings edits: hold links that leave the panel, and ask the browser
    // to confirm a reload or close.
    this._onOutboundClick = (e) => this._maybeGuardOutboundClick(e);
    window.addEventListener('click', this._onOutboundClick, true);
    this._onBeforeUnload = (e) => {
      if (this._unsavedSettingsCount()) { e.preventDefault(); e.returnValue = ''; }
    };
    window.addEventListener('beforeunload', this._onBeforeUnload);
    // Rotating a phone or opening the on-screen keyboard changes the usable height
    // without always firing a window resize.
    if (window.visualViewport) window.visualViewport.addEventListener('resize', this._onResize);
    // After the first layout, when the host has a rect to measure.
    requestAnimationFrame(() => this._syncPanelHeight());
  }

  // Size the panel to the space it actually has, rather than trusting 100dvh.
  //
  // HA gives a non-iframe custom panel a container with no height of its own, and how
  // far down the viewport that container starts is not something CSS can express: it
  // carries safe-area padding, and anything HA chooses to put above it adds to the
  // offset. Assuming the full viewport height there makes the panel overhang the
  // bottom of the window by exactly that offset, and because the host clips its
  // overflow, the last stretch of .wd-main's scroll viewport sits off-screen: content
  // you can see is there but can never scroll to, however far you scroll.
  //
  // The CSS calc() stays as the pre-JS/no-JS fallback.
  _syncPanelHeight() {
    if (!this.isConnected) return;
    const r = this.getBoundingClientRect();
    // Viewport-relative top plus any page scroll = the offset when unscrolled, which
    // is what the height has to subtract. (The page should not scroll once this has
    // run; adding it back keeps a transient scroll from shrinking the panel.)
    const top = r.top + (window.scrollY || document.documentElement.scrollTop || 0);
    const avail = Math.round((window.innerHeight || 0) - top);
    if (!(avail > 0)) return;                       // detached / display:none
    const px = `${Math.max(_MIN_PANEL_HEIGHT, avail)}px`;
    if (this.style.height !== px) this.style.height = px;
  }
  disconnectedCallback() {
    if (this._ovfRO) { this._ovfRO.disconnect(); this._ovfRO = null; }
    if (this._onResize) {
      window.removeEventListener('resize', this._onResize);
      if (window.visualViewport) window.visualViewport.removeEventListener('resize', this._onResize);
      this._onResize = null;
    }
    if (this._onLocChanged) {
      window.removeEventListener('location-changed', this._onLocChanged);
      window.removeEventListener('popstate', this._onLocChanged);
      this._onLocChanged = null;
    }
    if (this._onOutboundClick) { window.removeEventListener('click', this._onOutboundClick, true); this._onOutboundClick = null; }
    if (this._onBeforeUnload) { window.removeEventListener('beforeunload', this._onBeforeUnload); this._onBeforeUnload = null; }
    this._stopPoll();
    if (this._hassUpdateThrottle) { clearTimeout(this._hassUpdateThrottle); this._hassUpdateThrottle = null; }
    if (this._pgRestartRetryTimer) { clearTimeout(this._pgRestartRetryTimer); this._pgRestartRetryTimer = null; }
    this._evtUnsubs.forEach(u => { try { u(); } catch (_) {} });
    this._evtUnsubs = [];
    // D4: commit any pending optimistic deletes before we go away.
    this._flushPendingDeletes();
    // Remove the modal keydown listener.
    if (this._kbdHandler && this.shadowRoot) { this.shadowRoot.removeEventListener('keydown', this._kbdHandler); this._kbdHandler = null; }
    if (this._tipHandler && this.shadowRoot) { this.shadowRoot.removeEventListener('pointerover', this._tipHandler); this._tipHandler = null; }
    if (this._gtipDismissHandler && this.shadowRoot) { this.shadowRoot.removeEventListener('pointerdown', this._gtipDismissHandler); this._gtipDismissHandler = null; }
    // Remove the community-store OAuth message listener.
    if (this._storeConnectListener) { window.removeEventListener('message', this._storeConnectListener); this._storeConnectListener = null; }
  }

  // ── Init ─────────────────────────────────────────────────────────────────

  _boot() {
    const shadow = this.attachShadow({ mode: 'open' });
    const style = document.createElement('style');
    style.textContent = _CSS;
    shadow.appendChild(style);
    this._container = document.createElement('div');
    // .wd-root, not a bare div: it is the flex link between :host and .wd-shell and
    // has to pass the height down (see the CSS).
    this._container.className = 'wd-root';
    shadow.appendChild(this._container);
    this._gtip = document.createElement('div');
    this._gtip.className = 'wd-gtip';
    shadow.appendChild(this._gtip);
    // Register the modal keydown handler once on the (persistent) shadow root so it
    // survives every _render() innerHTML swap. Removed on disconnect.
    this._kbdHandler = (e) => this._onKeydown(e);
    shadow.addEventListener('keydown', this._kbdHandler);
    // Same deal for the help-bubble edge nudge (#385): delegated on the shadow
    // root so it survives every innerHTML swap.
    this._tipHandler = (e) => {
      const t = e.target;
      const anchor = t && t.closest ? t.closest('.wd-tip') : null;
      if (anchor) this._positionTip(anchor);
    };
    shadow.addEventListener('pointerover', this._tipHandler);
    // A pinned touch readout (#413) has to be dismissible from anywhere, not
    // only by tapping the same chart, or it would hang over the rest of the UI
    // until the next hover. Delegated on the shadow root so it survives every
    // innerHTML swap, same as _tipHandler.
    this._gtipDismissHandler = (e) => this._maybeDismissGraphTip(e);
    shadow.addEventListener('pointerdown', this._gtipDismissHandler);
    // Load per-user-language panel translations before first render.
    // Falls back to JS-embedded strings if the fetch fails.
    this._loadPanelTranslations().catch(() => {}).finally(() => {
      this._fetchAll();
      this._startPoll();
    });
    this._setupSubscriptions();
  }

  _setupSubscriptions() {
    // Tear down any existing subscriptions first so reconnect is idempotent.
    this._evtUnsubs.forEach(u => { try { u(); } catch (_) {} });
    this._evtUnsubs = [];
    this._tasksSubscribed = false;
    // Subscribe to WashData cycle events for immediate push-refresh.
    // These fire when a cycle starts/ends so the UI updates instantly
    // instead of waiting for the _POLL_MS (20 s) fallback poll.
    const conn = this._hass && this._hass.connection;
    if (conn && conn.subscribeMessage) {
      const handleCycleEvent = (ev) => {
        // HA event structure: { event_type: '...', data: { entry_id: ... }, ... }
        const edata = ev.data || {};
        if (!edata.entry_id) return;
        this._fetchAll();
        if (ev.event_type === 'ha_washdata_cycle_ended') {
          const dev = this._devices[this._selIdx];
          if (dev && dev.entry_id === edata.entry_id) {
            this._fetchCycles(edata.entry_id).then(() => {
              if (this._tab === 'history') this._render();
            });
          }
        }
      };
      for (const evType of ['ha_washdata_cycle_started', 'ha_washdata_cycle_ended']) {
        conn.subscribeMessage(handleCycleEvent, { type: 'subscribe_events', event_type: evType })
          .then(unsub => { this._evtUnsubs.push(unsub); })
          .catch(() => {});
      }
      // Background-task registry: live push of progress/cancel/result across all
      // devices. Re-hydrates automatically on reconnect (HA replays the subscribe),
      // so a backgrounded tab that dropped its socket picks tasks back up.
      conn.subscribeMessage((ev) => this._onTaskEvent(ev), { type: `${_DOMAIN}/subscribe_tasks` })
        .then(unsub => { this._tasksSubscribed = true; this._evtUnsubs.push(unsub); })
        .catch(() => { this._tasksSubscribed = false; });
    }
  }

  // A task snapshot arrived over the subscription. Keep the freshest by
  // updated_at, refresh the header pills in place, drive any active Playground
  // batch bar, and load the result when a tracked task finishes.
  _onTaskEvent(ev) {
    const t = ev && ev.task;
    if (!t || !t.id) return;
    const prev = this._tasks[t.id];
    if (prev && (prev.updated_at || 0) > (t.updated_at || 0)) return;
    this._tasks[t.id] = t;
    if (t.state !== 'running') this._cancellingTasks.delete(t.id);
    this._updateTaskPills();
    this._pgAdoptTask(t);
    this._onTrackedTaskProgress(t);
    // The history-import wizard reads its own progress and results off this stream, so
    // a closed dialog or a dropped socket cannot lose a run.
    if (t.kind === 'history_import' || t.kind === 'history_import_apply') {
      if (t.state === 'running') { if (this._modal && this._modal.type === 'history-import') this._render(); }
      else this._histTaskFinished(t);
    }
    this._settleTaskCallback(t);
  }

  // Re-attach the Playground drawer to an in-flight (or just-finished) batch for
  // the CURRENT device that this panel instance didn't start itself — e.g. after a
  // page refresh / reconnect. Without this the task keeps running server-side and
  // shows in the header pill, but the drawer would look empty.
  _pgAdoptTask(t) {
    if (t.kind !== 'pg_sweep' && t.kind !== 'pg_history') return;
    const dev = this._devices[this._selIdx];
    if (!dev || t.entry_id !== dev.entry_id) return;
    const isSweep = t.kind === 'pg_sweep';
    // Only track ONE batch in the drawer at a time (the drawer + shared progress
    // bar can't represent two); a second concurrent batch still shows in the
    // header pill. Reject adoption if either kind is already tracked.
    if (this._pgSweepTaskId || this._pgHistoryTaskId) return;
    // Adopt running tasks, or ones that finished within the last 30s (i.e. that
    // completed during the refresh) — not stale results from an earlier session.
    const recentlyDone = t.state !== 'running' && t.finished_at && (Date.now() / 1000 - t.finished_at) < 30;
    if (t.state !== 'running' && !recentlyDone) return;
    if (isSweep) this._pgSweepTaskId = t.id; else this._pgHistoryTaskId = t.id;
    this._pgAnalysisTab = isSweep ? 'sweep' : 'history';
    this._busy.add(isSweep ? 'pg-sweep' : 'pg-history');
    if (t.state === 'running') this._pgBatchProgress = { done: t.done || 0, total: t.total || 0 };
    this._render();
  }

  // Re-scan known tasks for one to adopt (used after devices load, since task
  // events can arrive before the device list is ready and get skipped).
  _pgAdoptExisting() {
    Object.values(this._tasks || {}).forEach(t => { this._pgAdoptTask(t); this._onTrackedTaskProgress(t); });
  }

  // Reloadable history: past finished runs of this kind for the current device
  // (from the registry's retained tasks). Click a chip to reload its result -
  // these runs are intensive, so we keep them retrievable instead of re-running.
  _htmlPgRecentRuns(kind) {
    const dev = this._devices[this._selIdx];
    if (!dev) return '';
    const runs = Object.values(this._tasks || {})
      .filter(t => t.kind === kind && t.entry_id === dev.entry_id && t.state !== 'running' && t.has_result)
      .sort((a, b) => (b.finished_at || 0) - (a.finished_at || 0))
      .slice(0, 8);
    if (!runs.length) return '';
    const chips = runs.map(t => {
      const when = t.finished_at ? _fmtDate(t.finished_at * 1000) : '';
      const tag = t.state === 'cancelled' ? ' ⚠' : '';
      return `<button class="wd-btn wd-btn-sm" data-action="pg-load-run" data-task-id="${_esc(t.id)}" title="${_esc(this._t('lbl.pg_load_run', {}, 'Reload this run'))}">${_esc(when)}${tag}</button>`;
    }).join('');
    return `<div style="margin:2px 0 10px">
      <span style="font-size:.72em;color:var(--secondary-text-color);text-transform:uppercase;letter-spacing:.05em">${this._t('lbl.pg_recent_runs', {}, 'Recent runs')}</span>
      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:4px">${chips}</div>
    </div>`;
  }

  // Run (once) a registered completion callback for a settled non-Playground task
  // (reprocess / ML training). Playground tasks are handled by _onTrackedTaskProgress.
  _settleTaskCallback(t) {
    if (t.state === 'running') return;
    const cb = this._taskCallbacks[t.id];
    if (cb) { delete this._taskCallbacks[t.id]; cb(t); return; }
    // No registered callback: this panel instance reloaded / reconnected while the
    // task was in flight, so subscribe_tasks replayed its completion. Fire the
    // kind-appropriate refresh so the ML / diagnostics views still reflect the
    // result even though the original onDone was lost.
    this._autoSettleAdopted(t);
  }

  // Idempotent, current-device-only refresh for a settled non-Playground task whose
  // callback was lost across a reload (ml_training -> ML status; reprocess ->
  // diagnostics). Gated to recently-finished tasks so old retained tasks replayed on
  // a fresh connect don't trigger spurious refetches.
  _autoSettleAdopted(t) {
    if (t.state !== 'done') return;
    if (t.kind !== 'ml_training' && t.kind !== 'reprocess') return;
    if (!t.finished_at || (Date.now() / 1000 - t.finished_at) > 60) return;
    this._autoSettled = this._autoSettled || new Set();
    if (this._autoSettled.has(t.id)) return;
    const dev = this._devices[this._selIdx];
    if (!dev || t.entry_id !== dev.entry_id) return;
    this._autoSettled.add(t.id);
    const eid = dev.entry_id;
    const done = () => { if (this._isActiveEntry(eid)) this._render(); };
    if (t.kind === 'ml_training') this._loadMlTrainingStatus(eid).finally(done);
    else this._fetchToolsData(eid).finally(done);
  }

  // Kick off a detached task command, show a header pill via the registry, and run
  // onDone(result, state) when it settles. Falls back to polling if the task
  // subscription isn't active. Errors surface as a toast.
  async _kickAndTrack(msg, busyKey, onDone) {
    if (this._busy.has(busyKey)) return;  // single-flight: ignore a double click
    this._busy.add(busyKey);
    this._render();
    let tid;
    try {
      const r = await this._ws(msg);
      tid = r && r.task_id;
      if (!tid) throw new Error('no task id');
      const kind = String(msg.type || '').endsWith('reprocess_history') ? 'reprocess'
        : String(msg.type || '').endsWith('trigger_ml_training') ? 'ml_training'
        : String(msg.type || '').endsWith('apply_split') ? 'split'
        : String(msg.type || '').endsWith('trim_cycle') ? 'trim'
        : String(msg.type || '').endsWith('apply_merge') ? 'merge'
        : String(msg.type || '').endsWith('rebuild_envelopes') ? 'rebuild' : 'task';
      this._addProvisionalTask(tid, kind, msg.entry_id, 0);
    } catch (e) {
      this._busy.delete(busyKey);
      this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error');
      this._render();
      return;
    }
    this._taskCallbacks[tid] = async (t) => {
      this._busy.delete(busyKey);
      if (t.state === 'error') {
        this._showToast(this._tText('msg.toast_error', {error: t.error || ''}, 'Error: ' + (t.error || '')), 'error');
        this._render();
        return;
      }
      if (t.state === 'cancelled') {
        // User cancelled: don't fetch a result or report a "run gone" as an error.
        this._showToast(this._t('toast.task_cancelled', {}, 'Cancelled.'), 'info');
        this._render();
        return;
      }
      let result = null;
      try { const rr = await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: t.id }); result = rr && rr.result; } catch (_) {}
      if (result == null) {
        // Result unavailable (evicted / fetch failed): don't report a fake success.
        this._showToast(this._t('toast.pg_run_gone', {}, 'That run is no longer available.'), 'info');
        this._render();
        return;
      }
      try { await onDone(result, t.state); } catch (_) {}
      this._render();
    };
    // Race guard: the task may have already finished (event delivered) before the
    // callback was registered above — settle now if so.
    const known = this._tasks[tid];
    if (known && known.state !== 'running') { this._settleTaskCallback(known); return; }
    if (!this._tasksSubscribed) this._pollTaskGeneric(tid);
  }

  // Shared terminal-error finalize: record an error snapshot in _tasks (so the stale
  // running pill clears), refresh the pills, and settle the callback (which releases
  // the busy flag). One path for every fallback-poll failure mode.
  _finalizeTaskError(tid, error) {
    const snap = Object.assign({}, this._tasks[tid] || { id: tid }, {
      id: tid, state: 'error', error, finished_at: Date.now() / 1000,
    });
    this._tasks[tid] = snap;
    this._updateTaskPills();
    this._settleTaskCallback(snap);
  }

  // Poll one task to completion via get_task_result (fallback when no subscription).
  // Transient WS blips are retried a few times before finalizing as an error, so a
  // single dropped frame doesn't kill an otherwise-healthy run; a valid terminal
  // snapshot or loop exhaustion settles immediately so _busy never stays stuck.
  async _pollTaskGeneric(tid) {
    let fails = 0;
    for (let i = 0; i < 3600 && this._taskCallbacks[tid]; i++) {
      let snap;
      try {
        snap = await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: tid });
        fails = 0;
      } catch (_) {
        if (++fails >= 5) { this._finalizeTaskError(tid, 'lost connection'); return; }
        await new Promise(res => setTimeout(res, 1200));
        continue;  // transient blip: retry before giving up
      }
      if (!snap) { this._finalizeTaskError(tid, 'no result'); return; }
      this._tasks[tid] = snap;
      this._updateTaskPills();
      if (snap.state !== 'running') { this._settleTaskCallback(snap); return; }
      await new Promise(res => setTimeout(res, 1200));
    }
    // Exhausted without settling -> clear the pending callback so busy releases.
    if (this._taskCallbacks[tid]) this._finalizeTaskError(tid, 'timed out');
  }

  // Map a task's entry_id to a device label for the pill.
  _deviceName(entryId) {
    const d = (this._devices || []).find(x => x.entry_id === entryId);
    return d ? (d.name || d.title || '') : '';
  }

  _taskActionLabel(kind) {
    const m = {
      pg_history: this._t('lbl.task_pg_history', {}, 'Test on history'),
      pg_sweep: this._t('lbl.task_pg_sweep', {}, 'Optimize'),
      pg_detail: this._t('lbl.task_pg_detail', {}, 'Simulate cycle'),
      split: this._t('lbl.task_split', {}, 'Splitting cycle'),
      trim: this._t('lbl.task_trim', {}, 'Trimming cycle'),
      merge: this._t('lbl.task_merge', {}, 'Merging cycles'),
      rebuild: this._t('lbl.task_rebuild', {}, 'Rebuilding envelopes'),
      reprocess: this._t('lbl.task_reprocess', {}, 'Reprocessing'),
      ml_training: this._t('lbl.task_ml_training', {}, 'Learning'),
      history_import: this._t('lbl.task_history_import', {}, 'Scanning power history'),
      history_import_apply: this._t('lbl.task_history_import_apply', {}, 'Importing cycles'),
    };
    return m[kind] || kind;
  }

  _fmtEta(s) {
    s = Math.round(s);
    if (s < 60) return this._t('lbl.eta_secs', {n: s}, `~${s}s left`);
    return this._t('lbl.eta_mins', {n: Math.round(s / 60)}, `~${Math.round(s / 60)}m left`);
  }

  // Localized "Excluded N mis-detected cycle(s): ..." note for a suggestion, from
  // the structured {total, items:[[reason_code, count]]} the server provides. Each
  // reason code is translated on its own; leading space matches the ".{excl}" slot.
  _exclNote(ex) {
    if (!ex || !ex.total) return '';
    const parts = (ex.items || []).map(([code, n]) =>
      `${n} ${this._t('suggestion.exclusions.reason.' + code, {}, String(code).replace(/_/g, ' '))}`
    ).join(', ');
    return ' ' + this._tText('suggestion.exclusions.summary', { total: ex.total, parts },
      `Excluded ${ex.total} mis-detected cycle(s): ${parts}.`);
  }

  // Header activity cluster: one pill per running task (device · action · % · ✕).
  _htmlTaskPills() {
    const running = Object.values(this._tasks || {}).filter(t => t.state === 'running');
    // Prune stale cancelling-task IDs: if a task is no longer running (evicted from
    // the registry, finished while our WS subscription was down, etc.), its
    // "Cancelling…" pill would never clear on its own — clean it up here.
    const runningIds = new Set(running.map(t => t.id));
    this._cancellingTasks.forEach(id => { if (!runningIds.has(id)) this._cancellingTasks.delete(id); });
    if (!running.length) return '';
    return running.map(t => {
      const cancelling = this._cancellingTasks.has(t.id);
      const dev = this._deviceName(t.entry_id);
      const action = t.label_key ? this._tText(t.label_key, t.label_params || {}, t.label || this._taskActionLabel(t.kind)) : this._taskActionLabel(t.kind);
      const label = (dev ? dev + ' · ' : '') + action;
      const pct = t.progress != null ? Math.round(t.progress * 100) + '%' : '';
      const eta = (t.eta_s != null && t.eta_s > 0) ? this._fmtEta(t.eta_s) : '';
      const cancellingLabel = this._t('task.cancelling', {}, 'Cancelling…');
      const pillClass = 'wd-task-pill' + (cancelling ? ' wd-task-pill--cancelling' : '');
      const titleSuffix = cancelling ? (' · ' + cancellingLabel) : (pct ? ' ' + pct : '');
      return `<span class="${pillClass}" title="${_esc(label + titleSuffix)}">`
        + `<span class="wd-task-spin"></span>`
        + `<span class="wd-task-pill-lbl">${_esc(label)}</span>`
        + (cancelling
            ? `<span class="wd-task-pill-cancelling">${_esc(cancellingLabel)}</span>`
            : (pct ? `<span class="wd-task-pill-pct">${pct}</span>` : '')
              + (eta ? `<span class="wd-task-pill-eta">${_esc(eta)}</span>` : ''))
        + `<button class="wd-task-pill-x${cancelling ? ' wd-task-pill-x--cancelling' : ''}" data-action="task-cancel" data-task-id="${_esc(t.id)}" ${cancelling ? 'disabled ' : ''}title="${_esc(this._t('btn.cancel', {}, 'Cancel'))}">✕</button>`
        + `</span>`;
    }).join('');
  }

  _updateTaskPills() {
    const sr = this.shadowRoot; if (!sr) return;
    const el = sr.getElementById('wd-task-pills');
    if (el) el.innerHTML = this._htmlTaskPills();
  }

  // Show a pill immediately on kick-off, before the first subscribe event lands
  // (or if the subscription is slow) — the real snapshots overwrite it by id.
  _addProvisionalTask(taskId, kind, entryId, total) {
    if (!taskId || this._tasks[taskId]) return;
    this._tasks[taskId] = {
      id: taskId, entry_id: entryId, kind: kind, label: this._taskActionLabel(kind),
      state: 'running', done: 0, total: total || 0, progress: total ? 0 : null,
      // updated_at:0 so any real registry event (server clock, possibly skewed
      // vs the client) always wins the _onTaskEvent dedup and overwrites this.
      eta_s: null, updated_at: 0, has_result: false,
    };
    this._updateTaskPills();
  }

  // Drive the Playground drawer bar for a task this panel started; on finish,
  // load the (reconnect-safe) result from the registry.
  _onTrackedTaskProgress(t) {
    if (t.id !== this._pgHistoryTaskId && t.id !== this._pgSweepTaskId) return;
    if (t.state === 'running') {
      this._pgBatchProgress = { done: t.done || 0, total: t.total || 0 };
      this._pgUpdateBatchBar(t.done || 0, t.total || 0);
      return;
    }
    this._pgFinishTask(t, t.id === this._pgHistoryTaskId);
  }

  async _pgFinishTask(t, isHistory) {
    let result = null;
    try {
      if (t.state === 'done' || t.state === 'cancelled') {
        const r = await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: t.id });
        result = r && r.result;
      }
    } catch (_) { /* result may have been evicted; leave prior view */ }
    // The device may have switched during the await above; never write a stale
    // device's result into the now-active device or clobber its batch state.
    if (!this._isActiveEntry(t.entry_id)) return;
    if (t.state === 'error') {
      this._showToast(this._tText('msg.toast_error', {error: t.error || ''}, 'Error: ' + (t.error || '')), 'error');
    } else if (result) {
      if (isHistory) this._pgHistory = result;
      else this._pgSweepNew = (result && !result.error) ? result : null;
    }
    if (isHistory) { this._busy.delete('pg-history'); this._pgHistoryTaskId = null; }
    else { this._busy.delete('pg-sweep'); this._pgSweepTaskId = null; }
    this._pgBatchProgress = null;
    this._render();
  }

  // Wait for one registry task to settle and return its final snapshot. For
  // one-shot jobs whose WS command now starts a task instead of holding the
  // request open (audit PLATFORM-05 / STORE-10); the header pill shows progress.
  async _awaitTask(taskId) {
    for (let i = 0; i < 7200 && taskId; i++) {
      const known = (this._tasks || {})[taskId];
      let snap = known && known.state !== 'running' ? known : null;
      if (!snap) snap = await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: taskId });
      if (snap && snap.state && snap.state !== 'running') {
        if (snap.state === 'error') throw new Error(snap.error || 'error');
        return snap;
      }
      await new Promise(res => setTimeout(res, 1000));
    }
    return null;
  }

  // Poll fallback used when the task subscription isn't available (older backend
  // or a mock): watch one task via get_task_result until it settles.
  async _pgPollTask(taskId) {
    for (let i = 0; i < 3600 && (taskId === this._pgHistoryTaskId || taskId === this._pgSweepTaskId); i++) {
      let snap;
      try { snap = await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: taskId }); }
      catch (_) { break; }
      if (!snap) break;
      this._tasks[taskId] = snap;
      this._updateTaskPills();
      if (snap.state !== 'running') { this._onTrackedTaskProgress(snap); return; }
      this._pgBatchProgress = { done: snap.done || 0, total: snap.total || 0 };
      this._pgUpdateBatchBar(snap.done || 0, snap.total || 0);
      await new Promise(res => setTimeout(res, 1200));
    }
  }

  _panelTransUrl(lang) {
    const base = `/ha_washdata/panel-translations/${encodeURIComponent(lang)}.json`;
    return _PANEL_VERSION ? `${base}?v=${encodeURIComponent(_PANEL_VERSION)}` : base;
  }

  // Fetch one language's panel dict. Tries the exact tag, then the base language
  // (e.g. "pt-BR" -> "pt"). Returns the parsed dict or null if unavailable.
  async _fetchPanelLang(lang) {
    if (!lang) return null;
    const candidates = [lang];
    const dash = lang.indexOf('-');
    if (dash > 0) candidates.push(lang.slice(0, dash));
    for (const cand of candidates) {
      try {
        const r = await fetch(this._panelTransUrl(cand));
        if (r.ok) {
          const j = await r.json();
          if (j && typeof j === 'object') return j;
        }
      } catch (_) { /* try next candidate */ }
    }
    return null;
  }

  // Ensure `lang` is present in this._panelTrans (keyed by the requested tag so
  // _t()'s lookup finds it). No-ops if already loaded or on fetch failure.
  async _loadPanelLang(lang) {
    if (!lang) return;
    if (this._panelTrans && this._panelTrans[lang]) return;
    const dict = await this._fetchPanelLang(lang);
    if (dict) {
      // Only materialize _panelTrans once we actually have a dict, so a total
      // fetch failure leaves it null and _t() falls back to _localize as before.
      if (!this._panelTrans) this._panelTrans = {};
      this._panelTrans[lang] = dict;
    }
  }

  // Load only the user's language + the `en` fallback, on demand, instead of a
  // monolithic all-languages bundle. lang_override isn't known yet at boot (it
  // arrives with get_panel_config), so _applyPanelConfig lazy-loads it later.
  async _loadPanelTranslations() {
    const sysLang = this._hass && this._hass.locale && this._hass.locale.language;
    await Promise.all([
      this._loadPanelLang('en'),
      sysLang && sysLang !== 'en' ? this._loadPanelLang(sysLang) : Promise.resolve(),
    ]);
  }

  _startPoll() { this._stopPoll(); this._pollTimer = setInterval(() => this._fetchAll(), this._pollMs); }
  _stopPoll() { if (this._pollTimer) { clearInterval(this._pollTimer); this._pollTimer = null; } }

  // ── Data fetching ─────────────────────────────────────────────────────────

  async _ws(msg) {
    try {
      return await this._hass.connection.sendMessagePromise(msg);
    } catch (e) {
      // The backend refuses an inverted Stop/Start pair with an English message
      // (item 515); every save path shows e.message, so localise it here once.
      if (e && e.code === 'invalid_threshold_pair') {
        const m = /\(([-\d.]+) W\)[^(]*\(([-\d.]+) W\)/.exec(String(e.message || ''));
        e.message = this._tText('msg.invalid_threshold_pair',
          { stop: m ? m[1] : '?', start: m ? m[2] : '?' }, e.message);
      }
      throw e;
    }
  }

  async _fetchAll() {
    if (!this._hass) return;
    const firstLoad = this._loading;
    let painted = false;   // first load only: the early Status paint already ran
    try {
      if (!this._constantsLoaded) {
        // Independent of each other, so one round trip instead of two (audit UI-19).
        const [c, cfg] = await Promise.all([
          this._ws({ type: `${_DOMAIN}/get_constants` }).catch(() => null),
          this._ws({ type: `${_DOMAIN}/get_panel_config` }).catch(() => null),
        ]);
        if (c) {
          this._constants = { stateColors: c.state_colors || {}, deviceTypes: c.device_types || [], mlLabEnabled: !!(c.ml_lab_enabled), mlTrainingAvailable: !!(c.ml_training_available), storeOnlineAvailable: !!(c.store_online_available), storeOnlineEnabled: !!(c.store_online_enabled), storeWebOrigin: c.store_web_origin || '', storePrefs: c.store_prefs || {}, pgMatchDefaults: c.pg_match_defaults || {}, PROFILE_MIN_WARMUP_CYCLES: c.PROFILE_MIN_WARMUP_CYCLES, version: c.version || '', iconUrl: c.icon_url || '' };
        }  // else: fall back to humanized labels
        if (cfg) {
          try {
            this._panelCfg = cfg;
            this._applyPanelConfig();
          } catch (_) { /* panel config optional */ }
        }
        this._constantsLoaded = true;
      }

      const res = await this._ws({ type: `${_DOMAIN}/get_devices` });
      this._lastFetchErr = null;   // recovered: report the next failure even if identical
      this._fetchFailed = false;
      this._devices = res.devices || [];
      this._lastRefresh = new Date();
      // A ?device= deep link (#428) outranks the remembered device - but only once
      // per token: re-applying it on every poll would silently undo a manual
      // switch a few seconds later. A later notification tap re-navigates to the
      // panel, which comes back through _onLocationChanged instead.
      let linked = false;
      const linkTok = this._deepLinkToken();
      if (linkTok && linkTok !== this._deepLinkApplied && this._devices.length) {
        this._deepLinkApplied = linkTok;
        const linkIdx = this._deepLinkIdx(linkTok);
        if (linkIdx >= 0) { this._selIdx = linkIdx; linked = true; this._rememberDevice(linkIdx); }
        else console.warn(`[WashData panel] ?device=${linkTok} matches no WashData device`);
      }
      // Restore the last-used device on the first paint (selIdx is still 0).
      if (!linked && this._selIdx === 0 && this._devices.length > 1) {
        const lastId = localStorage.getItem('wd-last-device');
        if (lastId) {
          const saved = this._devices.findIndex(d => d.entry_id === lastId);
          if (saved > 0) this._selIdx = saved;
        }
      }

      const dev = this._devices[this._selIdx];
      // The live chart and the matched program's overlay are independent reads, so
      // they go out together rather than one after the other (audit UI-19).
      const statusData = async () => {
        // Live chart is served from the integration so it survives a refresh:
        // fetch it whenever the Status tab is visible.
        if (dev && this._tab === 'status') {
          try { this._powerData = await this._ws({ type: `${_DOMAIN}/get_power_history`, entry_id: dev.entry_id, with_raw: this._pref('show_raw_active', false) }); } catch (_) { /* keep previous */ }
          if (this._pref('show_debug', false)) {
            try { this._matchDebug = await this._ws({ type: `${_DOMAIN}/get_match_debug`, entry_id: dev.entry_id }); } catch (_) { /* keep previous */ }
          }
          // Keep the Manual Recording widget's live duration / sample count fresh
          // while a recording is running (the backend reports them live; without
          // this poll the widget stays frozen at its start-of-recording snapshot).
          // Gate on the authoritative dev.recording flag rather than the polled
          // _recState, which is null on first load and would otherwise never be
          // populated -- leaving the widget showing "Start Recording" during an
          // active recording (#313).
          if (this._canEdit() && dev.recording) {
            try { this._recState = await this._ws({ type: `${_DOMAIN}/get_recording_state`, entry_id: dev.entry_id }); } catch (_) { /* keep previous */ }
          }
        }
      };
      const overlayData = async () => {
        // When a program is matched, keep its expected envelope for the status overlay.
        if (dev && dev.current_program) {
          if (this._statusEnvName !== dev.current_program) {
            this._statusEnvName = dev.current_program;
            try {
              const r = await this._ws({ type: `${_DOMAIN}/get_profile_envelope`, entry_id: dev.entry_id, profile_name: dev.current_program });
              this._statusEnv = r.envelope || null;
            } catch (_) { this._statusEnv = null; }
          }
          // D1: keep the matched profile's phase ranges for the Status timeline.
          await this._ensureStatusPhases(dev.entry_id, dev.current_program);
        } else {
          this._statusEnv = null; this._statusEnvName = null;
          this._statusPhases = []; this._statusPhasesName = null;
        }
      };
      await Promise.all([statusData(), overlayData()]);
      // Cycles/suggestions load per-tab; only prime them on the very first paint.
      if (firstLoad && dev) {
        const eid = dev.entry_id;
        const primed = Promise.all([
          this._fetchCycles(eid),
          this._fetchSuggestions(eid),
          this._fetchProfiles(eid),
          // Prime the Setup Card on the very first paint so it appears without
          // requiring a tab click or device switch.
          this._tab === 'status'
            ? this._ws({ type: `${_DOMAIN}/get_setup_status`, entry_id: eid })
              .then(r => { if (this._isActiveEntry(eid)) this._setupStatus = r; },
                () => { if (this._isActiveEntry(eid)) this._setupStatus = null; })
            : null,
          // The Store tab's visibility depends on this._onlineEnabled(), which is
          // normally loaded per-tab. Prime it at boot ONLY when the backend exposes
          // online features, so the tab can appear without visiting Settings. Also
          // cache store connection state so the "Share to store" cycle action knows
          // whether an account is connected regardless of the current tab.
          this._constants.storeOnlineAvailable ? (async () => {
            try { const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid }); if (this._isActiveEntry(eid)) this._opts = r.options || {}; } catch (_) {}
            if (this._onlineEnabled()) await this._loadStoreStatus(eid);
          })() : null,
        ]);
        // First paint (audit UI-19): the Status tab has everything it needs once the
        // device list and its live data are in, so paint it while the reads above
        // are in flight and fill in the rest when they land. Every other tab is
        // built from the primed data, so it shows the header and tabs over the
        // spinner (`_loading` still set) rather than flashing an empty state.
        if (this._tab === 'status') {
          this._loading = false;
          painted = true;
        }
        this._render();
        await primed;
      }
      // Log drawer: fetch asynchronously so it never delays the main poll;
      // _refreshLogDrawer patches just the drawer body when the fetch resolves.
      if (this._logOpen && this._isAdmin()) {
        this._fetchLogs().then(() => this._refreshLogDrawer()).catch(() => {});
      }
    } catch (err) {
      // Collapse repeats: a poll failure is usually transient and identical on
      // every poll, and six copies of the same line buries whatever else is in the console.
      const text = _wsErrText(err);
      if (text !== this._lastFetchErr) {
        this._lastFetchErr = text;
        console.warn('[WashData panel] fetch error -', text, err);
      }
      // Shown, not just logged (audit UI-11): a failed first load used to read
      // "No devices configured yet", and a lost connection kept "Running 45%".
      this._fetchFailed = true;
    } finally {
      this._loading = false;
      this._refreshStaleChip();
      // The poll must never clobber editing on another tab or inside a modal.
      const sr = this.shadowRoot;
      const ae = sr && sr.activeElement;
      const interacting = !!(ae && ['SELECT', 'INPUT', 'TEXTAREA', 'OPTION'].includes(ae.tagName));
      if (firstLoad && !painted) {
        this._render();
      } else if (firstLoad && !this._modal && !interacting) {
        // The primed data landed after the early paint: render it in, unless the
        // user is already inside a field or a modal (handled like a poll below).
        this._render();
      } else if (this._tab === 'status' && !this._modal && !interacting) {
        this._render();
      } else if (this._tab === 'status' && !this._modal && interacting) {
        // Don't rebuild the DOM under an open dropdown / focused field; keep the
        // live curve and device bar fresh instead so nothing is lost.
        this._drawStatusCurve();
        this._refreshDeviceBar();
      } else {
        this._refreshDeviceBar();
      }
    }
  }

  async _fetchCycles(entryId) {
    // D3: (re)load the first page and reset pagination state. The backend accepts
    // `offset` and returns `total`/`has_more`; older backends omit them, in which
    // case pagination degrades gracefully (no "Load more" button).
    this._cyclesError = false;
    try {
      const res = await this._ws({ type: `${_DOMAIN}/get_device_cycles`, entry_id: entryId, limit: _CYCLE_PAGE_SIZE, offset: 0, imported_offset: 0 });
      // The first paint no longer waits for this read (UI-19), so the device can
      // change under it: a late answer for the previous device is dropped.
      if (!this._isActiveEntry(entryId)) return;
      this._cycles = res.cycles || [];
      // Imported store recordings and cycles recovered from raw power history page on
      // their own `imported_offset` cursor, outside the real `cycles`/offset/total math
      // (they never count in stats; register item 129a). They share one panel array
      // because they share the table; each row carries `cycle_origin` so badges and
      // wording can differ.
      this._refCycles = [...(res.reference_cycles || []), ...(res.backfill_cycles || [])];
      this._cycleOffset = this._cycles.length;
      this._cyclesTotal = (res.total != null) ? res.total : this._cycles.length;
      this._cyclesHasMore = (res.has_more != null) ? !!res.has_more : false;
      this._importedOffset = this._refCycles.length;
      this._importedHasMore = !!res.imported_has_more;
    } catch (_) {
      if (!this._isActiveEntry(entryId)) return;
      this._cyclesError = true; this._cycles = []; this._refCycles = []; this._cycleOffset = 0; this._cyclesTotal = 0; this._cyclesHasMore = false;
      this._importedOffset = 0; this._importedHasMore = false;
    }
  }

  // D3: fetch the next page and append (deduping by id so optimistic removals or
  // overlaps never double up). Preserves the current client-side sort/filter.
  async _loadMoreCycles(entryId) {
    // One request advances both cursors; a list with nothing left just gets an
    // empty window back.
    const res = await this._ws({ type: `${_DOMAIN}/get_device_cycles`, entry_id: entryId, limit: _CYCLE_PAGE_SIZE, offset: this._cycleOffset, imported_offset: this._importedOffset });
    if (!this._isActiveEntry(entryId)) return;
    const more = res.cycles || [];
    const have = new Set(this._cycles.map(c => c.id));
    for (const c of more) if (!have.has(c.id)) this._cycles.push(c);
    this._cycleOffset += more.length;
    this._cyclesTotal = (res.total != null) ? res.total : this._cyclesTotal;
    this._cyclesHasMore = (res.has_more != null) ? !!res.has_more : (more.length >= _CYCLE_PAGE_SIZE);
    const moreImported = [...(res.reference_cycles || []), ...(res.backfill_cycles || [])];
    const haveImported = new Set((this._refCycles || []).map(c => c.id));
    this._refCycles = (this._refCycles || []).concat(moreImported.filter(c => !haveImported.has(c.id)));
    this._importedOffset += moreImported.length;
    this._importedHasMore = !!res.imported_has_more;
  }

  // D1: cache the matched profile's phase ranges (start/end in seconds) for the
  // Status-tab phase timeline. Cheap + cached per program name.
  async _ensureStatusPhases(entryId, program) {
    if (!program) { this._statusPhases = []; this._statusPhasesName = null; return; }
    if (this._statusPhasesName === program) return;
    this._statusPhasesName = program;
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_profile_phases`, entry_id: entryId, profile_name: program });
      this._statusPhases = (r.phases || []).map(p => ({ name: p.name, start: p.start, end: p.end }));
    } catch (_) { this._statusPhases = []; }
  }

  // D7: fetch the per-setting changelog (most-recent-first) and index it by key
  // so the Settings form can flag changed fields and list the full history.
  async _fetchSettingsChangelog(entryId) {
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_settings_changelog`, entry_id: entryId });
      this._settingsChangelog = r.changelog || [];
    } catch (_) { this._settingsChangelog = this._settingsChangelog || []; }
    const byKey = {};
    for (const c of (this._settingsChangelog || [])) { if (c && c.key != null && !(c.key in byKey)) byKey[c.key] = c; }
    this._settingsChangeByKey = byKey;
  }

  // ── D4: optimistic delete + undo ────────────────────────────────────────────
  // Records are removed from the rendered list immediately and held in an
  // in-memory buffer. The real delete WS call fires on timeout (10s), on Undo we
  // restore instead. Navigating away / switching device flushes pending deletes.

  _registerUndo(entry) {
    const token = 'u' + (++this._undoSeq);
    entry.timer = setTimeout(() => this._commitDelete(token), 10000);
    this._undoBuffer.set(token, entry);
    return token;
  }

  _undoDelete(token) {
    const e = this._undoBuffer.get(token);
    if (!e) return;
    this._undoBuffer.delete(token);
    if (e.timer) clearTimeout(e.timer);
    try { e.restore(); } catch (_) {}
    if (this._toastTimer) clearTimeout(this._toastTimer);
    this._toast = null;
    this._render();
  }

  async _commitDelete(token) {
    const e = this._undoBuffer.get(token);
    if (!e) return;
    this._undoBuffer.delete(token);
    if (e.timer) clearTimeout(e.timer);
    // Only mutate the visible list when we are still on the device the delete
    // belonged to — a stale outgoing-device response must never splice records
    // back into a different (newly selected) device's list.
    const restoreFailed = (failedRecs, message) => {
      const cur = this._devices[this._selIdx];
      const curEid = cur && cur.entry_id;
      if (e.eid !== curEid) return;  // device switched away; leave the list alone
      try { e.restore(failedRecs); } catch (_) {}
      this._showToast(message, 'error');
      this._render();
    };
    try {
      // commit() returns the subset of records whose backend delete failed (or
      // throws on a total failure). Nothing to restore when all succeeded.
      const failed = await e.commit();
      if (failed && failed.length) restoreFailed(failed, this._t('toast.delete_partial_failed', {}, 'Some items could not be deleted and were restored'));
    } catch (err) {
      restoreFailed(null, this._tText('toast.delete_failed', { error: (err && err.message) || err }, 'Delete failed: ' + ((err && err.message) || err)));
    }
  }

  // Guard for device-scoped async responses: true only while `eid` is still the
  // active device. A response (get_options / ML settings+status / automations)
  // that resolves after the user switched devices must not overwrite the newly
  // selected device's state. Mirrors the eid check in _commitDelete.
  _isActiveEntry(eid) {
    const cur = this._devices[this._selIdx];
    return !!cur && cur.entry_id === eid;
  }

  // Fire all pending real deletes now (unload / device switch / timeout catch-up).
  // Returns a promise that resolves once every pending commit has settled, so
  // callers (device switch) can await it before mutating device-scoped state.
  // Each commit is already entry-guarded (see _commitDelete's eid check), so a
  // stale outgoing-device response never mutates the newly selected device.
  _flushPendingDeletes() {
    if (!this._undoBuffer || !this._undoBuffer.size) return Promise.resolve();
    return Promise.all(Array.from(this._undoBuffer.keys()).map(token => this._commitDelete(token)));
  }

  // Optimistically drop cycles from the list and offer Undo.
  _deleteCyclesWithUndo(eid, ids) {
    const idset = new Set(ids);
    const removed = [];
    this._cycles = (this._cycles || []).filter((c, idx) => {
      if (idset.has(c.id)) { removed.push({ idx, rec: c, ref: false }); return false; }
      return true;
    });
    // Imported store recordings live in a separate list but delete through the
    // same WS command; track which array each removed row came from so Undo
    // re-inserts it in the right place.
    this._refCycles = (this._refCycles || []).filter((c, idx) => {
      if (idset.has(c.id)) { removed.push({ idx, rec: c, ref: true }); return false; }
      return true;
    });
    if (!removed.length) return;
    this._cycleSel.clear(); this._selectMode = false;
    this._render();
    // restore(subset): re-insert either all removed records (Undo button) or just
    // the subset whose backend delete failed (partial-failure recovery).
    const restore = (subset) => {
      const items = (subset && subset.length) ? subset : removed;
      const real = this._cycles.slice();
      const ref = this._refCycles.slice();
      items.slice().sort((a, b) => a.idx - b.idx).forEach(({ idx, rec, ref: isRef }) => {
        const arr = isRef ? ref : real;
        arr.splice(Math.min(idx, arr.length), 0, rec);
      });
      this._cycles = real; this._refCycles = ref;
    };
    // commit(): delete each record, tracking only the ones that actually failed
    // so a mid-batch failure never resurrects successfully-deleted cycles.
    const commit = async () => {
      const failed = [];
      for (const item of removed) {
        try {
          await this._ws({ type: `${_DOMAIN}/delete_cycle`, entry_id: eid, cycle_id: item.rec.id });
          // A deleted row was inside the loaded window, so everything after it moved
          // up one place server-side; step the cursor back or "Load more" skips a row.
          if (this._isActiveEntry(eid)) {
            if (item.ref) this._importedOffset = Math.max(0, this._importedOffset - 1);
            else this._cycleOffset = Math.max(0, this._cycleOffset - 1);
          }
        } catch (_) { failed.push(item); }
      }
      // The server rebuilt affected envelopes on delete; refresh the profile list
      // so the card power-signature curve reflects the removed cycle(s).
      if (failed.length < removed.length && this._isActiveEntry(eid)) {
        try { await this._fetchProfiles(eid); } catch (_) {}
      }
      return failed;
    };
    const token = this._registerUndo({ eid, restore, commit });
    this._showToast(this._tText('msg.cycles_deleted', { count: removed.length }, `${removed.length} cycle(s) deleted`), 'success',
      { actionLabel: this._t('btn.undo', {}, 'Undo'), actionToken: token, duration: 10000 });
  }

  // Optimistically drop a profile from the list and offer Undo.
  _deleteProfileWithUndo(eid, name) {
    const idx = (this._profiles || []).findIndex(p => p.name === name);
    const rec = idx >= 0 ? this._profiles[idx] : { name };
    if (idx >= 0) this._profiles = this._profiles.filter(p => p.name !== name);
    this._modal = null;
    this._render();
    const restore = (_subset) => {
      const arr = this._profiles.slice();
      arr.splice(Math.min(idx < 0 ? arr.length : idx, arr.length), 0, rec);
      this._profiles = arr;
    };
    const commit = async () => {
      try {
        await this._ws({ type: `${_DOMAIN}/delete_profile`, entry_id: eid, profile_name: name, unlabel_cycles: true });
      } catch (_) {
        return [{ idx, rec }];  // the delete itself failed → restore this profile
      }
      // Delete succeeded; refresh best-effort. A refresh failure must NOT
      // resurrect a profile that was actually removed on the backend.
      try { await this._fetchProfiles(eid); if (this._tab === 'profiles') this._render(); } catch (_) {}
      return [];
    };
    const token = this._registerUndo({ eid, restore, commit });
    this._showToast(this._tText('msg.profile_deleted', { name }, 'Profile deleted'), 'success',
      { actionLabel: this._t('btn.undo', {}, 'Undo'), actionToken: token, duration: 10000 });
  }

  // ── Modal key handling ───────────────────────────────────────────────────────
  // Escape closes the top modal; Tab/Shift+Tab are trapped within the open dialog
  // so focus can't escape to the page behind it. Only fires while a modal is open
  // and focus is inside the shadow root (see _syncModalFocus).
  _onKeydown(e) {
    if (e.defaultPrevented) return;

    // Escape always closes the top modal (even from a field inside it).
    if (e.key === 'Escape') {
      if (this._modal) { e.preventDefault(); this._onModalAction('cancel', null); }
      return;
    }
    // Trap Tab / Shift+Tab within the open modal so focus can't escape to the
    // page behind it.
    if (this._modal && e.key === 'Tab') {
      const sr = this.shadowRoot;
      const modalEl = sr && sr.querySelector('.wd-modal[role="dialog"]');
      if (modalEl) {
        const f = _focusableEls(modalEl);
        if (f.length) {
          const active = sr.activeElement;
          const idx = f.indexOf(active);
          if (e.shiftKey) {
            if (idx <= 0) { e.preventDefault(); f[f.length - 1].focus(); }
          } else if (idx === -1 || idx === f.length - 1) {
            e.preventDefault(); f[0].focus();
          }
        }
      }
      return;
    }
    // Arrow-key roving navigation for the tab widget.
    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
      const sr = this.shadowRoot;
      const focused = sr && sr.activeElement;
      if (focused && focused.classList.contains('wd-tab')) {
        const tabs = [...sr.querySelectorAll('button.wd-tab')];
        const cur = tabs.indexOf(focused);
        if (cur === -1) return;
        let next = cur;
        if (e.key === 'ArrowRight') next = (cur + 1) % tabs.length;
        else if (e.key === 'ArrowLeft') next = (cur - 1 + tabs.length) % tabs.length;
        else if (e.key === 'Home') next = 0;
        else if (e.key === 'End') next = tabs.length - 1;
        e.preventDefault();
        tabs[next].click();
        tabs[next].focus();
      }
    }
  }

  // Fetch the ML shadow assessment once and index it by cycle id, so the
  // unified cycle modal (and the cycle list) can show ML health + review
  // without a separate ML Lab. No-op when ML Lab is disabled.
  async _loadMlIndex(entryId) {
    this._mlById = this._mlById || {};
    if (!this._constants.mlLabEnabled) return;
    try {
      const d = await this._ws({ type: `${_DOMAIN}/get_ml_comparison`, entry_id: entryId });
      if (!this._isActiveEntry(entryId)) return;  // device switched mid-flight — drop stale response
      this._mlComparison = d;
      const idx = {};
      for (const c of (d && d.cycles) || []) idx[c.id] = c;
      this._mlById = idx;
    } catch (_) { /* leave prior index */ }
  }

  // On-device ML training status for the Tuning > ML Training card. No-op when
  // training is not available in this build.
  async _loadMlTrainingStatus(entryId) {
    if (!this._constants.mlTrainingAvailable) return;
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_ml_training_status`, entry_id: entryId });
      if (!this._isActiveEntry(entryId)) return;  // device switched mid-flight — drop stale response
      this._mlTrainingStatus = r;
    } catch (_) { /* leave prior status */ }
  }

  // Which profile curves the cycle dialog overlays (#462). A labelled cycle overlays
  // its label. An unlabelled one with pending detection feedback overlays the
  // profile the matcher suspected (since 0.5.7's label margin such cycles stay
  // unlabelled) plus the feedback's runner-up, since the margin to it is why the
  // cycle was not labelled. Null when there is nothing to overlay.
  _cycleOverlayPlan(cycleId, curve) {
    const label = curve && curve.profile_name;
    if (label) return { name: label, suspected: false, runnerUp: null };
    const fb = (this._feedbacks || []).find(f => f.cycle_id === cycleId);
    const name = fb && typeof fb.detected_profile === 'string' ? fb.detected_profile : '';
    if (!name) return null;
    const ru = (Array.isArray(fb.ranking) ? fb.ranking : []).find(c => c && typeof c.name === 'string' && c.name && c.name !== name);
    return { name, suspected: true, runnerUp: ru ? ru.name : null };
  }

  // Resolve the overlay plan for a freshly loaded cycle and fetch its envelopes.
  _loadCycleOverlays(entryId, cycleId, curve) {
    const m = this._modal;
    if (!m || m.type !== 'cycle-detail' || m.cycleId !== cycleId) return;
    m.overlayPlan = this._cycleOverlayPlan(cycleId, curve);
    if (!m.overlayPlan) return;
    this._fetchCycleProfileEnv(entryId, m.overlayPlan.name);
    if (m.overlayPlan.runnerUp) this._fetchCycleProfileEnv(entryId, m.overlayPlan.runnerUp, 'runnerUpEnv');
  }

  // Fetch a profile's envelope so the cycle modal can overlay it (into
  // `m[slot]`). Attaches to the currently-open cycle modal and re-renders.
  async _fetchCycleProfileEnv(entryId, profileName, slot = 'profileEnv') {
    if (!profileName) return;
    // The requested name is stored on the modal and the response is matched
    // against it: the overlaid profile is not always the cycle's label (#462).
    const m0 = this._modal;
    if (m0 && m0.type === 'cycle-detail') (m0.envFor = m0.envFor || {})[slot] = profileName;
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_profile_envelope`, entry_id: entryId, profile_name: profileName });
      // Ignore stale responses: while this request was in flight the modal may
      // have been closed or switched to a different cycle/device. Only apply the
      // envelope when the open cycle-detail modal still asked for this profile.
      const m = this._modal;
      if (m && m.type === 'cycle-detail'
          && m.entryId === entryId
          && m.envFor && m.envFor[slot] === profileName) {
        m[slot] = r.envelope || null;
        this._render();
      }
    } catch (_) { /* overlay is optional */ }
  }

  async _fetchSuggestions(entryId) {
    this._suggestionsError = false;
    try {
      const res = await this._ws({ type: `${_DOMAIN}/get_suggestions`, entry_id: entryId });
      if (!this._isActiveEntry(entryId)) return;  // device switched mid-flight
      this._suggestions = res.suggestions || [];
      this._lockedSuggestions = res.locked_suggestions || [];
    } catch (_) {
      if (this._isActiveEntry(entryId)) { this._suggestionsError = true; this._suggestions = []; }
    }
  }

  async _fetchProfiles(entryId) {
    this._profilesError = false;
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_profiles`, entry_id: entryId });
      if (!this._isActiveEntry(entryId)) return this._profiles;  // device switched mid-flight
      this._profiles = r.profiles || [];
      this._profileHealth = r.profile_health || {};
      this._profileTrends = r.profile_trends || {};
      this._coverageGaps = r.coverage_gaps || {};
      this._profileAdvisories = r.profile_advisories || [];
      this._profileTerminal = r.profile_terminal || {};
      this._profileMatcherCounts = r.profile_matcher_counts || {};
    } catch (_) { this._profilesError = true; /* keep previous data */ }
    return this._profiles;
  }

  // Shared envelope cache for overlay comparisons (group modal + cycle relabel).
  async _ensureProfileEnvs(entryId, names) {
    this._profileEnvCache = this._profileEnvCache || {};
    const missing = [...new Set(names)].filter(n => n && !(n in this._profileEnvCache));
    if (!missing.length) return this._profileEnvCache;
    await Promise.all(missing.map(async n => {
      try {
        const r = await this._ws({ type: `${_DOMAIN}/get_profile_envelope`, entry_id: entryId, profile_name: n });
        this._profileEnvCache[n] = (r && r.envelope) || null;
      } catch (_) { this._profileEnvCache[n] = null; }
    }));
    return this._profileEnvCache;
  }

  async _fetchProfileGroups(entryId) {
    this._profileGroupsError = false;
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_profile_groups`, entry_id: entryId });
      this._profileGroups = { groups: r.groups || [], min_cohesion: r.min_cohesion || 0.85 };
    } catch (_) { this._profileGroupsError = true; this._profileGroups = { groups: [], min_cohesion: 0.85 }; }
    return this._profileGroups;
  }

  // ── Device deep linking (#428) ────────────────────────────────────────────
  // `/ha-washdata?device=<entry_id|name>` opens the panel with that appliance
  // selected, so an automation's notification can link to the device it is about
  // instead of whichever one happened to be viewed last.

  // The ?device= token from the current URL, '' when absent. The query string is
  // read straight off window.location: HA's `route` carries only prefix/path, not
  // the search part, so there is nothing to read it from on the element.
  _deepLinkToken() {
    try {
      const raw = new URLSearchParams(window.location.search || '').get('device');
      return raw ? raw.trim() : '';
    } catch (_) { return ''; }
  }

  // Resolve a token to an index into this._devices, or -1 if nothing matches.
  // entry_id first (the only identifier that survives a rename), then the visible
  // title, then a slug comparison so the human-readable name works from a
  // notification template without worrying about case, spaces or accents.
  _deepLinkIdx(token) {
    const list = this._devices || [];
    const t = String(token || '').trim();
    if (!t || !list.length) return -1;
    const low = t.toLowerCase();
    let i = list.findIndex(d => String(d.entry_id || '').toLowerCase() === low);
    if (i < 0) i = list.findIndex(d => String(d.title || '').trim().toLowerCase() === low);
    if (i < 0) {
      const slug = _deviceSlug(t);
      if (slug) i = list.findIndex(d => _deviceSlug(d.title) === slug);
    }
    return i;
  }

  // Persist the selection as "last used". Guarded because localStorage throws
  // outright when site data is blocked, and an unguarded write in the middle of
  // _selectDevice would abort the switch after _selIdx had already moved but
  // before the outgoing device's caches were cleared.
  _rememberDevice(idx) {
    const dev = (this._devices || [])[idx];
    if (!dev) return;
    try { localStorage.setItem('wd-last-device', dev.entry_id); } catch (_) { /* ignore */ }
  }

  // True while the browser is still on this panel's own path. `location-changed`
  // is a global event that also fires on the way OUT of the panel, and that
  // navigation's URL must not be mistaken for a deep link of ours.
  // Unsaved Settings edits: real differences from the saved options, not touched
  // fields (opening a combo and leaving its value is not an edit). Snapshots the
  // form first so a value still only in the DOM counts.
  _unsavedSettingsCount() {
    if (this._tab !== 'settings' || !this.shadowRoot) return 0;
    this._snapshotFormToPending(this.shadowRoot);
    return Object.keys(this._changedOptions(this._pendingSettings || {})).length;
  }

  // Run `go` now, or once the user confirms discarding unsaved Settings edits.
  // One guard for a tab switch, a device switch, a deep link and leaving the panel.
  _guardUnsaved(go) {
    const n = this._unsavedSettingsCount();
    if (!n) { go(); return; }
    this._modal = {
      type: 'confirm',
      title: this._t('modal.discard_settings_title', {}, 'Discard unsaved changes?'),
      message: this._tText('modal.discard_settings_msg', {n}, `${n} setting change(s) are not saved yet. Leave Settings and discard them?`),
      okLabel: this._t('btn.discard', {}, 'Discard'),
      onOk: () => { this._pendingSettings = {}; this._dirtyOptKeys = new Set(); go(); },
    };
    this._render();
  }

  // A click on a same-origin link that leaves this panel (the HA sidebar, a link
  // to the automation editor, ...) while Settings holds unsaved edits: hold the
  // navigation and ask first. Capture phase on window, so it runs before HA's
  // router; composedPath() reaches anchors inside other shadow roots. Browser
  // reload/close is `beforeunload`; the browser Back button cannot be held.
  _maybeGuardOutboundClick(e) {
    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    const path = typeof e.composedPath === 'function' ? e.composedPath() : [];
    const a = path.find(n => n && n.tagName === 'A' && n.getAttribute && n.getAttribute('href'));
    if (!a || (a.target && a.target !== '_self') || a.hasAttribute('download')) return;
    let url;
    try { url = new URL(a.getAttribute('href'), window.location.href); } catch (_) { return; }
    if (url.origin !== window.location.origin) return;   // external: beforeunload covers it
    const own = this._panel && this._panel.url_path;
    if (own && url.pathname.split('/').filter(Boolean)[0] === own) return;   // staying here
    if (!this._unsavedSettingsCount()) return;
    e.preventDefault();
    e.stopImmediatePropagation();
    this._guardUnsaved(() => this._navigate(url.pathname + url.search + url.hash));
  }

  _onOwnPath() {
    const p = this._panel && this._panel.url_path;
    if (!p) return true;   // test shell / no panel info: assume ours
    return (window.location.pathname || '').split('/').filter(Boolean)[0] === p;
  }

  // The panel element survives an in-app navigation to its own URL, so a second
  // notification tap changes only the query string: no boot, no new element.
  // Re-resolve on every location change and honour the token even when it is
  // unchanged, so tapping the dryer's notification after manually switching to
  // the washer still lands back on the dryer.
  _onLocationChanged() {
    if (!this._initialized || !this._devices.length || !this._onOwnPath()) return;
    const token = this._deepLinkToken();
    if (!token) return;
    this._deepLinkApplied = token;
    const idx = this._deepLinkIdx(token);
    if (idx < 0) { console.warn(`[WashData panel] ?device=${token} matches no WashData device`); return; }
    if (idx !== this._selIdx) this._guardUnsaved(() => this._selectDevice(idx));   // persists the choice itself
  }

  async _selectDevice(idx) {
    if (idx === this._selIdx) return;
    // Commit any pending optimistic deletes for the outgoing device first, and
    // WAIT for them to settle: while _selIdx still points at the outgoing device
    // any restore-on-failure lands on the correct list, and no in-flight delete
    // response can mutate the device we're about to switch to.
    await this._flushPendingDeletes();
    this._selIdx = idx;
    this._rememberDevice(idx);
    this._pendingSettings = {};
    this._dirtyOptKeys = new Set();
    // Clear settings-form staged/cascade/undo state so the previous device's edits
    // never leak into the new one.
    this._prevOpts = null; this._cascadePending = {}; this._preCascadeOpts = null; this._stagedSuggestions = false;
    // Clear per-device caches so the new entry never reuses the previous device's
    // ML comparison / cycle-ML index / settings comparison / profile envelopes.
    this._mlComparison = null; this._mlById = {}; this._profileEnvCache = {};
    this._powerHistory = []; this._powerT0 = null; this._statusEnv = null; this._statusEnvName = null;
    this._statusPhases = []; this._statusPhasesName = null;
    this._cycleOffset = 0; this._cyclesTotal = 0; this._cyclesHasMore = false;
    this._importedOffset = 0; this._importedHasMore = false;
    this._settingsChangelog = null; this._settingsChangeByKey = {};
    this._powerData = { live: [], raw: [], cycle_active: false, cycle_elapsed_s: 0 };
    this._matchDebug = null;
    this._profiles = []; this._profileHealth = {}; this._profileTrends = {}; this._coverageGaps = {}; this._profileAdvisories = []; this._profileTerminal = {}; this._profileMatcherCounts = {}; this._opts = {}; this._optDefaults = {}; this._suggestions = []; this._lockedSuggestions = [];
    this._cycles = []; this._refCycles = []; this._recState = null; this._diag = null; this._importUndo = null; this._maintenance = null; this._phases = [];
    this._mlTrainingStatus = null;  // per-device; re-fetched by _fetchTabData
    this._setupStatus = null;       // per-device; re-fetched by _fetchTabData
    this._deviceAutomations = [];   // per-device; re-fetched on the settings tab
    this._selectMode = false; this._cycleSel = new Set();
    this._cycleFilter = { text: '', status: '' };
    this._profSubtab = 'profiles';
    // F3: reset Playground on device change.
    this._pgCycleId = ''; this._pgProfileName = '';
    this._pgPowerPts = null; this._pgEnvData = null;
    this._pgThreshStart = null; this._pgThreshStop = null; this._pgParamOverrides = {};
    // Live baseline + presets are per-device; re-fetched by _fetchTabData.
    this._pgEffective = null; this._pgPublishable = null;
    this._pgPresets = []; this._pgPresetSel = ''; this._pgPresetName = ''; this._pgPresetLimit = 0;
    this._pgSuggClassic = {};
    this._pgView = null; this._pgHoverT = null; this._pgLoadSeq++;
    this._pgNeedsRestart = false; this._pgLoading = false;
    this._pgDetail = null; this._pgHistory = null; this._pgSweepNew = null;
    // Stop tracking any in-flight batch task for the outgoing device (it keeps
    // running server-side + shows in the header pills; the drawer just detaches).
    this._pgHistoryTaskId = null; this._pgSweepTaskId = null;
    this._busy.delete('pg-history'); this._busy.delete('pg-sweep'); this._pgBatchProgress = null;
    // Cancel any pending detail re-run so it can't repopulate the outgoing device.
    if (this._pgDetailDebounceTimer) { clearTimeout(this._pgDetailDebounceTimer); this._pgDetailDebounceTimer = null; }
    // Reset the Community Store browse on device change (status re-fetched per-tab).
    this._storeView = 'brands'; this._storeDevice = null; this._storeProfile = null; this._storeQuery = '';
    this._storeDevices = []; this._storeProfiles = []; this._storeCycles = [];
    this._storeStatus = null; this._storeConnected = false; this._storeLoading = false;
    // Reset only the MODEL catalog on device switch: models are filtered by the
    // previous device's appliance type, so reusing them could save an invalid
    // brand/model combo. Brands are type-agnostic, so keep them loaded (reloading
    // them without a re-render is what left the brand dropdown empty).
    clearTimeout(this._brandSearchTimer); this._brandSearchTimer = null;
    this._catalog = {
      brands: this._catalog.brands, devices: undefined, forBrand: null,
      approvedOnly: this._catalog.approvedOnly,
      // Which brand prefixes have already been resolved travels with the rows.
      brandsFull: this._catalog.brandsFull, brandPrefixes: this._catalog.brandPrefixes,
    };
    if (this._entityListCache) delete this._entityListCache.store_model;
    const dev = this._devices[this._selIdx];
    if (dev) await this._fetchSuggestions(dev.entry_id);
    this._fetchTabData();  // loads tab data incl. Status power-history + profiles
  }

  // Patch just the device bar (and timestamp) in place so the live status stays
  // current on every poll without clobbering edits/scroll on the active tab.
  // "Connection lost" chip (audit UI-11): shown once a refresh failed or the last
  // good one is older than 2.5 poll periods. Patched in place on every poll.
  _htmlStaleChip() {
    const last = this._lastRefresh;
    const old = last && (Date.now() - last.getTime()) > 2.5 * this._pollMs;
    if (!this._devices.length || !(this._fetchFailed || old)) return '<div id="wd-stale" hidden></div>';
    const time = last ? _fmtTimeOfDay(last) : '';
    return `<div id="wd-stale" class="wd-stale" role="status">${_esc(this._tText('msg.connection_lost', {time}, `Connection lost - showing data from ${time}.`))}</div>`;
  }

  _refreshStaleChip() {
    const el = this.shadowRoot && this.shadowRoot.getElementById('wd-stale');
    if (el) el.outerHTML = this._htmlStaleChip();
  }

  _refreshDeviceBar() {
    const sr = this.shadowRoot;
    if (!sr) return;
    const bar = sr.querySelector('.wd-devbar');
    const html = this._htmlDeviceBar();
    if (bar && html) {
      const tmp = document.createElement('div');
      tmp.innerHTML = html;
      const fresh = tmp.firstElementChild;
      if (fresh) {
        bar.replaceWith(fresh);
        fresh.querySelectorAll('.wd-devcard[data-idx]').forEach(b => b.addEventListener('click', () => this._guardUnsaved(() => this._selectDevice(parseInt(b.dataset.idx, 10)))));
      }
    }
    // _lastRefresh kept for internal use; header no longer shows the timestamp.
  }

  // Patch only the log drawer body in-place - called on every poll when the
  // drawer is open, so logs stay live without a full page re-render.
  _refreshLogDrawer() {
    if (!this._logOpen) return;
    // Patch the log LINES in place (via the shared filtered renderer) so the filter
    // bar + search box are never wiped by the auto-refresh poll (which used to make
    // them flicker in and out) and the current filters stay applied …
    this._refreshLogViews();
    // … and refresh the device/component filter OPTION lists in place, so a device
    // or component that first appears in a freshly-fetched log becomes selectable
    // without a full re-render (the search box + current selection are preserved).
    this._refreshLogFilterOptions();
  }

  // Rebuild only the <option> lists of the device + component filter selects (built
  // from the current buffer's distinct devices/components), preserving each select's
  // current value and never touching the search input. Called on buffer change, not
  // on every keystroke.
  _refreshLogFilterOptions() {
    const sr = this.shadowRoot; if (!sr) return;
    const opts = (all, values, cur) =>
      `<option value="">${_esc(all)}</option>`
      + values.map(v => `<option value="${_esc(v)}" ${v === cur ? 'selected' : ''}>${_esc(v)}</option>`).join('');
    const devHtml = opts(this._t('log.all_devices', {}, 'All devices'), this._logDevices(), this._logDevice);
    const compHtml = opts(this._t('log.all_components', {}, 'All components'), this._logComponents(), this._logComponent);
    sr.querySelectorAll('.wd-log-filter[data-logfilter="device"]').forEach(el => { el.innerHTML = devHtml; el.value = this._logDevice || ''; });
    sr.querySelectorAll('.wd-log-filter[data-logfilter="component"]').forEach(el => { el.innerHTML = compHtml; el.value = this._logComponent || ''; });
  }

  async _fetchTabData() {
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    const eid = dev.entry_id;
    this._tabLoading = true;
    this._render();
    try {
      if (this._tab === 'status') {
        this._powerData = await this._ws({ type: `${_DOMAIN}/get_power_history`, entry_id: eid, with_raw: this._pref('show_raw_active', false) });
        if (!this._profiles.length) await this._fetchProfiles(eid);
        // F1 onboarding: the getting-started card needs the real cycle count.
        // Load it only when there are no profiles yet (the sole state where the
        // card can appear) and it hasn't been loaded for this device, so the
        // count is correct right after a device switch resets it.
        if (!this._profiles.length && !this._cycles.length) await this._fetchCycles(eid);
        // D1: matched-profile phases for the compact Status phase timeline.
        await this._ensureStatusPhases(eid, dev.current_program);
        if (this._pref('show_debug', false)) {
          try { this._matchDebug = await this._ws({ type: `${_DOMAIN}/get_match_debug`, entry_id: eid }); } catch (_) { /* keep */ }
        }
        if (this._canEdit()) { try { this._recState = await this._ws({ type: `${_DOMAIN}/get_recording_state`, entry_id: eid }); } catch (_) {} }
        // Fetch setup guidance phase (always, not just when profileCount === 0)
        try {
          this._setupStatus = await this._ws({
            type: `${_DOMAIN}/get_setup_status`,
            entry_id: eid,
          });
        } catch (_) { this._setupStatus = null; }
      } else if (this._tab === 'history' && this._historySub === 'maintenance') {
        if (!this._maintenance) await this._fetchMaintenance(eid);
      } else if (this._tab === 'history') {
        await this._fetchCycles(eid);
        if (!this._profiles.length) await this._fetchProfiles(eid);
        // Always load pending feedbacks (cheap) so the merged "needs review"
        // queue in the Cycles list can flag them.
        try { const r = await this._ws({ type: `${_DOMAIN}/get_feedbacks`, entry_id: eid }); this._feedbacks = r.feedbacks || []; } catch (_) {}
        // Refresh store connection state so the golden-cycle "Share to store"
        // action reflects the current account (background; online features only).
        if (this._constants.storeOnlineAvailable && this._onlineEnabled()) {
          this._loadStoreStatus(eid).then(() => { if (this._tab === 'history') this._render(); });
        }
        // Attach ML assessment (health / review / events) to cycles so the
        // unified cycle modal can inspect + review from one place. This is the
        // slowest fetch (it scores every cycle), so load it in the BACKGROUND:
        // the cycle list renders immediately and ML health fills in when ready.
        if (this._constants.mlLabEnabled) {
          this._mlLoading = true;
          this._loadMlIndex(eid).finally(() => {
            this._mlLoading = false;
            // Backfill a cycle modal that was opened before ML finished loading.
            const md = this._modal;
            if (md && md.type === 'cycle-detail' && !md.ml && this._mlById[md.cycleId]) {
              md.ml = this._mlById[md.cycleId];
            }
            if (this._tab === 'history' || (md && md.type === 'cycle-detail')) this._render();
          });
        }
      } else if (this._tab === 'profiles') {
        await this._fetchProfiles(eid);
        // Groups require DTW cohesion calculations - load in background so the
        // profile list renders immediately while groups fill in behind it.
        this._fetchProfileGroups(eid).then(() => { if (this._tab === 'profiles') this._render(); });
        // D2: profile cards draw a duration sparkline from recent cycles. Load
        // them in the background if not already fetched, then repaint.
        if (!this._cycles.length) this._fetchCycles(eid).then(() => { if (this._tab === 'profiles') this._render(); });
        if (this._profSubtab === 'phase-catalog') {
          try { const r = await this._ws({ type: `${_DOMAIN}/get_phase_catalog`, entry_id: eid }); this._phases = r.phases || []; } catch (_) {}
        }
      } else if (this._tab === 'settings') {
        const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid });
        if (!this._isActiveEntry(eid)) return;  // device switched mid-flight — drop stale response
        this._opts = r.options || {};
        this._optDefaults = r.defaults || {};  // device-resolved cadence defaults (#396)
        await this._fetchSuggestions(eid);
        // D7: "What changed" — load the settings changelog (best-effort; older
        // backends without this command simply show no change markers).
        await this._fetchSettingsChangelog(eid);
        if (this._constants.mlTrainingAvailable) {
          this._loadMlTrainingStatus(eid).finally(() => { if (this._tab === 'settings') this._renderPreservingFormEdits(); });
        }
        // Automations related to this device (for the Notifications > Automations list).
        this._autoLoading = true;
        this._loadDeviceAutomations(eid).finally(() => {
          this._autoLoading = false;
          if (this._tab === 'settings') this._renderPreservingFormEdits();
        });
        // Community-store account card lives at the bottom of the Settings tab;
        // load the connection status in the background so it fills in when ready.
        if (this._constants.storeOnlineAvailable) {
          this._loadStoreStatus(eid).finally(() => { if (this._tab === 'settings') this._renderPreservingFormEdits(); });
        }
      } else if (this._tab === 'store') {
        try { const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid }); if (!this._isActiveEntry(eid)) return; this._opts = r.options || {}; } catch (_) {}
        if (!this._profiles.length) this._fetchProfiles(eid);  // needed for the import "merge into existing" dropdown
        await this._loadStoreStatus(eid);
        if (!this._isActiveEntry(eid)) return;
        this._ensureStoreConnectListener();
        // Kick off the initial browse in the background (renders its own spinner). It
        // opens on the declared brand -- the useful, and cheapest, default: the query
        // then shares a cache key with the Settings model picker.
        if (this._onlineEnabled()) this._storeSearch(this._storeBrandScope());
      } else if (this._tab === 'advanced' && this._panelSubtab === 'ml') {
        const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid });
        if (!this._isActiveEntry(eid)) return;  // device switched mid-flight — drop stale response
        this._opts = r.options || {};
        this._loadMlTrainingStatus(eid).finally(() => { if (this._tab === 'advanced' && this._panelSubtab === 'ml') this._renderPreservingFormEdits(); });
      } else if (this._tab === 'playground') {
        // These four are independent of each other, so they go out together rather
        // than in series: on a slow host the tab used to wait out four sequential
        // round-trips before rendering anything.
        //
        // Settings are fetched WITHOUT suggestions (see _pgFetchSuggestions): they only
        // label two buttons, and computing them runs statistics over every clean cycle.
        await Promise.all([
          (async () => {
            try {
              const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid });
              if (this._isActiveEntry(eid)) this._opts = r.options || {};
            } catch (_) {}
          })(),
          // Always open on the integration's CURRENT settings: the backend reads them
          // back off the live detector/matcher config, so no stale schema default can
          // leak into the sandbox.
          this._pgFetchSettings(eid, false),
          this._fetchCycles(eid),
          this._profiles.length ? Promise.resolve() : this._fetchProfiles(eid),
        ]);
        if (!this._isActiveEntry(eid)) return;
        this._pgFetchSuggestions(eid);
        // Auto-select most recent cycle on first load. Profile defaults to
        // auto-detect ('') so the sim shows what the matcher WOULD pick, not the
        // cycle's stored label.
        if (!this._pgCycleId && this._cycles?.length) {
          this._pgCycleId = this._cycles[0].id;
          this._pgProfileName = '';
        }
        // Clear any stale "restart" flag on tab entry: it reflects only the LAST
        // command outcome, so a flag left over from a startup race (browser
        // reconnected before the integration finished registering its WS commands)
        // must not persist. If a playground command genuinely fails now, it
        // re-appears immediately; otherwise the note stays gone.
        this._pgNeedsRestart = false; this._pgRestartRetries = 0;
        // Re-attach the drawer to any in-flight/just-finished batch for this
        // device (e.g. a task that was running before a page refresh).
        this._pgAdoptExisting();
      } else if (this._tab === 'advanced') {
        // Advanced sub-tabs lazy-load on click; ensure Diagnostics still fills in
        // when the tab is (re)entered while already on it.
        if (this._panelSubtab === 'diagnostics' && !this._diag) {
          this._fetchToolsData(eid).then(() => { if (this._tab === 'advanced') this._render(); });
        }
      }
      this._tabError = null;
    } catch (err) {
      console.warn('[WashData panel] tab data fetch error -', _wsErrText(err), err);
      // A failed get_options left "Loading settings..." up forever (audit UI-11).
      this._tabError = this._tab;
    } finally {
      this._tabLoading = false;
      this._render();
    }
  }

  async _fetchToolsData(eid) {
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_diagnostics`, entry_id: eid });
      if (!this._isActiveEntry(eid)) return;  // device switched mid-flight — drop stale result
      this._diag = r.stats || {};
      // The last replace import's restore point rides along on this fetch (item 195).
      this._importUndo = r.import_undo || null;
    } catch (err) {
      console.warn('[WashData panel] tools fetch error -', _wsErrText(err), err);
      this._diag = { _error: String(err && err.message || err) };
    }
  }

  async _fetchMaintenance(eid) {
    try {
      const r = await this._ws({ type: `${_DOMAIN}/get_maintenance_log`, entry_id: eid });
      this._maintenance = r || {};
    } catch (err) {
      console.warn('[WashData panel] maintenance fetch error -', _wsErrText(err), err);
      this._maintenance = { _error: String(err && err.message || err) };
    }
  }

  async _fetchLogs() {
    try {
      // Fetch the whole buffer; level/device/component/search are filtered
      // client-side so changing a filter is instant (no refetch, no focus loss).
      const r = await this._ws({ type: `${_DOMAIN}/get_logs`, level: null, limit: 500 });
      this._logs = r.logs || [];
    } catch (err) {
      console.warn('[WashData panel] logs fetch error -', _wsErrText(err), err);
    }
  }

  // Distinct components (modules) present in the buffer, for the filter dropdown.
  _logComponents() {
    return [...new Set((this._logs || []).map(r => r.logger).filter(Boolean))].sort();
  }

  // Distinct device names present in the buffer.
  _logDevices() {
    return [...new Set((this._logs || []).map(r => r.device).filter(Boolean))].sort();
  }

  // Apply level + device + component + search filters (all client-side).
  _filteredLogRecords() {
    const order = { DEBUG: 10, INFO: 20, WARNING: 30, ERROR: 40, CRITICAL: 50 };
    const minL = this._logLevel ? (order[this._logLevel] || 0) : 0;
    const dev = this._logDevice, comp = this._logComponent;
    const q = (this._logSearch || '').trim().toLowerCase();
    return (this._logs || []).filter(r => {
      if (minL && (order[r.level] || 0) < minL) return false;
      if (dev && r.device !== dev) return false;
      if (comp && r.logger !== comp) return false;
      if (q && !((r.msg || '').toLowerCase().includes(q) || (r.logger || '').toLowerCase().includes(q))) return false;
      return true;
    });
  }

  _logLinesHtml() {
    const recs = this._filteredLogRecords();
    if (!recs.length) {
      // Distinguish "filtered everything out" from "the buffer is genuinely empty"
      // so an empty Logs view is never mistaken for a broken backend.
      const hasAny = (this._logs || []).length > 0;
      return hasAny
        ? `<p class="wd-info" style="margin:8px 0">${this._t('msg.no_logs_match', {}, 'No log records match these filters.')}</p>`
        : `<p class="wd-info" style="margin:8px 0">${this._t('msg.no_logs', {}, 'No log records buffered yet.')}</p>`;
    }
    return recs.slice().reverse().map(r => {
      const t = _fmtTimeOfDay(new Date(r.ts * 1000));
      const dev = r.device ? `<span class="wd-logdev">${_esc(r.device)}</span>` : '';
      return `<div class="wd-logline"><span class="wd-logts">${t}</span><span class="wd-loglvl wd-lvl-${_esc(r.level)}">${_esc(r.level)}</span><span class="wd-logcomp">${_esc(r.logger || '')}</span>${dev}${_esc(r.msg)}</div>`;
    }).join('');
  }

  // Shared filter row (level / device / component / search) for both the drawer
  // and the Advanced Logs page; `ctx` keeps element ids unique per context.
  _htmlLogFilters(ctx) {
    const levels = ['', 'DEBUG', 'INFO', 'WARNING', 'ERROR'];
    const lvlSel = levels.map(l => `<option value="${l}" ${this._logLevel === l ? 'selected' : ''}>${l || this._t('log.all_levels', {}, 'All levels')}</option>`).join('');
    const devSel = `<option value="">${_esc(this._t('log.all_devices', {}, 'All devices'))}</option>`
      + this._logDevices().map(d => `<option value="${_esc(d)}" ${this._logDevice === d ? 'selected' : ''}>${_esc(d)}</option>`).join('');
    const compSel = `<option value="">${_esc(this._t('log.all_components', {}, 'All components'))}</option>`
      + this._logComponents().map(c => `<option value="${_esc(c)}" ${this._logComponent === c ? 'selected' : ''}>${_esc(c)}</option>`).join('');
    return `<select class="wd-log-filter" data-logfilter="level" data-ctx="${ctx}" style="font-size:.8em;padding:2px 4px">${lvlSel}</select>
      <select class="wd-log-filter" data-logfilter="device" data-ctx="${ctx}" style="font-size:.8em;padding:2px 4px">${devSel}</select>
      <select class="wd-log-filter" data-logfilter="component" data-ctx="${ctx}" style="font-size:.8em;padding:2px 4px">${compSel}</select>
      <input class="wd-log-filter wd-log-search" data-logfilter="search" data-ctx="${ctx}" type="search" value="${_esc(this._logSearch)}" placeholder="${_esc(this._t('log.search_ph', {}, 'Search logs…'))}" style="font-size:.8em;padding:2px 6px;min-width:120px">`;
  }

  // Update just the log-line containers in place (no full render -> keeps the
  // search box focused while typing).
  _refreshLogViews() {
    const sr = this.shadowRoot; if (!sr) return;
    const html = this._logLinesHtml();
    ['wd-log-lines-drawer', 'wd-log-lines-page'].forEach(id => {
      const el = sr.getElementById(id);
      if (el) el.innerHTML = html;
    });
  }

  // Keep the same filter mirrored across contexts (drawer + Logs page) if both
  // are mounted, without a full re-render.
  _syncLogFilters(changed) {
    const sr = this.shadowRoot; if (!sr) return;
    sr.querySelectorAll(`.wd-log-filter[data-logfilter="${changed.dataset.logfilter}"]`).forEach(el => {
      if (el !== changed && el.value !== changed.value) el.value = changed.value;
    });
  }

  async _fetchRecState(eid) {
    try { this._recState = await this._ws({ type: `${_DOMAIN}/get_recording_state`, entry_id: eid }); } catch (_) {}
  }

  async _fetchFeedbacks(eid) {
    try { const r = await this._ws({ type: `${_DOMAIN}/get_feedbacks`, entry_id: eid }); this._feedbacks = r.feedbacks || []; } catch (_) {}
  }

  async _fetchPhases(eid) {
    try { const r = await this._ws({ type: `${_DOMAIN}/get_phase_catalog`, entry_id: eid }); this._phases = r.phases || []; } catch (_) {}
  }

  // ── Localization / display helpers (single source = backend) ────────────────

  _localize(key, fallback) {
    try {
      const t = this._hass && this._hass.localize ? this._hass.localize(key) : '';
      return (t && t !== key) ? t : fallback;
    } catch (_) { return fallback; }
  }

  _tLookup(key, lang) {
    // Walk dot-separated key path into the language's panel translation dict.
    const dict = this._panelTrans && (this._panelTrans[lang] || this._panelTrans['en']);
    if (!dict) return null;
    const val = key.split('.').reduce((o, k) => (o && o[k] !== undefined ? o[k] : null), dict);
    return (val && typeof val === 'string') ? val : null;
  }

  // The language the user reads the panel in: the per-user override, else HA's.
  _uiLang() {
    const langOverride = this._panelCfg && this._panelCfg.prefs && this._panelCfg.prefs.lang_override;
    return langOverride || (this._hass && this._hass.locale && this._hass.locale.language) || '';
  }

  // Plural-aware lookup (audit UI-08): with a count, try `key_<category>` for the
  // language's own CLDR category, then `key_other`, then the plain key, so a
  // language that ships a single form keeps working unchanged.
  _tResolve(key, lang, count) {
    if (count != null) {
      const cat = _pluralCat(lang, count);
      const hit = this._tLookup(`${key}_${cat}`, lang)
        || (cat !== 'other' ? this._tLookup(`${key}_other`, lang) : null);
      if (hit) return hit;
    }
    return this._tLookup(key, lang);
  }

  // Translate `key` for an HTML context. Every var is HTML-escaped (audit UI-21):
  // translated templates are trusted, substituted values are not. A var that is
  // markup on purpose must be wrapped in _html(). For a sink that escapes on its
  // own or is plain text (toast, confirm modal, native confirm(), title/aria via
  // _esc, textContent) use _tText, or the value is escaped twice.
  //
  // Plurals: a numeric `count` (else `n`) var selects key_one / key_other / ...
  _t(key, vars = {}, fallback = '') { return this._tr(key, vars, fallback, true); }

  // Same as _t, but substitutes vars verbatim: the result is plain text.
  _tText(key, vars = {}, fallback = '') { return this._tr(key, vars, fallback, false); }

  _tr(key, vars, fallback, html) {
    let s;
    vars = vars || {};
    const lang = this._uiLang();
    const c = typeof vars.count === 'number' ? vars.count : vars.n;
    const count = (typeof c === 'number' && isFinite(c)) ? c : null;
    if (this._panelTrans) {
      // Explicit user-language lookup: user pref → en → JS fallback
      s = (lang && this._tResolve(key, lang, count)) || this._tResolve(key, 'en', count) || fallback;
    } else {
      // Bundle not yet loaded: use HA's localize (also user-language) or JS fallback
      s = this._localize(`component.${_DOMAIN}.panel.${key}`, fallback);
    }
    if (typeof s !== 'string') return s;
    for (const [k, v] of Object.entries(vars)) {
      const token = `{${k}}`;
      if (!s.includes(token)) continue;
      const val = v instanceof _TrustedHtml ? v.html : (html ? _esc(String(v)) : String(v));
      // split/join, not String.replace: a value containing `$&` or `$1` must not be
      // read as a replacement pattern.
      s = s.split(token).join(val);
    }
    return s;
  }

  _stateColor(s) {
    const c = this._constants.stateColors || {};
    return c[s] || c.unknown || 'var(--disabled-color, #bdbdbd)';
  }

  // A stored cycle's status enum as the user reads it. Plain text: both callers
  // _esc() the result. An unknown value passes through as-is (escaped there).
  _cycleStatusLabel(st) {
    return {
      completed: this._tText('status.completed', {}, 'Completed'),
      interrupted: this._tText('status.interrupted', {}, 'Interrupted'),
      force_stopped: this._tText('status.force_stopped', {}, 'Force stopped'),
      active: this._tText('status.active', {}, 'Active'),
    }[st] || st;
  }

  _stateLabel(s) {
    const fb = (s || 'unknown').replace(/_/g, ' ').replace(/\b\w/g, ch => ch.toUpperCase());
    return this._localize(`component.${_DOMAIN}.entity.sensor.washer_state.state.${s}`, fb);
  }

  _deviceTypeLabel(id) {
    const entry = (this._constants.deviceTypes || []).find(d => d.id === id);
    const fb = entry ? entry.label : (id || '').replace(/_/g, ' ');
    return this._localize(`component.${_DOMAIN}.selector.device_type.options.${id}`, fb);
  }

  // Device-type <select> options. `current` is the stored value: get_constants is
  // fetched once and its failure is swallowed (_constantsLoaded is set either way),
  // so deviceTypes can stay empty for the whole session. An empty option list would
  // make the select read back as "" and overwrite device_type on the next save, so
  // always carry the stored type (#406).
  _deviceTypeOpts(current) {
    const out = (this._constants.deviceTypes || [])
      .map(d => [d.id, this._deviceTypeLabel(d.id)]);
    if (current && !out.some(([id]) => String(id) === String(current))) {
      out.push([current, this._deviceTypeLabel(current)]);
    }
    return out;
  }

  // HA device-registry options for the "group under" picker.
  //
  // #406: the device registry reaches the frontend asynchronously, so an early
  // paint can see an empty map - and a linked device can also have been deleted.
  // Either way the stored id has no matching <option>, the browser silently
  // displays the first one ("- None -"), and both the pending-edit snapshot and
  // the save collector read that back as "the user cleared the link" - wiping
  // linked_device (and the device's via_device_id) on an unrelated save. Always
  // carry an option for the stored value so the field round-trips.
  _deviceOpts(current) {
    const out = [['', '- None -']];
    const devs = this._hass && this._hass.devices ? this._hass.devices : {};
    // #418: never offer this entry's OWN WashData device. HA refuses a device as
    // its own via_device (2026.9 raises, which aborted setup for the whole entry),
    // and the registry names that device after the entry title - typically the same
    // name the user gave the plug - so it was easy to pick by mistake. A stored
    // self-id is dropped rather than carried below, so the field reads back as
    // "- None -" and the next save clears the broken option.
    const selfId = this._ownDeviceId();
    Object.values(devs).forEach(d => {
      if (selfId && String(d.id) === selfId) return;
      const name = d.name_by_user || d.name || d.id;
      out.push([d.id, name]);
    });
    if (current && String(current) !== selfId
        && !out.some(([id]) => String(id) === String(current))) {
      out.push([current, this._tText('lbl.device_unresolved', {id: current}, `Unavailable device (${current})`)]);
    }
    return out;
  }

  // HA device-registry id of the WashData device belonging to the SELECTED entry,
  // or '' when it cannot be resolved. The registry reaches the frontend
  // asynchronously (#406), so an empty/partial map must yield '' - never a guess -
  // or _deviceOpts would drop a perfectly valid stored link.
  _ownDeviceId() {
    const dev = this._devices && this._devices[this._selIdx];
    const eid = dev && dev.entry_id;
    if (!eid) return '';
    const devs = this._hass && this._hass.devices ? this._hass.devices : {};
    for (const d of Object.values(devs)) {
      if (!d || !d.id) continue;
      const ids = Array.isArray(d.identifiers) ? d.identifiers : [];
      if (ids.some(p => Array.isArray(p) && p[0] === _DOMAIN && String(p[1]) === String(eid))) return String(d.id);
      if (Array.isArray(d.config_entries) && d.config_entries.map(String).includes(String(eid))) return String(d.id);
    }
    return '';
  }

  // ── Access / panel-config helpers ───────────────────────────────────────────

  // Apply the user's panel font-size multiplier (#accessibility). All panel sizes
  // are em-relative and :host has no explicit font-size, so setting the host's
  // font-size scales the whole panel. Clamped to the same bounds the backend
  // enforces so a stale/bad value can never break rendering.
  _applyFontScale(scale) {
    let s = parseFloat(scale);
    if (!isFinite(s)) s = 1.0;
    s = Math.max(0.7, Math.min(2.0, s));
    this.style.fontSize = (s === 1.0) ? '' : (Math.round(s * 1000) / 10) + '%';
  }

  _applyPanelConfig() {
    const cfg = this._panelCfg;
    if (!cfg) return;
    this._applyFontScale((cfg.prefs && cfg.prefs.font_scale) || 1.0);
    // lang_override arrives here (not at boot). If the user picked a language we
    // didn't eagerly load, fetch it now and re-render once it lands.
    const override = cfg.prefs && cfg.prefs.lang_override;
    if (override && !(this._panelTrans && this._panelTrans[override])) {
      this._loadPanelLang(override).then(() => this._render()).catch(() => {});
    }
    const panel = cfg.panel || {};
    if (!this._tabInitialized) {
      const dt = (cfg.prefs && cfg.prefs.default_tab) || panel.default_tab;
      if (dt && ['status', 'history', 'profiles', 'settings', 'playground'].includes(dt)) this._tab = dt;
      this._tabInitialized = true;
    }
  }

  _isAdmin() { return !!(this._panelCfg && this._panelCfg.is_admin); }
  _curPerm() { const d = this._devices[this._selIdx]; return (d && d.perm) || 'full'; }
  _canEdit() { const p = this._curPerm(); return this._isAdmin() || p === 'edit' || p === 'full'; }
  _canFull() { const p = this._curPerm(); return this._isAdmin() || p === 'full'; }

  // Online features are integration-wide (device-agnostic): the switch + the GitHub
  // connection live in the header gear's "Online & Community" pane, not per device.
  _onlineEnabled() {
    return !!(this._constants && this._constants.storeOnlineAvailable && this._constants.storeOnlineEnabled);
  }

  _visibleTabIds() {
    // Primary tabs. My Preferences, Panel Settings, Access Control and Online &
    // Community live in the header gear; Diagnostics / ML Training stay in the
    // "Advanced" tab and Maintenance sits under Cycles. Per-cycle ML health/review stays inline in Cycles.
    const admin = this._isAdmin();
    const hidden = (!admin && this._panelCfg && this._panelCfg.panel && this._panelCfg.panel.hidden_tabs) || [];
    const ids = ['status', 'history', 'profiles'];
    if (this._canEdit()) ids.push('settings');
    // F3: Playground (what-if simulator / A-B / DTW inspector) — edit access only.
    if (this._canEdit()) ids.push('playground');
    // Community Store — only when the backend exposes it AND online features are on.
    if (this._canEdit() && this._onlineEnabled()) ids.push('store');
    // Advanced (Diagnostics, ML Training) is editor-only since Maintenance moved
    // to Cycles; a read user would get an empty tab.
    if (this._canEdit()) ids.push('advanced');
    return ids.filter(id => admin || !hidden.includes(id));
  }

  // ── Busy / spinner infrastructure ───────────────────────────────────────────

  async _busyRun(key, fn) {
    this._busy.add(key);
    this._render();
    try { return await fn(); }
    finally { this._busy.delete(key); this._render(); }
  }

  // Restore previous profile-panel modal (from cleanup → cycle-detail flow), or close to null.
  async _closeCycleDetail(eid) {
    const prev = this._prevModal;
    this._prevModal = null;
    if (prev && prev.type === 'profile-panel') {
      this._modal = prev;
      this._render();
      if (prev.tab === 'cleanup') {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/get_profile_cycles`, entry_id: eid, profile_name: prev.name });
          if (this._modal && this._modal.type === 'profile-panel' && this._modal.name === prev.name) {
            this._modal.cleanup = { cycles: r.cycles || [], selected: new Set() };
            this._render();
            this._drawSpaghetti();
          }
        } catch (_) { /* non-fatal */ }
      }
    } else {
      this._modal = null;
      this._render();
    }
  }

  // ── Render ────────────────────────────────────────────────────────────────

  // Scroll preservation across a full re-render (#443, #449). Keyed by selector
  // rather than by element, because the elements themselves do not survive the swap.
  //
  // Three questions decide what happens to a scroll position, and they are answered
  // here rather than at the ~15 sites that trigger a render:
  //
  //  1. WHICH containers. The panel scrolls internally, so .wd-main is the page, but
  //     it is not the only scroller: an open dialog, the log views, a wide table and
  //     the horizontal tab strip all scroll on their own and all get destroyed by the
  //     same swap. #443 carried the first two; the rest reset on every poll.
  //  2. PRESERVE or go home. A re-render is not navigation. The Overview re-renders
  //     every few seconds while a cycle runs (#449), and so do the background fetches
  //     that fill a tab in behind its first paint - none of those is the user asking
  //     to be somewhere else. Changing tab or device is, and only that.
  //  3. CLAMP or carry. Clamping to the new tree's height is right when the tree
  //     genuinely got shorter, and wrong when it is the _tabLoading placeholder: that
  //     one is a spinner a few dozen pixels tall, so clamping against it destroys the
  //     position a moment before the real tree comes back. Carry it instead.

  // Reset on navigation, preserved across every other re-render.
  _SCROLLERS = ['.wd-main', '.wd-modal', '.wd-logs', '.wd-log-drawer-body', '.wd-table-wrap', '.wd-sd-tree'];
  // Navigation chrome: preserved across navigation too. Clicking a tab must not also
  // scroll the strip the tab is in - on a narrow screen that strip overflows, and
  // moving it is how the tab you just pressed ends up off-screen.
  _SCROLLERS_CHROME = ['.wd-tabs'];

  // `sel|i/n` rather than `sel`: several elements can match one selector (tables), and
  // folding the match count into the key means a list that grew or shrank between
  // renders simply misses instead of applying row 3's offset to a different table.
  // Keys are index-based, so a scroller INSIDE a dialog has to be keyed apart
  // from the page ones or the index shifts as dialogs open and close. It also
  // has to be recognisable as modal-scoped, because _render drops the modal's
  // keys when the dialog or its tab changes (see _modalNavKey): filtering only
  // '.wd-modal|' missed '.wd-table-wrap' and '.wd-sd-tree', so the Cleanup
  // table, the history-import review table and the export-select /
  // import-wizard / store-share-device trees all carried one offset between
  // different dialogs - scroll the export tree, close it, open the import
  // wizard, and it opens part-way down.
  _MODAL_KEY_PREFIX = 'modal:';

  _eachScroller(sels, fn) {
    const sr = this.shadowRoot;
    if (!sr) return;
    for (const sel of sels) {
      const els = Array.from(sr.querySelectorAll(sel));
      // '.wd-modal' is the dialog itself, not something nested in one.
      const nested = el => sel !== '.wd-modal' && !!el.closest('.wd-modal');
      for (const scoped of [false, true]) {
        const group = els.filter(el => nested(el) === scoped);
        const prefix = scoped ? this._MODAL_KEY_PREFIX : '';
        group.forEach((el, i) => fn(el, `${prefix}${sel}|${i}/${group.length}`));
      }
    }
  }

  _captureScroll() {
    if (!this.shadowRoot) return null;
    const out = {};
    this._eachScroller([...this._SCROLLERS, ...this._SCROLLERS_CHROME], (el, key) => {
      if (el.scrollTop || el.scrollLeft) out[key] = { top: el.scrollTop, left: el.scrollLeft };
    });
    return out;
  }

  // Drop everything but the navigation chrome - what a tab or device change wants.
  _scrollChromeOnly(saved) {
    if (!saved) return saved;
    const out = {};
    for (const [key, pos] of Object.entries(saved)) {
      if (this._SCROLLERS_CHROME.some(sel => key.startsWith(`${sel}|`))) out[key] = pos;
    }
    return out;
  }

  _restoreScroll(saved) {
    if (!saved || !this.shadowRoot) return;
    this._eachScroller([...this._SCROLLERS, ...this._SCROLLERS_CHROME], (el, key) => {
      const pos = saved[key];
      if (!pos) return;
      // Clamp: the new tree may be shorter (a section collapsed, a list filtered),
      // in which case the browser would silently clamp anyway - do it explicitly so
      // the value we write is the value we meant.
      const maxTop = Math.max(0, el.scrollHeight - el.clientHeight);
      const maxLeft = Math.max(0, el.scrollWidth - el.clientWidth);
      el.scrollTop = Math.min(pos.top, maxTop);
      el.scrollLeft = Math.min(pos.left, maxLeft);
    });
  }

  // "Where am I" as one string: the coordinates a *click on a navigation strip*
  // changes, and nothing else. A change here is the user asking to be somewhere new,
  // which is the only thing that outranks preserving the scroll position.
  //
  // Deliberately excluded: filters and searches (_settingsSearch, _cycleFilter) are
  // not navigation, and neither is _pgAnalysisTab - the Playground flips that one
  // itself when a background batch finishes, and jumping to the top for that is
  // exactly the complaint in #449.
  _navKey() {
    return [
      this._tab, this._selIdx, this._panelSubtab, this._profSubtab,
      this._toolsSubtab, this._settingsSec, this._storeView,
    ].join('|');
  }

  // Which dialog, and which of its tabs, is on screen. _navKey carries no modal
  // state, and _captureScroll files the dialog's offset under the single key
  // '.wd-modal|0/1' - identical for every dialog and every dialog tab. So
  // switching pp-tab-* Overview -> Cleanup restored Overview's offset into
  // Cleanup, gear-settings did the same, and _closeCycleDetail applied the
  // cycle inspector's offset to the profile panel underneath it. Those are
  // navigations the user asked for, so the modal's scrollers start at the top,
  // exactly as `navigated` does it for the page.
  _modalNavKey() {
    const m = this._modal;
    // `tab` covers profile-panel and gear-settings, but cycle-detail keeps its
    // Inspect/Trim/Split/Review view in `mode` and the import wizards keep their
    // step in `step` - without those, switching view inside those dialogs kept
    // the previous view's offset, which is the same bug one level down.
    if (!m) return '';
    // The identity must be STABLE for as long as the dialog is open, so it can
    // never be read from an editable field. `profile-group` keys on `orig`
    // (the group being edited, or null for a new one) rather than `name`: the
    // `wd-pg-name` input writes every keystroke into `m.name` without a render,
    // and the member-checkbox handler copies that value in again before it calls
    // `_render()`. Keying on `name` therefore made ticking a member after typing
    // look like navigation, so the scroll keys were dropped and the dialog jumped
    // back to the top - the same wrong reset this helper exists to prevent, in the
    // other direction.
    const ident = m.type === 'profile-group'
      ? (m.orig || '')
      : (m.name || m.cycleId || '');
    return [m.type, ident, m.tab || m.mode || m.step || ''].join('|');
  }

  _render() {
    if (!this._container) return;
    // Sync the module-level date-display mode from the user's saved preference so
    // _fmtDate (a module helper) honors relative/absolute without threading it
    // through every call site.
    _datePref = this._pref('date_format', 'relative');
    _syncUiLocale(this._uiLang(), this._hass && this._hass.locale);
    // Capture the element that had focus BEFORE we replace the DOM: innerHTML wipes
    // it, so this is the only chance to remember the trigger to return focus to when
    // a modal closes (a11y). Passed into _syncModalFocus below.
    const sr0 = this.shadowRoot;
    const focusedBefore = sr0
      ? (sr0.activeElement || (this.getRootNode() && this.getRootNode().activeElement) || null)
      : null;
    // Outside dialogs, a background refresh (every 6-20 s during a cycle) dropped
    // keyboard focus to <body> (audit UI-04). Remember the control by its identity
    // so the matching control in the new DOM can take it back.
    const focusKeyBefore = (!this._modalFocusActive && sr0 && sr0.activeElement) ? _focusKey(sr0.activeElement) : null;
    // A pinned touch readout (#413) is anchored to a crosshair this swap is
    // about to erase, so it would be left floating with stale numbers over the
    // new DOM. Drop it with the crosshair it describes.
    this._hideGraphTip();
    // #443/#449: the swap below destroys .wd-main - the element that actually
    // scrolls, since the panel scrolls internally - and the replacement starts at
    // scrollTop 0. Every re-render therefore threw the user back to the top. Focus is
    // already carried across the swap a few lines up; scroll is the same problem and
    // gets the same treatment. See the block above _SCROLLERS for what is preserved
    // and when.
    //
    // A pending carry outranks a fresh capture: it exists precisely because the tree
    // we are replacing is the _tabLoading placeholder, whose own offset is 0 and would
    // otherwise overwrite the real position we are holding for it.
    const navKey = this._navKey();
    const navigated = this._scrollNavKey != null && this._scrollNavKey !== navKey;
    this._scrollNavKey = navKey;
    let scrollBefore = this._scrollCarry || this._captureScroll();
    // A navigation strip was clicked: landing at the top is the point (see _navKey).
    if (navigated) scrollBefore = this._scrollChromeOnly(scrollBefore);
    // Same rule inside a dialog (see _modalNavKey): drop the modal-scoped keys
    // when the dialog or its tab changes, so the new view is not opened partway
    // down at the offset the previous one happened to be at.
    const modalKey = this._modalNavKey();
    if (
      this._scrollModalKey !== undefined
      && modalKey !== this._scrollModalKey
      && scrollBefore
    ) {
      scrollBefore = Object.fromEntries(
        Object.entries(scrollBefore).filter(
          ([k]) => !k.startsWith('.wd-modal|') && !k.startsWith(this._MODAL_KEY_PREFIX),
        ),
      );
    }
    this._scrollModalKey = modalKey;
    this._container.innerHTML = this._buildHtml();
    this._wire();
    if (this._tabLoading) {
      // The placeholder is a spinner a few dozen pixels tall, so restoring into it
      // would clamp the offset to ~0 and lose it for good. Hold it until the tab's
      // real content is back (_fetchTabData's finally re-renders with the flag clear).
      this._scrollCarry = scrollBefore;
      this._restoreScroll(this._scrollChromeOnly(scrollBefore));
    } else {
      this._scrollCarry = null;
      this._restoreScroll(scrollBefore);
    }
    this._drawStatusCurve();
    this._drawModalCanvas();
    this._drawProfileSparklines();  // D2
    this._drawHistorySparklines();  // #344 import review
    this._drawPlaygroundCanvases(); // F3
    ['wd-status-canvas', 'wd-cyc-canvas', 'wd-compare-canvas', 'wd-env-canvas', 'wd-phase-canvas', 'wd-spag-canvas', 'wd-pgroup-canvas']
      .forEach(id => this._attachGraphGestures(id));
    this._syncScrollAffordances();
    this._syncModalFocus(focusedBefore);
    if (focusKeyBefore && !this._modalFocusActive) {
      const again = this.shadowRoot.querySelector(focusKeyBefore);
      if (again && this.shadowRoot.activeElement !== again) {
        try { again.focus({ preventScroll: true }); } catch (_) {}
      }
    }
    requestAnimationFrame(() => this._resizeLogsPage());
  }

  // Audit UI-20: mark each horizontal scroller with the side(s) it hides content on
  // (.wd-ovf-l / .wd-ovf-r, drawn as an edge shadow). Every render replaces these
  // elements, so the scroll listeners are re-attached here and the one
  // ResizeObserver is pointed at the new set (it holds its targets, so it is
  // disconnected first rather than accumulating detached nodes).
  _syncScrollAffordances() {
    const sr = this.shadowRoot;
    if (!sr) return;
    const els = sr.querySelectorAll(_OVF_SCROLLERS);
    if (this._ovfRO) this._ovfRO.disconnect();
    else if (typeof ResizeObserver === 'function') {
      this._ovfRO = new ResizeObserver(entries => entries.forEach(e => _syncOverflowEdges(e.target)));
    }
    els.forEach(el => {
      el.addEventListener('scroll', () => _syncOverflowEdges(el), { passive: true });
      _syncOverflowEdges(el);
      if (this._ovfRO) this._ovfRO.observe(el);
    });
  }

  _resizeLogsPage() {
    const el = this.shadowRoot && this.shadowRoot.getElementById('wd-log-lines-page');
    if (!el) return;
    const rect = el.getBoundingClientRect();
    if (rect.top <= 0) return;
    el.style.height = (window.innerHeight - rect.top - 24) + 'px';
  }

  // Modal a11y: label the dialog by its heading, move focus into it when it opens,
  // and restore focus to the triggering element when it closes. (Tab/Shift+Tab
  // trapping while open lives in _onKeydown.)
  _syncModalFocus(prevFocus = null) {
    const sr = this.shadowRoot;
    if (!sr) return;
    const modalEl = sr.querySelector('.wd-modal[role="dialog"]');
    if (modalEl) {
      const h = modalEl.querySelector('h2');
      if (h && !h.id) h.id = 'wd-modal-title';   // target for aria-labelledby
      if (!this._modalFocusActive) {
        this._modalFocusActive = true;
        // Remember what to return focus to when the modal closes. prevFocus was
        // captured in _render BEFORE innerHTML wiped the trigger, so it survives the
        // rebuild (unless focus was already inside the dialog).
        const trigger = prevFocus || null;
        if (trigger && !modalEl.contains(trigger)) this._modalReturnFocus = trigger;
        const f = _focusableEls(modalEl);
        try { (f[0] || modalEl).focus(); } catch (_) {}
      } else {
        // Modal was already open and just re-rendered: the innerHTML replacement can
        // drop focus outside the freshly-rendered dialog. Pull it back in rather than
        // leaving focus stranded on <body>.
        const active = sr.activeElement || (this.getRootNode() && this.getRootNode().activeElement) || null;
        if (!active || !modalEl.contains(active)) {
          const f = _focusableEls(modalEl);
          // preventScroll (#443): the dialog is already on screen - this branch only
          // reclaims focus the innerHTML swap dropped. Scrolling here would undo the
          // modal's own restored scroll position.
          try { (f[0] || modalEl).focus({ preventScroll: true }); } catch (_) {}
        }
      }
    } else if (this._modalFocusActive) {
      this._modalFocusActive = false;
      const t = this._modalReturnFocus; this._modalReturnFocus = null;
      if (t && t.isConnected && typeof t.focus === 'function') { try { t.focus(); } catch (_) {} }
    }
  }

  // Re-render after a background reload without losing in-progress form edits:
  // snapshot the current Settings / ML form values into _pendingSettings first so
  // the re-render re-applies them (they layer over _opts in the render path).
  _renderPreservingFormEdits() {
    this._snapshotFormToPending(this.shadowRoot);
    this._render();
  }

  // Snapshot the cycle-detail Review form into the modal state so any re-render
  // (e.g. toggling a comparison overlay, which triggers an async envelope fetch)
  // keeps unsaved profile/quality/golden/tags/notes. Mirrors the reads in the
  // 'cyc-review-save' modal action.
  _snapshotCycleReviewForm(sr) {
    const m = this._modal;
    if (!sr || !m || m.type !== 'cycle-detail' || m.mode !== 'review') return;
    const qEl = sr.getElementById('wd-cyc-rev-quality');
    const gEl = sr.getElementById('wd-cyc-rev-golden');
    const nEl = sr.getElementById('wd-cyc-rev-notes');
    const lEl = sr.getElementById('wd-cyc-rev-label');
    if (!qEl && !gEl && !nEl && !lEl) return;  // review form not mounted
    if (!m.ml) m.ml = {};
    if (!m.ml.ml_review) m.ml.ml_review = {};
    const rv = m.ml.ml_review;
    if (qEl) rv.quality = qEl.value || '';
    if (gEl) rv.golden = !!gEl.checked;
    if (nEl) rv.notes = nEl.value || '';
    rv.tags = Array.from(sr.querySelectorAll('.wd-cyc-rev-tag')).filter(cb => cb.checked).map(cb => cb.value);
    // The unsaved choice lives apart from curve.profile_name (#469): that field is
    // the label on record, which the save compares against and the tile shows.
    if (lEl) m.reviewLabel = lEl.value || '';
  }

  _buildHtml() {
    const toast = this._toast
      ? `<div class="wd-toast ${this._toast.cls}" role="${this._toast.cls.includes('error') ? 'alert' : 'status'}" aria-live="${this._toast.cls.includes('error') ? 'assertive' : 'polite'}"><span>${_esc(this._toast.msg)}</span>${this._toast.actionLabel ? `<button type="button" class="wd-toast-action" data-toast-undo="${_esc(this._toast.actionToken || '')}">${_esc(this._toast.actionLabel)}</button>` : ''}</div>`
      : '';
    return `
      <div class="wd-shell">
        ${this._htmlHeader()}
        <div class="wd-content-row">
          <div class="wd-main">
            <div class="wd-body">
              ${this._loading
                ? `<div class="wd-empty"><div class="wd-icon">⏳</div>${this._t('msg.loading', {}, 'Loading…')}</div>`
                : this._htmlBody()}
            </div>
          </div>
          ${this._logOpen && this._isAdmin() ? this._htmlLogDrawer() : `<div class="wd-log-drawer"></div>`}
        </div>
      </div>
      ${this._modal ? this._htmlModal() : ''}
      ${toast}
    `;
  }

  _htmlHeader() {
    // The generic "Working…" badge is only for short ops that aren't registry
    // tasks — long tasks (playground / reprocess / ML) get a detailed activity
    // pill instead, so we don't show a vague "Working…" next to it.
    const nonTaskBusy = Array.from(this._busy).some(
      k => !(k === 'pg-sweep' || k === 'pg-history' || k === 'reprocess' || k.startsWith('ml-train-now'))
    );
    const working = nonTaskBusy
      ? `<span class="wd-badge" style="margin:0 0 0 12px;color:var(--app-header-text-color,#fff);background:rgba(255,255,255,.15)">${this._t('status.working', {}, 'Working…')}</span>`
      : '';
    const iconUrl = this._constants.iconUrl;
    const logo = iconUrl
      ? `<img class="wd-logo" src="${_esc(iconUrl)}" width="30" height="30" alt="WashData" aria-hidden="true" style="border-radius:6px;object-fit:contain">`
      : `<svg class="wd-logo" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
      <rect x="4" y="2.5" width="16" height="19" rx="2.5"/>
      <line x1="7" y1="6" x2="9.5" y2="6"/>
      <circle cx="12" cy="14" r="5"/>
      <circle cx="12" cy="14" r="2"/>
    </svg>`;
    const ver = this._constants.version;
    // Force the burger visible whenever HA's sidebar is fully hidden, regardless of
    // viewport width: on a wide tablet with "Always hide sidebar" the HA header (and
    // its hamburger) is gone, so this burger is the only way back (#359).
    const forceBurger = (this._hass && this._hass.dockedSidebar === 'always_hidden') ? ' wd-burger--force' : '';
    const burger = `<button class="wd-burger${forceBurger}" id="wd-burger" aria-label="${_esc(this._t('hdr.toggle_sidebar', {}, 'Toggle Home Assistant sidebar'))}" title="${_esc(this._t('hdr.toggle_sidebar', {}, 'Toggle Home Assistant sidebar'))}">
      <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
    </button>`;
    return `
      <div class="wd-header">
        ${burger}
        ${logo}
        <div><h1>WashData</h1><div class="wd-sub">${ver ? `v${_esc(ver)} &middot; ` : ''}${this._t('msg.appliance_monitor', {}, 'Appliance monitor')}</div></div>
        ${working}
        <span class="wd-task-pills" id="wd-task-pills">${this._htmlTaskPills()}</span>
        <span style="flex:1"></span>
        <button class="wd-gear-btn" id="wd-settings-btn" data-action="open-settings" title="${_esc(this._t('settings.gear.title', {}, 'Preferences'))}" aria-label="${_esc(this._t('settings.gear.title', {}, 'Preferences'))}"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
        ${this._isAdmin() ? `<button class="wd-gear-btn${this._logOpen ? ' log-active' : ''}" data-action="toggle-log-drawer" title="${_esc(this._t('hdr.logs', {}, 'Logs'))}" aria-label="${_esc(this._t('hdr.logs', {}, 'Logs'))}" aria-pressed="${this._logOpen}"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16"/><path d="M4 10h16"/><path d="M4 15h10"/><path d="M4 20h7"/></svg></button>` : ''}
      </div>
    `;
  }

  _htmlBody() {
    if (!this._devices.length && this._fetchFailed)
      return `<div class="wd-error-state" role="alert"><span>${this._t('msg.fetch_error', {}, 'Failed to load data.')}</span><button class="wd-btn" type="button" data-action="retry-load">${this._t('btn.retry', {}, 'Retry')}</button></div>`;
    if (!this._devices.length)
      return `<div class="wd-empty"><div class="wd-icon">🧺</div>${this._t('msg.no_devices', {}, 'No WashData devices configured yet.')}</div>`;
    const confIndicator = this._conflictKeysFromOpts().size > 0 ? ' ⚠' : '';
    const pgBusy = this._busy.has('pg-sim') || this._busy.has('pg-sweep');
    const pgSpinner = pgBusy ? `<span class="wd-spin" style="margin-left:4px;vertical-align:middle"></span>` : '';
    const labels = { status: this._t('tab.status',{},'Overview'), history: this._t('tab.history',{},'Cycles'), profiles: this._t('tab.profiles',{},'Profiles'), settings: this._t('tab.settings',{},'Settings') + confIndicator, playground: this._t('tab.playground',{},'Playground') + pgSpinner, store: this._t('tab.store',{},'Store'), advanced: this._t('tab.advanced',{},'Advanced') };
    const visible = this._visibleTabIds();
    if (!visible.includes(this._tab)) this._tab = 'status';
    const tabBtns = visible.map(id =>
      `<button class="wd-tab ${this._tab === id ? 'active' : ''}" role="tab" id="wd-tab-${id}" aria-selected="${this._tab === id}" tabindex="${this._tab === id ? '0' : '-1'}" data-tab="${id}">${labels[id]}</button>`
    ).join('');
    // Only the active pane is built (audit UI-03 / PERF-05): every render used to
    // build and parse all seven, 52-235 ms per refresh with 200 cycles loaded, the
    // Playground's 35 kB included though it was never opened. Tab clicks re-render.
    const pane = (id, build) => visible.includes(id)
      ? `<div class="wd-pane ${this._tab === id && !this._tabLoading ? 'active' : ''}" role="tabpanel" aria-labelledby="wd-tab-${id}">${this._tab === id ? build() : ''}</div>` : '';
    return `
      <div class="wd-nav">
        ${this._htmlDeviceBar()}
        <div class="wd-tabs" role="tablist">${tabBtns}</div>
        ${this._htmlStaleChip()}
      </div>
      ${this._tabLoading ? `<div class="wd-empty" style="padding:24px"><div class="wd-icon">⏳</div>${this._t('msg.loading', {}, 'Loading…')}</div>` : ''}
      ${pane('status', () => this._htmlStatus())}
      ${pane('history', () => this._htmlHistoryTab())}
      ${pane('profiles', () => this._htmlProfiles())}
      ${pane('settings', () => this._htmlSettings())}
      ${pane('playground', () => this._htmlPlayground())}
      ${pane('store', () => this._htmlStore())}
      ${pane('advanced', () => this._htmlPanel())}
    `;
  }

  // ── Status tab ────────────────────────────────────────────────────────────

  _htmlDeviceBar() {
    // Always offer onboarding another device; show the picker only when >1.
    const addBtn = this._isAdmin()
      ? `<button class="wd-devcard wd-devadd" data-action="add-device" title="${_esc(this._t('btn.add_device_tip', {}, 'Add another WashData device'))}">${this._t('btn.add_device', {}, '+ Add device')}</button>`
      : '';
    if (this._devices.length <= 1) return addBtn ? `<div class="wd-devbar">${addBtn}</div>` : '';
    return `<div class="wd-devbar">${this._devices.map((d, i) => {
      const st = d.is_user_paused ? 'user_paused' : (d.detector_state || 'unknown');
      const running = _ACTIVE_STATES.includes(st);
      const rec = !!d.recording;
      const dotColor = rec ? 'var(--error-color, #f44336)' : this._stateColor(st);
      const label = rec ? this._t('status.recording', {}, 'Recording') : this._stateLabel(st);
      const badges = [];
      const confN = this._conflictCountForOpts(d.options || {}, d.option_defaults || {});
      if (confN) badges.push(`<span class="wd-dbadge conf">⚠ ${confN}</span>`);
      if (d.feedback_count) badges.push(`<span class="wd-dbadge fb">💬 ${d.feedback_count}</span>`);
      return `<button class="wd-devcard ${i === this._selIdx ? 'active' : ''}" data-idx="${i}">
        <span class="wd-devdot ${rec || running ? 'run' : ''}" style="background:${dotColor}"></span>
        <span><span class="wd-devname">${_esc(d.title)}</span> <span class="wd-devsub">${_esc(label)}</span></span>
        ${badges.join('')}
      </button>`;
    }).join('')}${addBtn}</div>`;
  }

  // MATCH-DECIDE-15: while the live match is undecided (nothing committed yet, or
  // a runner-up within the ambiguity margin) say so, with the top two and a
  // "~N% sure" read off the margin (backend match_rules.display_sure_pct). Display
  // only: the program sensor keeps its raw `detecting...` state for automations.
  _htmlMatchUncertainty(dev, isRunning, manual) {
    const u = dev && dev.match_uncertainty;
    if (!u || !isRunning || manual || !u.top) return '';
    const what = u.runner_up
      ? this._t('status.match_uncertain', {top: u.top, runner: u.runner_up}, 'Uncertain: {top} or {runner}')
      : this._t('status.match_uncertain_single', {top: u.top}, 'Uncertain: maybe {top}');
    const pct = Number(u.sure_pct);
    const sure = (u.sure_pct != null && isFinite(pct))
      ? ` · ${this._t('status.match_sure', {pct}, '~{pct}% sure')}` : '';
    const tip = _tip(this._tText('status.match_uncertain_tip', {top: u.top},
      'WashData has not settled on a program yet. The figure is how often the leading guess, {top}, was right in past cycles when it led by this much. Information only.'));
    return `<span class="wd-prog-unc" style="font-size:.82em;color:var(--warning-color,#ff9800)">${what}${sure}</span>${tip}`;
  }

  _htmlStatus() {
    const dev = this._devices[this._selIdx];
    if (!dev) return `<div class="wd-empty">${this._t('msg.no_device_selected', {}, 'No device selected.')}</div>`;
    const isUserPaused = !!dev.is_user_paused;
    const state = isUserPaused ? 'user_paused' : (dev.detector_state || 'unknown');
    const rec = !!dev.recording;
    const color = rec ? 'var(--error-color, #f44336)' : this._stateColor(state);
    const label = rec ? this._t('status.recording', {}, 'Recording') : this._stateLabel(state);
    const isRunning = rec || _ACTIVE_STATES.includes(state);
    const prog = dev.cycle_progress_pct;
    const rem = dev.time_remaining_s;

    const matched = dev.current_program;
    const manual = !!dev.manual_program;
    // A program pinned for the NEXT cycle, on an appliance that is not running one
    // (#411). Shown selected, or the dropdown would appear to forget the choice.
    const armed = matched ? null : (dev.armed_program || null);
    const selVal = matched || armed || 'auto_detect';
    const profNames = (this._profiles || []).map(p => p.name);
    if (matched && !profNames.includes(matched)) profNames.unshift(matched);
    if (armed && !profNames.includes(armed)) profNames.unshift(armed);
    const profOpts = profNames.map(n =>
      `<option value="${_esc(n)}" ${selVal === n ? 'selected' : ''}>${_esc(n)}</option>`).join('');
    const suffix = matched
      ? (manual ? this._t('badge.manual', {}, '(manually selected)') : this._t('badge.auto', {}, '(auto-detected)'))
      : (armed ? this._t('badge.armed', {}, '(applies to the next cycle)') : '');
    const tagKind = matched ? (manual ? 'manual' : 'auto') : 'manual';
    const tag = suffix ? `<span class="wd-prog-tag ${tagKind}">${suffix}</span>` : '';
    // Program selection is allowed for any user who can see the device (read+):
    // a deliberate exception to the edit level, kept by the maintainer.
    const programCtl = `<div class="wd-prog-ctl"><label>${this._t('lbl.program', {}, 'Program')}</label>${_tip(this._t('lbl.program_tip', {}, 'Choose which program the current cycle is matched to. Auto-detect picks the best match. Pin a program when auto-detect is wrong; pick one before starting and it applies to the next cycle.'))}
          <select id="wd-status-prog">
            <option value="auto_detect" ${selVal === 'auto_detect' ? 'selected' : ''}>${this._t('status.auto_detect', {}, 'Auto-detect')}</option>
            ${profOpts}
          </select>${tag}${this._htmlMatchUncertainty(dev, isRunning, manual)}</div>`;

    const attn = [];
    if (dev.recording && this._canEdit()) attn.push(`<div class="wd-attn-card"><span class="wd-attn-icon">●</span><div class="wd-attn-body"><div class="wd-attn-title">${this._t('msg.recording_in_progress', {}, 'Recording in progress')}</div><div class="wd-attn-sub">${this._t('msg.see_recorder', {}, 'See recorder widget below')}</div></div></div>`);
    if (dev.feedback_count && this._canEdit()) attn.push(`<button class="wd-attn-card" type="button" data-action="goto-feedbacks"><span class="wd-attn-icon">💬</span><div class="wd-attn-body"><div class="wd-attn-title">${this._t('msg.feedback_cycles_pending', {n: dev.feedback_count}, `To review: ${dev.feedback_count}`)}</div><div class="wd-attn-sub">${this._t('msg.review_to_cycles', {}, 'Open the Cycles review queue')}</div></div></button>`);
    const _confKeys = this._conflictKeysFromOpts();
    if (_confKeys.size && this._canEdit()) {
      const n = _confKeys.size, s = n > 1 ? 's' : '';
      attn.push(`<button class="wd-attn-card" type="button" style="border-color:var(--error-color,#b71c1c)" data-action="goto-conflicts"><span class="wd-attn-icon">⚠</span><div class="wd-attn-body"><div class="wd-attn-title" style="color:var(--error-color,#b71c1c)">${this._t('conflict.attn_title', {n}, `Setting conflicts: ${n}`)}</div><div class="wd-attn-sub">${this._t('conflict.attn_sub', {}, 'Fix conflicts before saving')}</div></div></button>`);
    }
    const _sugN = this._sugCountForDevice(dev);
    if (_sugN && this._canEdit()) {
      attn.push(`<button class="wd-attn-card" type="button" data-action="goto-suggestions"><span class="wd-attn-icon">💡</span><div class="wd-attn-body"><div class="wd-attn-title">${this._t('lbl.n_tuning_suggestions', {n: _sugN}, `${_sugN} tuning suggestion${_sugN > 1 ? 's' : ''}`)}</div><div class="wd-attn-sub">${this._t('msg.review_in_settings', {}, 'Review in Settings')}</div></div></button>`);
    }
    // #445 cause 1: the appliance's standby draw sits ABOVE its Stop Threshold, so
    // the off delay never starts and the cycle cannot finish on its own. Explains
    // rather than proposes: where idle and working power are the same level no
    // threshold value fixes it, and the standby detector closes the cycle instead.
    const sas = dev.standby_above_stop;
    if (sas && this._canEdit()) {
      attn.push(`<button class="wd-attn-card" type="button" style="border-color:var(--warning-color,#ff9800)" data-action="goto-standby"><span class="wd-attn-icon">\u26A0</span><div class="wd-attn-body"><div class="wd-attn-title" style="color:var(--warning-color,#ff9800)">${this._t('msg.standby_above_stop_title', {idle: sas.idle_w, stop: sas.stop_threshold_w}, `Still drawing ${sas.idle_w} W when the cycle ended`)}</div><div class="wd-attn-sub">${this._t('msg.standby_above_stop_sub', {n: sas.cycles_above, total: sas.cycles_checked, stop: sas.stop_threshold_w}, `${sas.cycles_above} of the last ${sas.cycles_checked} cycles. The off delay only starts below the Stop Threshold (${sas.stop_threshold_w} W), so cycles finish late.`)}</div></div></button>`);
    }

    const attnHtml = attn.length ? `<div class="wd-attn">${attn.join('')}</div>` : '';

    // The one "how far through" figure that is not made of elapsed time: it comes
    // from aligning the live trace against the matched profile's own curve, so it
    // survives a run that over- or under-shoots its mean. It is only recomputed
    // while the appliance is below the stop threshold, which the tooltip says,
    // because otherwise a figure that visibly stalls during a wash looks broken.
    const envPos = dev.envelope_position;
    const envPct = envPos != null ? Math.round(envPos * 100) : null;
    const envPosHtml = envPct != null
      ? ` <span style="opacity:.75" title="${_esc(this._tText('lbl.envelope_position_tip', {pct: envPct},
          `Position on the matched program's recorded curve: ${envPct}%. Found by aligning the cycle `
          + `to the profile, so it stays right when a run is longer or shorter. Updates while the `
          + `appliance is quiet, so it can lag.`))}">${this._t('lbl.envelope_position', {pct: envPct},
          `curve ${envPct}%`)}</span>`
      : '';
    const progressHtml = (isRunning && prog != null) ? `
      <div class="wd-prog-bg"><div class="wd-prog-fill" style="width:${Math.min(100, prog)}%"></div></div>
      <div class="wd-prog-row"><span>${_fmtNum(prog, 1)}%${envPosHtml}</span>${rem != null ? `<span>${this._t('lbl.time_remaining', {v: _fmtDuration(rem)}, `~${_fmtDuration(rem)} remaining`)}</span>` : ''}</div>
    ` : '';
    const pd = this._powerData || {};
    const hasCurve = (pd.live || []).length > 1;
    const showExpected = this._pref('show_expected', true);
    const showRawLeg = this._pref('show_raw_active', false);
    const legend = `<div class="wd-leg">
      <span class="wd-leg-i"><span class="wd-leg-sw" style="background:var(--primary-color)"></span> ${this._t('lbl.power', {}, 'Power')}</span>
      ${this._statusEnv ? `<label class="wd-leg-i"><input type="checkbox" data-statustoggle="show_expected" ${showExpected ? 'checked' : ''}><span class="wd-leg-sw" style="background:#ff9800"></span> ${this._t('lbl.expected', {}, 'Expected')}</label>` : ''}
      ${this._pref('show_raw', false) ? `<label class="wd-leg-i"><input type="checkbox" data-statustoggle="show_raw_active" ${showRawLeg ? 'checked' : ''}><span class="wd-leg-sw" style="background:#9e9e9e"></span> ${this._t('lbl.raw_socket', {}, 'Raw socket')}</label>` : ''}
    </div>`;
    // Setup card: phase-aware guidance replacing the old getting-started card.
    // A running cycle always wins so the user sees their appliance. Gated on the
    // cycle, not on hasCurve: while idle `live` still holds the last 15 min of
    // readings, so the card was hidden on almost every install (audit UI-01).
    const cycleCount = this._cyclesTotal || 0;
    const profileCount = (this._profiles || []).length;
    const setupDismissed = this._pref('setup_card_dismissed', false);
    const setupStatus = this._setupStatus;
    // Phase 3 and 4 collapse to a chip when dismissed; earlier phases always show
    // the full guidance card regardless of the dismissed pref.
    const showSetupCard = setupStatus && !isRunning;
    const setupCardHtml = showSetupCard ? this._htmlSetupCard(setupStatus, setupDismissed) : '';
    const chartHtml = hasCurve
      ? `<div class="wd-canvas-wrap" style="margin-top:14px"><canvas id="wd-status-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_power_chart', {}, 'Power consumption chart'))}" style="height:160px"></canvas></div>${legend}`
      : '';
    const curveHtml = showSetupCard
      ? setupCardHtml + chartHtml
      : (chartHtml || `<p class="wd-info" style="margin-top:12px">${this._t('msg.live_chart_loading', {}, 'Live power chart appears as readings arrive.')}</p>`);

    const showDebug = this._pref('show_debug', false);
    let debugHtml = '';
    if (showDebug) {
      const md = this._matchDebug || {};
      const conf = md.confidence != null ? `${(md.confidence * 100).toFixed(1)}%` : '-';
      const dRows = (md.candidates || []).map(c => `<tr><td>${_esc(c.profile_name)}</td><td>${c.confidence_pct}%</td><td>${c.mae}</td><td>${c.correlation}</td><td>${c.duration_ratio >= 0 ? '+' : ''}${c.duration_ratio}%</td></tr>`).join('');
      debugHtml = `<div class="wd-card">
        <div class="wd-card-title">${this._t('hdr.live_match_debug', {}, 'Live Match Debug')} ${_tip(this._tText('msg.live_match_debug_tip', {}, 'Confidence: how closely the current power curve matches the top candidate profile (0-100%). Ambiguous: the two best candidates score within 5% of each other - the label is uncertain until the cycle finishes.'))}</div>
        <div class="wd-kv" style="margin-bottom:12px">
          <div class="wd-kv-item"><div class="wd-kv-val">${conf}</div><div class="wd-kv-lbl">${this._t('lbl.confidence', {}, 'Confidence')}</div></div>
          <div class="wd-kv-item"><div class="wd-kv-val" style="font-size:1em;color:${md.ambiguous ? 'var(--warning-color,#ff9800)' : 'var(--success-color,#4caf50)'}">${md.ambiguous ? this._t('status.ambiguous', {}, 'Ambiguous') : this._t('status.clear', {}, 'Clear')}</div><div class="wd-kv-lbl">${this._t('lbl.label', {}, 'Match')}</div></div>
        </div>
        ${dRows ? `<table class="wd-table"><thead><tr><th>${this._t('lbl.profile', {}, 'Profile')}</th><th>${this._t('col.dbg_conf', {}, 'Conf')}</th><th>${this._t('col.dbg_mae', {}, 'MAE')}</th><th>${this._t('col.dbg_corr', {}, 'Corr')}</th><th>${this._t('lbl.duration', {}, 'Duration')}</th></tr></thead><tbody>${dRows}</tbody></table>` : `<p class="wd-info">${this._t('msg.no_match_yet', {}, 'No match attempt yet - this populates during a running cycle.')}</p>`}
      </div>`;
    }

    const cycleCtrlHtml = (() => {
      if (!this._canEdit()) return '';
      const cycleActive = _ACTIVE_STATES.includes(state);
      const showPause = cycleActive && !isUserPaused;
      const showResume = isUserPaused;
      const showStop = cycleActive || isUserPaused;
      if (!showPause && !showResume && !showStop) return '';
      return `<div class="wd-cycle-ctrl" style="margin-top:0">
        ${showResume ? `<button class="wd-btn wd-btn-sm wd-btn-primary" data-action="resume-cycle" title="${_esc(this._t('btn.resume_cycle_tip', {}, 'Resume the paused cycle'))}">${this._t('btn.resume_cycle', {}, 'Resume')}</button>` : ''}
        ${showPause ? `<button class="wd-btn wd-btn-sm" data-action="pause-cycle" title="${_esc(this._t('btn.pause_cycle_tip', {}, 'Pause the running cycle – the appliance will resume where it left off'))}">${this._t('btn.pause_cycle', {}, 'Pause')}</button>` : ''}
        ${showStop ? `<button class="wd-btn wd-btn-sm wd-btn-danger" data-action="terminate-cycle" title="${_esc(this._t('btn.force_stop_tip', {}, 'Immediately end the current cycle and mark it as force-stopped'))}">${this._t('btn.force_stop', {}, 'Force Stop')}</button>` : ''}
      </div>`;
    })();

    return `
      ${attnHtml}
      <div class="wd-card">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px">
          <div class="wd-card-title" style="margin:0">${_esc(dev.title)}</div>
          ${cycleCtrlHtml}
        </div>
        <div class="wd-badge ${isRunning ? 'wd-running' : ''}" style="color:${color};background:color-mix(in srgb, ${color} 13%, transparent);">
          <span class="wd-dot"></span>${_esc(label)}
          ${!rec && dev.sub_state && dev.sub_state.toLowerCase() !== state ? `<span style="opacity:.7;font-size:.85em">(${_esc(dev.sub_state === 'Stalled' ? this._tText('status.stalled', {}, 'Stalled') : dev.sub_state)})</span>` : ''}
        </div>
        ${programCtl}
        <div class="wd-stats">
          <div class="wd-stat"><div class="wd-stat-val">${_fmtPower(dev.current_power_w)}</div><div class="wd-stat-lbl">${this._t('lbl.power', {}, 'Power')}</div></div>
          <div class="wd-stat"><div class="wd-stat-val">${prog != null ? _fmtNum(prog, 0) + '%' : '-'}</div><div class="wd-stat-lbl">${this._t('lbl.progress', {}, 'Progress')}</div></div>
          <div class="wd-stat"><div class="wd-stat-val">${_fmtDuration(rem)}</div><div class="wd-stat-lbl">${this._t('lbl.remaining', {}, 'Remaining')}</div></div>
        </div>
        ${progressHtml}
        ${this._htmlPhaseTimeline(dev, prog, isRunning)}
        ${showSetupCard ? '' : `<div class="wd-card-title" style="margin-top:18px">${this._t('hdr.live_power', {}, 'Live Power')}</div>`}
        ${curveHtml}
      </div>
      ${this._canEdit() ? this._htmlRecordingWidget() : ''}
      ${debugHtml}
    `;
  }

  // Setup Card — phase-aware guidance for device onboarding. Replaces the old
  // getting-started card for backends that support get_setup_status (Task 4).
  // Phase 4 renders as a compact chip (device fully set up); phases 0–3 render
  // the full guidance card with a primary CTA, optional secondary action, skip
  // links, and a permanent-hide link when dismissible.
  _htmlSetupCard(status, dismissed = false) {
    if (!status) return '';
    const { phase, message_key, message_params, cta_label_key, cta_action,
            secondary_label_key, secondary_action, skippable, dismissible,
            step_key } = status;

    // Phase 4: always a collapsed chip (setup complete — no full card).
    if (phase === 'phase4') {
      return `
        <div class="wd-setup-chip wd-setup-chip--healthy" data-action="expand-setup" role="button" tabindex="0"
             title="${_esc(this._t('setup.cta.show_guidance', {}, 'Show guidance'))}">
          <span class="wd-setup-dot wd-setup-dot--green"></span>
          <span>${this._t('setup.hdr.healthy_chip', {}, 'Setup complete')}</span>
        </div>`;
    }

    // Phase 3 dismissed: compact chip so the user can restore guidance without
    // the full card. Click clears setup_card_dismissed and re-renders the full card.
    if (phase === 'phase3' && dismissed) {
      return `
        <div class="wd-setup-chip" data-action="expand-setup" role="button" tabindex="0"
             title="${_esc(this._t('setup.cta.show_guidance', {}, 'Show guidance'))}">
          <span class="wd-setup-dot" style="background:var(--warning-color,#ff9800)"></span>
          <span>${this._t('setup.hdr.card', {}, 'Device Setup')}</span>
        </div>`;
    }

    const msg = this._tText(message_key, message_params || {}, '');
    const ctaLabel = this._t(cta_label_key, {}, 'Continue');
    const secLabel = secondary_label_key
      ? this._t(secondary_label_key, {}, '')
      : null;

    const skipHtml = skippable ? `
      <span style="display:flex;gap:12px;margin-top:6px">
        <a class="wd-link" data-action="setup-skip" data-step="${_esc(step_key || '')}" data-snooze="14d"
           style="font-size:.85em">${this._t('setup.cta.skip_step', {}, 'Skip this step')}</a>
        <a class="wd-link" data-action="setup-skip" data-step="${_esc(step_key || '')}" data-snooze="never"
           style="font-size:.85em;opacity:.7">${this._t('setup.cta.skip_forever', {}, "Don't show again")}</a>
      </span>` : '';

    const hideHtml = dismissible ? `
      <a class="wd-link" data-action="hide-setup-card" style="font-size:.8em;opacity:.6;margin-top:4px">
        ${this._t('setup.cta.hide_guidance', {}, 'Hide guidance')}
      </a>` : '';

    return `
      <div class="wd-setup-card" data-phase="${_esc(phase)}">
        <div class="wd-card-title">${this._t('setup.hdr.card', {}, 'Device Setup')}</div>
        <p style="margin:6px 0 12px">${_esc(msg)}</p>
        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center">
          <button class="wd-btn wd-btn-primary" data-action="setup-cta"
                  data-cta-action="${_esc(cta_action || '')}"
                  data-cta-params="${_esc(JSON.stringify(message_params || {}))}">
            ${_esc(ctaLabel)}
          </button>
          ${secLabel ? `<a class="wd-link" data-action="setup-cta"
                           data-cta-action="${_esc(secondary_action || '')}"
                           data-cta-params="${_esc(JSON.stringify(message_params || {}))}">
            ${_esc(secLabel)}
          </a>` : ''}
        </div>
        ${skipHtml}
        ${hideHtml}
      </div>`;
  }

  // Dispatch a setup card CTA action to the appropriate panel destination.
  _dispatchSetupCta(ctaAction, params) {
    if (!ctaAction) return;
    if (ctaAction === 'open_recorder') {
      // Scroll to recorder widget on the Status tab
      this.shadowRoot.querySelector('.wd-rec-dot')?.closest('.wd-card')?.scrollIntoView({ behavior: 'smooth' });
      return;
    }
    if (ctaAction === 'open_cycles' || ctaAction === 'open_cycles_unlabeled') {
      this._tab = 'history'; this._historySub = 'cycles';
      if (ctaAction === 'open_cycles_unlabeled') {
        this._cycleFilter = { ...(this._cycleFilter || {}), status: 'unlabeled' };
      }
      this._fetchTabData();
      return;
    }
    if (ctaAction === 'open_profiles') {
      this._tab = 'profiles';
      this._fetchTabData();
      return;
    }
    if (ctaAction === 'open_suggestions') {
      this._tab = 'settings';
      this._settingsSugOnly = true;
      this._fetchTabData();
      return;
    }
    if (ctaAction === 'create_profile_from_cluster') {
      // The Profiles tab shows the cluster with a "Create profile" that pre-selects
      // its cycle (coverage-gap banner).
      this._tab = 'profiles';
      this._fetchTabData();
      return;
    }
    if (ctaAction && ctaAction.startsWith('open_cycle:')) {
      // No direct cycle modal shortcut yet — open the history tab.
      this._tab = 'history'; this._historySub = 'cycles';
      this._fetchTabData();
      return;
    }
  }

  // Reload the setup guidance phase from the backend and re-render.
  async _reloadSetupStatus() {
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    try {
      this._setupStatus = await this._ws({
        type: `${_DOMAIN}/get_setup_status`,
        entry_id: dev.entry_id,
      });
    } catch (_) { this._setupStatus = null; }
    this._render();
  }

  // D1: compact horizontal phase timeline for the matched profile, drawn below
  // the progress bar. Reuses the phase-editor palette + labels. Renders nothing
  // when nothing is matched or the matched profile has no phases.
  _htmlPhaseTimeline(dev, prog, isRunning) {
    const phases = this._statusPhases || [];
    if (!isRunning || !phases.length || !dev.current_program) return '';
    // Same span as the live phase sensor (progress.phase_timeline_span): progress maps
    // onto the matched program's expected length (expected_duration_s), or the last
    // range end when the ranges run longer, so a range reads at its real minutes
    // (audit PROGRESS-10). A gap, or the stretch after the last range, names no
    // phase (progress.phase_at: [start, end), the timeline's own end included).
    const lastEnd = Math.max(0, ...phases.map(p => p.end || 0));
    const expected = Number(dev.expected_duration_s);
    const total = Math.max(lastEnd, Number.isFinite(expected) ? expected : 0);
    if (total <= 0) return '';
    const curFrac = (prog != null) ? Math.min(1, Math.max(0, prog / 100)) : null;
    let curPhase = '';
    let curFound = false;
    const segs = phases.map((ph, i) => {
      const x0 = Math.max(0, Math.min(1, (ph.start || 0) / total));
      const x1 = Math.max(0, Math.min(1, (ph.end || 0) / total));
      const width = Math.max(0, (x1 - x0) * 100);
      const col = _PALETTE[i % _PALETTE.length];
      const reached = curFrac == null ? true : (x0 <= curFrac);
      if (!curFound && curFrac != null && x1 > x0 && curFrac >= x0 && (curFrac < x1 || (curFrac >= 1 && x1 >= 1))) {
        curFound = true;
        curPhase = ph.name || '';
      }
      const label = (ph.name && width > 12) ? `<span class="wd-ptl-seg-lbl">${_esc(ph.name)}</span>` : '';
      return `<div class="wd-ptl-seg" style="left:${(x0 * 100).toFixed(2)}%;width:${width.toFixed(2)}%;background:${col};opacity:${reached ? 0.85 : 0.28}" title="${_esc(ph.name || '')}">${label}</div>`;
    }).join('');
    const cursor = curFrac != null ? `<div class="wd-ptl-cursor" style="left:${(curFrac * 100).toFixed(2)}%"></div>` : '';
    const curLbl = curPhase ? `<div class="wd-ptl-cur">${this._t('lbl.current_phase', {}, 'Current phase')}: <b>${_esc(curPhase)}</b></div>` : '';
    return `<div class="wd-ptl-wrap">
      <div class="wd-ptl" role="img" aria-label="${_esc(this._t('lbl.phase_timeline', {}, 'Phase timeline'))}">${segs}${cursor}</div>
      ${curLbl}
    </div>`;
  }

  _htmlRecordingWidget() {
    const rs = this._recState;
    // dev.recording (from get_devices) is the authoritative recording flag.
    // _recState is a separately-polled detail source that is null on first load
    // and only refreshed while already recording, so trusting it alone showed
    // "Start Recording" during an active recording (#313). Derive the state from
    // the authoritative flag and use _recState only for the live duration/samples.
    const dev = this._devices[this._selIdx];
    const recording = !!(dev && dev.recording);
    const state = recording ? 'recording' : (rs ? rs.state : 'idle');
    const dotCls = state === 'recording' ? 'wd-rec-active' : state === 'stopped' ? 'wd-rec-ready' : 'wd-rec-idle';
    const stateLabel = state === 'recording' ? this._t('status.recording', {}, 'Recording…') : state === 'stopped' ? this._t('status.ready', {}, 'Ready to process') : this._t('status.idle', {}, 'Idle');
    let detail = '';
    const nSamples = (n) => this._t('lbl.n_samples', {n}, `${n} samples`);
    if (state === 'recording') detail = rs ? `${_fmtDuration(rs.duration_s)} · ${nSamples(rs.sample_count || 0)}` : '';
    else if (state === 'stopped') detail = `${nSamples(rs.sample_count || 0)} · ${_fmtDuration(rs.duration_s)}`;
    const buttons = state === 'recording'
      ? `<button class="wd-btn wd-btn-danger wd-btn-sm" data-action="rec-stop" title="${_esc(this._t('btn.rec_stop_tip', {}, 'Stop recording and hold the captured trace for review'))}">${this._t('btn.rec_stop', {}, 'Stop')}</button>`
      : state === 'stopped'
        ? `<button class="wd-btn wd-btn-primary wd-btn-sm" data-action="rec-process-open" title="${_esc(this._t('btn.process_tip', {}, 'Save the recorded trace as a new or existing profile'))}">${this._t('btn.process', {}, 'Process')}</button>
           <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="rec-discard" title="${_esc(this._t('btn.discard_tip', {}, 'Discard the recorded trace without saving'))}">${this._t('btn.discard', {}, 'Discard')}</button>`
        : `<button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="rec-start" title="${_esc(this._t('btn.rec_start_tip', {}, 'Begin recording the appliance\'s power trace – start just before running a cycle'))}">${this._t('btn.record', {}, 'Start Recording')}</button>`;
    return `<div class="wd-card" style="margin-top:0">
      <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:8px">
          <div class="wd-rec-dot ${dotCls}"></div>
          <div><strong>${this._t('hdr.manual_recording', {}, 'Manual Recording')}</strong>${_tip(this._t('hdr.manual_recording_tip', {}, 'Record a cycle on purpose: press Start just before the appliance starts and Stop when it finishes, then Process to save it as a profile.'))}${detail ? `<span class="wd-field-hint" style="margin-left:8px">${detail}</span>` : ''}</div>
        </div>
        <div style="display:flex;gap:6px;flex-wrap:wrap">${buttons}</div>
      </div>
    </div>`;
  }

  // ── History tab ───────────────────────────────────────────────────────────

  // Cycles | Maintenance. Maintenance is a user-facing log and reminder feature, so
  // it moved here from Advanced in 0.5.8 (audit UI-25); read users keep it.
  _htmlHistoryTab() {
    const sub = this._historySub === 'maintenance' ? 'maintenance' : 'cycles';
    const nav = [['cycles', this._t('tab.history', {}, 'Cycles')], ['maintenance', this._t('tab.maintenance', {}, 'Maintenance')]]
      .map(([id, lbl]) => `<button class="wd-subtab ${sub === id ? 'active' : ''}" role="tab" aria-selected="${sub === id ? 'true' : 'false'}" data-hsub="${id}">${lbl}</button>`).join('');
    return `<div class="wd-subtabs" role="tablist">${nav}</div>${sub === 'maintenance' ? this._htmlMaintenance() : this._htmlHistory()}`;
  }

  _htmlHistory() {
    const realCycles = this._cycles || [];
    const refCycles = this._refCycles || [];
    // Imported store recordings share this table (tagged is_reference). They are
    // kept out of usage stats, so they carry no ML health/review and cannot be
    // bulk-selected -- but they open the same interactive graph and can be
    // removed one-by-one from the inspector.
    const allCycles = refCycles.concat(realCycles);
    const canEdit = this._canEdit();
    const selMode = this._selectMode && canEdit;
    const sel = this._cycleSel;
    const { col, dir } = this._cycleSort;
    const { text, status: fStatus } = this._cycleFilter;

    // ML assessment + feedback context (merged "needs review" signal).
    const mlById = this._mlById || {};
    const fbIds = new Set((this._feedbacks || []).map(f => f.cycle_id));
    const mlOf = c => mlById[c.id];
    const isReviewed = c => { const m = mlOf(c); return !!(m && m.ml_review && m.ml_review.reviewed_at); };
    const isGolden = c => { const m = mlOf(c); return !!(m && m.ml_review && m.ml_review.golden); };
    // One review count everywhere (audit UI-26): a cycle needs review when it has
    // unresolved detection feedback, which is exactly what the Overview "To
    // review" card counts (#355). The ML health label and abnormal ends used to
    // queue cycles too; abnormal ends keep their own Interrupted / Force stopped
    // filters.
    const needsReview = c => fbIds.has(c.id);
    const needsReviewCount = allCycles.filter(needsReview).length;

    // Filter
    let cycles = allCycles;
    if (text) {
      const t = text.toLowerCase();
      cycles = cycles.filter(c => ((c.profile_name || c.matched_profile || '')).toLowerCase().includes(t));
    }
    if (fStatus === 'unlabelled') {
      cycles = cycles.filter(c => !c.profile_name && !c.matched_profile);
    } else if (fStatus === 'needs_review') {
      cycles = cycles.filter(needsReview);
    } else if (fStatus === 'imported') {
      cycles = cycles.filter(c => c.is_reference);
    } else if (fStatus) {
      cycles = cycles.filter(c => (c.status || 'completed') === fStatus);
    }

    // Sort
    const getterMap = {
      date: c => c.start_time ? new Date(c.start_time).getTime() : 0,
      confidence: c => c.match_confidence,
      duration: c => c.duration,
      energy: c => c.energy_kwh != null ? c.energy_kwh : (c.energy_wh != null ? c.energy_wh / 1000 : null),
      cost: c => c.cost != null ? c.cost : -1,
      status: c => c.status || 'completed',
      profile: c => (c.profile_name || c.matched_profile || '￿').toLowerCase(),
    };
    cycles = _sortBy(cycles, getterMap[col] || getterMap.date, dir);

    const statusDotColor = s => s === 'completed' ? 'var(--success-color, #4caf50)'
      : s === 'interrupted' ? 'var(--error-color, #f44336)'
      : s === 'force_stopped' ? 'var(--warning-color, #ff9800)' : 'var(--secondary-text-color)';

    const importedBadge = c => {
      if (!c.is_reference) return '';
      const fromHistory = c.cycle_origin === 'backfill';
      const tip = fromHistory
        ? this._t('badge.backfilled_tip', {}, 'Detected in imported power history. Shapes program matching only, not counted in stats.')
        : this._t('badge.imported_tip', {}, 'Imported from the community store. Used for matching only, not counted in stats.');
      return ` <span title="${_esc(tip)}" style="color:var(--info-color,#2196f3)">${fromHistory ? '🕗' : '📥'}</span>`;
    };
    const reviewBadge = c => {
      if (isGolden(c)) return ' <span title="' + _esc(this._t('badge.golden_cycle', {}, 'Recorded reference cycle')) + '" style="color:var(--warning-color,#ff9800)">⭐</span>';
      // Pending feedback wins over the reviewed check, matching needsReview (#355):
      // a reviewed cycle with unresolved feedback shows the feedback badge, not ✓.
      if (fbIds.has(c.id)) return ' <span title="' + _esc(this._t('badge.feedback_requested', {}, 'Feedback requested')) + '" style="color:var(--info-color,#2196f3)">💬</span>';
      if (isReviewed(c)) return ' <span title="' + _esc(this._t('badge.reviewed', {}, 'Reviewed')) + '" style="color:var(--success-color,#4caf50)">✓</span>';
      if (needsReview(c)) return ' <span title="' + _esc(this._t('badge.needs_review', {}, 'Needs review')) + '" style="color:var(--error-color,#f44336)">●</span>';
      return '';
    };
    const overrunBadge = c => {
      if (c.anomaly !== 'overrun') return '';
      const r = c.overrun_ratio ? ' ' + this._tText('badge.overrun_ratio', {x: Number(c.overrun_ratio).toFixed(1)}, `(${Number(c.overrun_ratio).toFixed(1)}x expected)`) : '';
      return ` <span title="${_esc(this._t('badge.overrun', {}, 'Ran longer than usual'))}${_esc(r)}" style="color:var(--warning-color,#ff9800)">⏱</span>`;
    };
    const underrunBadge = c => {
      if (c.anomaly !== 'underrun') return '';
      const r = c.underrun_ratio ? ' ' + this._tText('badge.underrun_ratio', {pct: Math.round(c.underrun_ratio * 100)}, `(${Math.round(c.underrun_ratio * 100)}% of expected)`) : '';
      return ` <span title="${_esc(this._t('badge.underrun', {}, 'Finished faster than usual'))}${_esc(r)}" style="color:var(--info-color,#2196f3)">⚡</span>`;
    };
    const energyAnomalyBadge = c => {
      if (!c.energy_anomaly || c.energy_anomaly === 'none') return '';
      const isSpike = c.energy_anomaly === 'energy_spike';
      const zStr = c.energy_z_score != null ? ` (${c.energy_z_score > 0 ? '+' : ''}${Number(c.energy_z_score).toFixed(1)}σ)` : '';
      const key = isSpike ? 'badge.energy_spike' : 'badge.energy_low';
      const fallback = isSpike ? 'Higher energy than usual' : 'Lower energy than usual';
      const icon = isSpike ? '🔺' : '🔻';
      const color = isSpike ? 'var(--error-color,#f44336)' : 'var(--info-color,#2196f3)';
      return ` <span title="${_esc(this._t(key, {}, fallback))}${_esc(zStr)}" style="color:${color}">${icon}</span>`;
    };
    const artifactBadge = c => {
      const n = Array.isArray(c.artifacts) ? c.artifacts.length : 0;
      if (!n) return '';
      return ` <span title="${_esc(this._tText('badge.artifact_tip', {n}, `${n} anomal${n > 1 ? 'ies' : 'y'} detected (e.g. door opened mid-cycle) - open to see them on the graph`))}" style="color:var(--warning-color,#ff9800)">⚠</span>`;
    };
    const restartGapBadge = c => {
      const n = Array.isArray(c.restart_gaps) ? c.restart_gaps.length : 0;
      if (!n) return '';
      return ` <span title="${_esc(this._tText('badge.restart_gap_tip', {n}, `${n} HA restart gap${n > 1 ? 's' : ''} during this cycle - power trace has a hole`))}" style="color:var(--info-color,#2196f3)">↻</span>`;
    };

    const cur = (this._hass && this._hass.config && this._hass.config.currency) || '';
    const costCell = c => {
      if (c.cost == null) return '-';
      const txt = _fmtCost(c.cost, cur);
      // A time-weighted cost (#426) is a different claim than a flat one, so say
      // which price produced it rather than leaving the two indistinguishable.
      if (c.energy_price_mode === 'dynamic' && c.energy_price != null) {
        const tip = this._tText('col.cost_dynamic_tip', { price: _fmtNum(c.energy_price, 4), cur },
          'Time-weighted: charged at the price in force during the cycle (effective {price} {cur}/kWh).');
        return `<span title="${_esc(tip)}" style="border-bottom:1px dotted var(--secondary-text-color)">${txt}</span>`;
      }
      return txt;
    };
    const rows = cycles.map(c => {
      const prog = c.profile_name || c.matched_profile;
      const conf = c.match_confidence != null ? c.match_confidence * 100 : null;
      const st = c.status || 'completed';
      const kwh = c.energy_kwh != null ? c.energy_kwh : (c.energy_wh != null ? c.energy_wh / 1000 : null);
      const rowSel = selMode;  // imported cycles are selectable too (delete/compare/relabel)
      const check = rowSel
        ? `<input type="checkbox" class="wd-csel" ${sel.has(c.id) ? 'checked' : ''} style="width:auto;margin:0">`
        : `<span class="wd-devdot" style="background:${statusDotColor(st)}" title="${_esc(st)}"></span>`;
      const stLabel = this._cycleStatusLabel(st);
      const flags = `${importedBadge(c)}${reviewBadge(c)}${overrunBadge(c)}${underrunBadge(c)}${energyAnomalyBadge(c)}${artifactBadge(c)}${restartGapBadge(c)}`.trim();
      return `<tr data-cid="${_esc(c.id)}" data-selmode="${rowSel ? 1 : 0}" tabindex="0" role="button" style="cursor:pointer">
        <td style="width:26px;padding:6px 4px 6px 8px">${check}</td>
        <td>${prog ? _esc(prog) : `<span style="color:var(--secondary-text-color)">${this._t('lbl.unlabelled', {}, 'Unlabelled')}</span>`}</td>
        <td class="wd-tc-flags">${flags}</td>
        <td><span style="color:${statusDotColor(st)};font-size:.9em">${_esc(stLabel)}</span></td>
        <td class="wd-tc-date">${_fmtDate(c.start_time)}</td>
        <td class="wd-tc-num">${_fmtDuration(c.duration)}</td>
        <td class="wd-tc-num">${kwh != null ? _fmtEnergy(kwh) : '-'}</td>
        <td class="wd-tc-num">${costCell(c)}</td>
        <td class="wd-tc-num">${conf != null ? _fmtNum(conf, 0) + '%' : '-'}</td>
      </tr>`;
    }).join('');

    const thead = `<thead><tr>
      <th style="width:26px;padding:6px 4px 6px 8px"></th>
      ${_th(this._t('lbl.profile', {}, 'Profile'), 'profile', col === 'profile', dir, 'cycsort', '', this._t('col.profile_tip', {}, 'Matched program name. Unlabelled means no profile matched at end of cycle.'))}
      <th class="wd-tc-flags" title="${_esc(this._t('col.flags_tip', {}, 'Review, anomaly and source flags for the cycle. Hover an icon for detail.'))}">${this._t('lbl.flags', {}, 'Flags')}</th>
      ${_th(this._t('lbl.status', {}, 'Status'), 'status', col === 'status', dir, 'cycsort', '', this._t('col.status_tip', {}, 'Cycle outcome: Completed (natural end), Interrupted (abrupt power drop), Force Stopped (manual), or Needs Review (feedback pending).'))}
      ${_th(this._t('lbl.date', {}, 'Date'), 'date', col === 'date', dir, 'cycsort', '', this._t('col.date_tip', {}, 'Date and time the cycle started.'))}
      ${_th(this._t('lbl.duration', {}, 'Duration'), 'duration', col === 'duration', dir, 'cycsort', 'right', this._t('col.duration_tip', {}, 'Total cycle run time from start to end.'))}
      ${_th(this._t('lbl.energy', {}, 'Energy'), 'energy', col === 'energy', dir, 'cycsort', 'right', this._t('col.energy_tip', {}, 'Total energy used (kWh), computed from power over time.'))}
      ${_th(this._t('lbl.cost', {}, 'Cost'), 'cost', col === 'cost', dir, 'cycsort', 'right', this._t('col.cost_tip', {}, 'Energy cost of this cycle, fixed when it finished. With Time-Weighted Cost on, each moment is charged at its own price; otherwise at the price at the end. Set a price in Settings to fill this in.'))}
      ${_th(this._t('lbl.confidence', {}, 'Confidence'), 'confidence', col === 'confidence', dir, 'cycsort', 'right', this._t('col.confidence_tip', {}, 'Profile match confidence (0-100%). How closely the cycle power curve matched the identified program.'))}
    </tr></thead>`;

    const filterBar = `<div class="wd-filter-bar">
      <input type="text" class="wd-filter-input" id="wd-cyc-filter-text" placeholder="${_esc(this._t('msg.filter_by_profile', {}, 'Filter by profile…'))}" value="${_esc(text)}" autocomplete="off">
      <select id="wd-cyc-filter-status" class="wd-filter-select">
        <option value="" ${!fStatus ? 'selected' : ''}>${this._t('status.all_statuses', {}, 'All statuses')}</option>
        <option value="needs_review" ${fStatus === 'needs_review' ? 'selected' : ''}>${this._t('badge.needs_review', {}, 'Needs review')}${needsReviewCount ? ` (${needsReviewCount})` : ''}</option>
        <option value="completed" ${fStatus === 'completed' ? 'selected' : ''}>${this._t('status.completed', {}, 'Completed')}</option>
        <option value="interrupted" ${fStatus === 'interrupted' ? 'selected' : ''}>${this._t('status.interrupted', {}, 'Interrupted')}</option>
        <option value="force_stopped" ${fStatus === 'force_stopped' ? 'selected' : ''}>${this._t('status.force_stopped', {}, 'Force stopped')}</option>
        <option value="unlabelled" ${fStatus === 'unlabelled' ? 'selected' : ''}>${this._t('lbl.unlabelled', {}, 'Unlabelled')}</option>
        ${refCycles.length ? `<option value="imported" ${fStatus === 'imported' ? 'selected' : ''}>${this._t('status.imported', {}, 'Imported')} (${refCycles.length})</option>` : ''}
      </select>
    </div>`;

    const shown = cycles.length !== allCycles.length ? this._t('lbl.n_shown', {n: cycles.length}, `, ${cycles.length} shown`) : '';
    // Headline counts real cycles; imported recordings are called out separately
    // so the number the user recognises (their own runs) stays honest.
    const impNote = refCycles.length ? this._t('lbl.n_imported_note', {n: refCycles.length}, `, ${refCycles.length} imported`) : '';
    const title = this._t('lbl.cycles_title', {n: `${realCycles.length}${impNote}${shown}`}, `Cycles (${realCycles.length}${impNote}${shown})`);

    const toolbar = canEdit ? `<div class="wd-card-actions" style="margin:0 0 4px;justify-content:flex-end">
      <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="cyc-auto-open" title="${_esc(this._t('btn.auto_label_cycles_tip', {}, 'Name unlabelled cycles whose match confidence clears the threshold.'))}">${this._t('btn.auto_label_cycles', {}, 'Auto-label cycles')}</button>
      <button class="wd-btn ${selMode ? 'wd-btn-primary' : 'wd-btn-secondary'} wd-btn-sm" data-action="cyc-select-toggle">${selMode ? this._t('btn.done', {}, 'Done') : this._t('btn.select', {}, 'Select')}</button>
    </div>` : '';

    // Merge folds selected cycles into one real cycle, so it can't include an
    // imported recording (that would pull its trace into usage stats). The other
    // bulk actions (compare/relabel/delete) work on imports too.
    const refIds = new Set(refCycles.map(c => c.id));
    const selHasRef = [...sel].some(id => refIds.has(id));
    const bulk = selMode ? `<div class="wd-card-actions" style="margin:0 0 10px">
      <span class="wd-info" style="margin:0">${this._t('lbl.n_selected', {n: sel.size}, `${sel.size} selected`)}</span>
      <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="cyc-compare" ${sel.size < 2 ? 'disabled' : ''}>${this._t('btn.compare', {}, 'Compare')}${sel.size >= 2 ? ` (${sel.size})` : ''}</button>
      <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="cyc-merge" ${(sel.size < 2 || selHasRef) ? 'disabled' : ''}${selHasRef ? ` title="${_esc(this._t('msg.merge_no_imports', {}, 'Imported recordings cannot be merged into a real cycle. Deselect them to merge.'))}"` : ''}>${this._t('btn.merge', {}, 'Merge')}${sel.size >= 2 ? ` (${sel.size})` : ''}</button>
      <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="cyc-relabel" ${sel.size < 1 ? 'disabled' : ''}>${this._t('btn.relabel', {count: sel.size}, `Relabel (${sel.size})`)}</button>
      <button class="wd-btn wd-btn-danger wd-btn-sm" data-action="cyc-bulk-del" ${sel.size < 1 ? 'disabled' : ''}>${this._t('btn.delete', {}, 'Delete')}${sel.size >= 1 ? ` (${sel.size})` : ''}</button>
    </div>` : '';

    // D3: "Load more" pagination - only when the backend reports more rows, real or
    // imported (each list has its own cursor).
    const loadMoreBusy = this._busy.has('cyc-load-more');
    const loadMore = (this._cyclesHasMore || this._importedHasMore) ? `<div style="text-align:center;margin-top:12px">
      <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="cyc-load-more" ${loadMoreBusy ? 'disabled' : ''}>${loadMoreBusy ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.load_more', {}, 'Load more')}</button>
    </div>` : '';

    const cyclesHtml = `
      <div class="wd-card">
        <div class="wd-card-title">${title}</div>
        ${filterBar}
        ${toolbar}${bulk}
        ${cycles.length === 0
          ? `<div class="wd-empty" style="padding:24px"><div class="wd-icon">📋</div>${allCycles.length ? this._t('msg.no_cycles_match', {}, 'No cycles match the current filter.') : this._t('msg.no_cycles_yet', {}, 'No cycles recorded yet.')}</div>`
          : `<div class="wd-table-wrap"><table class="wd-table">${thead}<tbody>${rows}</tbody></table></div>`}
        ${loadMore}
      </div>`;

    const cyclesErrorBanner = this._cyclesError ? `<div class="wd-error-state" role="alert"><span>${this._t('msg.fetch_error', {}, 'Failed to load data.')}</span><button class="wd-btn" type="button" data-action="retry-cycles">${this._t('btn.retry', {}, 'Retry')}</button></div>` : '';
    return cyclesErrorBanner + cyclesHtml;
  }

  // ── Profiles tab ──────────────────────────────────────────────────────────

  // The advisory for one profile and code, or undefined. Health, trend and drift
  // warnings render from these only (audit UI-12): they carry the maintenance
  // suppression, so a logged descale clears the nag the raw stats would keep.
  _profileAdvisory(name, code) {
    return (this._profileAdvisories || []).find(a => a && a.profile === name && a.code === code);
  }

  _advisoryText(a) {
    return this._tText(a.message_key, a.message_params || {}, a.message || '');
  }

  _trendIcon(trend) {
    if (trend === 'up') return `<span title="${_esc(this._t('trend.up', {}, 'Trending up'))}" style="color:var(--warning-color,#ff9800)">↑</span>`;
    if (trend === 'down') return `<span title="${_esc(this._t('trend.down', {}, 'Trending down'))}" style="color:var(--info-color,#2196f3)">↓</span>`;
    return '';
  }

  _profileCardHtml(p) {
    const dur = p.avg_duration ? this._t('lbl.duration_avg', {v: Math.round(p.avg_duration / 60)}, `~${Math.round(p.avg_duration / 60)}m avg`) : this._t('lbl.no_duration', {}, 'no duration');
    const energy = p.avg_energy != null ? ` · ${this._t('lbl.energy_per_cycle', {v: _fmtEnergy(p.avg_energy)}, '{v}/cycle')}` : '';
    const total = (p.avg_energy != null && p.cycle_count)
      ? ` · ${this._t('lbl.energy_total', {v: _html(`<strong>${_esc(_fmtEnergy(p.avg_energy * p.cycle_count))}</strong>`)}, '{v} total')}` : '';
    const cur = (this._hass && this._hass.config && this._hass.config.currency) || '';
    const cost = p.avg_cost != null ? ` · ${this._t('lbl.avg_cost', {}, 'Avg')} ${_fmtCost(p.avg_cost, cur)}/${this._t('lbl.per_cycle_short', {}, 'cycle')}` : '';
    const h = (this._profileHealth || {})[p.name];
    const t = (this._profileTrends || {})[p.name];
    const poorAdv = this._profileAdvisory(p.name, 'poor_health');
    const healthBadge = poorAdv
      ? `<span class="wd-badge" style="color:var(--error-color,#f44336);background:rgba(244,67,54,.12)" title="${_esc(this._advisoryText(poorAdv))}">⚠ ${this._t('badge.poor_fit', {}, 'poor fit')}</span>`
      : '';
    const trendAdv = this._profileAdvisory(p.name, 'duration_trend_up') || this._profileAdvisory(p.name, 'energy_trend_up');
    const trendBadge = trendAdv
      ? `<span class="wd-badge" style="color:var(--secondary-text-color,#888)" title="${_esc(this._advisoryText(trendAdv))}">${this._trendIcon('up')}</span>`
      : '';
    const warmupThreshold = (this._constants && this._constants.PROFILE_MIN_WARMUP_CYCLES) || 5;
    const cycleCount = (h && h.cycle_count) || 0;
    // Imported profiles are trusted downloaded templates: exempt from warm-up (they
    // match immediately), shown with an "Imported" badge instead of "Still learning".
    const isWarmup = cycleCount < warmupThreshold && !p.is_imported;
    const warmupBadge = isWarmup
      ? `<span class="wd-badge" title="${_esc(this._tText('msg.warmup_detail', {needed: warmupThreshold}, `Matching already works. WashData asks you to confirm the first ${warmupThreshold} cycles of this profile before labelling on its own.`))}" style="background:var(--info-color,#2196f3);color:#fff">${this._t('msg.warmup_badge', {done: cycleCount, needed: warmupThreshold}, `Still learning (${cycleCount}/${warmupThreshold} cycles)`)}</span>`
      : '';
    const importedBadge = p.is_imported
      ? `<span class="wd-badge" title="${_esc(this._t('badge.imported_tip', {}, 'Imported from the community store. Used for matching only, not counted in stats.'))}" style="background:var(--info-color,#2196f3);color:#fff">📥 ${this._t('status.imported', {}, 'Imported')}</span>`
      : '';
    // STORE-21: how often the matcher labelled one of this appliance's own cycles
    // with an imported program, so an import that never fits can be pruned.
    // Counted locally from the stored cycles; nothing is sent to the store.
    const usedN = p.is_imported ? Number((this._profileMatcherCounts || {})[p.name] || 0) : null;
    const usedBadge = usedN == null ? '' : `<span class="wd-badge wd-matcher-used" data-used="${usedN}" style="color:var(--secondary-text-color,#888)" title="${_esc(this._tText('badge.matcher_used_tip', {}, "Cycles on this appliance that WashData matched to this imported program on its own. An import that never matches may not fit your appliance; you can remove it. Counted locally; nothing is sent to the store."))}">${usedN > 0
      ? this._t('badge.matcher_used', {n: usedN}, `Matched ${usedN} of your cycles`)
      : this._t('badge.matcher_unused', {}, 'Not matched to your cycles yet')}</span>`;
    // A program with no cycle behind it is silently absent from every match: it can
    // never win, and it cannot veto a shorter look-alike either (#400). That state used
    // to be a debug log only, so it is called out here, on the program itself.
    const unmatchableAdv = this._profileAdvisory(p.name, 'unmatchable');
    const unmatchableBadge = unmatchableAdv
      ? `<span class="wd-badge" style="color:var(--error-color,#f44336);background:rgba(244,67,54,.12)" title="${_esc(this._tText(unmatchableAdv.message_key, unmatchableAdv.message_params, unmatchableAdv.message))}">⚠ ${this._t('badge.unmatchable', {}, "can't be matched")}</span>`
      : '';
    // How this program ends, measured from its own cycles. A dishwasher that has
    // gone quiet for its drying phase is the commonest "is it finished?" question,
    // so the measured length belongs on the program itself. The appliance does not
    // always emit the terminal event, so the badge hedges with ~ and the tooltip
    // gives the frequency outright rather than implying a guarantee.
    const term = (this._profileTerminal || {})[p.name];
    let terminalBadge = '';
    if (term && term.quiet_before_s > 0 && term.seen_in >= 2) {
      const mins = Math.max(1, Math.round(term.quiet_before_s / 60));
      const watts = Number(term.event_watts || 0).toFixed(0);
      const secs = Math.round(term.event_seconds || 0);
      const tTip = this._tText('badge.quiet_tail_tip',
        {mins, secs, watts, seen: term.seen_in, measured: term.measured},
        `Near the end this program goes quiet for about ${mins} min, then draws about `
        + `${watts} W for ${secs} s. Seen in ${term.seen_in} of ${term.measured} measured cycles.`);
      terminalBadge = `<span class="wd-badge" style="color:var(--secondary-text-color,#888)"`
        + ` title="${_esc(tTip)}">${this._t('badge.quiet_tail', {mins}, `~${mins}m quiet tail`)}</span>`;
    }
    // Register item 304: cycles filed under this program that are too far from its
    // usual length to ever match it. Not cosmetic - they also drag avg_duration, and
    // with it every future time estimate for this program.
    const durAdv = this._profileAdvisory(p.name, 'duration_outlier');
    const durBadge = durAdv
      ? `<span class="wd-badge" style="color:var(--warning-color,#ff9800);background:rgba(255,152,0,.12)" title="${_esc(this._tText(durAdv.message_key, durAdv.message_params, durAdv.message))}">\u26A0 ${this._t('badge.duration_outlier', {n: (durAdv.message_params || {}).n || 1}, `${(durAdv.message_params || {}).n || 1} odd-length cycle(s)`)}</span>`
      : '';

    const badges = [unmatchableBadge, durBadge, healthBadge, trendBadge, terminalBadge, warmupBadge, importedBadge, usedBadge].filter(Boolean).join(' ');
    // Mini power-signature curve: the profile's real average power shape (from its
    // envelope), so the card thumbnail matches the actual cycle. Painted after
    // render by _drawProfileSparklines. Needs ≥3 envelope points.
    const spark = (Array.isArray(p.signature_curve) && p.signature_curve.length >= 3)
      ? `<canvas class="wd-prof-spark" data-spark-prof="${_esc(p.name)}" width="64" height="20" aria-label="${_esc(this._tText('lbl.sparkline', { name: p.name }, 'Average power curve'))}"></canvas>`
      : '';
    return `
      <div class="wd-prof-wrap">
        <button class="wd-profile-card" type="button" data-action="open-profile" data-pname="${_esc(p.name)}">
          <div class="wd-profile-head">
            <span class="wd-profile-name">${_esc(p.name)}</span>
            ${spark}
          </div>
          ${badges ? `<div class="wd-profile-badges">${badges}</div>` : ''}
          <div class="wd-profile-meta">${this._t('lbl.n_cycles', {n: p.cycle_count || 0}, '{n} cycles')} · ${dur}${energy}${total}${cost}</div>
        </button>
      </div>`;
  }


  // Paint one power curve into a small canvas. Shared by the profile-card
  // signature sparklines (D2) and the import-review candidate rows (#344), so the two
  // cannot drift apart.
  _paintSparkline(cv, curve) {
    if (!cv || !Array.isArray(curve) || curve.length < 3) return;
    const primary = (getComputedStyle(this).getPropertyValue('--primary-color') || '#03a9f4').trim() || '#03a9f4';
    const dpr = window.devicePixelRatio || 1;
    const rect = cv.getBoundingClientRect();
    const w = cv.width = Math.max(1, Math.round((rect.width || 64) * dpr));
    const h = cv.height = Math.max(1, Math.round((rect.height || 20) * dpr));
    const ctx = cv.getContext('2d');
    ctx.clearRect(0, 0, w, h);
    const max = Math.max(...curve, 1), pad = 2 * dpr;
    const X = i => pad + (curve.length === 1 ? 0 : (i / (curve.length - 1)) * (w - 2 * pad));
    const Y = v => h - pad - (Math.max(0, v) / max) * (h - 2 * pad);
    ctx.beginPath();
    curve.forEach((v, i) => { const x = X(i), y = Y(v); i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); });
    ctx.strokeStyle = primary; ctx.lineWidth = 1.5 * dpr; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.stroke();
  }

  // D2: paint every profile-card sparkline after a render.
  _drawProfileSparklines() {
    const sr = this.shadowRoot;
    if (!sr) return;
    const canvases = sr.querySelectorAll('canvas[data-spark-prof]');
    if (!canvases.length) return;
    const byName = {};
    for (const p of (this._profiles || [])) byName[p.name] = p;
    canvases.forEach(cv => {
      const prof = byName[cv.dataset.sparkProf];
      this._paintSparkline(cv, (prof && prof.signature_curve) || []);
    });
  }

  _htmlProfiles() {
    const rebuildBusy = this._busy.has('rebuild-envelopes');
    const canEdit = this._canEdit();
    const byName = {};
    this._profiles.forEach(p => { byName[p.name] = p; });
    const pg = this._profileGroups || { groups: [] };
    const groupedNames = new Set();
    pg.groups.forEach(g => (g.members || []).forEach(m => groupedNames.add(m)));

    // Group sections (with cohesion badge + low-cohesion warning).
    const groupSections = pg.groups.map(g => {
      const memCards = (g.members || []).map(m => byName[m] ? this._profileCardHtml(byName[m]) : '').join('');
      const cohPct = Math.round((g.cohesion != null ? g.cohesion : 1) * 100);
      const cohBadge = g.cohesive
        ? `<span class="wd-badge" style="color:var(--success-color,#4caf50);background:rgba(76,175,80,.14);margin-bottom:0">${this._t('lbl.cohesion_good', {pct: cohPct}, 'cohesion ' + cohPct + '%')}</span>`
        : `<span class="wd-badge" style="color:var(--warning-color,#ff9800);background:rgba(255,152,0,.14);margin-bottom:0">${this._t('lbl.cohesion_low', {pct: cohPct}, '⚠ low cohesion ' + cohPct + '%')}</span>`;
      const warn = g.cohesive ? '' : `<p class="wd-info" style="margin:0 0 8px;color:var(--warning-color,#ff9800)">${this._t('msg.group_not_cohesive', {}, "These profiles aren't similar enough to group reliably, so matching treats them individually until you remove the outlier or split the group.")}</p>`;
      const titleEl = canEdit
        ? `<button class="wd-btn-link" style="font-size:1.05em;font-weight:600;text-align:left;padding:0;border:none;background:none;cursor:pointer;color:inherit" data-action="pg-edit" data-gname="${_esc(g.name)}">🔗 ${_esc(g.name)}</button>`
        : `<span style="font-size:1.05em;font-weight:600">🔗 ${_esc(g.name)}</span>`;
      return `<div class="wd-card" style="margin-bottom:12px">
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px">
          ${titleEl}
          ${cohBadge}<span style="flex:1"></span>
          ${canEdit ? `<button class="wd-btn wd-btn-primary wd-btn-sm" data-action="pg-edit" data-gname="${_esc(g.name)}">${this._t('btn.manage', {}, 'Manage')}</button>` : ''}
        </div>
        ${warn}
        <div class="wd-profiles-grid">${memCards}</div>
      </div>`;
    }).join('');

    const ungrouped = this._profiles.filter(p => !groupedNames.has(p.name));
    const ungroupedCards = ungrouped.map(p => this._profileCardHtml(p)).join('');

    // Post-create onboarding: a brand-new (empty) device with online enabled can
    // adopt a whole community setup instead of starting from scratch. Shown only
    // when there are no profiles AND no cycles at all.
    const isEmptyDevice = this._profiles.length === 0
      && !(this._cycles || []).length && !(this._refCycles || []).length;
    const onboardBanner = (canEdit && this._onlineEnabled() && isEmptyDevice) ? `
      <div class="wd-sug-banner" style="border-color:var(--primary-color);background:var(--accent-dim,rgba(0,180,216,.08))">
        <span>📥 ${this._t('msg.onboard_download', {}, 'New device? Adopt a ready-made setup (programs, reference cycles and phases) from another WashData user with the same appliance.')}</span>
        <button class="wd-btn wd-btn-sm wd-btn-primary" data-action="store-onboard">${this._t('btn.browse_community_setups', {}, 'Browse community setups')}</button>
      </div>` : '';

    // Coverage gaps: unlabelled recent cycles that look like one program the user
    // has not created (92-95% precise on the corpus, silent when nothing is
    // missing; register item 432). The setup card's "create from cluster" lands here.
    const gapClusters = canEdit ? (((this._coverageGaps || {}).profile_suggestions) || []).slice(0, 2) : [];
    const gapBanner = gapClusters.map(c => {
      const min = Math.round((c.avg_duration_s || 0) / 60);
      const cid = (c.cycle_ids || [])[0] || '';
      return `<div class="wd-sug-banner">
        <span>🧩 ${this._t('msg.coverage_gap_cluster', {count: c.count, min}, `${c.count} recent unlabelled cycles of about ${min} min look like one program you have not created yet.`)}</span>
        <button class="wd-btn wd-btn-sm wd-btn-primary" data-action="coverage-create" data-cid="${_esc(cid)}" data-min="${min}">${this._t('btn.create_profile_from_gap', {}, 'Create profile')}</button>
      </div>`;
    }).join('');

    const profilesHtml = onboardBanner + gapBanner + `
      <div class="wd-card">
        <div class="wd-card-title">${this._t('tab.profiles', {}, 'Profiles')} (${this._profiles.length})</div>
        <p class="wd-info">${this._t('msg.profiles_intro', {}, 'Click a profile for stats, phases and cleanup. Group near-identical programs (same shape/duration, different temperature or spin) so matching reliably picks between them.')}</p>
        ${canEdit ? `<div class="wd-card-actions">
          <button class="wd-btn wd-btn-primary" data-action="create-profile" title="${_esc(this._t('btn.new_profile_tip', {}, 'Create a new program profile from an existing labelled cycle or recording'))}">${this._t('btn.new_profile', {}, '+ New Profile')}</button>
          <button class="wd-btn wd-btn-secondary" data-action="pg-new" title="${_esc(this._t('btn.new_group_tip', {}, 'Group near-identical profiles (same shape, different temperature or spin) so matching can tell them apart.'))}">${this._t('btn.new_group', {}, '+ New Group')}</button>
          <button class="wd-btn wd-btn-secondary" data-action="rebuild-envelopes" ${rebuildBusy ? 'disabled' : ''} title="${_esc(this._t('btn.rebuild_tip', {}, 'Rebuild every profile\'s expected power band from its labelled cycles. Run after labelling or correcting cycles.'))}">${rebuildBusy ? ('<span class="wd-spin"></span> ' + this._t('status.rebuilding', {}, 'Rebuilding…')) : this._t('btn.rebuild', {}, 'Rebuild Envelopes')}</button>
        </div>` : ''}
      </div>
      ${groupSections}
      ${this._profiles.length === 0
        ? `<div class="wd-empty"><div class="wd-icon">📊</div>${this._t('msg.no_profiles_yet', {}, 'No profiles yet. Create one from a labelled cycle.')}</div>`
        : (ungrouped.length
          ? `${groupSections ? `<div class="wd-card-title" style="margin:6px 0 8px">${this._t('lbl.ungrouped', {}, 'Ungrouped')}</div>` : ''}<div class="wd-profiles-grid">${ungroupedCards}</div>`
          : '')}`;

    const subtabBtns = [
      ['profiles', this._t('tab.subtab_profiles', {}, 'Profiles')],
      ['phase-catalog', this._t('tab.subtab_phase_catalog', {}, 'Phase Catalog')],
    ].map(([id, lbl]) => `<button class="wd-subtab ${this._profSubtab === id ? 'active' : ''}" role="tab" aria-selected="${this._profSubtab === id ? 'true' : 'false'}" data-proftab="${id}">${lbl}</button>`).join('');

    const profilesErrorBanner = (this._profilesError || this._profileGroupsError) ? `<div class="wd-error-state" role="alert"><span>${this._t('msg.fetch_error', {}, 'Failed to load data.')}</span><button class="wd-btn" type="button" data-action="retry-profiles">${this._t('btn.retry', {}, 'Retry')}</button></div>` : '';
    return `
      <div class="wd-subtabs" role="tablist">${subtabBtns}</div>
      ${this._profSubtab === 'phase-catalog' ? this._htmlPhases() : (profilesErrorBanner + profilesHtml)}
    `;
  }

  _htmlProfileGroupModal(m) {
    const busy = this._busy.has('pg-save');
    const cache = this._profileEnvCache || {};
    const colOf = name => _PALETTE[Math.max(0, this._profiles.findIndex(p => p.name === name)) % _PALETTE.length];
    const members = m.members || [];

    const checks = this._profiles.map(p => {
      const on = members.includes(p.name);
      const dur = p.avg_duration ? `~${Math.round(p.avg_duration / 60)}m` : '';
      const en = p.avg_energy != null ? ` · ${_fmtEnergy(p.avg_energy)}` : '';
      const sw = on ? `<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:${colOf(p.name)};margin:0 2px"></span>` : '';
      return `<label class="wd-rev-tag"><input type="checkbox" class="wd-pg-mem" value="${_esc(p.name)}" ${on ? 'checked' : ''}> ${sw}${_esc(p.name)} <span style="color:var(--secondary-text-color);font-size:.85em">${dur}${en}</span></label>`;
    }).join('');

    // Overlay canvas of the selected members' envelopes (colours match swatches).
    const drawable = members.filter(n => cache[n] && (cache[n].avg || []).length);
    const legend = drawable.length ? `<div class="wd-leg">${drawable.map(n => `<span class="wd-leg-i"><span class="wd-leg-sw" style="background:${colOf(n)}"></span> ${_esc(n)}</span>`).join('')}</div>` : '';
    const canvas = drawable.length
      ? `<div class="wd-canvas-wrap" style="margin-top:8px"><canvas id="wd-pgroup-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_envelope_chart', {}, 'Profile power envelope chart'))}" style="height:150px"></canvas></div>${legend}`
      : `<p class="wd-info">${this._t('msg.group_preview_hint', {}, 'Tick 2+ members to preview and compare their power curves.')}</p>`;

    // Cohesion of the stored group (recomputed on save), if editing one.
    const stored = ((this._profileGroups || {}).groups || []).find(g => g.name === m.orig);
    const cohInfo = (stored && stored.cohesion != null)
      ? `<span class="wd-badge" style="color:${stored.cohesive ? 'var(--success-color,#4caf50)' : 'var(--warning-color,#ff9800)'};background:${stored.cohesive ? 'rgba(76,175,80,.14)' : 'rgba(255,152,0,.14)'}">${stored.cohesive ? this._t('lbl.cohesion_good', {pct: Math.round(stored.cohesion * 100)}, 'cohesion ' + Math.round(stored.cohesion * 100) + '%') : this._t('lbl.cohesion_low', {pct: Math.round(stored.cohesion * 100)}, '⚠ low cohesion ' + Math.round(stored.cohesion * 100) + '%')}</span>` : '';

    return `<h2>${m.orig ? this._t('modal.edit_group', {}, 'Edit profile group') : this._t('modal.new_group', {}, 'New profile group')}</h2>
      <div class="wd-field" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><label style="margin:0">${this._t('lbl.group_name', {}, 'Group name')}</label><input type="text" id="wd-pg-name" value="${_esc(m.name || '')}" placeholder="${_esc(this._t('placeholder.group_name', {}, 'e.g. Cotton 2:47'))}" style="flex:1;min-width:180px">${cohInfo}</div>
      ${canvas}
      <div class="wd-rev-sub">${this._t('lbl.members', {}, 'Members')}${members.length ? ` (${members.length})` : ''}</div>
      <div class="wd-rev-tags">${checks || `<span class="wd-info">${this._t('msg.no_profiles_yet_short', {}, 'No profiles yet.')}</span>`}</div>
      <p class="wd-info" style="margin-top:10px">${this._t('msg.group_modal_help', {}, 'Group programs with the same shape that differ in temperature or spin. Matching scores the group as one, then picks the best-fitting member. Pick at least 2; the overlay shows how alike they are.')}</p>
      <div class="wd-modal-actions">
        <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        ${m.orig ? `<button class="wd-btn wd-btn-danger" data-maction="pg-delete" title="${_esc(this._t('btn.delete_group_tip', {}, 'Delete this group only - the member profiles are kept'))}">${this._t('btn.delete_group', {}, 'Delete Group')}</button>` : ''}
        <button class="wd-btn wd-btn-primary" data-maction="pg-save" ${busy ? 'disabled' : ''}>${busy ? ('<span class="wd-spin"></span> ' + this._t('status.saving', {}, 'Saving…')) : this._t('btn.save_group', {}, 'Save Group')}</button>
      </div>`;
  }

  _drawGroupCanvas() {
    const m = this._modal;
    if (!m || m.type !== 'profile-group') return;
    const cache = this._profileEnvCache || {};
    const colOf = name => _PALETTE[Math.max(0, this._profiles.findIndex(p => p.name === name)) % _PALETTE.length];
    let xMax = 0;
    const series = (m.members || []).filter(n => cache[n] && (cache[n].avg || []).length).map(n => {
      const env = cache[n];
      const last = env.avg[env.avg.length - 1];
      xMax = Math.max(xMax, env.target_duration || (last ? last[0] : 0));
      return { points: env.avg, stroke: colOf(n), width: 2, alpha: 0.9, name: n };
    });
    if (series.length) this._drawCurves('wd-pgroup-canvas', { series, xMax });
  }

  // ── Settings tab ──────────────────────────────────────────────────────────

  // F2: current Settings disclosure level ("basic" | "advanced"). Default basic.
  _settingsLevel() {
    return this._pref('settings_level', 'basic') === 'advanced' ? 'advanced' : 'basic';
  }

  // F2: whether a schema field is visible under the current disclosure level.
  // Advanced shows everything; Basic shows only fields flagged `basic: true`.
  // Purely a visibility filter — hidden fields keep their stored values.
  _settingFieldVisible(f) {
    // Internal tuning (audit UI-02): set by the integration and its suggestions,
    // so it is shown only on request, when the device has its own value, or when
    // it carries a conflict or a suggestion - never silently out of reach.
    if (f.internal && !this._pref('show_internal', false) && !(this._internalReveal || new Set()).has(f.key)) return false;
    return this._settingsLevel() === 'advanced' || !!f.basic;
  }

  // Internal fields that must stay visible whatever the toggle says: a value of
  // the device's own, a conflict, or a suggestion pointing at them.
  _computeInternalReveal(o) {
    const reveal = new Set();
    const defaults = this._optDefaults || {};
    const conflicts = this._conflictKeysFromOpts();
    const sug = new Set((this._suggestions || []).map(x => x.key));
    for (const sec of _SETTINGS_SECTIONS) {
      for (const f of (sec.fields || (sec.groups || []).flatMap(g => g.fields || []))) {
        if (!f.internal) continue;
        const v = (this._opts || {})[f.key];
        const d = defaults[f.key] !== undefined ? defaults[f.key] : f.def;
        const own = v !== undefined && v !== null && v !== '' && String(v) !== String(d);
        if (own || conflicts.has(f.key) || sug.has(f.key) || Object.prototype.hasOwnProperty.call(this._pendingSettings || {}, f.key)) reveal.add(f.key);
      }
    }
    return reveal;
  }

  // F2: does a section expose at least one basic-flagged field? Used to hide
  // sections that would render empty in Basic mode.
  _secHasBasicFields(sec) {
    const fields = sec.fields || (sec.groups || []).flatMap(g => g.fields || []);
    return fields.some(f => f.basic);
  }

  _htmlSettings() {
    const o = this._editedOpts();
    if (!Object.keys(o).length && this._tabError === 'settings')
      return `<div class="wd-error-state" role="alert"><span>${this._t('msg.fetch_error', {}, 'Failed to load data.')}</span><button class="wd-btn" type="button" data-action="retry-tab">${this._t('btn.retry', {}, 'Retry')}</button></div>`;
    if (!Object.keys(o).length)
      return `<div class="wd-empty"><div class="wd-icon">⚙️</div>${this._t('msg.loading_settings', {}, 'Loading settings…')}</div>`;
    const suggestionsErrorBanner = this._suggestionsError ? `<div class="wd-error-state" role="alert"><span>${this._t('msg.fetch_error', {}, 'Failed to load data.')}</span><button class="wd-btn" type="button" data-action="retry-suggestions">${this._t('btn.retry', {}, 'Retry')}</button></div>` : '';
    const level = this._settingsLevel();
    const basicMode = level === 'basic';
    this._internalReveal = this._computeInternalReveal(o);

    const sugKeys = new Set((this._suggestions || []).map(s => s.key));
    const secHasSug = (sec) => {
      const fields = sec.fields || (sec.groups || []).flatMap(g => g.fields || []);
      return fields.some(f => sugKeys.has(f.key));
    };
    const _secConfKeys = this._conflictKeysFromOpts();
    const secHasConf = (sec) => {
      const fields = sec.fields || (sec.groups || []).flatMap(g => g.fields || []);
      return fields.some(f => _secConfKeys.has(f.key));
    };
    // ml_training moved to its own "ML Training" tab; never show it under Settings.
    // Also filter sections by device type (e.g. hide Matching for "other" device type).
    const currentDeviceType = (this._opts && this._opts.device_type) || '';
    const visibleSections = _SETTINGS_SECTIONS.filter(sec => {
      if (sec.id === 'ml_training') return false;
      if (currentDeviceType && sec.notDeviceTypes && sec.notDeviceTypes.includes(currentDeviceType)) return false;
      if (currentDeviceType && sec.onlyDeviceTypes && !sec.onlyDeviceTypes.includes(currentDeviceType)) return false;
      // F2: in Basic mode, hide sections with no essential (basic-flagged) fields.
      if (basicMode && !this._secHasBasicFields(sec)) return false;
      return true;
    });
    // The selected section may not be visible under the current filter (e.g. after
    // switching to Basic while on an advanced-only section) — fall back to the
    // first visible section so the nav highlight matches the rendered content.
    const activeSecId = (visibleSections.find(sec => sec.id === this._settingsSec) || visibleSections[0] || {}).id;
    const nav = visibleSections.map(sec => {
      const hasSug = secHasSug(sec);
      const hasConf = secHasConf(sec);
      return `<button class="wd-sec-btn ${activeSecId === sec.id ? 'active' : ''}" data-sec="${sec.id}">${_esc(this._t('section.' + sec.id + '.label', {}, sec.label))}${hasConf ? '<span class="wd-sec-conf-dot"></span>' : (hasSug ? '<span class="wd-sec-sug-dot"></span>' : '')}</button>`;
    }).join('');
    // F2: Basic | Advanced slide toggle.
    const levelToggle = `<label class="wd-mode-switch" title="${_esc(this._t('lbl.settings_detail_level', {}, 'Settings detail level'))}">
      <span class="wd-mode-switch-label ${basicMode ? 'active' : ''}">${this._t('lbl.settings_basic', {}, 'Basic')}</span>
      <span class="wd-toggle-track">
        <input type="checkbox" id="wd-settings-level-chk" ${!basicMode ? 'checked' : ''} data-action="set-settings-level">
        <span class="wd-toggle-knob"></span>
      </span>
      <span class="wd-mode-switch-label ${!basicMode ? 'active' : ''}">${this._t('lbl.settings_advanced', {}, 'Advanced')}</span>
    </label>`;
    const basicNote = basicMode
      ? `<p class="wd-info" style="margin:0 0 10px;font-size:.82em">${this._t('msg.settings_basic_note', {}, 'Showing essential settings. Switch to Advanced for the full list.')}</p>`
      : '';
    // Advanced only: reveal the internal tuning fields (search always finds them).
    const internalToggle = basicMode ? '' : `<label class="wd-check-inline" style="font-size:.82em;display:inline-flex;align-items:center;gap:6px" title="${_esc(this._t('lbl.show_internal_tip', {}, 'Settings WashData tunes for you (sampling, watchdog, match cadence, thresholds). Shown when this device has its own value, a conflict or a suggestion.'))}">
      <input type="checkbox" id="wd-settings-internal-chk" data-action="set-settings-internal" ${this._pref('show_internal', false) ? 'checked' : ''}>
      ${this._t('lbl.show_internal', {}, 'Show internal settings')}</label>`;

    const saveBusy = this._busy.has('save-settings');
    const confCount = _secConfKeys.size;
    const s = confCount !== 1 ? 's' : '';
    const confBanner = confCount ? `
      <div class="wd-sug-banner" style="background:rgba(183,28,28,.10);border-color:rgba(183,28,28,.4);color:var(--error-color,#b71c1c)">
        <span>⚠ ${this._t('conflict.settings_banner', {n: confCount}, `Setting conflicts: ${confCount}. Check the highlighted sections and fix them before saving.`)}</span>
        <button class="wd-btn wd-btn-sm wd-btn-secondary" data-action="conf-goto-section">${this._t('conflict.settings_banner_btn', {}, 'Go to first')}</button>
      </div>` : '';
    const sugCount = this._suggestions.length;
    const sugOnly = this._settingsSugOnly && !this._settingsSearch;
    const applyAllBtn = sugCount ? `<button class="wd-btn wd-btn-sm wd-btn-primary" data-action="sug-apply-all">${this._t('btn.apply_all', {}, 'Apply all')}</button>` : '';
    const dismissBtn = sugCount ? `<button class="wd-btn wd-btn-sm wd-btn-secondary" data-action="sug-dismiss">${this._t('btn.dismiss', {}, 'Dismiss')}</button>` : '';
    const banner = sugCount ? (sugOnly ? `
      <div class="wd-sug-banner">
        <span>💡 ${this._t('msg.showing_suggestions', {count: sugCount}, `Showing ${sugCount} setting${sugCount > 1 ? 's' : ''} with suggestions.`)} <span style="text-decoration:underline;cursor:pointer" data-action="sug-show-all">${this._t('msg.show_all_settings', {}, 'Show all settings')}</span>.</span>
        ${applyAllBtn}
      </div>` : `
      <div class="wd-sug-banner">
        <span>💡 ${this._t('msg.tuning_suggestions_available', {count: sugCount}, `${sugCount} tuning suggestion${sugCount > 1 ? 's' : ''} available from observed cycles. They appear beside the relevant fields.`)}</span>
        <button class="wd-btn wd-btn-sm wd-btn-secondary" data-action="goto-suggestions">${this._t('btn.show_only', {}, 'Show only')}</button>
        ${applyAllBtn}
        ${dismissBtn}
      </div>`) : '';

    const analyzeBusy = this._busy.has('sug-analyze');
    const analyzeBtn = `<button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="sug-analyze" ${analyzeBusy ? 'disabled' : ''} title="${_esc(this._t('btn.run_analysis_tip', {}, 'Analyze your recorded cycles now and refresh tuning suggestions'))}">${analyzeBusy ? ('<span class="wd-spin"></span> ' + this._t('status.analyzing', {}, 'Analyzing…')) : this._t('btn.run_analysis', {}, '🔍 Run suggestion analysis')}</button>`;

    const search = this._settingsSearch || '';
    const q = search.trim().toLowerCase();
    const searchInput = `<input type="text" id="wd-settings-search" class="wd-filter-input" placeholder="${this._t('msg.search_placeholder', {}, 'Search settings…')}" value="${_esc(search)}" autocomplete="off" style="flex:0 0 auto;width:200px;max-width:40%">`;

    const formContent = q ? this._htmlSettingsSearch(o, q) : (sugOnly ? this._htmlSettingsSugOnly(o) : this._htmlSettingsSection(o));

    // #343: muted-suggestions notice + reset. Muted keys have no visible card, so
    // this is the only place the user can bring them back.
    const mutedCount = (this._lockedSuggestions || []).length;
    const mutedBanner = mutedCount ? `
      <div class="wd-sug-banner" style="opacity:.92">
        <span>🔕 ${this._t('msg.n_suggestions_muted', {count: mutedCount}, `${mutedCount} suggestion${mutedCount > 1 ? 's' : ''} muted; the auto-tuner will not propose these.`)}</span>
        <button class="wd-btn wd-btn-sm wd-btn-secondary" data-action="sug-unmute-all">${this._t('btn.reset_muted', {}, 'Reset muted')}</button>
      </div>` : '';

    return `
      ${suggestionsErrorBanner}
      <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap">
        <div class="wd-card-title" style="margin:0">${this._t('tab.settings', {}, 'Settings')}</div>
        ${analyzeBtn}
      </div>
      ${confBanner}${banner}${mutedBanner}${basicNote}
      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px">
        ${searchInput}
        <div class="wd-section-nav" style="flex:1;margin:0;margin-bottom:0">${nav}</div>
        ${levelToggle}
        ${internalToggle}
      </div>
      <div class="wd-card">
        <form id="wd-settings-form">${formContent}</form>
        <div class="wd-card-actions" style="margin-top:20px">
          <button class="wd-btn wd-btn-primary" id="wd-settings-save" ${saveBusy ? 'disabled' : ''}>${saveBusy ? ('<span class="wd-spin"></span> ' + this._t('status.saving', {}, 'Saving…')) : this._t('btn.save_settings', {}, 'Save Settings')}</button>
          <button class="wd-btn wd-btn-secondary" id="wd-settings-revert" ${this._prevOpts ? '' : 'disabled'} title="${this._prevOpts ? this._t('btn.revert_settings_tip', {}, 'Restore settings from before your last save') : this._t('btn.revert_settings_tip_none', {}, 'Save first to enable undo')}">${this._t('btn.revert_settings', {}, 'Revert changes')}</button>
          <button class="wd-btn wd-btn-secondary" id="wd-settings-reload" title="${_esc(this._t('btn.refresh_settings_tip', {}, 'Reload settings from the server'))}">${this._t('btn.refresh', {}, 'Refresh')}</button>
        </div>
        <p class="wd-info" style="margin-top:12px;font-size:.78em">${this._t('msg.saving_triggers_reload', {}, 'Saving reloads the integration. Entities may briefly show as unavailable.')}</p>
      </div>
      ${this._htmlSettingsHistory()}
    `;
  }

  // D7: full settings changelog (key, old → new, date). Empty when no history.
  _htmlSettingsHistory() {
    const log = this._settingsChangelog || [];
    if (!log.length) return '';
    const open = this._settingsHistoryOpen;
    const canEdit = this._canEdit();
    const rows = log.slice(0, 100).map(c => {
      const revertBtn = canEdit
        ? `<button class="wd-btn wd-btn-secondary wd-btn-xs" data-action="settings-revert-key" data-key="${_esc(c.key)}" data-val="${_esc(JSON.stringify(c.old))}" title="${_esc(this._t('btn.revert_to_previous', {}, 'Restore this setting to its previous value'))}">${this._t('btn.revert', {}, 'Revert')}</button>`
        : '';
      return `<tr>
        <td>${_esc(this._t('setting.' + c.key + '.label', {}, c.key))}</td>
        <td>${_esc(_chgVal(c.old))} → ${_esc(_chgVal(c.new))}</td>
        <td class="wd-tc-date">${_fmtDate(c.timestamp)}</td>
        <td style="text-align:right">${revertBtn}</td>
      </tr>`;
    }).join('');
    return `<div class="wd-card" style="margin-top:12px">
      <div style="display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none" data-action="toggle-settings-history">
        <div class="wd-card-title" style="margin:0">${this._t('hdr.settings_history', {}, 'Settings history')} <span style="font-size:.75em;font-weight:400;color:var(--secondary-text-color)">(${log.length})</span></div>
        <span style="font-size:.85em;color:var(--secondary-text-color)">${open ? '▲' : '▼'}</span>
      </div>
      ${open ? `<div class="wd-table-wrap" style="margin-top:10px"><table class="wd-table"><thead><tr>
        <th>${this._t('lbl.setting', {}, 'Setting')}</th>
        <th>${this._t('lbl.change', {}, 'Change')}</th>
        <th>${this._t('lbl.date', {}, 'Date')}</th>
        <th></th>
      </tr></thead><tbody>${rows}</tbody></table></div>` : ''}
    </div>`;
  }

  // Resolve a schema field's current value, options, datalist and suggestion,
  // then render it. Returns '' for fields hidden by device-type gating.
  _renderField(f, o) {
    if (f.onlyDeviceType && (o.device_type || 'washing_machine') !== f.onlyDeviceType) return '';
    if (f.type === 'storebrand' || f.type === 'storemodel') return this._renderStorePicker(f, o);
    let value = o[f.key];
    // Prefer a device-resolved default from the backend (#396: cadence settings
    // whose default varies by device type) over the static schema literal, so an
    // unset field shows - and the conflict validator checks - the value the
    // integration would actually use.
    if (value === undefined) {
      const od = this._optDefaults;
      value = (od && od[f.key] != null) ? od[f.key] : f.def;
    }
    const extra = {};

    if (f.type === 'devicetype') extra.opts = this._deviceTypeOpts(value || o.device_type);
    else if (f.type === 'device') extra.opts = this._deviceOpts(value);
    else if (f.type === 'select') extra.opts = f.opts || [];
    else if (f.type === 'entity') {
      const states = this._hass && this._hass.states ? this._hass.states : {};
      const domains = Array.isArray(f.domains) ? f.domains : (f.domain === 'binary_sensor' ? ['binary_sensor', 'sensor'] : (f.domain ? [f.domain] : null));
      // `notPrice` drops the plug's own power/energy entities from the Energy Price
      // picker (#439) - they are the entities users reach for, and picking one costs
      // every cycle at the meter reading per kWh. Typing one anyway still validates.
      const ids = Object.keys(states)
        .filter(e => !domains || domains.some(d => e.startsWith(d + '.')))
        .filter(e => !f.notPrice || _nonPriceReason(e, o, this._conflictCtx()) == null)
        .sort().slice(0, 500);
      if (!this._entityListCache) this._entityListCache = {};
      this._entityListCache[f.key] = ids;
    } else if (f.type === 'entitylist') {
      const states = this._hass && this._hass.states ? this._hass.states : {};
      const stateEntities = Object.keys(states).filter(e => !f.domain || e.startsWith(f.domain + '.')).sort();
      if (f.domain === 'notify' && this._hass && this._hass.services && this._hass.services.notify) {
        const svcEntities = Object.keys(this._hass.services.notify).map(s => `notify.${s}`);
        extra.entities = [...new Set([...stateEntities, ...svcEntities])].sort().slice(0, 500);
      } else {
        extra.entities = stateEntities.slice(0, 500);
      }
      if (!this._entityListCache) this._entityListCache = {};
      this._entityListCache[f.key] = extra.entities;
    } else if (Array.isArray(f.suggestions) && f.suggestions.length) {
      // Free-text field with a suggestion datalist (e.g. Android channel names).
      const dlId = `wd-dl-${f.key}`;
      extra.datalistId = dlId;
      extra.datalist = `<datalist id="${dlId}">${f.suggestions.map(s => `<option value="${_esc(s)}">`).join('')}</datalist>`;
    }

    const sug = this._suggestions.find(s => s.key === f.key);
    if (sug) {
      // Localize the excluded-cycle note (reason codes + summary) client-side and
      // substitute it for the server's English {excl} placeholder before rendering.
      const rp = Object.assign({}, sug.reason_params || {});
      if (sug.exclusions && sug.exclusions.total) rp.excl = this._exclNote(sug.exclusions);
      extra.suggestion = { suggested: sug.suggested, current: sug.current, reason: sug.reason, reason_key: sug.reason_key, reason_params: rp };
    }

    extra.useBtnLabel = this._t('btn.use', {}, 'Use');
    extra.t = this._t.bind(this);
    extra.tText = this._tText.bind(this);
    // D7: "what changed" marker — a dot with a tooltip when this field appears in
    // the settings changelog.
    const chg = (this._settingsChangeByKey || {})[f.key];
    if (chg) {
      extra.changed = this._tText('msg.setting_changed',
        { old: _chgVal(chg.old), new: _chgVal(chg.new), date: _fmtDate(chg.timestamp) },
        `Changed from ${_chgVal(chg.old)} to ${_chgVal(chg.new)} on ${_fmtDate(chg.timestamp)}`);
    }
    const tf = Object.assign({}, f, { label: this._t('setting.' + f.key + '.label', {}, f.label || ''), doc: f.doc != null ? this._t('setting.' + f.key + '.doc', {}, f.doc) : f.doc });
    return _field(tf, value, extra);
  }

  // ── Store-backed appliance brand/model pickers (Basic > Device info) ─────────
  // Type to search the community catalog; pick from a datalist; pending entries
  // carry an "awaiting approval" tag. Not found -> add it on the website. When
  // connected, the selected pending device can be confirmed / quality-rated.
  _renderStorePicker(f, o) {
    const isBrand = f.type === 'storebrand';
    const key = f.key;
    const val = String(o[key] == null ? '' : o[key]);
    const label = this._t('setting.' + key + '.label', {}, f.label || '');
    const doc = this._t('setting.' + key + '.doc', {}, f.doc || '');
    const ph = _esc(this._t('placeholder.' + key, {}, isBrand ? 'e.g. Bosch' : 'e.g. WAT28660'));
    if (!this._onlineEnabled()) {
      return `<div class="wd-field"><label>${_esc(label)}</label>
        <input type="text" data-opt="${key}" data-ftype="text" value="${_esc(val)}" placeholder="${ph}">
        <div class="wd-field-hint">${_esc(this._t('msg.store_picker_offline', {}, 'Enable online features in the settings gear to pick from the community catalog.'))}</div></div>`;
    }
    return isBrand ? this._renderBrandPicker(key, val, label, doc, ph) : this._renderModelPicker(key, o, val, label, doc, ph);
  }

  _statusTag(rec) {
    if (rec && rec.status === 'pending') {
      // Only devices auto-promote via confirmations; brands are admin-approved, so
      // only show the N-confirmed progress when a confirm count actually applies.
      const tip = _esc(this._t('badge.awaiting_tip', {}, 'Awaiting community approval'));
      const label = (typeof rec.confirmCount === 'number')
        ? this._t('badge.awaiting_n', {n: rec.confirmCount}, `Awaiting approval · ${rec.confirmCount} confirmed`)
        : this._t('badge.awaiting', {}, 'Awaiting approval');
      return `<span class="wd-tag wd-tag-pending" title="${tip}">${label}</span>`;
    }
    if (rec && rec.status === 'approved') return `<span class="wd-tag wd-tag-approved">${this._t('badge.approved', {}, 'Approved')}</span>`;
    return '';
  }

  _renderBrandPicker(key, val, label, doc, ph) {
    // The badge comes from the resolved catalog ENTRY (one point read), not from the
    // brand list: fetching all ~84 brands to find one row was the store's single
    // largest read source. The list is loaded only when the user opens the combo.
    this._ensureCatalogEntry();
    const brands = Array.isArray(this._catalog.brands) ? this._catalog.brands : [];
    // Feed the shared custom combobox (works in the shadow DOM, unlike a native
    // <datalist>). The combo reads this cache live, so async loads appear.
    this._entityListCache = this._entityListCache || {};
    this._entityListCache[key] = brands.map(b => b.brand).filter(Boolean);
    const tag = this._statusTag(this._catalogEntryFor(val, 'brand'));
    const loading = this._catalog.brands === null ? ` <span class="wd-info" style="font-size:.85em">${this._t('msg.loading', {}, 'Loading…')}</span>` : '';
    return `<div class="wd-field"><label>${_esc(label)} ${doc ? _tip(doc) : ''}${tag}${loading}</label>
      <div class="wd-combo-row">
        <div class="wd-combo">
          <input type="text" id="wd-store-brand" class="wd-combo-inp" data-opt="${key}" data-ftype="text" value="${_esc(val)}" placeholder="${ph}" autocomplete="off" spellcheck="false">
          <div class="wd-combo-drop" hidden></div>
        </div>
        <button type="button" class="wd-addbtn" data-action="store-add-brand" title="${_esc(this._t('tip.add_brand', {}, 'Brand not listed? Add it to the community catalog'))}" aria-label="${_esc(this._t('btn.add_brand', {}, 'Add brand'))}">+</button>
      </div></div>`;
  }

  _renderModelPicker(key, o, val, label, doc, ph) {
    const brand = String(o.store_brand || '');
    if (!brand) {
      return `<div class="wd-field"><label>${_esc(label)}</label>
        <input type="text" id="wd-store-model" data-opt="${key}" data-ftype="text" value="${_esc(val)}" placeholder="${ph}" disabled>
        <div class="wd-field-hint">${_esc(this._t('msg.pick_brand_first', {}, 'Pick an appliance brand first.'))}</div></div>`;
    }
    // As in the brand picker: the badge + community actions come from the resolved
    // catalog entry (one point read), so simply opening Settings no longer downloads
    // this brand's whole device list. That list is fetched on combo focus.
    this._ensureCatalogEntry();
    if (this._catalog.forBrand !== brand) { this._catalog.forBrand = brand; this._catalog.devices = undefined; }
    const devices = Array.isArray(this._catalog.devices) ? this._catalog.devices : [];
    this._entityListCache = this._entityListCache || {};
    this._entityListCache[key] = devices.map(d => d.model).filter(Boolean);
    const match = this._catalogEntryFor(val, 'device');
    const tag = this._statusTag(match);
    const loading = this._catalog.devices === null ? ` <span class="wd-info" style="font-size:.85em">${this._t('msg.loading', {}, 'Loading…')}</span>` : '';
    // Details + community actions for the resolved device.
    let extra = '';
    if (match) {
      const bits = [];
      const manualUrl = _safeHttpUrl(match.manualUrl);
      if (manualUrl) bits.push(`<a href="${_esc(manualUrl)}" target="_blank" rel="noopener noreferrer nofollow">${this._t('link.manual', {}, 'Manual ↗')}</a>`);
      // "by <contributor>" attribution is optional (Online & Community pref).
      if (((this._constants && this._constants.storePrefs) || {}).show_contributor !== false) {
        bits.push(this._t('store.contributed_by', {name: match.createdByName || this._tText('lbl.anonymous', {}, 'Anonymous')}, 'by {name}'));
      }
      const connected = !!(this._storeStatus && this._storeStatus.connected);
      let actions = '';
      if (connected) {
        const stars = [1, 2, 3, 4, 5].map(n => `<button type="button" class="wd-star-btn" data-action="store-rate-device" data-device-id="${_esc(match.id)}" data-rating="${n}" aria-label="${this._t('lbl.rate_n', {n}, `${n} stars`)}">★</button>`).join('');
        actions = `<button type="button" class="wd-btn wd-btn-secondary wd-btn-sm" data-action="store-confirm-device" data-device-id="${_esc(match.id)}" ${match.status !== 'pending' ? 'disabled' : ''}>${match.status === 'pending' ? this._t('btn.confirm_appliance', {}, 'Confirm this appliance') : this._t('btn.confirmed', {}, 'Confirmed')}</button>
          <span class="wd-star-row" title="${_esc(this._t('lbl.rate_quality', {}, 'Rate quality'))}">${stars}</span>`;
      } else {
        actions = `<span class="wd-info" style="font-size:.85em">${this._t('msg.connect_to_confirm', {}, 'Connect in the settings gear to confirm or rate.')}</span>`;
      }
      extra = `<div class="wd-store-picker-detail">${bits.join(' · ')}<div class="wd-store-picker-actions">${actions}</div></div>`;
    }
    // The + button already covers "not in the catalog", and the approved-only
    // toggle is intentionally gone: pending entries are shown with a tag.
    const storeActions = (this._onlineEnabled() && this._storeDeviceDeclared()) ? `<div class="wd-store-actions">
      <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="store-share-device" title="${_esc(this._t('btn.share_device_tip', {}, 'Share this appliance and its reference cycles to the community store so owners of the same machine can adopt them.'))}">${this._t('btn.share_device', {}, '⬆ Share this device')}</button>
      <button class="wd-btn wd-btn-ghost wd-btn-sm" data-action="store-download-device" ${match ? `data-device-id="${_esc(match.id)}"` : ''} title="${_esc(this._t('msg.store_download_device_intro', {}, 'Add every shared program and its reference cycles to your device. Your own cycles and stats are not affected.'))}">${this._t('btn.download_device', {}, 'Download this setup')}</button>
    </div>` : '';
    return `<div class="wd-field"><label>${_esc(label)} ${doc ? _tip(doc) : ''}${tag}${loading}</label>
      <div class="wd-combo-row">
        <div class="wd-combo">
          <input type="text" id="wd-store-model" class="wd-combo-inp" data-opt="${key}" data-ftype="text" value="${_esc(val)}" placeholder="${ph}" autocomplete="off" spellcheck="false">
          <div class="wd-combo-drop" hidden></div>
        </div>
        <button type="button" class="wd-addbtn" data-action="store-add-appliance" title="${_esc(this._t('tip.add_appliance', {}, 'Model not listed? Add your appliance to the community catalog'))}" aria-label="${_esc(this._t('btn.add_appliance', {}, 'Add appliance'))}">+</button>
      </div>
      ${extra}${storeActions}</div>`;
  }

  // The community catalog only knows washer/dryer/dishwasher/washer_dryer; HA's
  // washing_machine maps to washer. Other device types have no catalog equivalent
  // (return '' so the search is by brand only, unfiltered by type).
  _storeApplianceType() {
    const map = { washing_machine: 'washer', washer: 'washer', dryer: 'dryer', dishwasher: 'dishwasher', washer_dryer: 'washer_dryer' };
    return map[this._opts.device_type] || '';
  }

  // True when this device has a brand + model declared, so it can be resolved to a
  // catalog deviceId for sharing/downloading a whole-device bundle.
  _storeDeviceDeclared() {
    return !!((this._opts.store_brand || '').trim() && (this._opts.store_model || '').trim());
  }

  // Group the device's shareable reference cycles (from get_shareable_cycles: all
  // recorded/golden cycles, every page, imported excluded) by program, sorted by
  // name. Profiles with no shareable cycles are appended with noCycles:true so
  // the share modal can show them with an explanatory note.
  // Returns [{program, cycles:[...]}, ..., {program, cycles:[], noCycles:true}, ...]
  _shareableByProgram() {
    const byProg = new Map();
    for (const c of (this._shareableCycles || [])) {
      const prog = (c.profile_name || '').trim();
      if (!prog) continue;
      if (!byProg.has(prog)) byProg.set(prog, []);
      byProg.get(prog).push(c);
    }
    const groups = Array.from(byProg.entries())
      .map(([program, cycles]) => ({ program, cycles }))
      .sort((a, b) => a.program.localeCompare(b.program));
    // Append profiles that exist but have no shareable cycles yet
    for (const prog of (this._shareAllPrograms || [])) {
      if (!byProg.has(prog)) groups.push({ program: prog, cycles: [], noCycles: true });
    }
    return groups;
  }

  // ── Catalog identity (badges) vs catalog lists (pickers) ────────────────────
  // These are two different reads and it matters which one runs. Resolving the
  // appliance the user already saved needs exactly two documents, both of which have
  // deterministic ids, so it is a point read. Offering every alternative to pick from
  // needs whole collections. Rendering the Settings tab only ever needed the former,
  // but used to trigger the latter -- measured at 128 documents / 119 KB per open,
  // against a daily read budget the whole community shares.

  // The options as the USER currently sees them: the saved options with the unsaved
  // Settings edits laid over them. `_opts` alone is the SAVED state (#447), so reading
  // it directly resolves against the previous value while the form shows the new one -
  // which is how the appliance badge and device list came to lag the brand picker.
  // The single source for that overlay: three sites open-coded the same
  // `Object.assign` and only one of them carried the reason, so a change to the
  // overlay order could update one and miss the others.
  _editedOpts() {
    return Object.assign({}, this._opts, this._pendingSettings);
  }

  // Which appliance the currently-rendered entry describes. Included in the key so a
  // device switch (or an edit to brand/model/type) re-resolves instead of showing the
  // previous appliance's badge.
  _catalogEntryKey() {
    const o = this._editedOpts();
    return [
      (o.store_brand || '').trim().toLowerCase(),
      (o.store_model || '').trim().toLowerCase(),
      o.device_type || '',
    ].join('|');
  }

  // Kick off the two point reads if this appliance's identity is not already resolved.
  // Safe to call from render (it self-dedupes on the key and never re-enters).
  _ensureCatalogEntry() {
    const want = this._catalogEntryKey();
    const cur = this._catalogEntry;
    if (cur && cur.key === want) return;
    this._catalogEntry = { key: want, brand: null, device: null, deviceId: null, loading: true };
    this._loadCatalogEntry(want);
  }

  // The resolved brand/device doc, but only when it actually describes the value being
  // rendered -- a half-typed model must not keep showing the saved model's badge.
  _catalogEntryFor(val, which) {
    const e = this._catalogEntry;
    if (!e || e.key !== this._catalogEntryKey()) return null;
    const rec = which === 'brand' ? e.brand : e.device;
    if (!rec) return null;
    const field = which === 'brand' ? rec.brand : rec.model;
    return String(field || '').toLowerCase() === String(val || '').trim().toLowerCase() ? rec : null;
  }

  async _loadCatalogEntry(wantKey) {
    const dev = this._devices[this._selIdx];
    const o = this._editedOpts();
    const brand = (o.store_brand || '').trim();
    const model = (o.store_model || '').trim();
    if (!dev || !this._onlineEnabled() || !brand || !model) {
      if (this._catalogEntry && this._catalogEntry.key === wantKey) this._catalogEntry.loading = false;
      return;
    }
    let res = null;
    try {
      res = await this._ws({
        type: `${_DOMAIN}/store_get_catalog_entry`, entry_id: dev.entry_id,
        brand, model, appliance_type: o.device_type || '',
      });
    } catch (_) { /* leave unresolved: the badge is decoration, not state */ }
    // Drop a response that a device switch or a further edit has already superseded.
    if (!this._catalogEntry || this._catalogEntry.key !== wantKey) return;
    this._catalogEntry = {
      key: wantKey, loading: false,
      brand: (res && res.brand) || null,
      device: (res && res.device) || null,
      deviceId: (res && res.device_id) || null,
    };
    if (this._isActiveEntry(dev.entry_id)) this._renderPreservingFormEdits();
  }

  // Surface a just-loaded candidate list without a re-render when the user is typing in
  // that picker. Dispatching `input` runs the combobox's own showDrop handler (which reads
  // _entityListCache live), so the options appear while focus and caret stay put; a
  // re-render here would rebuild the input mid-keystroke. Falls back to a normal render
  // when the field is not focused, which is what clears the "Loading..." hint.
  _refreshComboAfterLoad(inputId, entryId, mayReopen = true) {
    const sr = this.shadowRoot;
    // One candidate list can feed more than one picker (the brand catalog feeds both
    // the Settings picker and the Store tab's search box, #416). They live on
    // different tabs so at most one exists, and the focused one is the picker that
    // asked for this load - the others must not trigger a re-render that would
    // replace the input the user is typing in.
    for (const id of (Array.isArray(inputId) ? inputId : [inputId])) {
      const inp = sr && sr.getElementById(id);
      if (inp && sr.activeElement === inp) {
        // mayReopen=false after a failed load: re-dispatching would re-arm the search
        // debounce and turn a persistent failure into a request loop.
        if (mayReopen) {
          // Flagged so the listener can tell this apart from a real keystroke: only a
          // keystroke may escalate to a more expensive catalog fetch, or one load's
          // synthetic refresh would trigger the next load in a chain.
          inp._wdSyntheticInput = true;
          try { inp.dispatchEvent(new Event('input', { bubbles: true })); }
          finally { inp._wdSyntheticInput = false; }
        }
        return;
      }
    }
    if (this._isActiveEntry(entryId)) this._render();
  }

  // Load the picker's candidate list on first interaction with that picker. Called from
  // the combobox's focus/input path rather than from render, so a user who opens Settings
  // to change an unrelated setting never pays for the catalog at all.
  // `typed` is true only for a real keystroke. Opening the box is not a request for
  // the expensive per-type device list: the field arrives pre-filled with the saved
  // brand, so focus alone would spend that query on every visit to the Store tab.
  _ensureCatalogList(optKey, q, typed = false) {
    if (!this._onlineEnabled()) return;
    if (optKey === 'store_brand') { this._ensureBrandCandidates(q); return; }
    // The Store tab's search box offers brands AND models, because "search by brand"
    // is useless to someone who knows their model number and not who else shares the
    // badge. Brands come from the cheap prefix range query; models need the appliance
    // type's device list, which is fetched ONCE per type and then filtered in memory,
    // so typing costs nothing after the first two characters.
    if (optKey === 'store_search') {
      this._ensureBrandCandidates(q);
      if (typed && String(q || '').trim().length >= 2) this._ensureStoreTypeDevices();
      return;
    }
    if (optKey === 'store_model') {
      const brand = String(this._editedOpts().store_brand || '').trim();
      if (!brand) return;
      if (this._catalog.forBrand !== brand || this._catalog.devices === undefined) {
        this._catalog.forBrand = brand;
        this._catalog.devices = null;
        this._loadCatalogDevices(brand);
      }
    }
  }

  // Resolve brand candidates for what is currently typed, as cheaply as possible.
  //
  // The field opens pre-filled with the saved brand, so the very first focus already has
  // a search term -- which the backend answers with a `brand_lc` range query reading only
  // the matching documents (3 for "bo" against 84 for the whole collection). Clearing the
  // field is the explicit "show me everything" gesture and is the only path that fetches
  // the full list. Typing is debounced, and a prefix whose matches are already covered by
  // a completed broader query never queries at all.
  _ensureBrandCandidates(q) {
    const prefix = String(q || '').trim().toLowerCase();
    if (this._catalog.brandsFull) return;   // whole collection is already local
    if (!prefix) {
      // Clearing the field supersedes any prefix search still sitting in the debounce:
      // the full list answers it, so letting it fire would spend a read for nothing.
      clearTimeout(this._brandSearchTimer); this._brandSearchTimer = null;
      if (this._catalog.brands === undefined) { this._catalog.brands = null; this._loadCatalogBrands(''); }
      return;
    }
    const done = this._catalog.brandPrefixes || (this._catalog.brandPrefixes = []);
    // A completed query for "bo" already returned every brand starting with "bos".
    if (done.some(p => prefix.startsWith(p))) return;
    clearTimeout(this._brandSearchTimer);
    this._brandSearchTimer = setTimeout(() => this._loadCatalogBrands(prefix), 250);
  }

  // Prefix results are PARTIAL, so they are unioned into the candidate list rather than
  // replacing it: typing "bo" and then backspacing to "b" must not drop the rows the
  // broader query already produced.
  _mergeBrandCandidates(rows) {
    const have = new Map(
      (Array.isArray(this._catalog.brands) ? this._catalog.brands : [])
        .map(b => [String(b.id != null ? b.id : b.brand), b]));
    for (const r of rows || []) have.set(String(r.id != null ? r.id : r.brand), r);
    this._catalog.brands = Array.from(have.values())
      .sort((a, b) => String(a.brand || '').localeCompare(String(b.brand || '')));
  }

  // Feed the combobox candidate cache directly (no re-render): the combo reads it
  // live, so options appear without rebuilding the input the user is typing in.
  async _loadCatalogBrands(query = '') {
    this._entityListCache = this._entityListCache || {};
    let failed = false;
    const dev = this._devices[this._selIdx];
    if (!dev || !this._onlineEnabled()) { this._catalog.brands = []; this._entityListCache.store_brand = []; return; }
    if (query && this._catalog.brandsFull) return;   // the full list already covers it
    if (this._catalog.brands === undefined) this._catalog.brands = null;  // show the loading hint
    try {
      const r = await this._ws({
        type: `${_DOMAIN}/store_list_brands`, entry_id: dev.entry_id,
        query: query || null, include_pending: !this._catalog.approvedOnly,
      });
      const rows = (r && r.items) || [];
      if (query) {
        this._mergeBrandCandidates(rows);
        (this._catalog.brandPrefixes || (this._catalog.brandPrefixes = [])).push(query);
      } else {
        this._catalog.brands = rows;
        this._catalog.brandsFull = true;   // every later search is answered in memory
      }
    } catch (_) {
      if (!Array.isArray(this._catalog.brands)) this._catalog.brands = [];
      failed = true;
    }
    this._entityListCache.store_brand = (this._catalog.brands || []).map(b => b.brand).filter(Boolean);
    this._syncStoreSearchCandidates();
    // On failure do NOT re-dispatch `input`: that is what re-arms the debounce, and a
    // query that keeps failing would then retry ~4x/second for as long as the field has
    // focus. Backing off means the dropdown simply does not update until the user types
    // again (which is itself the retry) or the field loses focus.
    this._refreshComboAfterLoad(['wd-store-brand', 'wd-store-q'], dev.entry_id, !failed);
  }

  // Compose the Store search box's candidate list: brands first (what most people
  // start from), then "MODEL · Brand" labels. The combobox reads plain strings, so
  // the label is also the key back to the row - kept in _catalog.modelIndex.
  _syncStoreSearchCandidates() {
    this._entityListCache = this._entityListCache || {};
    const index = new Map();
    const models = [];
    for (const d of (this._catalog.typeDevices || [])) {
      const model = String((d && d.model) || '').trim();
      if (!model) continue;
      const label = d.brand ? `${model} · ${d.brand}` : model;
      if (index.has(label)) continue;               // same model shared twice
      index.set(label, d);
      models.push(label);
    }
    this._catalog.modelIndex = index;
    const brands = (this._catalog.brands || []).map(b => b.brand).filter(Boolean);
    this._entityListCache.store_search = brands.concat(models);
  }

  // Forget the per-type device list so the next model search re-reads it. Called
  // wherever the catalog itself changed (a new appliance was contributed, or the user
  // asked for a refresh) - NOT on a device switch, where a same-type list is still valid
  // and _ensureStoreTypeDevices' type guard handles a different one.
  _dropModelCandidates() {
    this._catalog.typeDevices = undefined;
    this._catalog.typeDevicesFor = null;
    this._catalog.modelIndex = new Map();
    if (this._entityListCache) delete this._entityListCache.store_search;
  }

  // Fetch the appliance type's whole device list once, so model matching is local.
  // The backend caches it too, and a brand browse of the same type is then served
  // from it (store_client._serve_from_type_superset) rather than costing a query.
  _ensureStoreTypeDevices() {
    const dev = this._devices[this._selIdx];
    if (!dev || !this._onlineEnabled()) return;
    const type = this._storeApplianceType();
    if (this._catalog.typeDevicesFor === type && this._catalog.typeDevices !== undefined) return;
    this._catalog.typeDevicesFor = type;
    this._catalog.typeDevices = null;               // in flight; also the "asked" marker
    this._ws({
      type: `${_DOMAIN}/store_search_devices`, entry_id: dev.entry_id,
      query: null, appliance_type: type, include_pending: true,
    }).then(r => {
      if (this._catalog.typeDevicesFor !== type) return;   // device switched mid-flight
      this._catalog.typeDevices = (r && r.items) || [];
    }).catch(() => {
      if (this._catalog.typeDevicesFor === type) this._catalog.typeDevices = [];
    }).finally(() => {
      this._syncStoreSearchCandidates();
      // mayReopen=false on failure, matching _loadCatalogBrands: a query that keeps
      // failing must not be re-armed by a synthetic input event.
      this._refreshComboAfterLoad(['wd-store-q'], dev.entry_id, !!(this._catalog.typeDevices || []).length);
    });
  }

  async _loadCatalogDevices(brand) {
    this._entityListCache = this._entityListCache || {};
    const dev = this._devices[this._selIdx];
    if (!dev || !this._onlineEnabled() || !brand) { this._catalog.devices = []; this._entityListCache.store_model = []; return; }
    try {
      const r = await this._ws({ type: `${_DOMAIN}/store_search_devices`, entry_id: dev.entry_id, query: brand, appliance_type: this._storeApplianceType(), include_pending: !this._catalog.approvedOnly });
      if (this._catalog.forBrand === brand) this._catalog.devices = (r && r.items) || [];
    } catch (_) { if (this._catalog.forBrand === brand) this._catalog.devices = []; }
    this._entityListCache.store_model = (this._catalog.devices || []).map(d => d.model).filter(Boolean);
    this._refreshComboAfterLoad('wd-store-model', dev.entry_id);
  }

  // Load the appliance's profiles into the open Share dialog (dropdown + resolved
  // deviceId for the "+ add profile" link).
  async _loadShareProfiles() {
    const dev = this._devices[this._selIdx];
    const m = this._modal;
    if (!dev || !m || m.type !== 'store-share') return;
    const brand = (this._opts.store_brand || '').trim();
    const model = (this._opts.store_model || '').trim();
    if (!brand || !model) { m.profiles = []; if (this._modal === m) this._render(); return; }
    try {
      const r = await this._ws({ type: `${_DOMAIN}/store_get_device_profiles`, entry_id: dev.entry_id, brand, model, appliance_type: this._opts.device_type || '' });
      if (this._modal !== m) return;
      m.profiles = (r && r.items) || [];
      m.deviceId = (r && r.device_id) || null;
      // An outage is not "no profiles yet" (audit STORE-09).
      m.storeUnreachable = !!(r && r.error === 'store_unreachable');
    } catch (_) { if (this._modal === m) m.profiles = []; }
    if (this._modal === m) this._render();
  }

  // Automations subcategory at the top of Notifications. Replaces the old custom
  // action editor: WashData fires ha_washdata_cycle_started / _ended events and
  // exposes entities, so users build native HA automations. This shows the
  // automations already related to this device (deep-linking to the editor) and
  // a split "New" button that opens a blank automation or one prefilled with a
  // cycle-started / cycle-finished trigger for this device.
  _htmlAutomations() {
    const list = this._deviceAutomations || [];
    const pills = list.length
      ? list.map(a => `<span class="wd-auto-pill">` +
          `<a class="wd-auto-pill-link" href="/config/automation/edit/${encodeURIComponent(a.id)}" target="_top" title="${this._t('hdr.automation_open', {}, 'Open in the automation editor')}">🔗 ${_esc(a.name)}${a.enabled ? '' : ` <span style="opacity:.6">${this._t('lbl.automation_off', {}, '(off)')}</span>`}</a>` +
          `<button type="button" class="wd-auto-pill-x" data-action="auto-delete" data-autoid="${_esc(a.id)}" data-autoname="${_esc(a.name)}" title="${this._t('hdr.automation_delete', {}, 'Delete this automation')}">×</button>` +
        `</span>`).join('')
      : `<span class="wd-info" style="margin:0">${this._autoLoading ? this._t('msg.loading', {}, 'Loading…') : this._t('hdr.no_automations', {}, 'No automations reference this device yet.')}</span>`;
    // Legacy custom actions from the removed editor: still fired by the backend,
    // but no longer editable. Offer a one-click convert to a real automation.
    const legacy = Array.isArray(this._opts.notify_actions) ? this._opts.notify_actions : [];
    const legacyBlock = legacy.length ? `
      <div style="border:1px solid var(--warning-color,#ff9800);border-radius:8px;padding:10px 12px;margin-bottom:12px;background:rgba(255,152,0,.08)">
        <div style="font-weight:600;margin-bottom:4px">${this._t('msg.legacy_actions_title', {count: legacy.length}, `${legacy.length} legacy custom action${legacy.length > 1 ? 's' : ''} still running`)}</div>
        <p class="wd-info" style="margin:0 0 8px">${this._t('msg.old_actions_warning', {}, 'Configured with the old actions editor (now removed). They still fire on cycle events but can no longer be edited here. Convert them into a normal automation, or remove them.')}</p>
        <div style="display:flex;gap:6px;flex-wrap:wrap">
          <button type="button" class="wd-btn wd-btn-primary wd-btn-sm" data-action="auto-convert-legacy">${this._t('btn.convert_to_automation', {}, 'Convert to automation')}</button>
          <button type="button" class="wd-btn wd-btn-danger wd-btn-sm" data-action="auto-remove-legacy">${this._t('btn.remove', {}, 'Remove')}</button>
        </div>
      </div>` : '';
    return `
      <div class="wd-subhead">${this._t('hdr.automations', {}, 'Automations')}</div>
      <p class="wd-info" style="margin-bottom:10px">${this._t('msg.automations_intro', {start: _html('<code>ha_washdata_cycle_started</code>'), end: _html('<code>ha_washdata_cycle_ended</code>')}, 'WashData fires {start} / {end} events and exposes entities, so notifications and actions are best built as normal Home Assistant automations. Automations that use this device appear below.')}</p>
      ${legacyBlock}
      <div class="wd-auto-pills" style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px">${pills}</div>
      <div class="wd-auto-new" style="display:flex;gap:6px;align-items:center;margin-bottom:18px">
        <button type="button" class="wd-btn wd-btn-primary wd-btn-sm" data-action="auto-new">${this._t('btn.new_automation', {}, '＋ New Automation')}</button>
        <details class="wd-auto-dd" style="position:relative">
          <summary class="wd-btn wd-btn-secondary wd-btn-sm">${this._t('btn.from_template', {}, 'From template ▾')}</summary>
          <div class="wd-auto-dd-menu" style="position:absolute;z-index:5;margin-top:4px;background:var(--card-background-color);border:1px solid var(--divider-color);border-radius:8px;padding:6px;min-width:190px;box-shadow:0 4px 14px rgba(0,0,0,.25)">
            <button type="button" class="wd-btn wd-btn-secondary wd-btn-sm" data-action="auto-new-started" style="width:100%;margin-bottom:4px">${this._t('btn.on_cycle_started', {}, 'On cycle started')}</button>
            <button type="button" class="wd-btn wd-btn-secondary wd-btn-sm" data-action="auto-new-finished" style="width:100%">${this._t('btn.on_cycle_finished', {}, 'On cycle finished')}</button>
          </div>
        </details>
      </div>`;
  }

  // Load automations related to this device via HA's native related-items
  // search, so the Notifications > Automations list mirrors the device page.
  async _loadDeviceAutomations(entryId) {
    this._deviceAutomations = [];
    const hass = this._hass;
    if (!hass || !hass.callWS) return;
    try {
      let deviceId = null;
      const devices = hass.devices || {};
      for (const d of Object.values(devices)) {
        if ((d.config_entries || []).includes(entryId)) { deviceId = d.id; break; }
      }
      const related = deviceId
        ? await hass.callWS({ type: 'search/related', item_type: 'device', item_id: deviceId })
        : await hass.callWS({ type: 'search/related', item_type: 'config_entry', item_id: entryId });
      if (!this._isActiveEntry(entryId)) return;  // device switched mid-flight — drop stale response
      const ents = (related && related.automation) || [];
      const states = hass.states || {};
      this._deviceAutomations = ents.map(ent => {
        const attrs = (states[ent] && states[ent].attributes) || {};
        return { entity_id: ent, id: attrs.id, name: attrs.friendly_name || ent, enabled: states[ent] ? states[ent].state === 'on' : true };
      }).filter(a => a.id);
    } catch (_) { if (this._isActiveEntry(entryId)) this._deviceAutomations = []; }
  }

  // Navigate the HA frontend (e.g. to the automation editor) via the standard
  // location-changed event so the app router handles it.
  _navigate(path) {
    try {
      history.pushState(null, '', path);
      this.dispatchEvent(new CustomEvent('location-changed', { bubbles: true, composed: true, detail: { replace: false } }));
    } catch (_) { try { window.location.assign(path); } catch (__) { /* ignore */ } }
  }

  // Create an automation prefilled with a WashData cycle trigger for this
  // device, then open it in the editor for the user to complete.
  async _newAutomationFromEvent(kind) {
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    const hass = this._hass;
    const eventType = kind === 'started' ? 'ha_washdata_cycle_started' : 'ha_washdata_cycle_ended';
    // Plain text (_tText): these are written into the user's automation config.
    const device = dev.title || 'WashData';
    const config = {
      alias: kind === 'started'
        ? this._tText('msg.automation_alias_started', {device}, '{device}: cycle started')
        : this._tText('msg.automation_alias_finished', {device}, '{device}: cycle finished'),
      description: kind === 'started'
        ? this._tText('msg.automation_desc_started', {device}, 'Runs when a {device} cycle starts. Add your actions (notify, lights, ...).')
        : this._tText('msg.automation_desc_finished', {device}, 'Runs when a {device} cycle finishes. Add your actions (notify, lights, ...).'),
      mode: 'single',
      trigger: [{ platform: 'event', event_type: eventType, event_data: { entry_id: dev.entry_id } }],
      condition: [],
      action: [],
    };
    const id = 'washdata_' + Date.now().toString(36);
    try {
      if (hass && hass.callApi) {
        await hass.callApi('POST', 'config/automation/config/' + id, config);
        this._navigate('/config/automation/edit/' + id);
      } else {
        this._navigate('/config/automation/edit/new');
      }
    } catch (e) {
      this._showToast(this._tText('msg.toast_automation_failed', {error: e.message || e}, 'Could not create automation: ' + (e.message || e)), 'error');
    }
  }

  // Migrate legacy notify_actions (from the removed actions editor) into a real
  // automation: it fired on start + finish + live, so prefill both cycle
  // triggers plus the stored action steps, open it in the editor, then clear the
  // legacy actions. notify_actions are already HA action-step dicts, so they drop
  // straight into the automation's action list.
  async _convertLegacyActions() {
    const dev = this._devices[this._selIdx];
    const hass = this._hass;
    const actions = Array.isArray(this._opts.notify_actions) ? this._opts.notify_actions : [];
    if (!dev || !actions.length) return;
    const config = {
      alias: `${dev.title || 'WashData'}: migrated custom actions`,
      description: 'Migrated from WashData legacy custom actions (which ran on cycle start, finish and live). Trim the triggers as needed. Note: old {device}/{duration}-style placeholders are NOT templated here - replace them with Jinja templates such as {{ trigger.event.data.device_name }}.',
      mode: 'single',
      trigger: [
        { platform: 'event', event_type: 'ha_washdata_cycle_started', event_data: { entry_id: dev.entry_id } },
        { platform: 'event', event_type: 'ha_washdata_cycle_ended', event_data: { entry_id: dev.entry_id } },
      ],
      condition: [],
      action: actions,
    };
    const id = 'washdata_' + Date.now().toString(36);
    if (!hass || !hass.callApi) { this._showToast(this._t('msg.toast_no_automation', {}, 'Cannot create automation here'), 'error'); return; }
    let created = false;
    try {
      await hass.callApi('POST', 'config/automation/config/' + id, config);
      created = true;
      await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: dev.entry_id, options: { notify_actions: [] } });
      if (this._isActiveEntry(dev.entry_id)) this._opts = { ...this._opts, notify_actions: [] };  // don't write the old device's opts if switched
      this._showToast(this._t('msg.toast_automation_migrated', {}, 'Actions migrated to an automation; opening editor'));
      this._navigate('/config/automation/edit/' + id);
    } catch (e) {
      const errTxt = e.message || e;
      if (!created) {
        // Automation was never created — a plain retry is safe.
        this._showToast(this._tText('msg.toast_convert_failed', {error: errTxt}, 'Convert failed: ' + errTxt), 'error');
        return;
      }
      // The automation WAS created but the follow-up clear threw. The clear may have
      // actually succeeded on the backend (e.g. a dropped WS response), so do NOT
      // blindly delete the new automation — that would destroy valid work while the
      // legacy actions are already gone. Reconcile the current options first: only
      // roll back when the legacy actions are confirmed still present.
      let stillHasActions = null;  // null = ambiguous (couldn't re-check)
      try {
        const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: dev.entry_id });
        const cur = (r && r.options) || {};
        const curActions = Array.isArray(cur.notify_actions) ? cur.notify_actions : [];
        stillHasActions = curActions.length > 0;
        if (this._isActiveEntry(dev.entry_id)) this._opts = { ...this._opts, notify_actions: curActions };  // don't write the old device's opts if switched
      } catch (_) { stillHasActions = null; }
      if (stillHasActions === false) {
        // The clear actually went through despite the error — keep the automation.
        this._showToast(this._t('msg.toast_automation_migrated', {}, 'Actions migrated to an automation; opening editor'));
        this._navigate('/config/automation/edit/' + id);
        return;
      }
      if (stillHasActions === true) {
        // The clear genuinely failed — roll the automation back so a retry can't leave
        // an orphan / create a duplicate; if the rollback delete itself fails, tell the
        // user the automation exists (don't retry).
        try {
          await hass.callApi('DELETE', 'config/automation/config/' + id);
          this._showToast(this._tText('msg.toast_convert_rolled_back', {error: errTxt}, 'Migration failed and was rolled back (no automation left behind): ' + errTxt), 'error');
        } catch (_) {
          this._showToast(this._t('msg.toast_convert_orphan', {}, 'The automation was created, but clearing the old actions failed. Do not retry: remove the legacy actions manually to avoid a duplicate automation.'), 'error');
        }
        return;
      }
      // Ambiguous: couldn't confirm the current state. RETAIN the automation (don't
      // risk destroying valid work) and give the user recovery guidance.
      this._showToast(this._t('msg.toast_convert_orphan', {}, 'The automation was created, but clearing the old actions failed. Do not retry: remove the legacy actions manually to avoid a duplicate automation.'), 'error');
    }
  }

  _htmlSettingsSection(o) {
    const currentDeviceType = (this._opts && this._opts.device_type) || '';
    const basicMode = this._settingsLevel() === 'basic';
    const _secVisible = sec => {
      if (sec.id === 'ml_training') return false;
      if (currentDeviceType && sec.notDeviceTypes && sec.notDeviceTypes.includes(currentDeviceType)) return false;
      if (currentDeviceType && sec.onlyDeviceTypes && !sec.onlyDeviceTypes.includes(currentDeviceType)) return false;
      // F2: keep the picked section in sync with the Basic-mode nav filter.
      if (basicMode && !this._secHasBasicFields(sec)) return false;
      return true;
    };
    const sec = _SETTINGS_SECTIONS.find(s => s.id === this._settingsSec && _secVisible(s))
      || _SETTINGS_SECTIONS.find(s => _secVisible(s))
      || _SETTINGS_SECTIONS[0];
    const intro = (sec.intro || this._t('section.' + sec.id + '.intro', {}, ''))
      ? `<p class="wd-sec-intro">${_esc(this._t('section.' + sec.id + '.intro', {}, sec.intro || ''))}</p>` : '';
    const trainCard = '';

    if (sec.id === 'notifications') {
      const varsHint = `<p class="wd-info" style="margin-bottom:16px">${this._t('msg.notify_services_hint', {entity: _html('<code>notify.&lt;name&gt;</code>'), vars: _html('<code>' + _esc(_NOTIFY_VARS) + '</code>')}, 'Use {entity} service IDs (comma-separated for multiple). Template variables: {vars}.')}</p>`;
      const groups = sec.groups.map(grp => {
        const fields = (grp.fields || []).filter(f => this._settingFieldVisible(f)).map(f => this._renderField(f, o)).filter(Boolean).join('');
        return fields ? `<div class="wd-subhead">${_esc(this._t('setting_group.' + _slugSub(grp.sub) + '.label', {}, grp.sub))}</div><div class="wd-form-grid">${fields}</div>` : '';
      }).join('');
      // The automations manager is an advanced power-feature; keep Basic mode clean.
      const autos = basicMode ? '' : this._htmlAutomations();
      return `${autos}${varsHint}${groups}`;
    }

    if (sec.groups) {
      const groups = sec.groups.map(grp => {
        const sub = grp.sub ? `<div class="wd-subhead">${_esc(this._t('setting_group.' + _slugSub(grp.sub) + '.label', {}, grp.sub))}</div>` : '';
        const fields = (grp.fields || []).filter(f => this._settingFieldVisible(f)).map(f => this._renderField(f, o)).filter(Boolean).join('');
        return fields ? `${sub}<div class="wd-form-grid">${fields}</div>` : '';
      }).join('');
      return `${intro}${trainCard}${groups}`;
    }

    const fields = (sec.fields || []).filter(f => this._settingFieldVisible(f)).map(f => this._renderField(f, o)).filter(Boolean).join('');
    return `${intro}${trainCard}<div class="wd-form-grid">${fields}</div>`;
  }

  // Cross-section field search: render every field (from all sections) whose
  // label / key / tooltip matches the query, grouped under its section heading.
  _htmlSettingsSearch(o, q) {
    const currentDeviceType = (this._opts && this._opts.device_type) || '';
    const sections = _SETTINGS_SECTIONS.filter(s => {
      if (s.id === 'ml_training') return false;
      if (currentDeviceType && s.notDeviceTypes && s.notDeviceTypes.includes(currentDeviceType)) return false;
      if (currentDeviceType && s.onlyDeviceTypes && !s.onlyDeviceTypes.includes(currentDeviceType)) return false;
      return true;
    });
    // Match what the user actually reads (audit UI-09): the translated label and
    // doc, plus the key and the English schema text, so English terms still work.
    const match = f => {
      const tr = f.key
        ? `${this._tText('setting.' + f.key + '.label', {}, '')} ${f.doc != null ? this._tText('setting.' + f.key + '.doc', {}, '') : ''}`
        : '';
      return (`${f.label || ''} ${f.key || ''} ${f.doc || ''} ${f.hint || ''} ${tr}`).toLowerCase().includes(q);
    };
    let out = '';
    let count = 0;
    for (const sec of sections) {
      const secFields = sec.fields || (sec.groups || []).flatMap(g => g.fields || []);
      const hits = secFields.filter(match);
      if (!hits.length) continue;
      const rendered = hits.map(f => this._renderField(f, o)).filter(Boolean).join('');
      if (!rendered) continue;
      count += hits.length;
      out += `<div class="wd-subhead">${_esc(this._t('section.' + sec.id + '.label', {}, sec.label))}</div><div class="wd-form-grid">${rendered}</div>`;
    }
    return count ? out : `<p class="wd-info" style="padding:12px">${this._t('msg.no_settings_match', {q}, 'No settings match "{q}"')}</p>`;
  }

  // Tuning suggestions waiting on one device-list entry: the backend's key list
  // (muted and no-op suggestions already dropped), else its bare count.
  _sugCountForDevice(dev) {
    if (!dev) return 0;
    return Array.isArray(dev.suggestion_keys) ? dev.suggestion_keys.length : (dev.suggestions_count || 0);
  }

  // Cross-section view showing only the fields that have active suggestions.
  _htmlSettingsSugOnly(o) {
    const sugKeys = new Set((this._suggestions || []).map(s => s.key));
    if (!sugKeys.size) return `<p class="wd-info" style="padding:12px">${this._t('msg.no_suggestions', {}, 'No active suggestions.')}</p>`;
    const currentDeviceType = (this._opts && this._opts.device_type) || '';
    const sections = _SETTINGS_SECTIONS.filter(s => {
      if (s.id === 'ml_training') return false;
      if (currentDeviceType && s.notDeviceTypes && s.notDeviceTypes.includes(currentDeviceType)) return false;
      if (currentDeviceType && s.onlyDeviceTypes && !s.onlyDeviceTypes.includes(currentDeviceType)) return false;
      return true;
    });
    let out = '';
    for (const sec of sections) {
      const secFields = sec.fields || (sec.groups || []).flatMap(g => g.fields || []);
      const hits = secFields.filter(f => sugKeys.has(f.key));
      if (!hits.length) continue;
      const rendered = hits.map(f => this._renderField(f, o)).filter(Boolean).join('');
      if (!rendered) continue;
      out += `<div class="wd-subhead">${_esc(this._t('section.' + sec.id + '.label', {}, sec.label))}</div><div class="wd-form-grid">${rendered}</div>`;
    }
    return out || `<p class="wd-info" style="padding:12px">${this._t('msg.no_suggestions', {}, 'No active suggestions.')}</p>`;
  }

  // Dedicated "ML Training" tab: the single home for all ML, laid out as a plain
  // sectioned dashboard (Status / Settings / What it's learned). Options save
  // through the same path as Settings (_saveSettings scans every [data-opt] in
  // the shadow root). The program-matching fine-tuning card went with the
  // matcher weight tuner in 0.5.8.
  _htmlMlTab() {
    const o = this._opts;
    if (!Object.keys(o).length)
      return `<div class="wd-empty"><div class="wd-icon">🤖</div>${this._t('msg.loading', {}, 'Loading…')}</div>`;
    const st = this._mlTrainingStatus;
    const dev = this._devices[this._selIdx];
    const eid = dev && dev.entry_id;
    const sec = _SETTINGS_SECTIONS.find(s => s.id === 'ml_training');
    const fields = sec ? (sec.fields || []).map(f => this._renderField(f, o)).filter(Boolean).join('') : '';
    const saveBusy = this._busy.has('save-settings');
    return `
      <div class="wd-card-title" style="margin:0 0 4px">${this._t('hdr.ml_smart_learning', {}, 'Smart Learning')}</div>
      <p class="wd-sec-intro">${this._t('msg.ml_intro', {}, 'WashData ships with smart models that work out of the box.')}</p>

      ${this._htmlMlStatusSection(st, eid)}

      <div class="wd-card" style="margin-top:12px">
        <div class="wd-card-title" style="margin:0 0 4px">${this._t('hdr.ml_settings_card', {}, 'Settings')}</div>
        <p class="wd-info" style="margin:0 0 12px">${this._t('msg.ml_settings_intro', {}, 'Two independent switches: one applies the models while a cycle runs, the other lets WashData fine-tune them to your machine over time.')}</p>
        <form id="wd-ml-form"><div class="wd-form-grid">${fields}</div></form>
        <div class="wd-card-actions" style="margin-top:12px">
          <button class="wd-btn wd-btn-primary" id="wd-ml-save" ${saveBusy ? 'disabled' : ''}>${saveBusy ? ('<span class="wd-spin"></span> ' + this._t('status.saving', {}, 'Saving…')) : this._t('btn.save', {}, 'Save')}</button>
        </div>
        <p class="wd-info" style="margin-top:10px;font-size:.78em">${this._t('msg.saving_triggers_reload', {}, 'Saving reloads the integration. Entities may briefly show as unavailable.')}</p>
      </div>

      ${this._htmlMlLearnedSection(st)}
    `;
  }

  // Status section: at-a-glance source, data readiness, last check, Train now.
  _htmlMlStatusSection(st, eid) {
    const running = (eid && this._busy.has('ml-train-now:' + eid)) || (st && st.running);
    const trainBtn = this._canEdit()
      ? `<button class="wd-btn wd-btn-primary wd-btn-sm" data-action="ml-train-now" ${running ? 'disabled' : ''}>${running ? `<span class="wd-spin"></span> ${this._t('status.training', {}, 'Training…')}` : this._t('btn.train_now', {}, 'Train now')}</button>`
      : '';
    if (!st) {
      return `<div class="wd-card"><div class="wd-card-title" style="margin:0 0 4px">${this._t('hdr.status', {}, 'Status')}</div><p class="wd-info" style="margin:0">${this._t('msg.loading', {}, 'Loading…')}</p></div>`;
    }
    const nModels = Object.keys(st.on_device_models || {}).length;
    const source = nModels
      ? `<span style="color:var(--success-color,#4caf50);font-weight:600">${this._t('ml.personalized', {}, '● Personalized to this machine')}</span> <span style="color:var(--secondary-text-color)">${this._t('lbl.models_fine_tuned', {count: nModels}, '(fine-tuned models: ' + nModels + ')')}</span>`
      : `<span style="color:var(--secondary-text-color)">${this._t('ml.builtin_models', {}, '● Using built-in models')}</span>`;
    const cyc = st.cycle_count || 0, min = st.min_cycles || 0;
    const enough = cyc >= min;
    const pct = min > 0 ? Math.min(100, Math.round(cyc / min * 100)) : 100;
    const barCol = enough ? 'var(--success-color,#4caf50)' : 'var(--warning-color,#ff9800)';
    const need = Math.max(0, min - cyc);
    const dataLine = enough
      ? this._t('msg.enough_data', {current: cyc, min: min}, `Enough data to learn from (${cyc}/${min} cycles).`)
      : this._t('msg.collecting_data', {need: need, current: cyc, min: min}, `Collecting data. Cycles still needed before fine-tuning can start: ${need} (${cyc}/${min}).`);
    const bar = `<div style="height:8px;border-radius:6px;background:var(--secondary-background-color);overflow:hidden;margin:8px 0"><div style="width:${pct}%;height:100%;background:${barCol}"></div></div>`;
    const last = st.last_trained ? _fmtDate(st.last_trained) : this._tText('ml.never', {}, 'never');
    const state = running
      ? `<span style="color:var(--info-color,#2196f3)"><span class="wd-spin"></span> ${this._t('status.fine_tuning', {}, 'fine-tuning now…')}</span>`
      : (st.enabled ? this._t('lbl.auto_fine_tune_on', {hour: String(st.hour).padStart(2, '0')}, `auto fine-tune on (around ${String(st.hour).padStart(2, '0')}:00)`) : this._t('lbl.auto_fine_tune_off', {}, 'auto fine-tune off'));
    return `<div class="wd-card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap">
        <div class="wd-card-title" style="margin:0">${this._t('hdr.status', {}, 'Status')}</div>${trainBtn}
      </div>
      <div style="margin:8px 0 2px">${source}</div>
      <p class="wd-info" style="margin:0">${dataLine}</p>
      ${bar}
      <p class="wd-info" style="margin:0">${this._t('lbl.last_checked', {}, 'Last checked:')} <strong>${_esc(last)}</strong> · ${state}</p>
    </div>`;
  }

  // "What WashData has learned": per-model rows with a humanized fit indicator
  // (a bar + word) and the exact metric on hover, plus reset-to-built-in.
  _htmlMlLearnedSection(st) {
    if (!st) return '';
    const models = st.on_device_models || {};
    const keys = Object.keys(models);
    const reverting = this._busy.has('ml-revert-models');
    const lastRuns = st.last_run || {};
    let body;
    if (!keys.length) {
      // Why nothing is fine-tuned, from the last run (audit ML-20).
      const why = Object.keys(lastRuns).map(cap => this._mlLastRunLine(lastRuns[cap])).filter(Boolean).join('');
      body = `<p class="wd-info" style="margin:0">${this._t('msg.no_fine_tuned', {}, 'Nothing fine-tuned yet - WashData is using its built-in models.')}</p>${why}`;
    } else {
      const rows = keys.map(cap => {
        const m = models[cap] || {};
        const when = m.trained_at ? _fmtDate(m.trained_at) : this._tText('ml.trained_unknown', {}, 'at an unknown time');
        return `<div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--divider-color)">
          <div style="flex:1;min-width:0">
            <div style="font-weight:600">${_esc(m.label_key ? this._t(m.label_key, {}, m.label || cap) : (m.label || cap))}${this._mlTrendBadge(m.trend)}</div>
            <div class="wd-info" style="font-size:.8em;margin:0">${_esc(m.blurb_key ? this._t(m.blurb_key, {}, m.blurb || '') : (m.blurb || ''))} · ${this._t('ml.fine_tuned_at', {when}, 'fine-tuned {when}')}</div>
            ${this._mlLastRunLine(lastRuns[cap])}
          </div>
          ${this._mlQualityChip(m)}
        </div>`;
      }).join('');
      const resetBtn = this._canEdit()
        ? `<button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="ml-revert-models" ${reverting ? 'disabled' : ''} title="${_esc(this._t('btn.reset_ml_models_tip', {}, 'Discard the fine-tuned models and go back to the built-in ones. WashData can re-learn them later.'))}" style="margin-top:12px">${reverting ? ('<span class="wd-spin"></span> ' + this._t('status.resetting', {}, 'Resetting…')) : this._t('btn.reset_to_builtin', {}, 'Reset to built-in models')}</button>`
        : '';
      body = `<div>${rows}</div>${resetBtn}`;
    }
    return `<div class="wd-card" style="margin-top:12px">
      <div class="wd-card-title" style="margin:0 0 4px">${this._t('hdr.ml_learned', {}, 'What WashData has learned')}</div>
      <p class="wd-info" style="margin:0 0 10px">${this._t('msg.ml_learned_intro', {}, 'Models fine-tuned to this machine.')}</p>
      ${body}
    </div>`;
  }

  // Humanized "fit" indicator for a fine-tuned model: a coloured word + bar, with
  // the exact metric on hover: how much the regressor beats the baseline estimate
  // (every fine-tuned model is a regressor since 0.5.8).
  _mlQualityChip(m) {
    let pct = 0, word = '', title = m.metric_key ? this._tText(m.metric_key, m.metric_params || {}, m.metric || '') : (m.metric || '');
    if (m.model_mae != null && m.naive_mae != null && m.naive_mae > 0) {
      const impr = Math.max(0, (m.naive_mae - m.model_mae) / m.naive_mae);
      pct = Math.min(1, impr) * 100;
      word = impr >= 0.5 ? this._t('ml.fit_strong',{},'Strong') : impr >= 0.2 ? this._t('ml.fit_good',{},'Good') : this._t('ml.fit_slight',{},'Slight');
      title = this._tText('ml.better_than_baseline', {pct: (impr * 100).toFixed(0), metric: title}, `${(impr * 100).toFixed(0)}% better than the baseline estimate (${title})`);
    } else {
      return '';
    }
    // How many cycles the figure rests on (audit ML-20).
    if (Number.isInteger(m.held_out_cycles)) {
      title += ' · ' + this._tText('ml.held_out_count', {count: m.held_out_cycles}, `measured on ${m.held_out_cycles} held-out cycles`);
    }
    const col = pct >= 70 ? 'var(--success-color,#4caf50)' : pct >= 40 ? 'var(--warning-color,#ff9800)' : 'var(--secondary-text-color)';
    return `<div title="${_esc(title)}" style="text-align:right;flex:0 0 auto">
      <div style="font-size:.8em;font-weight:600;color:${col}">${word} ${this._t('ml.fit_word', {}, 'fit')}</div>
      <div style="height:6px;width:90px;border-radius:5px;background:var(--secondary-background-color);overflow:hidden;margin:3px 0 0 auto"><div style="width:${pct.toFixed(0)}%;height:100%;background:${col}"></div></div>
    </div>`;
  }

  // Small "improving / steady / declining" badge next to a model name, from the
  // held-out fit trend across recent re-checks (drift). Empty when no trend yet.
  _mlTrendBadge(trend) {
    if (!trend) return '';
    const map = {
      improving: [this._t('badge.improving',{},'↗ improving'), 'var(--success-color,#4caf50)', this._t('ml.trend_improving_tip', {}, "This model's fit has improved across recent re-checks.")],
      declining: [this._t('badge.declining',{},'↘ declining'), 'var(--warning-color,#ff9800)', this._t('ml.trend_declining_tip', {}, "This model's fit has slipped across recent re-checks – reviewing more cycles may help it re-learn.")],
      steady: [this._t('badge.steady',{},'→ steady'), 'var(--secondary-text-color)', this._t('ml.trend_steady_tip', {}, "This model's fit has held roughly steady across recent re-checks.")],
    };
    const e = map[trend];
    if (!e) return '';
    return ` <span title="${_esc(e[2])}" style="font-size:.72em;font-weight:600;color:${e[1]};margin-left:6px">${e[0]}</span>`;
  }

  // Why a training run put no new model in use (audit ML-20), as plain text from
  // the backend's reason code + params. `[code, text]`; an unknown code reads as
  // 'unknown'.
  _mlSkipReason(rec) {
    const fallbacks = {
      insufficient_rows: 'Not enough usable cycles yet: {count} labelled, clean cycles so far.',
      holdout_too_small: 'Too few cycles to test a new model fairly: {held_out} could be set aside for testing, {min} are needed.',
      not_better_than_naive: 'The new model was not clearly better than the simple estimate (error {model} vs {naive}).',
      not_better_than_incumbent: 'The new model was not better than the one in use (error {model} vs {incumbent}), so the current one was kept.',
      fit_failed: 'Training failed: {error}',
      unknown: 'Nothing new was learnt.',
    };
    const code = Object.prototype.hasOwnProperty.call(fallbacks, rec && rec.reason_code) ? rec.reason_code : 'unknown';
    const params = (rec && rec.reason_params) || {};
    const vars = code === 'insufficient_rows' ? {count: Number(params.cycles) || 0} : {...params};
    return [code, this._tText(`ml.skip_reason.${code}`, vars, fallbacks[code])];
  }

  // The last run's reason as one line; '' when it promoted or none is on record.
  _mlLastRunLine(run) {
    if (!run || run.promoted !== false) return '';
    const [code, reason] = this._mlSkipReason(run);
    const when = run.ts ? _fmtDate(run.ts) : this._tText('ml.trained_unknown', {}, 'at an unknown time');
    return `<div class="wd-info wd-ml-last-run" data-reason="${_esc(code)}" style="font-size:.8em;margin:4px 0 0">${this._t('ml.last_run_not_promoted', {when, reason}, 'Last check ({when}): {reason}')}</div>`;
  }

  // ── F3: Playground tab (what-if simulator / A-B / DTW inspector) ─────────────

  // The small set of detection params the playground lets you tweak. Labels reuse
  // the canonical setting.* strings; units/steps/mins come from _FIELD_BY_KEY.
  _pgOverrideFields() {
    return [
      ['start_threshold_w',       'Start Threshold',       'W', 'Minimum watts to count as started',            'detection'],
      ['stop_threshold_w',        'Stop Threshold',        'W', 'Below this, machine counts as off',            'detection'],
      ['off_delay',               'Off Delay',             's', 'Seconds of low power before cycle ends',       'timing'],
      ['min_off_gap',             'Min Off Gap',           's', 'Gap required to separate two cycles',          'timing'],
      ['completion_min_seconds',  'Min Cycle Duration',    's', 'Shortest run that counts as a real cycle',     'timing'],
      ['start_duration_threshold','Start Duration',        's', 'Seconds above threshold to confirm start',     'timing'],
      ['interrupted_min_seconds', 'Interrupted Min',       's', 'Short cycles flagged as interrupted',          'advanced'],
      ['anti_wrinkle_enabled',    'Enable Anti-Wrinkle Detection', '', 'Absorb the tumble pulses after the main phase instead of reading them as new cycles', 'advanced', 'bool'],
      ['anti_wrinkle_max_power',  'Max Anti-Wrinkle Power','W', 'A pulse above this ends anti-wrinkle and opens a new cycle', 'advanced'],
      ['anti_wrinkle_max_duration','Max Anti-Wrinkle Duration','s', 'A pulse longer than this ends anti-wrinkle and opens a new cycle', 'advanced'],
      ['anti_wrinkle_exit_power', 'Anti-Wrinkle Exit Power','W', 'Quiet level between tumble pulses; only takes effect above the Stop Threshold', 'advanced'],
      ['anti_wrinkle_idle_timeout','Max Pulse Gap',        's', 'Quiet time allowed between two tumble pulses before anti-wrinkle ends', 'advanced'],
      ['dishwasher_end_spike_quiet_release','Passive-Dry Quiet Release','s', 'Dishwasher: quiet seconds after expected duration before the end-of-cycle drain wait is released', 'advanced'],
      ['smart_termination_duration_ratio', 'Smart Termination Ratio', '', 'Fraction of the program\'s average duration a cycle must reach before Smart Termination may end it early; lower it if run times vary', 'advanced'],
      ['anti_crease_finalize_ratio', 'Anti-Crease Finalize Ratio', '', 'Fraction of the program\'s average duration a cycle must reach before the anti-crease tail may finish it; lower it on dryers, keep washers at the default', 'advanced'],
      ['curve_preroll_seconds', 'Curve Pre-roll', 's', 'Seconds of readings from aborted start attempts carried into the front of a cycle\'s curve; 0 = off', 'timing'],
      ['profile_match_min_duration_ratio', 'Min Duration Ratio', '', 'Minimum cycle length as a fraction of the profile\'s duration; default 0.1 (10%)', 'matching'],
      ['profile_match_max_duration_ratio', 'Max Duration Ratio', '', 'Maximum cycle length as a fraction of the profile\'s duration; default 1.8 (180%)', 'matching'],
    ];
  }

  // Resolve a pre-fill value for an override field: staged override → the live
  // effective value from the backend → stored option → field default (settings
  // schema) → matcher constant default → ''.
  //
  // The effective value comes first because it is the ONLY source that resolves
  // device-type defaults (e.g. a dishwasher's min_off_gap) the way the running
  // integration does; the option/schema fallbacks below it only matter on an older
  // backend that has no get_playground_settings command.
  _pgFieldVal(key, store) {
    const s = store || {};
    if (s[key] !== undefined) return s[key];
    const eff = this._pgEffective || {};
    if (eff[key] !== undefined && eff[key] !== null) return eff[key];
    const o = this._opts || {};
    if (o[key] !== undefined && o[key] !== null) return o[key];
    const f = _FIELD_BY_KEY[key] || {};
    if (f.def !== undefined) return f.def;
    // Prefer backend-provided matcher defaults (const.py, via get_constants) so the
    // Playground can't drift from the real defaults; the hardcoded _PG_MATCH_DEFAULTS
    // table below is only an offline fallback for when the payload hasn't loaded.
    const be = (this._constants && this._constants.pgMatchDefaults) || {};
    if (be[key] !== undefined) return be[key];
    if (_PG_MATCH_DEFAULTS[key] !== undefined) return _PG_MATCH_DEFAULTS[key];
    return '';
  }

  // ── Playground settings control panel ───────────────────────────────────────
  // Load live → edit in the sandbox → save/load a named preset → publish single
  // values back. The staged-override maps stay the single source of "what the
  // user changed"; this block only decides what they are measured against.

  // Fetch the device's live effective settings + its saved presets. Tolerant of an
  // older backend (command unknown): the field pre-fill silently falls back to the
  // stored-option chain in _pgFieldVal.
  async _pgFetchSettings(entryId, includeSuggestions = true) {
    try {
      const r = await this._ws({
        type: `${_DOMAIN}/get_playground_settings`, entry_id: entryId,
        include_suggestions: includeSuggestions,
      });
      if (!this._isActiveEntry(entryId)) return;
      this._pgEffective = r.effective || {};
      this._pgPublishable = Array.isArray(r.publishable) ? r.publishable : null;
      this._pgPresets = Array.isArray(r.presets) ? r.presets : [];
      this._pgPresetLimit = r.preset_limit || 0;
      if (this._pgPresetSel && !this._pgPresets.some(p => p.name === this._pgPresetSel)) this._pgPresetSel = '';
      if (includeSuggestions) this._pgApplySuggestions(r);
    } catch (e) {
      if (this._pgIsUnknownCmd(e)) this._pgNeedsRestart = true;
    }
  }

  _pgApplySuggestions(r) {
    this._pgSuggClassic = (r.classic_suggestions && typeof r.classic_suggestions === 'object') ? r.classic_suggestions : {};
  }

  // Suggestions label the "Load suggested" button and nothing else, so they are
  // fetched in the background instead of on the critical path of opening the tab;
  // the button renders once its count is non-zero.
  async _pgFetchSuggestions(entryId) {
    try {
      const r = await this._ws({
        type: `${_DOMAIN}/get_playground_settings`, entry_id: entryId,
        include_suggestions: true,
      });
      if (!this._isActiveEntry(entryId)) return;
      this._pgApplySuggestions(r);
      if (this._tab === 'playground') this._render();
    } catch (_) { /* the buttons simply stay hidden */ }
  }

  // Every value the control panel currently shows (live baseline + staged edits).
  // This is what a "save preset" snapshots, so a preset is a complete setup rather
  // than a sparse diff that would mean something different on another baseline.
  _pgCurrentValues() {
    const out = {};
    for (const [key] of this._pgOverrideFields()) {
      const v = this._pgFieldVal(key, {});
      if (v !== '' && v !== null && v !== undefined) out[key] = v;
    }
    if (this._pgThreshStart != null) out.start_threshold_w = this._pgThreshStart;
    if (this._pgThreshStop != null) out.stop_threshold_w = this._pgThreshStop;
    for (const [k, v] of Object.entries(this._pgParamOverrides || {})) out[k] = v;
    return out;
  }

  // Staged value for one key, or undefined when the field is at the live baseline.
  _pgStagedVal(key) {
    if (key === 'start_threshold_w') return this._pgThreshStart ?? undefined;
    if (key === 'stop_threshold_w') return this._pgThreshStop ?? undefined;
    return this._pgParamOverrides[key];
  }

  _pgSetStaged(key, val) {
    if (key === 'start_threshold_w') this._pgThreshStart = val;
    else if (key === 'stop_threshold_w') this._pgThreshStop = val;
    else this._pgParamOverrides[key] = val;
  }

  _pgClearStaged(key) {
    if (key === 'start_threshold_w') this._pgThreshStart = null;
    else if (key === 'stop_threshold_w') this._pgThreshStop = null;
    else delete this._pgParamOverrides[key];
  }

  // Keys the user changed away from the live baseline (a staged value equal to the
  // live one is not a change and is never published).
  _pgChangedKeys() {
    const live = this._pgEffective || {};
    const keys = [];
    for (const [key] of this._pgOverrideFields()) {
      const staged = this._pgStagedVal(key);
      if (staged === undefined || staged === null) continue;
      const base = live[key];
      if (base !== undefined && base !== null && this._pgSameVal(staged, base)) continue;
      keys.push(key);
    }
    return keys;
  }

  // Loose numeric/bool equality: input fields yield strings and floats can carry
  // representation noise, so compare on value, not on type.
  _pgSameVal(a, b) {
    if (typeof a === 'boolean' || typeof b === 'boolean') return !!a === !!b;
    const na = parseFloat(a), nb = parseFloat(b);
    if (!isNaN(na) && !isNaN(nb)) return Math.abs(na - nb) < 1e-9;
    return String(a) === String(b);
  }

  // Can this key be written back to the live config? The backend ships the
  // allow-list (real CONF_* options only); the settings-schema membership test is
  // the offline fallback. The Stage 2-4 matcher knobs are sandbox-only constants
  // with no option behind them, so they are never publishable.
  _pgIsPublishable(key) {
    if (Array.isArray(this._pgPublishable)) return this._pgPublishable.includes(key);
    return !!_FIELD_BY_KEY[key];
  }

  _htmlPgControlPanel() {
    const changed = this._pgChangedKeys();
    const canEdit = this._canEdit();
    const loaded = !!this._pgEffective;
    const publishable = changed.filter(k => this._pgIsPublishable(k));

    const status = !loaded
      ? `<span style="color:var(--secondary-text-color)">${this._t('msg.pg_live_unavailable', {}, 'Live settings unavailable, showing defaults.')}</span>`
      : (changed.length
        ? `<span style="color:var(--warning-color,#ff9800);font-weight:600">${this._t('msg.pg_n_changed', {n: changed.length}, changed.length + ' changed vs live settings')}</span>`
        : `<span style="color:var(--success-color,#4caf50)">✓ ${this._t('msg.pg_matches_live', {}, 'Matches live settings')}</span>`);

    const presets = this._pgPresets || [];
    const presetOpts = `<option value="">${_esc(this._tText('lbl.pg_preset_none', {}, 'Select a preset…'))}</option>`
      + presets.map(p => `<option value="${_esc(p.name)}" ${this._pgPresetSel === p.name ? 'selected' : ''}>${_esc(p.name)}</option>`).join('');
    const hasSel = !!this._pgPresetSel;
    const atLimit = this._pgPresetAtLimit((this._pgPresetName || '').trim());

    const presetRow = `<div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px">
      <select id="wd-pg-preset-sel" class="wd-pg-preset-sel" aria-label="${_esc(this._tText('lbl.pg_preset', {}, 'Playground preset'))}">${presetOpts}</select>
      <button class="wd-btn wd-btn-sm" data-action="pg-preset-load" ${hasSel ? '' : 'disabled'} title="${_esc(this._tText('btn.pg_preset_load_tip', {}, 'Replace the Playground values with this preset (live settings are untouched)'))}">${this._t('btn.pg_preset_load', {}, 'Load preset')}</button>
      ${canEdit ? `<button class="wd-btn wd-btn-sm wd-btn-danger" data-action="pg-preset-delete" ${hasSel ? '' : 'disabled'} aria-label="${_esc(this._tText('btn.pg_preset_delete', {}, 'Delete preset'))}" title="${_esc(this._tText('btn.pg_preset_delete', {}, 'Delete preset'))}">🗑</button>` : ''}
    </div>`;

    const saveRow = canEdit ? `<div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px">
      <input id="wd-pg-preset-name" type="text" class="wd-pg-preset-name" maxlength="60" value="${_esc(this._pgPresetName || '')}" placeholder="${_esc(this._tText('lbl.pg_preset_name', {}, 'New preset name'))}" aria-label="${_esc(this._tText('lbl.pg_preset_name', {}, 'New preset name'))}">
      <button class="wd-btn wd-btn-sm" data-action="pg-preset-save" ${(this._pgPresetName || '').trim() && !atLimit ? '' : 'disabled'} title="${_esc(this._tText('btn.pg_preset_save_tip', {}, 'Save every value below as a named preset for this device'))}">${this._t('btn.pg_preset_save', {}, 'Save as preset')}</button>
      <span id="wd-pg-preset-limit-note" style="font-size:.72em;color:var(--warning-color,#ff9800)${atLimit ? '' : ';display:none'}">${this._t('msg.pg_preset_limit', {n: this._pgPresetLimit}, 'Preset limit reached ({n})')}</span>
    </div>` : '';

    const publishBtn = (canEdit && publishable.length)
      ? `<button class="wd-btn wd-btn-sm wd-btn-primary" data-action="pg-apply-settings" title="${_esc(this._t('btn.pg_apply_to_settings_tip', {}, 'Copy the values you edited here into this device\'s live settings'))}">${this._t('btn.pg_publish_all', {n: publishable.length}, 'Publish ' + publishable.length + ' to integration')}</button>`
      : '';

    const suggClassicCount = Object.keys(this._pgSuggClassic || {}).length;
    const suggClassicBtn = suggClassicCount > 0
      ? `<button class="wd-btn wd-btn-sm" data-action="pg-load-suggested" title="${_esc(this._t('btn.pg_load_suggested_tip', {}, 'Stage the auto-tuner\'s current suggestions as Playground overrides'))}">↓ ${this._t('btn.pg_load_suggested', {n: suggClassicCount}, 'Load suggested (' + suggClassicCount + ')')}</button>`
      : '';

    return `<div class="wd-pg-ctrl">
      <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap">
        <span class="wd-subhead" style="margin:0">${this._t('hdr.pg_settings_source', {}, 'Settings source')}</span>
        <span style="font-size:.75em">${status}</span>
      </div>
      <p class="wd-info" style="margin:4px 0 0;font-size:.72em">${this._t('msg.pg_ctrl_intro', {}, 'Values start from this device\'s live integration settings. Edits stay in the Playground until you publish them.')}</p>
      <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px">
        <button class="wd-btn wd-btn-sm" data-action="pg-load-live" title="${_esc(this._t('btn.pg_load_live_tip', {}, 'Re-read the integration\'s current settings and drop every Playground edit'))}">⟳ ${this._t('btn.pg_load_live', {}, 'Load live settings')}</button>
        ${suggClassicBtn}
        ${publishBtn}
      </div>
      ${presetRow}
      ${saveRow}
    </div>`;
  }

  // Saving under `name` would need a new slot and the device is at its cap (an
  // existing name can always be overwritten).
  _pgPresetAtLimit(name) {
    const presets = this._pgPresets || [];
    return this._pgPresetLimit > 0 && presets.length >= this._pgPresetLimit
      && !presets.some(p => p.name === name);
  }

  // Replace the sandbox values with a preset: stage only what differs from the live
  // baseline, so the graph's before/after diff keeps meaning "vs the integration".
  _pgApplyPresetValues(values) {
    this._pgThreshStart = null; this._pgThreshStop = null; this._pgParamOverrides = {};
    const live = this._pgEffective || {};
    for (const [key, val] of Object.entries(values || {})) {
      if (val === null || val === undefined) continue;
      const base = live[key];
      if (base !== undefined && base !== null && this._pgSameVal(val, base)) continue;
      this._pgSetStaged(key, val);
    }
  }

  _pgLoadPreset() {
    const preset = (this._pgPresets || []).find(p => p.name === this._pgPresetSel);
    if (!preset) return;
    this._pgApplyPresetValues(preset.values);
    this._showToast(this._tText('toast.pg_preset_loaded', {name: preset.name}, `Preset "${preset.name}" loaded`));
    this._render();
    requestAnimationFrame(() => this._pgDrawCanvas());
  }

  async _pgSavePreset() {
    const dev = this._devices[this._selIdx];
    const name = (this._pgPresetName || '').trim();
    if (!dev || !this._canEdit() || !name) return;
    if ((this._pgPresets || []).some(p => p.name === name)
      && !confirm(this._tText('msg.pg_preset_overwrite', {name}, `Overwrite the preset "${name}"?`))) return;
    await this._busyRun('pg-preset-save', async () => {
      try {
        const r = await this._ws({ type: `${_DOMAIN}/save_playground_preset`, entry_id: dev.entry_id, name, values: this._pgCurrentValues() });
        if (!this._isActiveEntry(dev.entry_id)) return;
        this._pgPresets = Array.isArray(r.presets) ? r.presets : this._pgPresets;
        this._pgPresetSel = name;
        this._pgPresetName = '';
        this._showToast(this._tText('toast.pg_preset_saved', {name}, `Preset "${name}" saved`));
      } catch (e) {
        this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error');
      }
    });
    this._render();
  }

  async _pgDeletePreset() {
    const dev = this._devices[this._selIdx];
    const name = this._pgPresetSel;
    if (!dev || !this._canEdit() || !name) return;
    if (!confirm(this._tText('msg.pg_preset_delete_confirm', {name}, `Delete the preset "${name}"?`))) return;
    await this._busyRun('pg-preset-delete', async () => {
      try {
        const r = await this._ws({ type: `${_DOMAIN}/delete_playground_preset`, entry_id: dev.entry_id, name });
        if (!this._isActiveEntry(dev.entry_id)) return;
        this._pgPresets = Array.isArray(r.presets) ? r.presets : (this._pgPresets || []).filter(p => p.name !== name);
        this._pgPresetSel = '';
      } catch (e) {
        this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error');
      }
    });
    this._render();
  }

  // Re-read the integration's settings and discard every sandbox edit.
  async _pgLoadLive() {
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    const changed = this._pgChangedKeys();
    if (changed.length && !confirm(this._tText('msg.pg_load_live_confirm', {n: changed.length}, `Discard ${changed.length} Playground edit(s) and reload the integration's current settings?`))) return;
    await this._busyRun('pg-load-live', async () => {
      this._pgThreshStart = null; this._pgThreshStop = null; this._pgParamOverrides = {};
      await this._pgFetchSettings(dev.entry_id);
    });
    this._render();
    requestAnimationFrame(() => this._pgDrawCanvas());
  }

  // Stage suggested values as Playground overrides (additive merge - does not
  // reset existing edits).
  _pgLoadSuggested() {
    const vals = this._pgSuggClassic || {};
    const live = this._pgEffective || {};
    let staged = 0;
    for (const [key, val] of Object.entries(vals)) {
      if (val === null || val === undefined) continue;
      // Skip values already at the live baseline — staging them would show as a
      // "change" in the diff view but produce no actual difference in simulation.
      const base = live[key];
      if (base !== undefined && base !== null && this._pgSameVal(val, base)) continue;
      this._pgSetStaged(key, val);
      staged++;
    }
    if (staged === 0) {
      this._showToast(this._t('msg.pg_sugg_none', {}, 'All suggestions already match the current settings'));
    } else {
      this._showToast(this._tText('toast.pg_sugg_loaded', {n: staged}, `Staged ${staged} suggested value(s) - run the Playground to compare`));
    }
    this._render();
    requestAnimationFrame(() => this._pgDrawCanvas());
  }

  // Publish exactly one edited value into the device's live settings.
  async _pgPublishOne(key) {
    const dev = this._devices[this._selIdx];
    if (!dev || !this._canEdit() || !key || !this._pgIsPublishable(key)) return;
    const val = this._pgStagedVal(key);
    if (val === undefined || val === null) return;
    const lbl = this._t('setting.' + key + '.label', {}, key);
    if (!confirm(this._tText('msg.pg_publish_one_confirm', {label: lbl, value: val}, `Save ${lbl} = ${val} to this device's settings?`))) return;
    await this._busyRun('pg-publish-' + key, async () => {
      try {
        await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: dev.entry_id, options: { [key]: val } });
        if (!this._isActiveEntry(dev.entry_id)) return;
        this._opts = { ...this._opts, [key]: val };
        // The published value IS the live baseline now: fold it into the effective
        // map and drop the staged edit, so the field reads "matches live" without
        // waiting for the entry reload to come back around.
        if (this._pgEffective) this._pgEffective = { ...this._pgEffective, [key]: val };
        this._pgClearStaged(key);
        this._showToast(this._t('toast.settings_saved', {}, 'Settings saved; integration reloading'));
      } catch (e) {
        this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error');
      }
    });
    this._render();
  }

  _htmlPlayground() {
    const dev = this._devices[this._selIdx];
    if (!dev) return `<div class="wd-empty">${this._t('msg.no_device_selected', {}, 'No device selected.')}</div>`;

    const cycles = this._cycles || [];
    const profiles = this._profiles || [];

    // Compact cycle dropdown
    const cycleOpts = cycles.map(c => {
      const prog = c.profile_name || c.matched_profile || this._t('lbl.unlabelled', {}, 'Unlabelled');
      const dur = c.duration ? ` · ${Math.round(c.duration / 60)} ${this._tText('lbl.timer_min', {}, 'min')}` : '';
      const dateStr = c.start_time ? ` · ${_fmtDate(c.start_time)}` : '';
      return `<option value="${_esc(c.id)}" ${this._pgCycleId === c.id ? 'selected' : ''}>${_esc(prog + dur + dateStr)}</option>`;
    }).join('');

    // Compact profile dropdown
    const profOpts = `<option value="">${_esc(this._t('lbl.auto_detect', {}, 'Auto-detect'))}</option>`
      + profiles.map(p => `<option value="${_esc(p.name)}" ${this._pgProfileName === p.name ? 'selected' : ''}>${_esc(p.name)}</option>`).join('');

    // Top controls: pick a cycle + Run the real backend simulation. While it runs,
    // a Cancel button + a progress bar show; there is no JS replay animation.
    const busy = this._pgLoading;
    const topBar = `<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:4px">
      <div class="wd-field" style="min-width:180px;margin:0"><label>${this._t('lbl.cycle', {}, 'Cycle')}</label><select id="wd-pg-cyc-sel" ${busy ? 'disabled' : ''}>${cycleOpts || '<option value="">—</option>'}</select></div>
      <div class="wd-field" style="min-width:160px;margin:0" title="${_esc(this._tText('msg.pg_compare_profile_tip', {}, 'Only picks the profile drawn over the graph. The simulation always matches the cycle on its own, as the live integration does.'))}"><label for="wd-pg-prof-sel">${this._t('lbl.pg_compare_profile', {}, 'Compare with profile')}</label><select id="wd-pg-prof-sel" ${busy ? 'disabled' : ''}>${profOpts}</select></div>
      <div style="display:flex;gap:6px;align-items:flex-end;padding-bottom:2px">
        <button class="wd-btn wd-btn-primary" data-action="pg-run" ${busy ? 'disabled' : ''} style="min-width:72px">▶ ${this._t('btn.run', {}, 'Run')}</button>
        ${busy ? `<button class="wd-btn" data-action="pg-cancel-run" style="min-width:72px">✕ ${this._t('btn.cancel', {}, 'Cancel')}</button>` : ''}
      </div>
    </div>`;

    // Simple progress bar while the backend simulates the selected cycle.
    const progressBar = busy
      ? `<div class="wd-pg-simbar" role="progressbar" aria-label="${_esc(this._t('msg.pg_simulating', {}, 'Simulating cycle…'))}"><div class="wd-pg-simbar-fill"></div></div>
         <div style="font-size:.78em;color:var(--secondary-text-color);margin:4px 0 0">${this._t('msg.pg_simulating', {}, 'Simulating cycle…')}</div>`
      : '';

    // Canvas
    const canvasEmptyOverlay = (!this._pgPowerPts && !busy)
      ? `<div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;gap:6px">
          <div style="font-size:1.6em;opacity:.25">&#12316;</div>
          <div style="font-size:.82em;color:var(--secondary-text-color);text-align:center">${this._t('msg.pg_canvas_empty3', {}, 'Pick a cycle above and press Run to simulate it. Then hover to read values, scroll or pinch to zoom, and drag to pan.')}</div>
        </div>`
      : '';
    const canvas = `${progressBar}<div class="wd-pg-canvas-wrap" style="position:relative"><canvas id="wd-pg-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_playground_chart3', {}, 'Interactive cycle power graph: hover to read time/power, scroll or pinch to zoom, drag to pan'))}"></canvas>${canvasEmptyOverlay}</div>`;
    const strip = this._htmlPgStrip();

    const restartNote = this._pgNeedsRestart
      ? `<p class="wd-info" style="color:var(--warning-color,#ff9800);margin:4px 0">⚠ ${this._t('msg.pg_restart_note', {}, 'Restart Home Assistant to enable simulation tools.')}</p>`
      : '';

    // Unified workbench: the interactive graph + shared settings + this cycle's
    // outcome are ALWAYS present. History/Optimize live in a bottom drawer below
    // and drive this graph in place (no mode switch, no back-and-forth).
    const workbench = `${topBar}${canvas}${strip}
      <div class="wd-pg-sim-grid">
        <div class="wd-pg-sim-main">${this._htmlPgParamRows()}</div>
        <div class="wd-pg-sim-side">${this._htmlPgAlerts()}${this._htmlPgAnalysis()}</div>
      </div>`;

    return `<div class="wd-card">
      <div class="wd-card-title" style="margin:0 0 10px">${this._t('hdr.playground', {}, 'Playground')}</div>
      <p class="wd-sec-intro" style="margin:0 0 10px">${this._t('msg.playground_intro', {}, 'Try settings on your real cycle data. Nothing here changes your live settings until you apply it.')}</p>
      ${restartNote}
      ${workbench}
      ${this._htmlPgDrawer()}
    </div>`;
  }

  // Bottom "Across your cycles" drawer. History + Optimize are two lenses on the
  // SAME backend sim run with the current settings; their results funnel back
  // into the graph above (a history row loads that cycle; Apply-best stages an
  // override). Sub-tabs, not full-page modes, so the graph is never hidden.
  _htmlPgDrawer() {
    const tab = this._pgAnalysisTab || 'history';
    const subtabs = [
      ['history', this._t('lbl.pg_mode_history', {}, 'Test on history')],
      ['sweep', this._t('lbl.pg_mode_optimize', {}, 'Optimize')],
    ];
    const tabBar = `<div class="wd-pg-subtabs" role="tablist">
      ${subtabs.map(([id, lbl]) => `<button role="tab" aria-selected="${tab === id}" class="wd-pg-subtab${tab === id ? ' active' : ''}" data-action="pg-analysis-tab" data-subtab="${id}">${_esc(lbl)}</button>`).join('')}
    </div>`;
    const body = tab === 'sweep' ? this._htmlPgSweepMode() : this._htmlPgHistoryMode();
    return `<section class="wd-pg-drawer">
      <div class="wd-pg-drawer-head">
        <span class="wd-subhead" style="margin:0">${this._t('hdr.pg_across_cycles', {}, 'Across your cycles')}</span>
        ${tabBar}
      </div>
      ${body}
    </section>`;
  }

  // Just the detection-parameter editor rows (Simulate mode). A change redraws the
  // thresholds at once; the outcome card then marks the simulation stale and offers
  // to re-run it (audit PLAYGROUND-13), rather than re-running on every keystroke.
  _htmlPgParamRows() {
    const fields = this._pgOverrideFields();
    const threshFields = new Set(['start_threshold_w', 'stop_threshold_w']);
    const groupColors = { detection: '#2a78d6', timing: '#1baf7a', advanced: '#eda100', matching: '#a05cd6' };
    const groupLabels = {
      detection: this._t('lbl.pg_group_detection', {}, 'Detection triggers'),
      timing: this._t('lbl.pg_group_timing', {}, 'Timing rules'),
      advanced: this._t('lbl.pg_group_advanced', {}, 'Edge cases'),
      matching: this._t('lbl.pg_group_matching', {}, 'Program matching'),
    };
    let lastGroup = '';
    const paramRows = fields.map(([key, fb, unit, desc, group, type]) => {
      const lbl = this._t('setting.' + key + '.label', {}, fb);
      const liveVal = this._pgFieldVal(key, {});
      let curVal;
      if (key === 'start_threshold_w') curVal = this._pgThreshStart ?? liveVal;
      else if (key === 'stop_threshold_w') curVal = this._pgThreshStop ?? liveVal;
      else curVal = this._pgParamOverrides[key] ?? liveVal;
      const isBool = type === 'bool';
      const isDrag = threshFields.has(key);
      const unitTxt = unit ? unit : '';
      const gc = groupColors[group] || '#2a78d6';
      const gl = groupLabels[group] || '';
      let header = '';
      if (group && group !== lastGroup) {
        header = `<div style="display:flex;align-items:center;gap:8px;margin:${lastGroup ? '12px' : '2px'} 0 5px">
          <div style="width:3px;height:14px;border-radius:2px;background:${gc};flex-shrink:0"></div>
          <span style="font-size:.7em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--secondary-text-color)">${_esc(gl)}</span>
        </div>`;
        lastGroup = group;
      }
      // Per-setting publish: only for keys that are real integration options AND
      // only once this field actually differs from the live value. Sandbox-only
      // matcher knobs never get one (there is no option to write them to).
      const staged = this._pgStagedVal(key);
      const isChanged = staged !== undefined && staged !== null
        && !(liveVal !== '' && liveVal !== null && liveVal !== undefined && this._pgSameVal(staged, liveVal));
      const pubBtn = (this._canEdit() && isChanged && this._pgIsPublishable(key))
        ? `<button class="wd-pg-pub" data-action="pg-publish-one" data-pgkey="${_esc(key)}" aria-label="${_esc(this._tText('btn.pg_publish_one', {label: lbl}, 'Publish ' + lbl + ' to the integration'))}" title="${_esc(this._tText('btn.pg_publish_one', {label: lbl}, 'Publish ' + lbl + ' to the integration'))}">↑</button>`
        : `<span class="wd-pg-pub-slot" aria-hidden="true"></span>`;
      return `${header}<div style="display:flex;align-items:flex-start;gap:6px;margin:0 0 6px 11px">
        <div style="flex:1;min-width:0">
          <div style="font-size:.82em;font-weight:600;margin-bottom:1px">${_esc(lbl)}${isDrag ? ` <span style="color:${gc};font-size:.85em" title="${_esc(this._t('lbl.pg_drag_hint', {}, 'Drag line on graph'))}">↕</span>` : ''}</div>
          ${desc ? `<div style="font-size:.72em;color:var(--secondary-text-color);line-height:1.3">${_esc(this._t('pg_desc.' + key, {}, desc))}</div>` : ''}
        </div>
        <div style="display:flex;align-items:center;gap:4px;flex-shrink:0">
          ${isBool
            ? `<input class="wd-pg-param-chk" type="checkbox" data-pgkey="${_esc(key)}" data-pgtype="bool" aria-label="${_esc(lbl)}" ${curVal ? 'checked' : ''} style="width:18px;height:18px;margin:1px 27px 0 27px">`
            : `<input class="wd-pg-param-inp" type="text" inputmode="decimal" data-pgkey="${_esc(key)}" value="${curVal !== '' ? _esc(String(curVal)) : ''}" placeholder="${liveVal !== '' ? _esc(String(liveVal)) : ''}" aria-label="${_esc(lbl)}" style="width:72px">`}
          ${unitTxt ? `<span style="font-size:.75em;color:var(--secondary-text-color);min-width:14px">${_esc(unitTxt)}</span>` : ''}
          ${pubBtn}
        </div>
      </div>`;
    }).join('');
    return `<div class="wd-pg-params">
      <div class="wd-subhead" style="margin:0 0 6px">${this._t('hdr.pg_detection_params', {}, 'Detection settings')}</div>
      ${this._htmlPgControlPanel()}
      ${paramRows}
      <div style="display:flex;gap:6px;margin:8px 0 4px;align-items:center;flex-wrap:wrap">
        <button class="wd-btn wd-btn-sm" data-action="pg-reset-params">${this._t('btn.reset', {}, 'Reset')}</button>
        ${this._pgDetailBusy ? `<span class="wd-spin" style="align-self:center"></span>` : ''}
      </div>
    </div>`;
  }

  // Synchronized typed-event lane for the Simulate replay: detection, match
  // commits, notification decision points, and finish, on the cycle time axis.
  // Side rail: outcome summary + alerts (overrun / did-not-finish / etc.) from
  // the real simulation, using severity-mapped HA state colors.
  _htmlPgAlerts() {
    const d = this._pgDetail;
    if (!d) return '';
    const o = d.outcome || {};
    const sevColor = { error: 'var(--error-color,#f44336)', warn: 'var(--warning-color,#ff9800)', info: 'var(--info-color,#2196f3)' };
    const alerts = Array.isArray(d.alerts) ? d.alerts : [];
    const alertRows = alerts.length
      ? alerts.map(a => `<div class="wd-pg-alert" style="border-left-color:${sevColor[a.severity] || sevColor.info}">
          <span style="font-weight:600">${_esc(this._pgAlertLabel(a.code))}</span>
          <div style="font-size:.78em;color:var(--secondary-text-color)">${_esc(a.detail_key ? this._tText(a.detail_key, a.detail_params || {}, a.detail || '') : (a.detail || ''))}</div>
        </div>`).join('')
      : `<div style="font-size:.82em;color:var(--success-color,#4caf50)">✓ ${this._t('msg.pg_no_alerts', {}, 'No issues detected in this run.')}</div>`;
    const term = o.termination_reason ? String(o.termination_reason) : '—';
    const dur = o.final_duration_s ? Math.round(o.final_duration_s / 60) + ' min' : '—';
    const proj = o.projected_energy_wh != null
      ? (o.projected_energy_wh >= 1000 ? _fmtNum(o.projected_energy_wh / 1000, 2) + ' kWh' : _fmtNum(Math.round(o.projected_energy_wh), 0) + ' Wh')
      : '—';
    const hasNotify = (d.events || []).some(e => String(e.type || '').startsWith('notify_'));
    const outcomeChip = (label, val) => `<div class="wd-pg-outcome-item"><div class="wd-pg-outcome-val">${_esc(val)}</div><div class="wd-pg-outcome-lbl">${_esc(label)}</div></div>`;
    // Edits only redraw (audit PLAYGROUND-13): say this outcome predates them
    // rather than let it read as "that setting has no effect".
    const stale = this._pgDetailSig != null && this._pgDetailSig !== this._pgOverrideSig(this._pgCurrentOverride());
    const staleBanner = stale
      ? `<div class="wd-pg-stale wd-info" role="status" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px;color:var(--warning-color,#ff9800)">
          <span>⚠ ${this._t('msg.pg_outcome_stale', {}, 'Settings changed since this simulation ran. It still shows the old result.')}</span>
          <button class="wd-btn wd-btn-sm wd-btn-primary" data-action="pg-rerun" ${this._pgDetailBusy ? 'disabled' : ''}>▶ ${this._t('btn.pg_rerun', {}, 'Update simulation')}</button>
        </div>`
      : '';
    return `<div class="wd-pg-alerts-card">
      <div class="wd-subhead" style="margin:0 0 6px">${this._t('hdr.pg_outcome', {}, 'Simulation outcome')}</div>
      ${staleBanner}
      <div class="wd-pg-outcome-grid">
        ${outcomeChip(this._t('lbl.pg_ended', {}, 'Ended'), term)}
        ${outcomeChip(this._t('lbl.duration', {}, 'Duration'), dur)}
        ${outcomeChip(this._t('lbl.pg_proj_energy', {}, 'Proj. energy'), proj)}
        ${o.label_reason ? outcomeChip(this._t('lbl.pg_autolabel', {}, 'Auto-label'), this._pgLabelVerdict(o).short) : ''}
      </div>
      <div style="margin-top:8px;display:flex;flex-direction:column;gap:6px">${alertRows}</div>
      ${hasNotify ? `<p class="wd-info" style="margin:8px 0 0;font-size:.72em">🔔 ${this._t('msg.pg_notify_partial', {}, 'Markers show start, almost-done, finish, milestone and quiet-hours notifications only. Live updates, unload reminders and overrun alerts are not simulated.')}</p>` : ''}
    </div>`;
  }

  // Would the manager auto-label this replayed cycle at cycle end? The same
  // label_verdict the live cycle end runs (playground outcome, audit F7).
  _pgLabelVerdict(o) {
    if (o.would_label && o.label_profile) {
      return { ok: true, short: String(o.label_profile),
        tip: this._tText('msg.pg_label_yes', {name: o.label_profile}, `Would be labelled "${o.label_profile}" at cycle end`) };
    }
    const reasons = {
      no_winner: this._tText('pg_label_reason.no_winner', {}, 'No program fit'),
      below_floor: this._tText('pg_label_reason.below_floor', {}, 'Below the learning confidence'),
      ambiguous: this._tText('pg_label_reason.ambiguous', {}, 'Flagged ambiguous'),
      margin: this._tText('pg_label_reason.margin', {}, 'Too close to the runner-up'),
      unknown_profile: this._tText('pg_label_reason.unknown_profile', {}, 'Program no longer exists'),
    };
    const why = reasons[o.label_reason] || this._tText('pg_label_reason.not_evaluated', {}, 'Not evaluated');
    return { ok: false, short: this._tText('lbl.pg_label_review', {}, 'Asks for review'),
      tip: this._tText('msg.pg_label_no', {reason: why}, `Would ask for review: ${why}`) };
  }

  _pgAlertLabel(code) {
    const map = {
      overrun: this._t('lbl.pg_alert_overrun', {}, 'Overrun'),
      underrun: this._t('lbl.pg_alert_underrun', {}, 'Underrun'),
      did_not_finish: this._t('lbl.pg_alert_did_not_finish', {}, 'Did not finish'),
      false_end: this._t('lbl.pg_alert_false_end', {}, 'Split into multiple cycles'),
      unmatched: this._t('lbl.pg_alert_unmatched', {}, 'Unmatched'),
      ambiguous: this._t('lbl.pg_alert_ambiguous', {}, 'Ambiguous match'),
      energy_anomaly: this._t('lbl.pg_alert_energy', {}, 'Energy anomaly'),
      timeout_end: this._t('lbl.pg_alert_timeout_end', {}, 'Ended by timeout, not prediction'),
      would_run_indefinitely: this._t('lbl.pg_alert_indefinite', {}, 'Would run indefinitely'),
    };
    return map[code] || code;
  }

  // ── Test on history mode ──────────────────────────────────────────────────
  _htmlPgHistoryMode() {
    const busy = this._busy.has('pg-history');
    const h = this._pgHistory;
    const overrideActive = Object.keys(this._pgParamOverrides || {}).length > 0
      || this._pgThreshStart != null || this._pgThreshStop != null;
    const controls = `<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px">
      <span style="font-size:.85em">${this._t('lbl.last', {}, 'Last')}</span>
      <input type="number" id="wd-pg-simn" value="${this._pgSimCycles}" min="1" max="${_PG_MAX_BATCH_CYCLES}" style="width:56px">
      <span style="font-size:.85em">${this._t('lbl.cycles_lc', {}, 'cycles')}</span>
      <button class="wd-btn wd-btn-sm wd-btn-primary" data-action="pg-run-history" ${busy ? 'disabled' : ''}>▶ ${this._t('btn.run', {}, 'Run')}</button>
      ${overrideActive ? `<span style="font-size:.78em;color:var(--warning-color,#ff9800)">⚙ ${this._t('msg.pg_override_active', {}, 'Using your edited settings vs. current')}</span>` : ''}
    </div>`;
    const simbar = busy ? this._htmlPgBatchBar() : '';
    const intro = `<p class="wd-sec-intro" style="margin:0 0 8px">${this._t('msg.pg_history_intro2', {}, 'Replay recent cycles through the real detector and matcher with the settings above. Click a row to load it in the graph; change a setting to compare before and after.')}</p>`;
    if (!h || !Array.isArray(h.rows)) {
      return `${intro}${controls}${this._htmlPgRecentRuns('pg_history')}${simbar}${busy ? '' : `<div class="wd-empty" style="padding:24px">${this._t('msg.pg_history_empty', {}, 'Press Run to replay your cycles.')}</div>`}`;
    }
    // Before/after diff banner
    let diffBanner = '';
    if (h.diff) {
      const chip = (n, color, label) => `<span class="wd-pg-diffbadge" style="background:${color}22;color:${color}">${n} ${_esc(label)}</span>`;
      diffBanner = `<div style="margin:0 0 10px">
        ${chip((h.diff.newly_correct || []).length, 'var(--success-color,#4caf50)', this._t('lbl.pg_newly_correct', {}, 'newly correct'))}
        ${chip((h.diff.regressed || []).length, 'var(--error-color,#f44336)', this._t('lbl.pg_regressed', {}, 'regressed'))}
        ${chip((h.diff.end_timing_changed || []).length, 'var(--warning-color,#ff9800)', this._t('lbl.pg_end_timing_changed', {}, 'end-timing changed'))}
      </div>`;
    }
    const s = h.summary || {};
    const summaryLine = `<div style="font-size:.82em;color:var(--secondary-text-color);margin-bottom:8px">${this._t('msg.pg_history_summary', {detected: s.detected, correct: s.match_correct, total: s.cycles}, `${s.detected}/${s.cycles} detected · ${s.match_correct} matched correctly`)}</div>`;
    const cyc = id => (this._cycles || []).find(c => c.id === id);
    const baseById = {};
    (h.baseline_rows || []).forEach(r => { baseById[r.cycle_id] = r; });
    const rows = h.rows.map(r => {
      const c = cyc(r.cycle_id);
      const when = c && c.start_time ? _fmtDate(c.start_time) : (r.start_time ? _fmtDate(r.start_time) : (r.cycle_id || '').slice(0, 8));
      const ok = r.match_correct === true ? '✓' : (r.match_correct === false ? '✗' : '—');
      const okColor = r.match_correct === true ? 'var(--success-color,#4caf50)' : (r.match_correct === false ? 'var(--error-color,#f44336)' : 'var(--secondary-text-color)');
      const match = r.matched_profile || this._t('lbl.unlabelled', {}, 'Unlabelled');
      const durM = r.duration_s ? Math.round(r.duration_s / 60) + 'm' : '—';
      const over = r.overrun_ratio != null ? ` (${Math.round(r.overrun_ratio * 100)}%)` : '';
      const lv = r.label_reason ? this._pgLabelVerdict(r) : null;
      const labelGlyph = lv ? ` <span class="wd-pg-label-glyph" title="${_esc(lv.tip)}" style="color:${lv.ok ? 'var(--success-color,#4caf50)' : 'var(--warning-color,#ff9800)'}">${lv.ok ? '🏷' : '?'}</span>` : '';
      const alertGlyph = (r.alerts && r.alerts.length) ? ` <span title="${_esc(r.alerts.join(', '))}" style="color:var(--warning-color,#ff9800)">⚠</span>` : '';
      const b = baseById[r.cycle_id];
      let deltaCol = '';
      if (b) {
        if (b.match_correct !== true && r.match_correct === true) deltaCol = `<span style="color:var(--success-color,#4caf50)">▲ ${this._t('lbl.pg_fixed', {}, 'fixed')}</span>`;
        else if (b.match_correct === true && r.match_correct !== true) deltaCol = `<span style="color:var(--error-color,#f44336)">▼ ${this._t('lbl.pg_broke', {}, 'broke')}</span>`;
        else if (String(b.termination_reason) !== String(r.termination_reason)) deltaCol = `<span style="color:var(--warning-color,#ff9800)">${_esc(String(b.termination_reason || '—'))}→${_esc(String(r.termination_reason || '—'))}</span>`;
      }
      const sel = r.cycle_id === this._pgCycleId ? ' selected' : '';
      return `<tr class="wd-pg-hrow${sel}" data-action="pg-open-cycle" data-cid="${_esc(r.cycle_id)}" title="${_esc(this._t('msg.pg_row_load_hint', {}, 'Load this cycle in the graph above'))}">
        <td>${_esc(when)}</td>
        <td><span style="color:${okColor};font-weight:700">${ok}</span> ${_esc(match)}${labelGlyph}</td>
        <td>${_esc(String(r.termination_reason || '—'))}</td>
        <td style="font-variant-numeric:tabular-nums">${durM}${over}${alertGlyph}</td>
        ${h.diff ? `<td>${deltaCol}</td>` : ''}
      </tr>`;
    }).join('');
    const table = `<table class="wd-pg-htable"><thead><tr>
      <th>${this._t('lbl.cycle', {}, 'Cycle')}</th>
      <th>${this._t('lbl.match', {}, 'Match')}</th>
      <th>${this._t('lbl.pg_ended', {}, 'Ended')}</th>
      <th>${this._t('lbl.duration', {}, 'Duration')}</th>
      ${h.diff ? `<th>${this._t('lbl.pg_vs_current', {}, 'vs current')}</th>` : ''}
    </tr></thead><tbody>${rows}</tbody></table>`;
    return `${intro}${controls}${this._htmlPgRecentRuns('pg_history')}${diffBanner}${summaryLine}${this._htmlPgInSampleNote()}${table}`;
  }

  // PLAYGROUND-23: History and Optimize replay cycles against profiles that were
  // built partly from those same cycles (no leave-one-out), so their scores run
  // a little high. Measured on 59 cycles: correct matches 46 vs 44 held out.
  _htmlPgInSampleNote() {
    return `<p class="wd-pg-insample wd-info" style="font-size:.78em;margin:0 0 8px">${this._t('msg.pg_in_sample_note', {}, 'These cycles helped build the profiles they are matched against, so results are optimistic: expect slightly fewer correct matches on new cycles.')}</p>`;
  }

  // Determinate progress bar for chunked history/sweep runs, rendered once while
  // busy and then advanced by _pgUpdateBatchBar (direct DOM, no re-render) so it
  // is smooth and never "lost" mid-run. State lives in _pgBatchProgress so a full
  // re-render (e.g. a poll) still shows the right fraction.
  _htmlPgBatchBar() {
    const p = this._pgBatchProgress;
    if (!p) return '';
    const pct = p.total ? Math.round(100 * p.done / p.total) : 0;
    return `<div class="wd-pg-batchrow">
      <div class="wd-pg-simbar"><div class="wd-pg-batchbar-fill" id="wd-pg-batch-fill" style="width:${pct}%"></div></div>
      <span style="font-size:.78em;color:var(--secondary-text-color);white-space:nowrap;font-variant-numeric:tabular-nums"><span id="wd-pg-batch-count">${p.done}</span>/${p.total}</span>
      <button class="wd-btn wd-btn-sm" data-action="pg-batch-cancel">✕ ${this._t('btn.cancel', {}, 'Cancel')}</button>
    </div>`;
  }

  _pgUpdateBatchBar(done, total) {
    const sr = this.shadowRoot; if (!sr) return;
    const fill = sr.getElementById('wd-pg-batch-fill');
    const cnt = sr.getElementById('wd-pg-batch-count');
    const pct = total ? Math.round(100 * done / total) : 0;
    if (fill) fill.style.width = pct + '%';
    if (cnt) cnt.textContent = String(done);
  }

  // Kick off a detached, reconnect-safe Test-on-history task on the backend. The
  // heavy replay runs server-side in small chunks (progress via the task
  // registry); this panel just tracks the task id and loads the result when it
  // finishes - so a backgrounded tab / dropped socket no longer loses the run.
  async _pgRunHistory() {
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    if (!(this._cycles || []).length) { this._showToast(this._t('msg.no_cycles_selected', {}, 'No cycles available.'), 'error'); return; }
    // The most recent N by count, not by id: the loaded page holds only 25 cycles,
    // so "Last 40" replayed 25 (audit PLAYGROUND-18). The result reports how many ran.
    const count = Math.max(1, Math.min(_PG_MAX_BATCH_CYCLES, this._pgSimCycles || 20));
    const override = this._pgCurrentOverride();
    this._pgBatchProgress = { done: 0, total: count };
    this._busy.add('pg-history');
    this._render();
    try {
      const r = await this._ws({ type: `${_DOMAIN}/start_playground_history`, entry_id: dev.entry_id, count, settings_override: override });
      this._pgHistoryTaskId = r && r.task_id;
      this._pgNeedsRestart = false;
      if (!this._pgHistoryTaskId) throw new Error('no task id');
      this._addProvisionalTask(this._pgHistoryTaskId, 'pg_history', dev.entry_id, count);
      if (!this._tasksSubscribed) this._pgPollTask(this._pgHistoryTaskId);
    } catch (e) {
      this._busy.delete('pg-history'); this._pgBatchProgress = null;
      this._pgRunFailed(e);
      this._render();
    }
  }

  // A History / Optimize start that failed: a startup race, the per-device limit of
  // one batch run at a time (PLATFORM-04), or anything else.
  _pgRunFailed(e) {
    if (this._pgIsUnknownCmd(e)) { this._pgNeedsRestart = true; return; }
    const code = (e && (e.code || (e.error && e.error.code))) || '';
    if (code === 'task_busy') {
      this._showToast(this._t('msg.pg_task_busy', {}, 'A Test-on-history or Optimize run is already in progress for this device. Wait for it or cancel it.'), 'error');
      return;
    }
    this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error');
  }

  // ── Sweep mode (objective 1D curve + 2D heatmap) ──────────────────────────
  _pgSweepObjectives() {
    return [
      ['match_accuracy', this._t('lbl.pg_obj_match', {}, 'Match accuracy'), false],
      ['end_timing_accuracy', this._t('lbl.pg_obj_endtiming', {}, 'End-timing accuracy'), false],
      ['false_end_rate', this._t('lbl.pg_obj_falseend', {}, 'False-end rate'), true],
      ['median_overrun', this._t('lbl.pg_obj_overrun', {}, 'Duration off-target'), true],
      ['ambiguity_rate', this._t('lbl.pg_obj_ambiguity', {}, 'Ambiguity rate'), true],
      // What the end-gate settings actually move (audit PLAYGROUND-08).
      ['end_lag', this._t('lbl.pg_obj_endlag', {}, 'End delay (median)'), true],
      ['early_end_rate', this._t('lbl.pg_obj_early', {}, 'Early-end rate'), true],
      ['split_rate', this._t('lbl.pg_obj_split', {}, 'Split rate'), true],
    ];
  }

  _htmlPgSweepMode() {
    const busy = this._busy.has('pg-sweep');
    // Sweeping walks a numeric range, so on/off fields are not offered here.
    const fields = this._pgOverrideFields().filter(([, , , , , type]) => type !== 'bool');
    const paramOpts = fields.map(([k, fb]) => `<option value="${k}" ${this._pgSweepParam === k ? 'selected' : ''}>${_esc(this._t('setting.' + k + '.label', {}, fb))}</option>`).join('');
    const objOpts = this._pgSweepObjectives().map(([k, lbl]) => `<option value="${k}" ${this._pgSweepObjective === k ? 'selected' : ''}>${_esc(lbl)}</option>`).join('');
    const intro = `<p class="wd-sec-intro" style="margin:0 0 8px">${this._t('msg.pg_sweep_intro2', {}, 'Find the setting that best meets an objective across your recent cycles. Nothing changes until you apply it.')}</p>`;
    const controls = `<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px">
      <div class="wd-field" style="margin:0;min-width:150px"><label>${this._t('lbl.pg_sweep_param', {}, 'Parameter')}</label><select id="wd-pg-sw-param">${paramOpts}</select></div>
      <div class="wd-field" style="margin:0;min-width:150px"><label>${this._t('lbl.pg_objective', {}, 'Objective')}</label><select id="wd-pg-sw-obj">${objOpts}</select></div>
      <div class="wd-field" style="margin:0"><label>${this._t('lbl.from', {}, 'From')}</label><input type="number" id="wd-pg-sw-from" value="${_esc(String(this._pgSweepFrom))}" style="width:70px" step="any"></div>
      <div class="wd-field" style="margin:0"><label>${this._t('lbl.to', {}, 'To')}</label><input type="number" id="wd-pg-sw-to" value="${_esc(String(this._pgSweepTo))}" style="width:70px" step="any"></div>
      <div class="wd-field" style="margin:0"><label>${this._t('lbl.pg_steps', {}, 'Steps')}</label><input type="number" id="wd-pg-sw-steps" value="${Math.max(2, Math.min(12, this._pgSweepSteps || 5))}" min="2" max="12" style="width:52px"></div>
      <div class="wd-field" style="margin:0"><label>${this._t('lbl.pg_sweep_cycles', {}, 'Recent cycles')}</label><input type="number" id="wd-pg-sw-n" value="${this._pgSimCycles}" min="1" max="${_PG_MAX_BATCH_CYCLES}" style="width:56px"></div>
      <button class="wd-btn wd-btn-sm wd-btn-primary" data-action="pg-sweep-run2" ${busy ? 'disabled' : ''} style="margin-bottom:2px">▶ ${this._t('btn.run', {}, 'Run')}</button>
    </div>`;
    const simbar = busy ? this._htmlPgBatchBar() : '';
    return `${intro}${controls}${this._htmlPgRecentRuns('pg_sweep')}${simbar}${this._htmlPgSweepResult()}`;
  }

  _htmlPgSweepResult() {
    const r = this._pgSweepNew;
    if (!r) return '';
    if (!Array.isArray(r.points) || !r.points.length) return '';
    const obj = this._pgSweepObjectives().find(o => o[0] === r.objective);
    const lowerBetter = r.lower_is_better != null ? !!r.lower_is_better : (obj ? obj[2] : false);
    const metrics = r.points.filter(p => p.metric != null).map(p => p.metric);
    if (!metrics.length) return `<div class="wd-empty" style="padding:16px">${this._t('msg.pg_sweep_no_metric', {}, 'Not enough data to score this objective.')}</div>`;
    const mn = Math.min(...metrics), mx = Math.max(...metrics);
    // The backend picks the winner (audit PLAYGROUND-08): a value that ends more
    // cycles early, splits more or detects fewer is never it, and unless one beats
    // the current setting by a whole cycle the answer is to keep the current one.
    // A run stored before that falls back to the plain extreme.
    const hasPick = r.best_value !== undefined;
    const extreme = lowerBetter ? mn : mx;
    const bestVal = hasPick ? r.best_value : (r.points.find(p => p.metric === extreme) || {}).value;
    const bestMetric = hasPick ? r.best_metric : extreme;
    const keepCurrent = !!r.keep_current;
    const sameVal = (a, b) => a != null && b != null && Math.abs(Number(a) - Number(b)) < 1e-6;
    const fmtMetric = m => {
      if (m == null) return '-';
      if (r.objective === 'median_overrun') return Math.round(m * 100) + '% off';
      if (r.objective === 'end_lag') return `${_fmtNum(m / 60, 1)} ${this._tText('lbl.timer_min', {}, 'min')}`;
      return Math.round(m * 100) + '%';
    };
    const bars = r.points.map(p => {
      const frac = (mx > mn && p.metric != null) ? (p.metric - mn) / (mx - mn) : (p.metric != null ? 1 : 0);
      const isBest = !keepCurrent && sameVal(p.value, bestVal);
      const isCurrent = sameVal(p.value, r.current_value);
      const col = isBest ? 'var(--success-color,#4caf50)' : 'var(--primary-color)';
      const guard = p.guarded
        ? ` <span class="wd-pg-sweep-guarded" title="${_esc(this._tText('msg.pg_sweep_guarded', {}, 'Ends more cycles early, splits more of them, or misses cycles the current setting catches, so it is never recommended.'))}" style="color:var(--warning-color,#ff9800)">⚠</span>`
        : '';
      return `<div class="wd-pg-sweep-row" data-value="${_esc(String(p.value))}" style="display:flex;align-items:center;gap:8px;margin:3px 0;font-size:.82em">
        <span style="flex:0 0 74px;text-align:right;font-variant-numeric:tabular-nums">${_esc(String(p.value))}${isCurrent ? ' ◀' : ''}${guard}</span>
        <div style="flex:1;height:16px;border-radius:4px;background:var(--secondary-background-color);overflow:hidden"><div style="height:100%;width:${Math.round((p.metric != null ? (0.15 + 0.85 * frac) : 0) * 100)}%;background:${col};border-radius:4px"></div></div>
        <span style="flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums">${fmtMetric(p.metric)}</span>
      </div>`;
    }).join('');
    const canApply = !keepCurrent && bestVal != null && !sameVal(bestVal, r.current_value);
    const applyBtn = (this._canEdit() && canApply) ? `<button class="wd-btn wd-btn-sm wd-btn-primary" data-action="pg-sweep-apply2" data-val="${_esc(String(bestVal))}">${this._t('btn.pg_apply_best', {}, 'Apply best')}</button>` : '';
    const nLine = r.cycles ? ` · ${this._t('msg.pg_sweep_n_cycles', {count: r.cycles}, `over ${r.cycles} cycles`)}` : '';
    const head = keepCurrent
      ? `<span class="wd-pg-sweep-keep">${this._t('msg.pg_sweep_keep_current', {value: String(r.current_value ?? '-'), metric: fmtMetric(bestMetric)}, `Keep the current value (${r.current_value ?? '-'}, ${fmtMetric(bestMetric)}): no value did better by at least one cycle.`)}</span>`
      : `${this._t('lbl.pg_best_value', {}, 'Best value found')}: <strong style="color:var(--primary-text-color)">${_esc(String(bestVal))}</strong> · ${_esc(fmtMetric(bestMetric))}`;
    return `<div class="wd-pg-sweep-head" style="font-size:.82em;color:var(--secondary-text-color);margin:4px 0 6px">${head}${nLine} · <span>◀ ${this._t('lbl.pg_current_value', {}, 'Current value:')}</span></div>
      ${bars}
      <div style="margin-top:8px">${this._htmlPgInSampleNote()}${applyBtn}</div>`;
  }

  // Kick off a detached, reconnect-safe Optimize sweep on the backend (1D curve),
  // chunked server-side per value. Progress + result come via the
  // task registry, so it survives a backgrounded tab.
  async _pgRunSweep2() {
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    const fromN = parseFloat(this._pgSweepFrom), toN = parseFloat(this._pgSweepTo);
    if (isNaN(fromN) || isNaN(toN) || fromN === toN) { this._showToast(this._t('msg.toast_range_required', {}, 'Set a valid From/To range.'), 'error'); return; }
    const steps = Math.max(2, Math.min(12, this._pgSweepSteps || 5));
    const values = Array.from({length: steps}, (_, i) => +(fromN + (toN - fromN) * i / (steps - 1)).toFixed(3));
    const param = this._pgSweepParam || 'off_delay';
    const objective = this._pgSweepObjective || 'match_accuracy';
    // The same "Last N" as Test on history (audit PLAYGROUND-18); the backend adds
    // one pass with the current settings, which every value has to beat.
    const count = Math.max(1, Math.min(_PG_MAX_BATCH_CYCLES, this._pgSimCycles || 20));
    const msg = { type: `${_DOMAIN}/start_playground_sweep`, entry_id: dev.entry_id, param, values, objective, count };
    this._pgBatchProgress = { done: 0, total: values.length + 1 };
    this._busy.add('pg-sweep');
    this._render();
    try {
      const r = await this._ws(msg);
      this._pgSweepTaskId = r && r.task_id;
      this._pgNeedsRestart = false;
      if (!this._pgSweepTaskId) throw new Error('no task id');
      this._addProvisionalTask(this._pgSweepTaskId, 'pg_sweep', dev.entry_id, values.length + 1);
      if (!this._tasksSubscribed) this._pgPollTask(this._pgSweepTaskId);
    } catch (e) {
      this._busy.delete('pg-sweep'); this._pgBatchProgress = null;
      this._pgRunFailed(e);
      this._render();
    }
  }

  // Transfer everything the user edited in the Playground into the device's live
  // settings in one click, so they don't retype it in the Settings tab.
  //
  // Only PUBLISHABLE keys go out: the Stage 2-4 matcher knobs in the params list
  // are sandbox-only scoring constants with no config option behind them, so
  // writing them would leave dead keys in entry.options that nothing ever reads.
  // Values already equal to the live setting are skipped as well.
  async _pgApplyToSettings() {
    const dev = this._devices[this._selIdx];
    if (!dev || !this._canEdit()) return;
    const opts = {};
    for (const key of this._pgChangedKeys()) {
      if (!this._pgIsPublishable(key)) continue;
      opts[key] = this._pgStagedVal(key);
    }
    const keys = Object.keys(opts);
    if (!keys.length) return;
    const labels = keys.map(k => this._t('setting.' + k + '.label', {}, k)).join(', ');
    if (!confirm(this._tText('msg.pg_apply_settings_confirm', {n: keys.length, list: labels}, `Save these ${keys.length} setting(s) to this device? ${labels}`))) return;
    await this._busyRun('pg-apply-settings', async () => {
      try {
        await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: dev.entry_id, options: opts });
        if (!this._isActiveEntry(dev.entry_id)) return;
        this._opts = { ...this._opts, ...opts };
        // The published values ARE the live baseline now; clear only those staged
        // edits. Sandbox-only matcher edits are deliberately left in place - they
        // were not published, so dropping them would lose the user's tuning.
        if (this._pgEffective) this._pgEffective = { ...this._pgEffective, ...opts };
        for (const key of keys) this._pgClearStaged(key);
        this._showToast(this._t('toast.settings_saved', {}, 'Settings saved; integration reloading'));
      } catch (e) {
        this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error');
      }
    });
    this._render();
  }

  async _pgApplySweepValue(val) {
    const dev = this._devices[this._selIdx];
    if (!dev || !this._canEdit() || val == null) return;
    const paramKey = this._pgSweepParam;
    const lbl = this._t('setting.' + paramKey + '.label', {}, paramKey);
    if (!confirm(this._tText('msg.pg_apply_confirm', {label: lbl, value: val}, 'Apply best value: ' + lbl + ' = ' + val + '?'))) return;
    await this._busyRun('pg-sweep-apply', async () => {
      try {
        await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: dev.entry_id, options: { [paramKey]: +val } });
        this._opts = { ...this._opts, [paramKey]: +val };
        // Reflect the applied value in the graph above immediately (the live
        // reload is async), so Optimize -> Apply drives the same single graph.
        if (paramKey === 'start_threshold_w') this._pgThreshStart = +val;
        else if (paramKey === 'stop_threshold_w') this._pgThreshStop = +val;
        else this._pgParamOverrides[paramKey] = +val;
        this._showToast(this._t('toast.settings_saved', {}, 'Settings saved; integration reloading'));
        this._render();
      } catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
    });
  }

  _htmlPgStrip() {
    return `<div class="wd-pg-strip" id="wd-pg-strip">
      <span class="wd-pg-strip-state" id="wd-pg-state-badge" style="background:var(--secondary-background-color);text-transform:uppercase">${this._t('lbl.pg_idle', {}, 'Idle')}</span>
      <span style="font-size:.75em"><span style="color:var(--secondary-text-color);text-transform:uppercase">${this._t('lbl.power', {}, 'Power')} </span><span id="wd-pg-power">—</span></span>
      <span class="wd-pg-strip-pbar">
        <span class="wd-pg-strip-track"><span class="wd-pg-strip-fill" id="wd-pg-pbar" style="width:0%"></span></span>
        <span id="wd-pg-pct">—%</span>
      </span>
      <span style="font-size:.75em;color:var(--secondary-text-color);text-transform:uppercase" title="${_esc(this._t('lbl.pg_time_left_model_tip', {}, 'Estimated from the program\'s phases, not a fixed countdown'))}">${this._t('lbl.pg_time_left_model', {}, 'Time left (model)')} <span id="wd-pg-rem" style="color:var(--primary-text-color,inherit)">—</span></span>
      <span style="font-size:.75em;color:var(--secondary-text-color);text-transform:uppercase">${this._t('lbl.energy', {}, 'Energy')} <span id="wd-pg-energy" style="color:var(--primary-text-color,inherit)">—</span></span>
      <span style="font-size:.75em;color:var(--secondary-text-color);text-transform:uppercase">${this._t('lbl.match', {}, 'Match')} <span id="wd-pg-conf" style="color:var(--primary-text-color,inherit)">—</span></span>
      <span style="font-size:.75em;color:var(--secondary-text-color);text-transform:uppercase">${this._t('lbl.phase', {}, 'Phase')} <span id="wd-pg-phase" style="color:var(--primary-text-color,inherit)">—</span></span>
    </div>`;
  }


  _htmlPgAnalysis() {
    // One number: the committed match confidence from the real replay (identical
    // to the strip's "Match"). The separate DTW/envelope scorer that used to sit
    // here disagreed with it and was removed in 0.5.8.
    const oc = this._pgDetail && this._pgDetail.outcome;
    const matchedName = (oc && oc.matched_profile) || this._pgProfileName || (this._cycles || []).find(c => c.id === this._pgCycleId)?.profile_name || '';
    const conf = oc && oc.confidence;
    if (!oc) return `<div><p class="wd-info" style="margin:0">${this._t('msg.pg_analysis_hint2', {}, 'Pick a cycle and press Run to load match analysis.')}</p></div>`;
    let verdict = '—', vColor = 'var(--secondary-text-color)';
    if (conf != null) {
      if (conf >= 0.7) { verdict = '✅ ' + this._t('lbl.pg_strong_match', {}, 'Strong match'); vColor = 'var(--success-color, #4caf50)'; }
      else if (conf >= 0.4) { verdict = '⚠ ' + this._t('lbl.pg_weak_match', {}, 'Weak match'); vColor = 'var(--warning-color, #ff9800)'; }
      else { verdict = '❌ ' + this._t('lbl.pg_poor_match', {}, 'Poor match'); vColor = 'var(--error-color, #f44336)'; }
    }
    let html = `<div style="font-weight:700;font-size:.9em;color:${vColor};margin-bottom:8px">${verdict}</div>`;
    if (matchedName && conf != null) {
      const pctC = Math.round(Math.max(0, Math.min(1, conf)) * 100);
      html += `<div class="wd-subhead" style="margin:0 0 4px">${_esc(this._t('lbl.pg_match_confidence', {}, 'Match confidence'))}</div>`;
      html += `<div class="wd-pg-cand-row">
        <span class="wd-pg-cand-name" title="${_esc(matchedName)}">${_esc(matchedName)}</span>
        <div class="wd-pg-cand-track"><div class="wd-pg-cand-fill" style="width:${pctC}%;background:var(--primary-color)"></div></div>
        <span class="wd-pg-cand-pct">${pctC}%</span>
      </div>`;
    }
    return `<div>${html}</div>`;
  }

  async _pgFetchEnvelope(entryId, profileName) {
    try {
      const envR = await this._ws({ type: `${_DOMAIN}/get_profile_envelope`, entry_id: entryId, profile_name: profileName });
      this._pgEnvData = envR.envelope || null;
    } catch (_) { this._pgEnvData = null; }
  }

  async _pgLoad() {
    const dev = this._devices[this._selIdx];
    if (!dev || this._pgLoading) return;
    const cid = this._pgCycleId || (this._cycles?.[0]?.id || '');
    if (!cid) return;
    this._pgCycleId = cid;
    this._pgLoading = true;
    this._pgDetailBusy = false;
    this._pgView = null; this._pgHoverT = null;
    this._pgPowerPts = null; this._pgEnvData = null; this._pgDetail = null;
    const seq = ++this._pgLoadSeq;
    this._render();
    try {
      const pwResp = await this._ws({ type: `${_DOMAIN}/get_cycle_power_data`, entry_id: dev.entry_id, cycle_id: cid });
      const samples = pwResp.samples || [];
      const pts = [];
      for (const p of samples) {
        if (!Array.isArray(p) || p.length < 2) continue;
        const t = +p[0], w = +p[1];
        if (!isNaN(t) && !isNaN(w)) pts.push({t, w});
      }
      this._pgPowerPts = pts.length ? pts : null;
      if (typeof pwResp.full_duration_s === 'number' && pwResp.full_duration_s > 0) {
        const cy = (this._cycles || []).find(c => c.id === cid);
        if (cy) cy._pg_duration = pwResp.full_duration_s;
      }
      const profName = this._pgProfileName || (this._cycles || []).find(c => c.id === cid)?.profile_name || '';
      if (profName) await this._pgFetchEnvelope(dev.entry_id, profName);
      if (seq !== this._pgLoadSeq) return;  // cancelled or device switched mid-flight
      // Faithful backend simulation (the real detector + matcher + progress +
      // notification predicates) for this cycle under the current overrides.
      await this._pgLoadDetail(dev.entry_id, cid, seq);
      // An unlabelled cycle has no profile to overlay until the replay matched one.
      const simProf = this._pgDetail && this._pgDetail.outcome && this._pgDetail.outcome.matched_profile;
      if (!profName && simProf && seq === this._pgLoadSeq) await this._pgFetchEnvelope(dev.entry_id, simProf);
    } catch (e) {
      this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error');
    }
    if (seq !== this._pgLoadSeq) return;  // a Cancel (or device switch) supersedes this run
    this._pgLoading = false;
    this._render();
    requestAnimationFrame(() => { this._pgDrawCanvas(); this._pgUpdateStripAt(null); });
    // If a playground command came back unknown (typically a startup race right
    // after a restart: the browser reconnected before the integration finished
    // registering its WS commands), auto-retry a few times so the "restart" note
    // self-clears once the backend is ready - no user action needed. Each load
    // schedules at most one retry; success takes the else-branch and stops.
    if (this._pgNeedsRestart && this._tab === 'playground') {
      if ((this._pgRestartRetries || 0) < 5 && !this._pgRestartRetryTimer) {
        this._pgRestartRetries = (this._pgRestartRetries || 0) + 1;
        this._pgRestartRetryTimer = setTimeout(() => {
          this._pgRestartRetryTimer = null;
          // Re-check: don't fire a sim if the note already cleared or the user
          // left the Playground tab in the meantime.
          if (this._pgNeedsRestart && this._tab === 'playground') this._pgLoad();
        }, 3000);
      }
    } else {
      this._pgRestartRetries = 0;
    }
  }

  // Cancel an in-flight Simulate run: bump the load token so the pending result
  // is dropped when it returns, and restore the idle UI immediately.
  _pgCancelRun() {
    this._pgLoadSeq++;
    this._pgLoading = false;
    this._pgDetailBusy = false;
    this._pgCancelDetailTask();
    this._render();
  }

  // Stop the backend replay a dropped result belongs to (audit PLAYGROUND-12): bumping
  // _pgLoadSeq only discards the answer, and the abandoned Simulate kept replaying to
  // the end (2-3 s of CPU per long cycle, x5 on a Pi) with its result retained.
  _pgCancelDetailTask() {
    const tid = this._pgDetailTaskId;
    this._pgDetailTaskId = null;
    if (tid) this._ws({ type: `${_DOMAIN}/cancel_task`, task_id: tid }).catch(() => {});
  }

  // The sandbox overrides a Simulate runs with, and a stable signature of them so
  // the outcome can say when the settings have moved on since (PLAYGROUND-13).
  _pgCurrentOverride() {
    const override = { ...this._pgParamOverrides };
    if (this._pgThreshStart != null) override.start_threshold_w = this._pgThreshStart;
    if (this._pgThreshStop != null) override.stop_threshold_w = this._pgThreshStop;
    return override;
  }

  _pgOverrideSig(override) {
    return JSON.stringify(Object.keys(override).sort().map(k => [k, override[k]]));
  }

  // The single "load this cycle into the graph" path — used by the cycle dropdown
  // AND by drilling into a Test-on-history row. Resets the profile to the target
  // cycle's own label (so we never resimulate the previous cycle's profile),
  // clears the zoom/hover, supersedes any in-flight load, and scrolls the graph
  // into view so the drill-down is obviously reflected above the table.
  _pgSelectCycle(cid) {
    if (!cid) return;
    this._pgCycleId = cid;
    this._pgProfileName = '';   // always auto-detect; sim shows what the matcher picks
    this._pgView = null; this._pgHoverT = null;
    this._pgLoading = false;      // let this fresh load supersede any in-flight one
    this._pgLoad();               // bumps _pgLoadSeq; a stale in-flight result is dropped
    requestAnimationFrame(() => {
      const c = this.shadowRoot && this.shadowRoot.getElementById('wd-pg-canvas');
      if (c && typeof c.scrollIntoView === 'function') {
        c.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    });
  }

  // Run the faithful backend simulation (real detector + matcher + progress +
  // notification predicates) for one cycle under the current threshold/param
  // overrides. Result drives the Simulate state band, readout, event lane and
  // alerts rail — there is no client-side detection copy.
  async _pgLoadDetail(entryId, cid, seq) {
    // Always attempt (do NOT bail on _pgNeedsRestart): a success here clears the
    // flag, so a note set by a startup race self-heals once the backend is ready.
    const override = this._pgCurrentOverride();
    const sig = this._pgOverrideSig(override);
    // A new Simulate supersedes the one still running.
    this._pgCancelDetailTask();
    // Run the heavy per-5s replay as a detached, chunked background task so a long
    // cycle no longer stalls Home Assistant (issue #311). We still await its
    // completion here (the caller drives the busy spinner + redraw), but the
    // backend yields the event loop between chunks. A header pill shows progress.
    try {
      const r = await this._ws({ type: `${_DOMAIN}/start_playground_cycle_detail`, entry_id: entryId, cycle_id: cid, settings_override: override });
      const tid = r && r.task_id;
      if (!tid) throw new Error('no task id');
      this._pgDetailTaskId = tid;
      this._addProvisionalTask(tid, 'pg_detail', entryId, 0);
      const result = await new Promise((resolve) => {
        this._taskCallbacks[tid] = async (t) => {
          if (t.state === 'done' || t.state === 'cancelled') {
            try {
              const rr = await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: t.id });
              resolve(rr && rr.result);
            } catch (_) { resolve(null); }
          } else {
            resolve(null);  // error / lost
          }
        };
        // Race guard: task may have finished before the callback was registered.
        const known = this._tasks[tid];
        if (known && known.state !== 'running') this._settleTaskCallback(known);
        else if (!this._tasksSubscribed) this._pollTaskGeneric(tid);
      });
      if (this._pgDetailTaskId === tid) this._pgDetailTaskId = null;
      if (!this._isActiveEntry(entryId)) return;  // device switched mid-flight - drop stale result
      if (seq != null && seq !== this._pgLoadSeq) return;  // cancelled or superseded
      this._pgDetail = (result && !result.error) ? result : null;
      this._pgDetailSig = this._pgDetail ? sig : null;
      this._pgNeedsRestart = false;
    } catch (e) {
      if (seq != null && seq !== this._pgLoadSeq) return;
      if (this._pgIsUnknownCmd(e)) this._pgNeedsRestart = true;
      this._pgDetail = null;
      this._pgDetailSig = null;
    }
  }

  // Re-run just the detail sim with the current settings (the "settings changed"
  // banner's button), debounced, then redraw. Keeps the cycle, the zoom and the
  // power trace; no full reload. Supersedes (and cancels) any run in flight.
  _pgRerunDetail() {
    const dev = this._devices[this._selIdx];
    if (!dev || !this._pgCycleId || this._pgLoading) return;
    clearTimeout(this._pgDetailDebounceTimer);
    this._pgDetailDebounceTimer = setTimeout(async () => {
      const seq = ++this._pgLoadSeq;
      this._pgDetailBusy = true; this._render();
      await this._pgLoadDetail(dev.entry_id, this._pgCycleId, seq);
      if (seq !== this._pgLoadSeq) return;
      this._pgDetailBusy = false; this._render();
      requestAnimationFrame(() => this._pgDrawCanvas());
    }, 220);
  }

  // Backend detector state -> one of the four state-band categories.
  _pgMapState(st, stalled) {
    if (stalled) return 'stalled';  // #452: shown as Paused / Stalled live
    if (st === 'running' || st === 'paused') return 'running';
    if (st === 'ending') return 'ending';
    if (st === 'starting') return 'detecting';
    if (st === 'anti_wrinkle') return 'anti_wrinkle';
    return 'idle';
  }

  // The series telemetry point in effect at a given cycle offset (seconds).
  _pgSeriesAt(offset) {
    const s = this._pgDetail && this._pgDetail.series;
    if (!s || !s.length) return null;
    let lo = s[0];
    for (const p of s) { if (p.t <= offset) lo = p; else break; }
    return lo;
  }

  // Contiguous [{start,end,state}] state-band segments from the real sim series.
  _pgStateSegsFromSeries(totalDur) {
    const s = this._pgDetail && this._pgDetail.series;
    if (!s || !s.length) return [];
    const segs = [];
    let cur = null;
    for (const p of s) {
      const st = this._pgMapState(p.state, p.stalled);
      if (!cur || cur.state !== st) { cur = { start: p.t, end: p.t, state: st }; segs.push(cur); }
      else cur.end = p.t;
    }
    if (segs.length) segs[segs.length - 1].end = totalDur;
    return segs;
  }

  _pgDrawCanvas() {
    if (this._tab !== 'playground') return;
    const sr = this.shadowRoot;
    const canvas = sr && sr.getElementById('wd-pg-canvas');
    if (!canvas) return;
    const pts = this._pgPowerPts;
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    const cw = Math.max(1, Math.round(rect.width * dpr));
    const ch = Math.max(1, Math.round((rect.height || 280) * dpr));
    if (canvas.width !== cw || canvas.height !== ch) { canvas.width = cw; canvas.height = ch; }
    const ctx = canvas.getContext('2d');
    const cs = getComputedStyle(this);
    const primary = (cs.getPropertyValue('--primary-color') || '#03a9f4').trim();
    const gridCol = (cs.getPropertyValue('--divider-color') || 'rgba(127,127,127,.2)').trim();
    const txtCol = (cs.getPropertyValue('--secondary-text-color') || '#888').trim();
    const bgCol = (cs.getPropertyValue('--secondary-background-color') || '#1a1a1a').trim();
    ctx.clearRect(0, 0, cw, ch);

    const stateBandH = 34 * dpr;
    const phaseBandH = 14 * dpr;
    const pinBandH = _PG_PIN_BAND_H * dpr;   // event pin heads live here, above the plot
    const padL = 44 * dpr, padR = 8 * dpr, padT = pinBandH + 8 * dpr, padB = stateBandH + phaseBandH + 4 * dpr;
    const powerH = ch - padT - padB;

    if (!pts || !pts.length) {
      // Only draw a "Loading…" hint here; the idle empty-state hint is the HTML
      // overlay (canvasEmptyOverlay), so we must not draw a second, stale one.
      if (this._pgLoading) {
        ctx.fillStyle = txtCol;
        ctx.font = `${12*dpr}px sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(this._t('msg.loading', {}, 'Loading…'), cw/2, ch/2);
      }
      return;
    }

    const totalDur = (this._cycles || []).find(c => c.id === this._pgCycleId)?._pg_duration || pts[pts.length-1].t || 1;
    const maxW = Math.max(...pts.map(p => p.w), 1);
    const threshStart = this._pgThreshStart ?? this._pgFieldVal('start_threshold_w', {}) ?? 50;
    const threshStop = this._pgThreshStop ?? this._pgFieldVal('stop_threshold_w', {}) ?? 5;

    // Zoom/pan viewport on the TIME axis. this._pgView = {min, max} in seconds;
    // null = full [0, totalDur]. Clamped so it always stays within the cycle.
    let vMin = 0, vMax = totalDur;
    if (this._pgView && this._pgView.max - this._pgView.min > 1) {
      vMin = Math.max(0, this._pgView.min);
      vMax = Math.min(totalDur, this._pgView.max);
      if (vMax - vMin <= 1) { vMin = 0; vMax = totalDur; }
    }
    const span = Math.max(1e-6, vMax - vMin);
    const plotW = cw - padL - padR;
    const toX = t => padL + ((t - vMin) / span) * plotW;
    const toY = w => padT + (1 - Math.max(0, w) / maxW) * powerH;
    // Mapping in CSS pixels for the pointer handlers (zoom/pan/hover hit-testing).
    this._pgMap = { vMin, vMax, totalDur, padLpx: padL / dpr, plotWpx: plotW / dpr };

    // Grid lines (solid, not dashed)
    ctx.strokeStyle = 'rgba(127,127,127,0.12)'; ctx.lineWidth = dpr; ctx.setLineDash([]);
    // #453: the old step was `round(f * maxW / 100) * 100`, which collapsed to a
    // stack of 0 W lines below ~50 W peak and produced duplicate lines in between.
    const gridStep = _niceStep(maxW, 5);
    const gridWatts = [];
    for (let i = 1; i * gridStep <= maxW * 1.0001; i++) gridWatts.push(i * gridStep);
    gridWatts.forEach(w => {
      const y = toY(w);
      if (y < padT || y > padT + powerH) return;
      ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(cw - padR, y); ctx.stroke();
      ctx.fillStyle = txtCol; ctx.font = `${9*dpr}px sans-serif`; ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
      ctx.fillText(_fmtAxisW(w, gridStep), padL - 4*dpr, y);
    });

    // Clip the plotting region so zoomed/panned curves never overflow the axes.
    ctx.save();
    ctx.beginPath(); ctx.rect(padL, padT, plotW, powerH); ctx.clip();

    // Profile envelope band. get_profile_envelope returns avg/min/max as
    // [offset_s, watts] pairs on the profile's own time base; normalize x onto the
    // cycle axis (like the DTW profile trace below). Draw the min..max spread as a
    // shaded band; the mean line is drawn by the DTW profile trace when analysis is
    // loaded, so drawing it here only when there is no spread avoids a duplicate line.
    const env = this._pgEnvData;
    const envAvg = env && Array.isArray(env.avg) ? env.avg.filter(p => Array.isArray(p) && p.length >= 2) : [];
    if (envAvg.length) {
      const envMaxX = Math.max(...envAvg.map(p => p[0])) || 1;
      const envX = t => toX(t / envMaxX * totalDur);
      const envMin = Array.isArray(env.min) ? env.min.filter(p => Array.isArray(p) && p.length >= 2) : [];
      const envMax = Array.isArray(env.max) ? env.max.filter(p => Array.isArray(p) && p.length >= 2) : [];
      if (envMin.length && envMax.length) {
        ctx.beginPath();
        envMax.forEach((p, i) => i ? ctx.lineTo(envX(p[0]), toY(p[1])) : ctx.moveTo(envX(p[0]), toY(p[1])));
        for (let i = envMin.length - 1; i >= 0; i--) ctx.lineTo(envX(envMin[i][0]), toY(envMin[i][1]));
        ctx.closePath();
        ctx.fillStyle = '#eda10012'; ctx.fill();
      } else {
        ctx.beginPath(); ctx.strokeStyle = '#eda100'; ctx.lineWidth = 2*dpr; ctx.setLineDash([5*dpr, 4*dpr]);
        envAvg.forEach((p, i) => i ? ctx.lineTo(envX(p[0]), toY(p[1])) : ctx.moveTo(envX(p[0]), toY(p[1])));
        ctx.stroke(); ctx.setLineDash([]);
      }
    }

    // Cycle power trace fill
    ctx.beginPath();
    ctx.moveTo(toX(0), toY(0));
    pts.forEach(p => ctx.lineTo(toX(p.t), toY(p.w)));
    ctx.lineTo(toX(pts[pts.length-1].t), toY(0));
    ctx.closePath();
    ctx.fillStyle = _withAlpha(primary, 0.10); ctx.fill();

    // Cycle power trace line
    ctx.beginPath(); ctx.strokeStyle = primary; ctx.lineWidth = 2*dpr;
    pts.forEach((p, i) => i ? ctx.lineTo(toX(p.t), toY(p.w)) : ctx.moveTo(toX(p.t), toY(p.w)));
    ctx.stroke();

    ctx.restore();  // end plot clip

    // Threshold lines
    const drawThrLine = (watts, color, label) => {
      const y = toY(watts);
      if (y < padT - 2 || y > padT + powerH + 2) return;
      ctx.save();
      ctx.strokeStyle = color; ctx.lineWidth = 2*dpr; ctx.setLineDash([8*dpr, 4*dpr]);
      ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(cw - padR, y); ctx.stroke();
      ctx.setLineDash([]);
      ctx.fillStyle = color; ctx.beginPath(); ctx.arc(padL + (cw - padL - padR) * 0.06, y, 5*dpr, 0, Math.PI*2); ctx.fill();
      ctx.fillStyle = color; ctx.font = `bold ${9*dpr}px sans-serif`; ctx.textAlign = 'left'; ctx.textBaseline = 'bottom';
      // #453: a 0.8 W stop threshold rounded to "1W", labelling the dashed line
      // with a value the detector never uses.
      ctx.fillText(label + ' ' + _fmtAxisW(watts), padL + 14*dpr, y - 2*dpr);
      ctx.restore();
    };
    drawThrLine(+threshStart, '#2a78d6', this._t('lbl.start', {}, 'Start'));
    drawThrLine(+threshStop, '#e34948', this._t('btn.stop', {}, 'Stop'));

    // State band
    const stateColors = { idle: bgCol, detecting: '#42a5f566', running: '#66bb6a66', ending: '#ef535066', anti_wrinkle: '#ab47bc66', stalled: '#eda10066' };
    const stateLabels = { idle: this._t('lbl.pg_idle', {}, 'Idle'), detecting: this._t('lbl.pg_detecting', {}, 'Detecting'), running: this._t('lbl.pg_ev_running', {}, 'Running'), ending: this._t('lbl.pg_ev_ending', {}, 'Ending'), anti_wrinkle: this._t('lbl.pg_anti_wrinkle', {}, 'Anti-wrinkle'), stalled: this._t('status.stalled', {}, 'Stalled') };
    const stateY = ch - stateBandH - phaseBandH;
    ctx.fillStyle = bgCol; ctx.fillRect(padL, stateY, cw - padL - padR, stateBandH);
    // Real detector state band from the backend simulation (no client-side copy).
    ctx.save(); ctx.beginPath(); ctx.rect(padL, stateY, plotW, stateBandH); ctx.clip();
    const statePts = this._pgStateSegsFromSeries(totalDur);
    statePts.forEach(seg => {
      const x1 = toX(seg.start), x2 = toX(seg.end);
      ctx.fillStyle = stateColors[seg.state] || gridCol;
      ctx.fillRect(x1, stateY, Math.max(1, x2 - x1), stateBandH);
      if ((x2 - x1) > 50*dpr) {
        ctx.fillStyle = txtCol; ctx.font = `${8*dpr}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
        ctx.fillText((stateLabels[seg.state] || seg.state).toUpperCase(), (x1 + x2) / 2, stateY + stateBandH/2);
      }
    });
    ctx.restore();

    // Phase bar: runs of the replay's own live phase readout (series[].phase), the
    // same thing the running integration shows. It used to read `phases` off the
    // profile rows, which get_profiles never sends, and treated their seconds as
    // fractions, so the bar could not draw.
    const phaseY = ch - phaseBandH;
    const phaseSegs = [];
    for (const p of (this._pgDetail && this._pgDetail.series) || []) {
      const last = phaseSegs[phaseSegs.length - 1];
      if (last && last.name === (p.phase || null)) { last.end = p.t; continue; }
      if (last) last.end = p.t;
      phaseSegs.push({ name: p.phase || null, start: p.t, end: p.t });
    }
    if (phaseSegs.some(sg => sg.name)) {
      ctx.save(); ctx.beginPath(); ctx.rect(padL, phaseY, plotW, phaseBandH); ctx.clip();
      phaseSegs.filter(sg => sg.name).forEach((ph, i) => {
        const x1 = toX(ph.start), x2 = toX(ph.end);
        const hue = (i * 47) % 360;
        ctx.fillStyle = `hsla(${hue},60%,55%,0.55)`;
        ctx.fillRect(x1, phaseY, Math.max(1, x2 - x1), phaseBandH);
        if ((x2 - x1) > 40*dpr) {
          ctx.fillStyle = '#fff'; ctx.font = `${7*dpr}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
          ctx.fillText(ph.name, (x1 + x2)/2, phaseY + phaseBandH/2);
        }
      });
      ctx.restore();
    }

    // Event pins. The heads sit in the band ABOVE the plot (out of the busy
    // curve), each on a stem down to its real time on the curve; hover a head for
    // a tooltip explaining what that event did. Heads are nudged apart when they
    // cluster, but the stem always points to the true time. Positions (CSS px)
    // are cached for hit-testing in the pointer handler.
    this._pgEventHits = [];
    const evs = (this._pgDetail && Array.isArray(this._pgDetail.events))
      ? this._pgDetail.events.filter(e => e.type !== 'state' && e.t >= vMin && e.t <= vMax)
          .slice().sort((a, b) => a.t - b.t)
      : [];
    const headR = 11 * dpr;
    const headY = padT - pinBandH / 2 - 2 * dpr;   // vertical centre of the head band
    const minGap = headR * 2 + 3 * dpr;
    let lastHeadX = -Infinity;
    const hov = this._pgHoverEvent;
    evs.forEach(e => {
      const m = this._pgEventMeta(e.type);
      const trueX = toX(e.t);
      let headX = Math.max(trueX, lastHeadX + minGap);
      headX = Math.max(padL + headR, Math.min(cw - padR - headR, headX));
      lastHeadX = headX;
      const isHov = hov && hov.t === e.t && hov.type === e.type;

      // Stem: head -> true time at plot top (diagonal when the head was nudged).
      ctx.save();
      ctx.strokeStyle = m.color; ctx.globalAlpha = isHov ? 0.9 : 0.5; ctx.lineWidth = (isHov ? 2 : 1) * dpr;
      ctx.beginPath(); ctx.moveTo(headX, headY + headR); ctx.lineTo(trueX, padT); ctx.stroke();
      // For the hovered event, extend a faint full-height guide + a curve dot.
      if (isHov) {
        ctx.globalAlpha = 0.3; ctx.setLineDash([2 * dpr, 3 * dpr]);
        ctx.beginPath(); ctx.moveTo(trueX, padT); ctx.lineTo(trueX, ch - phaseBandH); ctx.stroke();
        ctx.setLineDash([]);
      }
      ctx.restore();

      // Head: filled circle + a ring, larger glyph centred inside.
      ctx.save();
      ctx.beginPath(); ctx.arc(headX, headY, headR, 0, Math.PI * 2);
      ctx.fillStyle = isHov ? m.color : (bgCol || '#1a1a1a'); ctx.fill();
      ctx.lineWidth = (isHov ? 2 : 1.5) * dpr; ctx.strokeStyle = m.color; ctx.stroke();
      ctx.fillStyle = isHov ? '#fff' : m.color;
      ctx.font = `${14 * dpr}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      ctx.fillText(m.glyph, headX, headY + dpr);
      ctx.restore();

      this._pgEventHits.push({ cx: headX / dpr, cy: headY / dpr, r: headR / dpr, type: e.type, label: m.label, detail: e.detail, t: e.t });
    });

    // Event tooltip for the hovered pin: label + what the event did + detail + time.
    if (hov) {
      const hit = this._pgEventHits.find(h => h.t === hov.t && h.type === hov.type);
      if (hit) {
        const m = this._pgEventMeta(hit.type);
        const fmtT = t => { const mm = Math.floor(t / 60); return `${mm}:${String(Math.round(t % 60)).padStart(2, '0')}`; };
        const desc = this._pgEventDescription(hit.type);
        const lines = [
          { t: hit.label, bold: true, col: m.color },
          ...(desc ? [{ t: desc }] : []),
          ...(hit.detail ? [{ t: hit.detail, dim: true }] : []),
          { t: `${this._t('lbl.from_start', {}, 'From start')} ${fmtT(hit.t)}`, dim: true },
        ];
        ctx.save();
        ctx.font = `${10 * dpr}px sans-serif`;
        const wrapW = Math.min(220 * dpr, cw - 2 * padL);
        // Word-wrap each line to wrapW.
        const wrapped = [];
        lines.forEach(ln => {
          const words = String(ln.t).split(' ');
          let cur = '';
          words.forEach(w => {
            const test = cur ? cur + ' ' + w : w;
            if (ctx.measureText(test).width > wrapW && cur) { wrapped.push({ ...ln, t: cur }); cur = w; }
            else cur = test;
          });
          wrapped.push({ ...ln, t: cur });
        });
        const lh = 14 * dpr;
        const bw = Math.min(wrapW + 14 * dpr, cw - 8 * dpr);
        const bh = wrapped.length * lh + 10 * dpr;
        const cxpx = hit.cx * dpr;
        let bx = cxpx - bw / 2; bx = Math.max(4 * dpr, Math.min(cw - bw - 4 * dpr, bx));
        const by = headY + headR + 6 * dpr;
        ctx.fillStyle = bgCol; ctx.globalAlpha = 0.97; ctx.fillRect(bx, by, bw, bh); ctx.globalAlpha = 1;
        ctx.strokeStyle = m.color; ctx.lineWidth = dpr; ctx.strokeRect(bx, by, bw, bh);
        ctx.textAlign = 'left'; ctx.textBaseline = 'top';
        wrapped.forEach((ln, i) => {
          ctx.font = `${ln.bold ? '600 ' : ''}${10 * dpr}px sans-serif`;
          ctx.fillStyle = ln.col || (ln.dim ? txtCol : (cs.getPropertyValue('--primary-text-color') || '#ddd').trim());
          ctx.fillText(ln.t, bx + 7 * dpr, by + 5 * dpr + i * lh);
        });
        ctx.restore();
      }
    }

    // Hover cursor + inline power dot + a compact readout box (time / to-end /
    // power) at the hovered time - the "measuring" cursor.
    if (this._pgHoverT != null && this._pgHoverT >= vMin && this._pgHoverT <= vMax) {
      const hx = toX(this._pgHoverT);
      ctx.save(); ctx.strokeStyle = '#e34948'; ctx.lineWidth = 1.5*dpr; ctx.setLineDash([4*dpr, 3*dpr]);
      ctx.beginPath(); ctx.moveTo(hx, padT); ctx.lineTo(hx, ch - phaseBandH); ctx.stroke();
      ctx.setLineDash([]);
      const hw = this._pgInterpPower(pts, this._pgHoverT);
      const hy = toY(hw);
      ctx.fillStyle = '#e34948'; ctx.beginPath(); ctx.arc(hx, hy, 3.5*dpr, 0, Math.PI*2); ctx.fill();
      // Readout box.
      const fmtT = t => { const m = Math.floor(t/60); return `${m}:${String(Math.round(t%60)).padStart(2,'0')}`; };
      const fmtW = w => w >= 1000 ? _fmtNum(w / 1000, 2) + ' kW' : _fmtPower(w);
      const lines = [
        `${this._t('lbl.from_start', {}, 'From start')} ${fmtT(this._pgHoverT)}`,
        `${this._t('lbl.to_end', {}, 'To end')} ${fmtT(Math.max(0, totalDur - this._pgHoverT))}`,
        `${this._t('lbl.power', {}, 'Power')} ${fmtW(hw)}`,
      ];
      ctx.font = `${9.5*dpr}px sans-serif`;
      const bw = Math.max(...lines.map(l => ctx.measureText(l).width)) + 12*dpr;
      const bh = lines.length * 13*dpr + 8*dpr;
      let bx = hx + 8*dpr; if (bx + bw > cw - padR) bx = hx - bw - 8*dpr;
      const by = padT + 4*dpr;
      ctx.fillStyle = bgCol; ctx.globalAlpha = 0.95;
      ctx.fillRect(bx, by, bw, bh); ctx.globalAlpha = 1;
      ctx.strokeStyle = gridCol; ctx.lineWidth = dpr; ctx.strokeRect(bx, by, bw, bh);
      ctx.fillStyle = txtCol; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
      lines.forEach((l, i) => ctx.fillText(l, bx + 6*dpr, by + 5*dpr + i*13*dpr));
      ctx.restore();
    }

    // Dynamic time axis (adapts to the zoom window).
    ctx.fillStyle = txtCol; ctx.font = `${9*dpr}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
    const fmtT = t => { const m = Math.floor(t/60); return `${m}:${String(Math.round(t%60)).padStart(2,'0')}`; };
    for (let k = 0; k <= 4; k++) {
      const t = vMin + (span * k / 4);
      const x = toX(t);
      ctx.textAlign = k === 0 ? 'left' : (k === 4 ? 'right' : 'center');
      ctx.fillText(fmtT(t), Math.max(padL, Math.min(cw - padR, x)), stateY + stateBandH + 1*dpr);
    }
    // Zoom hint when zoomed in.
    if (span < totalDur - 1) {
      ctx.fillStyle = txtCol; ctx.font = `${8*dpr}px sans-serif`; ctx.textAlign = 'right'; ctx.textBaseline = 'top';
      ctx.fillText(this._t('lbl.pg_zoom_hint', {}, 'double-click to reset zoom'), cw - padR, padT);
    }
  }

  // Glyph + color + label for an event type (used by the in-graph markers + hover).
  _pgEventMeta(type) {
    const M = {
      detected:      ['●', '#42a5f5', this._t('lbl.pg_ev_detected', {}, 'Detected')],
      match_commit:  ['◆', '#66bb6a', this._t('lbl.pg_ev_match', {}, 'Match committed')],
      match_changed: ['◇', '#eda100', this._t('lbl.pg_ev_match_changed', {}, 'Match changed')],
      match_ambiguous: ['◈', '#eda100', this._t('lbl.pg_ev_ambiguous', {}, 'Ambiguous')],
      unmatched:     ['○', '#9e9e9e', this._t('lbl.pg_ev_unmatched', {}, 'Unmatched')],
      match_reverted: ['↺', '#9e9e9e', this._t('lbl.pg_ev_match_reverted', {}, 'Match reverted')],
      verified_pause: ['⏸', '#7e57c2', this._t('lbl.pg_ev_verified_pause', {}, 'Verified pause')],
      notify_start:  ['🔔', '#2a78d6', this._t('lbl.pg_ev_notify_start', {}, 'Start notification')],
      notify_pre_complete: ['🔔', '#2a78d6', this._t('lbl.pg_ev_notify_pre', {}, 'Almost-done notification')],
      notify_finish: ['🔔', '#2a78d6', this._t('lbl.pg_ev_notify_finish', {}, 'Finish notification')],
      notify_milestone: ['🏆', '#2a78d6', this._t('lbl.pg_ev_notify_milestone', {}, 'Milestone notification')],
      notify_held:   ['🌙', '#7e57c2', this._t('lbl.pg_ev_notify_held', {}, 'Notification held (quiet hours)')],
      finished:      ['✓', '#4caf50', this._t('lbl.pg_ev_finished', {}, 'Finished')],
      stalled:       ['⏸', '#eda100', this._t('status.stalled', {}, 'Stalled')],
    };
    const m = M[type] || ['•', 'var(--secondary-text-color)', type];
    return { glyph: m[0], color: m[1], label: m[2] };
  }

  // Plain-language explanation of what an event did, shown in the pin tooltip.
  _pgEventDescription(type) {
    const D = {
      detected: this._t('pg_evd.detected', {}, 'The detector recognized a cycle had started.'),
      match_commit: this._t('pg_evd.match_commit', {}, 'The matcher committed to a program with enough confidence.'),
      match_changed: this._t('pg_evd.match_changed', {}, 'The leading program changed as more of the cycle was seen.'),
      match_ambiguous: this._t('pg_evd.match_ambiguous', {}, 'Two programs scored close together, so the match was uncertain.'),
      unmatched: this._t('pg_evd.unmatched', {}, 'No saved program fit this cycle.'),
      match_reverted: this._t('pg_evd.match_reverted', {}, 'The program fell back to detecting: its score dropped well below its own peak.'),
      verified_pause: this._t('pg_evd.verified_pause', {}, 'The live alignment confirmed (or released) a pause inside the program. While it holds, the cycle is not ended.'),
      notify_start: this._t('pg_evd.notify_start', {}, 'A start notification would be sent.'),
      notify_pre_complete: this._t('pg_evd.notify_pre_complete', {}, 'An almost-done notification would be sent.'),
      notify_finish: this._t('pg_evd.notify_finish', {}, 'A finish notification would be sent.'),
      notify_milestone: this._t('pg_evd.notify_milestone', {}, 'A milestone notification would be sent.'),
      notify_held: this._t('pg_evd.notify_held', {}, 'A notification was held back for quiet hours.'),
      finished: this._t('pg_evd.finished', {}, 'The cycle reached a terminal state and ended.'),
      stalled: this._t('pg_evd.stalled', {}, 'The cycle sat at standby draw longer than this program ever pauses there, with work left. Shown as Paused (Stalled); the cycle stays open.'),
    };
    return D[type] || '';
  }

  _pgUpdateParamInput(key, val) {
    const sr = this.shadowRoot;
    // input[...] specifically: the publish button in the same row also carries
    // data-pgkey, and must never be mistaken for the value field.
    const inp = sr && sr.querySelector(`input[data-pgkey="${key}"]`);
    if (!inp) return;
    if (inp.dataset.pgtype === 'bool') inp.checked = !!val;
    else inp.value = typeof val === 'number' ? Math.round(val) : val;
  }

  // Update the readout strip for a hovered time (seconds), or the final state
  // when hoverT is null (pointer not over the graph). Everything reads from the
  // REAL backend simulation series - the same detector state, model progress/
  // remaining, live confidence, phase and accumulated energy the running
  // integration would show. No client-side detection or static countdown.
  _pgUpdateStripAt(hoverT) {
    const pts = this._pgPowerPts;
    if (!pts?.length) return;
    const cy = (this._cycles || []).find(c => c.id === this._pgCycleId);
    const totalDur = cy?._pg_duration || pts[pts.length - 1].t || 1;
    const elapsed = hoverT != null ? hoverT : totalDur;
    const power = this._pgInterpPower(pts, elapsed);
    const sp = this._pgSeriesAt(elapsed);
    const stateKey = sp ? this._pgMapState(sp.state, sp.stalled) : 'idle';
    const stripStateMap = {
      idle: [this._t('lbl.pg_idle', {}, 'Idle'), 'var(--secondary-background-color)'],
      detecting: [this._t('lbl.pg_detecting', {}, 'Detecting'), '#42a5f5'],
      running: [this._t('lbl.pg_ev_running', {}, 'Running'), '#66bb6a'],
      ending: [this._t('lbl.pg_ev_ending', {}, 'Ending'), '#ef5350'],
      anti_wrinkle: [this._t('lbl.pg_anti_wrinkle', {}, 'Anti-wrinkle'), '#ab47bc'],
      stalled: [this._t('status.stalled', {}, 'Stalled'), '#eda100'],
    };
    const [stateText, stateColor] = stripStateMap[stateKey] || stripStateMap.idle;
    const pct = sp && sp.progress != null ? Math.round(sp.progress) : null;
    const remaining = sp && sp.remaining_s != null ? sp.remaining_s : null;
    const energy = sp && sp.energy_wh != null ? sp.energy_wh : this._pgTrapEnergy(pts, elapsed);
    const confDisp = sp && sp.confidence != null ? Math.round(sp.confidence * 100) + '%' : '—';
    const phase = sp && sp.phase ? sp.phase : '—';
    const fmtTime = s => { const m = Math.floor(s/60); return m + ':' + String(Math.round(s%60)).padStart(2,'0'); };
    const fmtE = wh => wh >= 1000 ? _fmtNum(wh / 1000, 2) + ' kWh' : _fmtNum(wh, 0) + ' Wh';
    const fmtP = w => w >= 1000 ? _fmtNum(w / 1000, 1) + ' kW' : _fmtPower(w);
    const sr = this.shadowRoot;
    const $id = id => sr && sr.getElementById(id);
    const set = (id, v) => { const el = $id(id); if (el) el.textContent = v; };
    const setStyle = (id, p, v) => { const el = $id(id); if (el) el.style[p] = v; };
    const badge = $id('wd-pg-state-badge');
    if (badge) { badge.textContent = stateText; badge.style.background = stateColor; badge.style.color = stateColor.includes('var') ? '' : '#fff'; }
    set('wd-pg-power', fmtP(power));
    set('wd-pg-pct', pct != null ? pct + '%' : '—%');
    setStyle('wd-pg-pbar', 'width', (pct != null ? pct : 0) + '%');
    set('wd-pg-rem', remaining != null ? fmtTime(remaining) : '—');
    set('wd-pg-energy', fmtE(energy));
    set('wd-pg-conf', confDisp);
    set('wd-pg-phase', phase);
  }

  _pgIsUnknownCmd(e) {
    const code = (e && (e.code || (e.error && e.error.code))) || '';
    const msg = ((e && (e.message || e.error)) || '').toString().toLowerCase();
    return code === 'unknown_command' || msg.includes('unknown command') || msg.includes('unknown_command');
  }


  _pgInterpPower(points, t) {
    if (!points.length) return 0;
    if (t <= points[0].t) return points[0].w;
    for (let i = 1; i < points.length; i++) {
      if (t <= points[i].t) {
        const dt = points[i].t - points[i-1].t;
        if (dt <= 0) return points[i].w;
        const alpha = (t - points[i-1].t) / dt;
        return points[i-1].w + alpha * (points[i].w - points[i-1].w);
      }
    }
    return points[points.length - 1].w;
  }

  // F3: Trapezoid energy integration up to offset t (seconds) -> Wh
  _pgTrapEnergy(points, t) {
    let wh = 0;
    for (let i = 1; i < points.length; i++) {
      const t1 = points[i - 1].t, w1 = points[i - 1].w;
      const t2 = Math.min(points[i].t, t), w2 = this._pgInterpPower(points, t2);
      if (t2 <= t1) continue;
      wh += (w1 + w2) / 2 * (t2 - t1) / 3600;
      if (t2 >= t) break;
    }
    return wh;
  }



  _drawPlaygroundCanvases() {
    if (this._tab !== 'playground') return;
    this._pgDrawCanvas();
  }


  _htmlPhases() {
    const dev = this._devices[this._selIdx];
    const devType = dev ? (dev.options.device_type || 'washing_machine') : 'washing_machine';
    const canEdit = this._canEdit();
    const rows = this._phases.map(p => {
      const isDefault = p.is_default;
      const desc = p.translation_key ? this._t(p.translation_key, {}, p.description || '') : (p.description || '');
      const actionsCell = canEdit ? `
        <td>
            <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="edit-phase" data-pid="${_esc(p.id)}" data-pname="${_esc(p.name)}" data-pdesc="${_esc(p.description || '')}" data-pisdefault="${isDefault}">${this._t('btn.edit', {}, 'Edit')}</button>
            ${p.is_override
              ? `<button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="del-phase" data-reset="1" data-pid="${_esc(p.id)}" data-pname="${_esc(p.name)}" style="margin-left:4px" title="${_esc(this._t('btn.reset_phase_tip', {}, 'Undo your edit and restore the built-in phase'))}">${this._t('btn.reset', {}, 'Reset')}</button>`
              : !isDefault ? `<button class="wd-btn wd-btn-danger wd-btn-sm" data-action="del-phase" data-pid="${_esc(p.id)}" data-pname="${_esc(p.name)}" style="margin-left:4px">${this._t('btn.delete', {}, 'Delete')}</button>` : ''}
        </td>` : '';
      return `<tr>
        <td>${_esc(p.name)} ${isDefault ? `<span class="wd-tag">${this._t('badge.built_in_tag', {}, 'built-in')}</span>` : ''}</td>
        <td>${_esc(desc.length > 60 ? desc.slice(0, 57) + '…' : desc)}</td>
        ${actionsCell}
      </tr>`;
    }).join('');
    const actionsHeader = canEdit ? `<th>${this._t('lbl.actions', {}, 'Actions')}</th>` : '';
    const newPhaseBtn = canEdit ? `<div class="wd-card-actions" style="margin-bottom:14px"><button class="wd-btn wd-btn-primary" data-action="create-phase" data-dtype="${_esc(devType)}">${this._t('btn.new_phase', {}, '+ New Phase')}</button></div>` : '';
    return `
      <div class="wd-card">
        <div class="wd-card-title">${this._t('hdr.phase_catalog', {}, 'Phase Catalog')}</div>
        <p class="wd-info" style="margin-bottom:14px">${this._t('msg.phase_catalog_intro', {}, 'Named segments of a cycle (Pre-wash, Heating, Spin…). Assign them to a profile from its control panel.')}</p>
        ${newPhaseBtn}
        ${this._phases.length === 0 ? `<p class="wd-info">${this._t('msg.no_phases', {}, 'No phases defined.')}</p>`
          : `<table class="wd-table"><thead><tr><th>${this._t('lbl.name', {}, 'Name')}</th><th>${this._t('lbl.description', {}, 'Description')}</th>${actionsHeader}</tr></thead><tbody>${rows}</tbody></table>`}
      </div>`;
  }

  // "Undo last import" (register item 195): shown inside the Export / Import card
  // only while the backend holds a restore point, and only to admins (undo_import
  // is admin-only, like the imports themselves).
  _htmlImportUndo() {
    const u = this._importUndo;
    if (!u || !u.created_at || !this._isAdmin()) return '';
    const c = u.counts || {};
    const cycles = (c.real_cycles || 0) + (c.reference_cycles || 0) + (c.backfill_cycles || 0);
    const busy = this._busy.has('import-undo');
    return `<div class="wd-import-undo" style="margin-top:12px;padding-top:12px;border-top:1px solid var(--divider-color,#e0e0e0)">
      <p class="wd-info" style="margin:0 0 8px">${this._t('msg.import_undo_hint', { when: _fmtDate(u.created_at), profiles: c.profiles || 0, cycles },
        'A restore point from before the last import ({when}) is kept: {profiles} profile(s) and {cycles} cycle(s).')}</p>
      <button class="wd-btn wd-btn-secondary" data-action="import-undo" ${busy ? 'disabled' : ''}>${busy ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.undo_import', {}, 'Undo last import')}</button>
    </div>`;
  }

  _htmlDiagnostics() {
    const d = this._diag;
    let statsHtml;
    if (d && d._error) {
      statsHtml = `<p class="wd-info" style="color:var(--error-color)">${this._t('msg.diagnostics_load_failed', {error: d._error}, 'Could not load diagnostics: {error}')}</p>`;
    } else if (d) {
      statsHtml = `<div class="wd-diag-grid">
        <div class="wd-diag-stat"><div class="wd-diag-val">${d.total_cycles ?? '-'}</div><div class="wd-diag-lbl">${this._t('lbl.cycles_count', {}, 'Cycles')}</div></div>
        <div class="wd-diag-stat"><div class="wd-diag-val">${d.total_profiles ?? '-'}</div><div class="wd-diag-lbl">${this._t('tab.profiles', {}, 'Profiles')}</div></div>
        <div class="wd-diag-stat"><div class="wd-diag-val">${d.debug_traces_count ?? '-'}</div><div class="wd-diag-lbl">${this._t('lbl.debug_traces', {}, 'Debug Traces')}</div></div>
        <div class="wd-diag-stat"><div class="wd-diag-val">${d.file_size_kb != null ? d.file_size_kb.toFixed(1) : '-'}</div><div class="wd-diag-lbl">${this._t('lbl.file_kb', {}, 'File (kB)')}</div></div>
      </div>`;
    } else {
      statsHtml = `<p class="wd-info">${this._t('msg.loading', {}, 'Loading…')}</p>`;
    }
    return `
      <div class="wd-card">
        <div class="wd-card-title">${this._t('hdr.storage_stats', {}, 'Storage Stats')}</div>
        ${statsHtml}
        <div class="wd-card-actions"><button class="wd-btn wd-btn-secondary" data-action="diag-refresh" title="${_esc(this._t('btn.refresh_diag_tip', {}, 'Reload storage statistics'))}">${this._t('btn.refresh', {}, 'Refresh')}</button></div>
      </div>
      ${this._canFull() ? `<div class="wd-card">
        <div class="wd-card-title">${this._t('hdr.maintenance', {}, 'Maintenance Actions')}</div>
        <div style="display:flex;flex-direction:column;gap:12px">
          <div><strong>${this._t('hdr.process_history', {}, 'Process History')}</strong><p class="wd-info" style="margin:4px 0">${this._t('msg.process_history_hint', {}, 'Re-run matching on all stored cycles, refresh suggestions, retrain ML models (if enabled), recost cycles from recorded prices and recompute cycle health. Run it after a batch of reviews.')}</p>
            <button class="wd-btn wd-btn-secondary" data-action="reprocess-history">${this._t('btn.process_history', {}, 'Process Now')}</button></div>
          <div><strong>${this._t('hdr.clear_debug', {}, 'Clear Debug Traces')}</strong><p class="wd-info" style="margin:4px 0">${this._t('msg.clear_debug_hint', {}, 'Remove stored debug data to free space.')}</p>
            <button class="wd-btn wd-btn-secondary" data-action="clear-debug">${this._t('btn.clear_debug', {}, 'Clear Debug Data')}</button></div>
          <div><strong>${this._t('hdr.wipe_history', {}, 'Wipe History')}</strong><p class="wd-info" style="margin:4px 0">${this._t('msg.wipe_history_warning', {}, 'Permanently delete all cycles and profiles. Cannot be undone.')}</p>
            <button class="wd-btn wd-btn-danger" data-action="wipe-history">${this._t('btn.wipe_all', {}, 'Wipe All Data')}</button></div>
        </div>
      </div>
      <div class="wd-card">
        <div class="wd-card-title">${this._t('hdr.export_import', {}, 'Export / Import')}</div>
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.export_description', {}, 'Choose exactly which profiles, cycles, settings and more to export to JSON, or analyze a file and import only the parts you want.')}</p>
        <div class="wd-card-actions">
          <button class="wd-btn wd-btn-primary" data-action="export-select-open">${this._t('btn.export_selected', {}, 'Export (choose data)')}</button>
          <button class="wd-btn wd-btn-primary" data-action="import-config-open">${this._t('btn.import_json', {}, 'Import from JSON')}</button>
          <button class="wd-btn wd-btn-secondary" data-action="export-config">${this._t('btn.export_all', {}, 'Quick export everything')}</button>
        </div>
        ${this._htmlImportUndo()}
      </div>
      <div class="wd-card">
        <div class="wd-card-title">${this._t('hdr.import_power_history', {}, 'Import power history')}</div>
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.import_history_description', {}, 'Had a smart plug before WashData? Upload its power history or read it from Home Assistant. Detection runs over it, and past cycles appear in your Cycles list ready to name.')}</p>
        <div class="wd-card-actions">
          <button class="wd-btn wd-btn-primary" data-action="hist-import-open">${this._t('btn.import_power_history', {}, 'Import power history')}</button>
        </div>
      </div>` : `<div class="wd-card"><p class="wd-info">${this._t('msg.maintenance_requires_access', {}, 'Maintenance and export/import require full access.')}</p></div>`}`;
  }

  // ── Maintenance (Advanced → Maintenance): service log + reminders ────────────

  // Label for a maintenance task: a built-in type is translated; a custom task
  // (#461) shows the user's own name, never translated. `fallback` is the name a
  // log entry recorded, so a renamed or removed task's history still reads.
  _maintLabel(type, fallback) {
    const map = {
      descale: this._t('maint.descale', {}, 'Descale'),
      filter_clean: this._t('maint.filter_clean', {}, 'Clean filter'),
      drum_clean: this._t('maint.drum_clean', {}, 'Clean drum'),
      bearing_service: this._t('maint.bearing_service', {}, 'Bearing service'),
      other: this._t('maint.other', {}, 'Other'),
      salt: this._t('maint.salt', {}, 'Refill salt'),
      rinse_aid: this._t('maint.rinse_aid', {}, 'Refill rinse aid'),
      lint_filter: this._t('maint.lint_filter', {}, 'Clean lint filter'),
      condenser_clean: this._t('maint.condenser_clean', {}, 'Clean condenser'),
    };
    if (map[type]) return map[type];
    const tasks = (this._maintenance && this._maintenance.custom_tasks) || [];
    const task = tasks.find(t => t && t.id === type);
    if (task && task.name) return task.name;
    return fallback || type;
  }

  // Progress rows for the Service Status card. `status` (#461) covers built-in
  // and custom tasks with cycle and day intervals; a payload without it (an older
  // backend) falls back to the built-in cycle reminders.
  _maintStatusRows(mt, eventTypes) {
    if (Array.isArray(mt.status)) return mt.status;
    const reminders = mt.reminders || {};
    const cyclesSince = mt.cycles_since || {};
    return eventTypes.map(t => {
      const thr = parseInt(reminders[t], 10) || 0;
      const since = Math.max(0, parseInt(cyclesSince[t], 10) || 0);
      return { id: t, custom: false, cycles_interval: thr, days_interval: 0, cycles_since: since, days_since: null, due: thr > 0 && since >= thr };
    }).filter(r => r.cycles_interval > 0);
  }

  _htmlMaintenance() {
    const canEdit = this._canEdit();
    const mt = this._maintenance;
    if (mt && mt._error) {
      return `<div class="wd-card"><p class="wd-info" style="color:var(--error-color)">${this._t('msg.maintenance_load_error', { error: mt._error }, 'Could not load maintenance data: {error}')}</p></div>`;
    }
    if (!mt) {
      return `<div class="wd-card"><p class="wd-info">${this._t('msg.loading', {}, 'Loading…')}</p></div>`;
    }
    const eventTypes = (mt.event_types && mt.event_types.length) ? mt.event_types : ['descale', 'filter_clean', 'drum_clean', 'bearing_service', 'other'];
    const due = mt.due || [];
    const log = mt.log || [];
    const reminders = mt.reminders || {};
    const customTasks = Array.isArray(mt.custom_tasks) ? mt.custom_tasks : [];
    const limits = mt.limits || {};
    const nameMax = parseInt(limits.name_max, 10) || 60;
    const tasksMax = parseInt(limits.tasks_max, 10) || 20;
    const odometer = Math.max(0, parseInt(mt.lifetime_cycle_count, 10) || 0);
    const canFull = this._canFull();

    // Reminder-due banner (advisory style; never a notification), with a one-click
    // "Log done" per due task (#461): it logs that task, which restarts its count.
    const dueBanner = due.length ? (() => {
      const items = due.map(t => this._maintLabel(t)).join(', ');
      const doneBtns = canEdit ? `<div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px">${due.map(t => `<button class="wd-btn wd-btn-sm" data-action="maint-log-done" data-mtype="${_esc(t)}">${this._t('btn.log_done_task', { task: this._maintLabel(t) }, 'Log done: {task}')}</button>`).join('')}</div>` : '';
      return `<div class="wd-maint-due" style="margin-bottom:14px;padding:10px 12px;border-radius:6px;background:rgba(255,152,0,.10);border-left:3px solid var(--warning-color,#ff9800)">
        <span style="font-weight:600;color:var(--warning-color,#ff9800)">${this._t('msg.maintenance_due', { items }, 'Maintenance due: {items}')}</span>
        ${doneBtns}
      </div>`;
    })() : '';

    // Add-event form (edit access only): built-in types, then the custom tasks.
    const today = new Date().toISOString().slice(0, 10);
    const typeOpts = eventTypes.map(t => `<option value="${_esc(t)}">${_esc(this._maintLabel(t))}</option>`).join('')
      + customTasks.map(t => `<option value="${_esc(t.id)}">${_esc(t.name || t.id)}</option>`).join('');
    const addForm = canEdit ? `<div class="wd-card">
      <div class="wd-card-title">${this._t('hdr.add_maintenance', {}, 'Add Maintenance Event')}</div>
      <div class="wd-form-grid">
        <div class="wd-field"><label>${this._t('lbl.date', {}, 'Date')}</label><input type="date" id="wd-maint-date" value="${today}" max="${today}"></div>
        <div class="wd-field"><label>${this._t('lbl.event_type', {}, 'Event type')}</label><select id="wd-maint-type">${typeOpts}</select></div>
      </div>
      <div class="wd-field"><label>${this._t('lbl.notes', {}, 'Notes')}</label><input type="text" id="wd-maint-notes" placeholder="${_esc(this._t('placeholder.maintenance_notes', {}, 'e.g. replaced filter, cleaned door seal'))}"></div>
      <div class="wd-card-actions"><button class="wd-btn wd-btn-primary" data-action="maint-add">${this._t('btn.add_maintenance', {}, 'Add maintenance event')}</button></div>
    </div>` : '';

    // Timeline / list (most-recent-first, provided by the backend).
    const rows = log.length ? log.map(e => {
      const del = canEdit ? `<button class="wd-btn wd-btn-danger wd-btn-sm" data-action="maint-delete" data-mid="${_esc(e.id)}">${this._t('btn.delete', {}, 'Delete')}</button>` : '';
      const notes = e.notes ? `<div class="wd-info" style="margin-top:2px">${_esc(e.notes)}</div>` : '';
      return `<div class="wd-card" style="background:var(--secondary-background-color);padding:10px 12px">
        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px">
          <div>
            <div style="font-weight:600">${_esc(this._maintLabel(e.event_type, e.task_name))}</div>
            <div class="wd-info" style="margin-top:2px">${_fmtDate(e.date)}</div>
            ${notes}
          </div>
          ${del}
        </div>
      </div>`;
    }).join('') : `<p class="wd-info">${this._t('msg.no_maintenance', {}, 'No maintenance recorded yet.')}</p>`;

    // Reminder editor (edit access only): the built-in rows for this device type,
    // then the user's own tasks (#461), saved together by "Save reminders".
    const intervalInput = (attr, id, value, max) => `<input type="number" min="0" max="${max}" step="1" ${attr}="${_esc(id)}" value="${value ? _esc(value) : ''}" placeholder="0">`;
    const taskRows = customTasks.map(t => `<div class="wd-form-grid wd-maint-task" data-mtask-row="${_esc(t.id)}" style="align-items:end;margin-top:8px;padding-top:8px;border-top:1px solid var(--divider-color)">
        <div class="wd-field"><label>${this._t('lbl.task_name', {}, 'Task')}</label><input type="text" maxlength="${nameMax}" data-mtask-name="${_esc(t.id)}" value="${_esc(t.name || '')}"></div>
        <div class="wd-field"><label>${this._t('lbl.every_cycles', {}, 'Every (cycles)')}</label>${intervalInput('data-mtask-cycles', t.id, t.cycles, limits.cycles_max || 100000)}</div>
        <div class="wd-field"><label>${this._t('lbl.every_days', {}, 'Every (days)')}</label>${intervalInput('data-mtask-days', t.id, t.days, limits.days_max || 3650)}</div>
        <div class="wd-field"><button class="wd-btn wd-btn-danger wd-btn-sm" data-action="maint-task-remove" data-mtask="${_esc(t.id)}">${this._t('btn.remove', {}, 'Remove')}</button></div>
      </div>`).join('');
    const newTaskRow = customTasks.length < tasksMax ? `<div class="wd-form-grid" style="align-items:end;margin-top:12px">
        <div class="wd-field"><label>${this._t('lbl.new_task_name', {}, 'New task')}</label><input type="text" id="wd-mtask-new-name" maxlength="${nameMax}" placeholder="${_esc(this._t('placeholder.custom_task', {}, 'e.g. Clean door seal'))}"></div>
        <div class="wd-field"><label>${this._t('lbl.every_cycles', {}, 'Every (cycles)')}</label><input type="number" min="0" step="1" id="wd-mtask-new-cycles" placeholder="0"></div>
        <div class="wd-field"><label>${this._t('lbl.every_days', {}, 'Every (days)')}</label><input type="number" min="0" step="1" id="wd-mtask-new-days" placeholder="0"></div>
        <div class="wd-field"><button class="wd-btn wd-btn-sm" data-action="maint-task-add">${this._t('btn.add_task', {}, 'Add task')}</button></div>
      </div>` : `<p class="wd-info" style="margin-top:8px">${this._t('msg.custom_task_limit', { max: tasksMax }, 'You have reached the limit of {max} tasks.')}</p>`;
    const remEditor = canEdit ? `<div class="wd-card">
      <div class="wd-card-title">${this._t('hdr.maintenance_reminders', {}, 'Service Reminders')}</div>
      <p class="wd-info" style="margin-bottom:12px">${this._t('msg.reminders_intro', {}, 'Show a reminder in the panel this many cycles after the last service. Leave blank or 0 to turn a reminder off.')}</p>
      <div class="wd-form-grid">
        ${eventTypes.map(t => `<div class="wd-field"><label>${_esc(this._maintLabel(t))}</label><input type="number" min="0" step="1" data-maint-rem="${_esc(t)}" value="${reminders[t] != null ? _esc(reminders[t]) : ''}" placeholder="${_esc(this._t('lbl.reminder_every', {}, 'Remind every (cycles)'))}"></div>`).join('')}
      </div>
      <div class="wd-subhead" style="margin-top:16px">${this._t('hdr.custom_tasks', {}, 'Your own tasks')}</div>
      <p class="wd-info">${this._t('msg.custom_tasks_intro', {}, 'Add anything else you want to be reminded of. A task is due when either interval is reached; leave one blank or 0 to use only the other.')}</p>
      ${taskRows}
      ${newTaskRow}
      <p class="wd-info" style="margin-top:12px">${this._t('msg.maintenance_due_sensor_hint', {}, 'The Maintenance due binary sensor is on while any task is due, for your own notification automations.')}</p>
      <div class="wd-card-actions"><button class="wd-btn wd-btn-primary" data-action="maint-save-reminders">${this._t('btn.save_reminders', {}, 'Save reminders')}</button></div>
    </div>` : '';

    // Service status: the odometer every reminder is measured against, plus how
    // close each task is, by cycles and/or by days.
    const progressRows = this._maintStatusRows(mt, eventTypes).map(r => {
      const thrC = parseInt(r.cycles_interval, 10) || 0;
      const thrD = parseInt(r.days_interval, 10) || 0;
      const sinceC = Math.max(0, parseInt(r.cycles_since, 10) || 0);
      const sinceD = r.days_since == null ? null : Math.max(0, parseInt(r.days_since, 10) || 0);
      const parts = [];
      let frac = 0;
      if (thrC > 0) {
        parts.push(this._t('lbl.cycles_since_service', { since: sinceC, total: thrC }, sinceC + ' / ' + thrC + ' cycles'));
        frac = Math.max(frac, sinceC / thrC);
      }
      if (thrD > 0) {
        const d = sinceD == null ? 0 : sinceD;
        parts.push(this._t('lbl.days_since_service', { since: d, total: thrD }, d + ' / ' + thrD + ' days'));
        frac = Math.max(frac, d / thrD);
      }
      const pct = Math.max(0, Math.min(100, Math.round(frac * 100)));
      const barColor = r.due ? 'var(--warning-color,#ff9800)' : 'var(--primary-color)';
      return `<div style="margin-top:10px" data-mstatus="${_esc(r.id)}">
        <div style="display:flex;align-items:baseline;justify-content:space-between;gap:8px">
          <span style="font-weight:600">${_esc(r.custom ? (r.name || r.id) : this._maintLabel(r.id))}</span>
          <span class="wd-info">${parts.join(' · ')}</span>
        </div>
        <div style="height:6px;margin-top:4px;border-radius:3px;background:var(--divider-color);overflow:hidden">
          <div style="height:100%;border-radius:3px;width:${pct}%;background:${barColor}"></div>
        </div>
      </div>`;
    }).join('');

    const odometerEditor = canFull ? `<div style="margin-top:16px;padding-top:14px;border-top:1px solid var(--divider-color)">
      <div class="wd-field">
        <label>${this._t('lbl.correct_total_cycles', {}, 'Correct the total')}</label>
        <input type="number" min="0" step="1" id="wd-maint-odometer" value="${odometer}">
      </div>
      <p class="wd-info" style="margin-top:6px">${this._t('msg.odometer_correct_hint', {}, 'Set this if WashData counted a run that never happened, or the appliance ran cycles before WashData was installed.')}</p>
      <div class="wd-card-actions"><button class="wd-btn" data-action="maint-save-odometer">${this._t('btn.save_total_cycles', {}, 'Save total')}</button></div>
    </div>` : '';

    const statusCard = `<div class="wd-card">
      <div class="wd-card-title">${this._t('hdr.service_status', {}, 'Service Status')}</div>
      <div style="display:flex;align-items:baseline;gap:8px">
        <span style="font-size:26px;font-weight:700">${odometer}</span>
        <span class="wd-info">${this._t('lbl.total_cycles_run', {}, 'cycles run in total')}</span>
      </div>
      <p class="wd-info" style="margin-top:6px">${this._t('msg.odometer_intro', {}, 'This total only goes up. Deleting a cycle does not lower it, so service reminders stay correct.')}</p>
      ${progressRows || `<p class="wd-info" style="margin-top:10px">${this._t('msg.no_reminders_set', {}, 'No service reminders are set yet.')}</p>`}
      ${odometerEditor}
    </div>`;

    // Pointer to the external Maintenance Supporter integration (#461): it does
    // far more than these reminders and can read WashData's cycle counter.
    const supporterCard = `<div class="wd-card wd-maint-supporter">
      <div class="wd-card-title">${this._t('hdr.maintenance_supporter', {}, 'Need more?')}</div>
      <p class="wd-info">${this._t('msg.maintenance_supporter_intro', {}, 'Maintenance Supporter is a separate integration that does much more: any appliance or task, schedules by time, usage or a sensor, notifications and a history. It can use the WashData cycle counter.')}</p>
      <p style="margin-top:8px"><a href="${_MAINTENANCE_SUPPORTER_URL}" target="_blank" rel="noopener noreferrer" style="color:var(--primary-color);text-decoration:none;font-weight:500">${this._t('link.maintenance_supporter', {}, 'Maintenance Supporter on GitHub ↗')}</a></p>
    </div>`;

    return `${dueBanner}
      ${statusCard}
      ${addForm}
      <div class="wd-card">
        <div class="wd-card-title">${this._t('hdr.maintenance_log', {}, 'Maintenance Log')}</div>
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.maintenance_intro', {}, 'Log servicing on this appliance and get reminded when each task is due again.')}</p>
        <div style="display:flex;flex-direction:column;gap:8px">${rows}</div>
      </div>
      ${remEditor}
      ${supporterCard}`;
  }

  // ── Panel tab (preferences + admin settings + RBAC) ─────────────────────────

  _htmlPanel() {
    const canEdit = this._canEdit();
    // Advanced holds the editor tools: Diagnostics and ML Training. Maintenance
    // moved to Cycles; the integration-wide sections live in the header gear.
    const mlAvail = canEdit && this._constants && this._constants.mlTrainingAvailable;
    const allowed = new Set(['diagnostics']);
    if (mlAvail) allowed.add('ml');
    let sub = this._panelSubtab;
    if (!allowed.has(sub)) sub = this._panelSubtab = 'diagnostics';
    const subtabs = [['diagnostics', this._t('tab.diagnostics', {}, 'Diagnostics')]];
    if (mlAvail) subtabs.push(['ml', this._t('tab.ml', {}, 'ML Training')]);
    const stBtns = subtabs.map(([id, lbl]) => `<button class="wd-subtab ${sub === id ? 'active' : ''}" role="tab" aria-selected="${sub === id ? 'true' : 'false'}" data-ptab="${id}">${lbl}</button>`).join('');
    if (!canEdit) return '';
    const body = sub === 'ml' && mlAvail ? this._htmlMlTab() : this._htmlDiagnostics();
    return `<div class="wd-subtabs" role="tablist">${stBtns}</div>${body}`;
  }

  _levelSelect(attrs, val, withInherit) {
    const opts = (withInherit ? [["inherit", this._t("access.inherit",{},"Inherit")]] : [])
      .concat([["none", this._t("access.none",{},"None (hidden)")], ["read", this._t("access.read",{},"Read")], ["edit", this._t("access.edit",{},"Edit")], ["full", this._t("access.full",{},"Full")]]);
    return `<select ${attrs}>${opts.map(([v, l]) => `<option value="${v}" ${val === v ? 'selected' : ''}>${l}</option>`).join('')}</select>`;
  }

  _htmlPanelPrefs() {
    const cur = (this._panelCfg && this._panelCfg.prefs) || {};
    const sysLang = (this._hass && this._hass.locale && this._hass.locale.language) || 'en';
    const tabsAll = [
      ['', this._t('pref.use_panel_default', {}, '(panel default)')],
      ['status', this._t('tab.status', {}, 'Overview')],
      ['history', this._t('tab.history', {}, 'Cycles')],
      ['profiles', this._t('tab.profiles', {}, 'Profiles')],
      ['settings', this._t('tab.settings', {}, 'Settings')],
      ['playground', this._t('tab.playground', {}, 'Playground')],
    ];
    const opts = tabsAll.map(([v, l]) => `<option value="${v}" ${(cur.default_tab || '') === v ? 'selected' : ''}>${_esc(l)}</option>`).join('');
    const dateOpts = [['relative', this._t('pref.date_relative', {}, 'Relative (e.g. 2 hours ago)')], ['absolute', this._t('pref.date_absolute', {}, 'Absolute (e.g. 14:32 on 2 Jul)')]];
    const dateOptHtml = dateOpts.map(([v, l]) => `<option value="${v}" ${(cur.date_format || 'relative') === v ? 'selected' : ''}>${_esc(l)}</option>`).join('');
    const langOverride = cur.lang_override || '';
    const langOpts = [
      ['', this._tText('pref.lang_auto', {lang: sysLang.toUpperCase()}, 'System default (' + sysLang.toUpperCase() + ')')],
      ['en', this._t('pref.lang_en', {}, 'English')],
    ].map(([v, l]) => `<option value="${v}" ${langOverride === v ? 'selected' : ''}>${_esc(l)}</option>`).join('');
    return `<div class="wd-card">
      <div class="wd-card-title">${this._t('hdr.my_preferences', {}, 'My Preferences')}</div>
      <p class="wd-info" style="margin-bottom:12px">${this._t('msg.prefs_personal', {}, 'These apply to your Home Assistant account only.')}</p>
      <div class="wd-subhead">${this._t('hdr.display', {}, 'Display')}</div>
      <div class="wd-form-grid">
        <div class="wd-field"><label>${this._t('lbl.default_tab', {}, 'Default tab when opening the panel')}</label><select id="wd-pref-tab">${opts}</select></div>
        <div class="wd-field"><label>${this._t('lbl.cycle_date_display', {}, 'Cycle date display')}</label><select id="wd-pref-datefmt">${dateOptHtml}</select></div>
        <div class="wd-field"><label>${this._t('lbl.panel_language', {}, 'Panel language')}</label><select id="wd-pref-lang">${langOpts}</select></div>
      </div>
      <div class="wd-field" style="margin-top:8px">
        <label>${this._t('lbl.font_size', {}, 'Panel font size')}</label>
        <div style="display:flex;align-items:center;gap:12px">
          <input type="range" id="wd-pref-fontscale" min="0.85" max="1.5" step="0.05" value="${cur.font_scale || 1}" style="flex:1" aria-label="${_esc(this._t('lbl.font_size', {}, 'Panel font size'))}">
          <span id="wd-pref-fontscale-val" style="min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums">${Math.round((cur.font_scale || 1) * 100)}%</span>
        </div>
        <div class="wd-field-hint">${this._t('msg.font_size_hint', {}, 'Make everything in this panel larger or smaller. Applies to your account on this device.')}</div>
      </div>
      <div class="wd-subhead">${this._t('hdr.status_graph', {}, 'Status Graph')}</div>
      ${_switchRow(`id="wd-pref-expected" ${(cur.show_expected !== false) ? 'checked' : ''}`, this._t('lbl.show_expected', {}, 'Show expected curve overlay (matched profile, orange)'))}
      ${_switchRow(`id="wd-pref-raw" ${cur.show_raw ? 'checked' : ''}`, this._t('lbl.show_raw', {}, 'Show raw socket toggle in live power graph'))}
      <div class="wd-subhead">${this._t('hdr.diagnostics_pref', {}, 'Diagnostics')}</div>
      ${_switchRow(`id="wd-pref-debug" ${cur.show_debug ? 'checked' : ''}`, this._t('lbl.show_debug', {}, 'Show live match debug card on the Status page (confidence, ambiguity, top candidates)'))}
      <div class="wd-card-actions"><button class="wd-btn wd-btn-primary" data-action="save-prefs">${this._t('btn.save_preferences', {}, 'Save Preferences')}</button></div>
    </div>`;
  }

  _htmlPanelSettings() {
    const p = (this._panelCfg && this._panelCfg.panel) || {};
    const tabOpts = [
      ['status', this._t('tab.status', {}, 'Overview')],
      ['history', this._t('tab.history', {}, 'Cycles')],
      ['profiles', this._t('tab.profiles', {}, 'Profiles')],
      ['settings', this._t('tab.settings', {}, 'Settings')],
      ['playground', this._t('tab.playground', {}, 'Playground')],
    ];
    const dtOpts = tabOpts.map(([v, l]) => `<option value="${v}" ${(p.default_tab || 'status') === v ? 'selected' : ''}>${_esc(l)}</option>`).join('');
    const hidden = p.hidden_tabs || [];
    const hideChecks = tabOpts.filter(([v]) => v !== 'status')
      .map(([v, l]) => _switchInline(`data-hidetab="${v}" ${hidden.includes(v) ? 'checked' : ''}`, l)).join('');
    return `<div class="wd-card">
      <div class="wd-card-title">${this._t('hdr.panel_settings', {}, 'Panel Settings (all users)')}</div>
      <div class="wd-form-grid">
        <div class="wd-field"><label>${this._t('lbl.panel_default_tab', {}, 'Default tab')}</label><select id="wd-ps-deftab">${dtOpts}</select></div>
      </div>
      <div class="wd-field"><label>${this._t('lbl.hide_tabs', {}, 'Hide tabs for non-admins')}</label><div style="display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px">${hideChecks}</div></div>
      <div class="wd-card-actions"><button class="wd-btn wd-btn-primary" data-action="save-panel">${this._t('btn.save_panel_settings', {}, 'Save Panel Settings')}</button></div>
    </div>`;
  }

  _htmlPanelAccess() {
    const rbac = (this._panelCfg && this._panelCfg.rbac) || { enabled: false, default_level: 'none', users: {} };
    const users = (this._panelCfg && this._panelCfg.users) || [];
    const devices = this._devices || [];
    const userCards = users.filter(u => !u.is_admin).map(u => {
      const uc = (rbac.users || {})[u.id] || { default: 'none', devices: {} };
      const devRows = devices.map(d =>
        `<div class="wd-seg-row"><span style="min-width:160px">${_esc(d.title)}</span>${this._levelSelect(`data-rbacuser="${_esc(u.id)}" data-rbacdev="${_esc(d.entry_id)}"`, (uc.devices || {})[d.entry_id] || 'inherit', true)}</div>`
      ).join('');
      return `<div class="wd-card" style="background:var(--secondary-background-color)">
        <div class="wd-profile-name">${_esc(u.name)}</div>
        <div class="wd-seg-row"><span style="min-width:160px">${this._t('lbl.default_other', {}, 'Default (other devices)')}</span>${this._levelSelect(`data-rbacuser="${_esc(u.id)}" data-rbacdev="__default__"`, uc.default || 'none', false)}</div>
        ${devRows}
      </div>`;
    }).join('');
    const adminNote = users.filter(u => u.is_admin).map(u => `<span class="wd-pill">${_esc(u.name)} - full (admin)</span>`).join(' ');
    return `<div class="wd-card">
      <div class="wd-card-title">${this._t('hdr.access_control', {}, 'Access Control')}</div>
      ${_switchRow(`id="wd-rbac-enabled" ${rbac.enabled ? 'checked' : ''}`, this._t('lbl.enable_access_control', {}, 'Enable per-user access control'), '', this._t('msg.rbac_hint', {}, 'Off: every Home Assistant user has full access (default). Administrators always have full access and can manage everyone.'))}
      <div class="wd-field"><label>${this._t('lbl.default_access_level', {}, 'Default level for users not listed below')}</label>${this._levelSelect('id="wd-rbac-default"', rbac.default_level || 'none', false)}</div>
      ${adminNote ? `<div class="wd-field"><label>${this._t('lbl.administrators', {}, 'Administrators')}</label><div>${adminNote}</div></div>` : ''}
      <div class="wd-card-actions"><button class="wd-btn wd-btn-primary" data-action="save-rbac">${this._t('btn.save_access_control', {}, 'Save Access Control')}</button></div>
    </div>
    ${userCards || `<div class="wd-card"><p class="wd-info">${this._t('msg.no_other_users', {}, 'No other Home Assistant users found.')}</p></div>`}`;
  }

  // ── Community Store tab ──────────────────────────────────────────────────────
  // Breadcrumb browse: Brands/search → Device (its programs) → Program (its
  // reference cycles). Every list is fetched via the store_* WS commands; the
  // backend returns {disabled:true} when online features are off, which we
  // surface as a friendly "enable it in Settings" note.

  _htmlStore() {
    if (!this._canEdit()) return `<div class="wd-empty">${this._t('msg.no_device_selected', {}, 'No device selected.')}</div>`;
    // Defensive: the tab is only shown when the option is on, but the store_status
    // fetch (or the option itself) may say otherwise — show the enable hint.
    const st = this._storeStatus;
    const storeLink = `<a href="https://3dg1luk43.github.io/washdata-store" target="_blank" rel="noopener noreferrer" style="font-size:.8em;font-weight:400;color:var(--primary-color);text-decoration:none;white-space:nowrap" title="${_esc(this._t('store.website_tip', {}, 'Open the community store website'))}">${this._t('store.website', {}, 'Store website ↗')}</a>`;
    const storeHeader = `<div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap"><div class="wd-card-title" style="margin:0">${this._t('hdr.community_store', {}, 'Community Store')}</div>${storeLink}</div>`;
    if (!this._onlineEnabled() || (st && st.enabled === false)) {
      return `<div class="wd-card">${storeHeader}
        <p class="wd-info">${this._t('msg.store_enable_hint', {}, 'Turn on online features in Preferences > Online & Community to browse and import community reference cycles.')}</p></div>`;
    }
    let body;
    if (this._storeView === 'device') body = this._htmlStoreDevice();
    else if (this._storeView === 'profile') body = this._htmlStoreProfile();
    else body = this._htmlStoreBrands();
    return `<div class="wd-card">
      ${storeHeader}
      ${this._htmlStoreCrumbs()}
      ${body}
    </div>`;
  }

  _htmlStoreCrumbs() {
    const parts = [`<button class="wd-crumb ${this._storeView === 'brands' ? 'active' : ''}" data-action="store-nav" data-view="brands">${this._t('store.browse', {}, 'Browse')}</button>`];
    if (this._storeDevice) {
      const d = this._storeDevice;
      const lbl = `${d.brand || ''} ${d.model || ''}`.trim() || this._t('store.device', {}, 'Device');
      parts.push(`<span class="wd-crumb-sep">›</span>`);
      parts.push(this._storeView === 'device'
        ? `<span class="wd-crumb active">${_esc(lbl)}</span>`
        : `<button class="wd-crumb" data-action="store-nav" data-view="device">${_esc(lbl)}</button>`);
    }
    if (this._storeProfile && this._storeView === 'profile') {
      parts.push(`<span class="wd-crumb-sep">›</span>`);
      parts.push(`<span class="wd-crumb active">${_esc(this._storeProfile.program || '')}</span>`);
    }
    return `<div class="wd-store-crumbs">${parts.join('')}</div>`;
  }

  _htmlStoreLoading() {
    return `<div class="wd-empty" style="padding:24px"><div class="wd-icon">⏳</div>${this._t('msg.loading', {}, 'Loading…')}</div>`;
  }

  _htmlStoreBrands() {
    const items = this._storeDevices || [];
    const mine = String((this._opts || {}).store_model || '').trim().toLowerCase();
    const rows = items.map(d => {
      const title = `${_esc(d.brand || '')} ${_esc(d.model || '')}`.trim() || this._t('store.device', {}, 'Device');
      const type = d.applianceType ? `<span class="wd-store-chip">${_esc(this._deviceTypeLabel(d.applianceType))}</span>` : '';
      const isMine = mine && String(d.model || '').toLowerCase() === mine;
      const yours = isMine ? `<span class="wd-tag wd-tag-approved" title="${_esc(this._t('store.your_model_tip', {}, 'This is the appliance you declared in Settings'))}">${this._t('store.your_model', {}, 'Yours')}</span>` : '';
      // Only ever claim content, never absence: these counters under-report (see
      // _storeItemHasContent), so a missing chip means "unknown", not "empty".
      const nProg = _storeCount(d.profileCount);
      const progChip = nProg > 0
        ? `<span class="wd-store-chip">${this._t('store.programs_count', {n: nProg}, `Programs: ${nProg}`)}</span>`
        : '';
      return `<button class="wd-store-row" data-action="store-open-device" data-device-id="${_esc(d.id)}">
        <span class="wd-store-row-main">
          <span class="wd-store-row-title">${title}${yours}${this._statusTag(d)}</span>
          <span class="wd-store-row-sub">${type}${progChip}<span class="wd-store-fav" title="${_esc(this._tText('store.favorites', {}, 'Favourites'))}">★ ${_fmtNum(_storeCount(d.favoriteCount), 0)}</span></span>

        </span>
        <span class="wd-store-row-arrow" aria-hidden="true">›</span>
      </button>`;
    }).join('');

    // Nothing to scope the catalog to yet. Declaring the appliance is what makes this tab
    // useful AND is itself the catalog search (the Settings pickers query the same data),
    // so point there rather than showing an unscoped list the user cannot act on.
    if (!this._storeBrandScope()) {
      return `
        ${this._storeSearchHtml()}
        <p class="wd-info" style="margin-bottom:10px">${this._t('msg.store_declare_appliance', {}, 'Tell WashData which appliance you own to see setups others shared for it. Or type a brand above to look around.')}</p>
        <button class="wd-btn wd-btn-primary wd-btn-sm" data-action="store-goto-identity">${this._t('btn.set_brand_model', {}, 'Set brand & model')}</button>`;
    }

    const empty = `<p class="wd-info">${this._t('store.no_results', {}, 'No matching appliances found. Try a different search.')}</p>`;
    const list = this._storeLoading ? this._htmlStoreLoading()
      : (items.length ? `<div class="wd-store-rows">${rows}</div>` : empty);
    // The exact model is empty far more often than not, so say plainly that the other
    // rows are worth a look rather than letting the user conclude the store is empty.
    const siblingHint = (!this._storeLoading && items.length > 1)
      ? `<p class="wd-info" style="margin-bottom:8px">${this._t('msg.store_sibling_hint', {}, 'Nothing shared for your model? A related model from the same brand is usually a good start.')}</p>`
      : '';
    return `
      ${this._storeSearchHtml()}
      ${siblingHint}
      ${list}`;
  }

  // Store-tab search box. Built on the SAME combobox as the Settings brand picker, so
  // suggestions arrive while typing (250 ms debounce, prefix-superset cache, no
  // re-render) and there is no "Search" button left to click (#416). It offers brands
  // AND models, because a model number is what a user actually knows about their own
  // appliance.
  //
  // `data-catalog` and NOT `data-opt`: _saveSettings sweeps `[data-opt]` across the
  // whole shadow root, so a settings key here would be written back to the config
  // entry as though the user had edited that field.
  _storeSearchHtml() {
    return `
      <div class="wd-store-search">
        <div class="wd-combo">
          <input type="text" id="wd-store-q" class="wd-combo-inp" data-catalog="store_search"
                 placeholder="${_esc(this._t('store.search_ph2', {}, 'Search by brand or model…'))}"
                 value="${_esc(this._storeQuery)}" autocomplete="off" spellcheck="false">
          <div class="wd-combo-drop" hidden></div>
        </div>
      </div>`;
  }

  // The store could not be reached (audit STORE-09): not the same as "nothing shared".
  _htmlStoreUnreachable() {
    return `<p class="wd-error-state" role="alert">${this._t('store.unreachable', {}, "Couldn't reach the community store. Check your connection and try again.")}</p>`;
  }

  _htmlStoreDevice() {
    const items = this._storeProfiles || [];
    const rows = items.map(p => `<button class="wd-store-row" data-action="store-open-profile" data-profile-id="${_esc(p.id)}">
      <span class="wd-store-row-main"><span class="wd-store-row-title">${_esc(p.program || '')}${this._statusTag(p)}</span></span>
      <span class="wd-store-row-arrow" aria-hidden="true">›</span>
    </button>`).join('');
    const list = this._storeLoading ? this._htmlStoreLoading()
      : (items.length ? `<div class="wd-store-rows">${rows}</div>` : this._storeBrowseErr ? this._htmlStoreUnreachable() : `<p class="wd-info">${this._t('store.no_programs', {}, 'No shared programs for this appliance yet.')}</p>`);
    // Adopt the whole device: import every program's reference cycles into this
    // device in one action (merge/upsert; your real cycles are never touched).
    const dev = this._storeDevice;
    const dlBusy = this._busy.has('store-download-device');
    const dlHeader = (this._canEdit() && dev && items.length) ? `<div class="wd-card" style="margin-bottom:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap">
      <span class="wd-info" style="flex:1;min-width:180px">${this._t('msg.store_download_device_intro', {}, 'Add every shared program and its reference cycles to your device. Your own cycles and stats are not affected.')}</span>
      ${_switchInline(`data-action="store-toggle-dl-settings" ${this._dlSettings ? 'checked' : ''} ${dlBusy ? 'disabled' : ''}`, this._t('lbl.adopt_settings', {}, 'Also adopt settings'), _tip(this._t('msg.adopt_settings_hint', {}, 'Overwrite this device\'s detection & matching thresholds with the shared ones. Your notifications, entities and energy price are never changed.')))}
      <button class="wd-btn wd-btn-primary wd-btn-sm" data-action="store-download-device" data-device-id="${_esc(dev.id)}" ${dlBusy ? 'disabled' : ''}>${dlBusy ? '<span class="wd-spin"></span> ' : '⬇ '}${this._t('btn.download_device', {}, 'Download this setup')}</button>
    </div>` : '';
    return dlHeader + list;
  }

  // Every value below comes from an untyped community-store document (audit
  // STORE-19): numbers go through the _fmt* helpers (never echo their input),
  // strings through _esc or a _t() var, which is escaped.
  _htmlStoreProfile() {
    const items = this._storeCycles || [];
    const rows = items.map(c => {
      const stats = (c.stats && typeof c.stats === 'object') ? c.stats : {};
      const spark = this._storeSparkline((c.trace && c.trace.points) || []);
      const dur = _fmtDuration(stats.duration);
      const energy = _fmtEnergy(stats.energy_wh != null ? Number(stats.energy_wh) / 1000 : null);
      const peak = _fmtPower(stats.peak_w);
      const uploader = (typeof c.uploaderName === 'string' && c.uploaderName) || this._tText('store.anon', {}, 'anonymous');
      const tag = this._statusTag(c);  // awaiting-approval / approved pill (cycles carry confirmCount)
      const rat = (c.rating && typeof c.rating === 'object') ? c.rating : {};
      const ratAvg = Number(rat.avg), ratN = _storeCount(rat.count);
      const rating = (rat.avg != null && isFinite(ratAvg) && ratN > 0)
        ? this._t('store.rating_summary', {avg: _fmtNum(ratAvg, 1), n: ratN}, '★ {avg} ({n})')
        : this._t('store.no_ratings', {}, 'No ratings yet');
      return `<div class="wd-card">
        <div class="wd-store-cycle-top">
          ${spark}
          <div class="wd-store-cycle-stats">
            <div><b>${dur}</b> · ${energy} · ${peak} ${tag}</div>
            <div class="wd-info">${this._t('store.uploaded_by', {name: uploader}, 'Shared by {name}')} · ⬇ ${_fmtNum(_storeCount(c.downloads), 0)} · ${rating}</div>
          </div>
          <button class="wd-btn wd-btn-primary wd-btn-sm" data-action="store-import" data-cycle-id="${_esc(c.id)}">${this._t('btn.import', {}, 'Import')}</button>
        </div>
      </div>`;
    }).join('');
    const list = this._storeLoading ? this._htmlStoreLoading()
      : (items.length ? rows : this._storeBrowseErr ? this._htmlStoreUnreachable() : `<p class="wd-info">${this._t('store.no_cycles', {}, 'No reference cycles shared for this program yet.')}</p>`);
    return `<div class="wd-store-list">${list}</div>`;
  }

  // Minimal inline SVG sparkline from a [[t, w], ...] trace (no canvas needed for
  // a static thumbnail). Scales time to width and power to height.
  _storeSparkline(points) {
    const pts = Array.isArray(points)
      ? points.filter(p => Array.isArray(p) && p.length >= 2).map(p => [Number(p[0]), Number(p[1])])
        .filter(p => isFinite(p[0]) && isFinite(p[1]))
      : [];
    if (pts.length < 2) return `<svg class="wd-store-spark" viewBox="0 0 120 36" preserveAspectRatio="none" aria-hidden="true"></svg>`;
    const ts = pts.map(p => p[0]);
    const ws = pts.map(p => p[1]);
    const tMin = Math.min(...ts), tMax = Math.max(...ts);
    const wMax = Math.max(1, ...ws);
    const W = 120, H = 36, pad = 2;
    const xs = t => pad + (tMax > tMin ? (t - tMin) / (tMax - tMin) : 0) * (W - 2 * pad);
    const ys = w => H - pad - (Math.max(0, w) / wMax) * (H - 2 * pad);
    const poly = pts.map(p => `${xs(p[0]).toFixed(1)},${ys(p[1]).toFixed(1)}`).join(' ');
    return `<svg class="wd-store-spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" aria-hidden="true"><polyline fill="none" stroke="var(--primary-color)" stroke-width="1.5" points="${poly}"/></svg>`;
  }

  // Header gear "Preferences" overlay: integration-wide (device-agnostic) sections.
  // Named apart from the per-device Settings tab (audit UI-25) so the two screens
  // are never confused.
  // My Preferences (per HA user) is always available; Panel Settings, Access
  // Control and Online & Community are admin-only. Sub-nav uses data-gtab so it
  // never collides with the main tab router (data-tab) or Advanced (data-ptab).
  _htmlGearModal(m) {
    const admin = this._isAdmin();
    const tabs = [['prefs', this._t('hdr.my_preferences', {}, 'My Preferences')]];
    if (admin) tabs.push(['panel', this._t('hdr.panel_settings', {}, 'Panel Settings')], ['access', this._t('hdr.access_control', {}, 'Access Control')]);
    if (admin && this._constants && this._constants.storeOnlineAvailable) tabs.push(['online', this._t('hdr.online_account_tab', {}, 'Online & Community')]);
    let tab = m.tab;
    if (!tabs.some(([id]) => id === tab)) tab = m.tab = 'prefs';
    const nav = tabs.map(([id, lbl]) => `<button class="wd-subtab ${tab === id ? 'active' : ''}" role="tab" aria-selected="${tab === id ? 'true' : 'false'}" data-gtab="${id}">${lbl}</button>`).join('');
    const body = tab === 'panel' && admin ? this._htmlPanelSettings()
      : tab === 'access' && admin ? this._htmlPanelAccess()
      : tab === 'online' && admin ? this._htmlOnlineSettings()
      : this._htmlPanelPrefs();
    return `<h2 id="wd-modal-title"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>${this._t('settings.gear.title', {}, 'Preferences')}<button class="wd-btn wd-btn-secondary wd-btn-sm" data-maction="cancel" aria-label="${_esc(this._t('btn.close', {}, 'Close'))}" style="margin-left:auto">✕</button></h2>
      <div class="wd-subtabs" role="tablist">${nav}</div>
      <div class="wd-gear-body">${body}</div>`;
  }

  // "Online & Community" pane (inside the gear). One integration-wide toggle +
  // one GitHub connection for the whole install. Appliance brand/model are NOT
  // here - they are per-device settings under Basic > Device info.
  _htmlOnlineSettings() {
    if (!(this._constants && this._constants.storeOnlineAvailable)) {
      return `<p class="wd-info">${this._t('msg.online_unavailable', {}, 'Online features are not available on this server.')}</p>`;
    }
    const on = this._onlineEnabled();
    const st = this._storeStatus || {};
    const connected = !!(on && st.connected);
    const busy = this._busy.has('store-account');
    const connBlock = !on ? '' : (connected
      ? `<div class="wd-store-conn">
          <span class="wd-info">${this._t('store.connected_as', {name: st.name || st.uid || ''}, 'Connected as {name}')}</span>
          <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="store-disconnect" ${busy ? 'disabled' : ''}>${this._t('btn.disconnect', {}, 'Disconnect')}</button>
        </div>`
      : `<div class="wd-store-conn">
          <span class="wd-info">${this._t('store.not_connected', {}, 'Not connected. Connect a GitHub account to confirm appliances and share your own cycles.')}</span>
          <button class="wd-btn wd-btn-primary wd-btn-sm" data-action="store-connect">${this._t('btn.connect_github', {}, 'Connect GitHub')}</button>
        </div>`);
    return `<div class="wd-card">
      <div class="wd-card-title">${this._t('hdr.online_account', {}, 'Community Store & online features')}</div>
      <p class="wd-info" style="margin-bottom:12px">${this._t('msg.online_intro_global', {}, 'Browse and share reference recordings with other WashData users. One connection covers all your WashData devices; brand and model are set per device under Basic. Online features are off until you turn them on.')}</p>
      ${_switchRow(`data-action="store-toggle-online" ${on ? 'checked' : ''} ${busy ? 'disabled' : ''}`, this._t('lbl.enable_online', {}, 'Enable online features'))}
      ${on ? this._htmlStorePrefs(busy) : ''}
      ${on ? connBlock : ''}
    </div>`;
  }

  // Declarative store-preference toggles (see _STORE_PREFS). Adding a setting is a
  // one-line list entry + a store_account default; no bespoke handler needed.
  _htmlStorePrefs(busy) {
    const prefs = (this._constants && this._constants.storePrefs) || {};
    const rows = _STORE_PREFS.map(p => {
      const v = prefs[p.key];
      const checked = v === undefined ? p.def !== false : v !== false;
      return _switchRow(`data-action="store-toggle-pref" data-pref="${_esc(p.key)}" ${checked ? 'checked' : ''} ${busy ? 'disabled' : ''}`, this._t(p.labelKey, {}, p.labelFb), _tip(this._t(p.docKey, {}, p.docFb)));
    }).join('');
    // The catalog is cached for an hour because every read is charged against a quota the
    // whole community shares. Your own contributions clear it immediately; this is the
    // escape hatch for someone else's (e.g. a brand you were told was just approved).
    const refreshing = this._busy.has('store-refresh-catalog');
    return rows + `
      <div class="wd-field" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px">
        <button type="button" class="wd-btn wd-btn-secondary wd-btn-sm" data-action="store-refresh-catalog" ${refreshing || busy ? 'disabled' : ''}>${refreshing ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.refresh_catalog', {}, 'Refresh catalog')}</button>
        <span class="wd-info" style="margin:0;flex:1;min-width:180px">${this._t('msg.refresh_catalog_hint', {}, 'Community brand and appliance lists are cached to save the store\'s daily budget. Refresh to see entries others added or approved.')}</span>
      </div>`;
  }

  // ── Community Store data ─────────────────────────────────────────────────────

  async _loadStoreStatus(eid) {
    if (!this._onlineEnabled()) { this._storeStatus = { enabled: false }; this._storeConnected = false; return; }
    try {
      const r = await this._ws({ type: `${_DOMAIN}/store_status`, entry_id: eid });
      if (!this._isActiveEntry(eid)) return;  // device switched mid-flight
      this._storeStatus = r || null;
      this._storeConnected = !!(r && r.connected);
    } catch (_) { /* leave prior status */ }
  }

  // The brand the browse list is scoped to: whatever the user typed, else the appliance
  // they declared. Browsing is deliberately brand-scoped -- an unscoped list of one
  // appliance type is ~140 catalog entries, and a washing machine has no use for
  // dishwashers. Scoping also lands on the SAME cache key the Settings model picker
  // uses, so opening one after the other costs nothing.
  _storeBrandScope() {
    return String(this._storeQuery || (this._opts || {}).store_brand || '').trim();
  }

  // Re-render without ejecting the user from the Store search box. Now that the box
  // searches as you type (#416) rather than on a button press, every render below
  // happens while the field can still be focused, and an innerHTML swap replaces the
  // input. Same save/restore as the Cycles and Settings filter fields.
  _renderKeepingStoreQFocus() {
    const sr = this.shadowRoot;
    const cur = sr && sr.getElementById('wd-store-q');
    const focused = !!cur && sr.activeElement === cur;
    const pos = focused ? cur.selectionStart : 0;
    this._render();
    if (!focused) return;
    const el = sr.getElementById('wd-store-q');
    if (!el) return;
    el.focus();
    try { el.setSelectionRange(pos, pos); } catch (_) { /* not a text input */ }
    // Refocusing runs the combobox's own focus handler, which reopens the suggestion
    // list. Right after a search that is noise covering the results the user just
    // asked for, so close it again; the next keystroke reopens it.
    const drop = el.parentElement && el.parentElement.querySelector('.wd-combo-drop');
    if (drop) drop.hidden = true;
  }

  // Open one catalog appliance (its shared programs). Shared by the browse rows and
  // by picking a model straight out of the search box, so both land in the same state.
  _storeOpenDevice(d) {
    const dev = this._devices[this._selIdx];
    if (!dev || !d) return;
    const eid = dev.entry_id;
    this._storeDevice = d; this._storeProfile = null; this._storeView = 'device';
    this._storeProfiles = []; this._storeCycles = []; this._storeLoading = true; this._storeBrowseErr = false; this._render();
    this._ws({ type: `${_DOMAIN}/store_get_profiles`, entry_id: eid, device_id: d.id })
      .then(r => { if (!this._isActiveEntry(eid) || this._storeView !== 'device') return; this._storeProfiles = (r && r.items) || []; this._storeBrowseErr = !!(r && r.error); })
      .catch(() => { if (this._isActiveEntry(eid)) { this._storeProfiles = []; this._storeBrowseErr = true; } })
      .finally(() => { if (this._isActiveEntry(eid)) { this._storeLoading = false; this._render(); } });
  }

  // A model picked out of the search box. Scope the browse to that appliance's brand
  // first so the list behind it (and Back) is consistent, then open it.
  async _storeOpenModel(d) {
    if (!d) return;
    await this._storeSearch(String(d.brand || ''));
    const row = (this._storeDevices || []).find(x => String(x.id) === String(d.id)) || d;
    this._storeOpenDevice(row);
  }

  async _storeSearch(query) {
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    const eid = dev.entry_id;
    this._storeQuery = query || '';
    this._storeView = 'brands'; this._storeDevice = null; this._storeProfile = null;
    this._storeProfiles = []; this._storeCycles = [];
    const brand = this._storeBrandScope();
    // Nothing to scope to yet: show the "tell us what you own" state rather than spend a
    // read on a list the user cannot act on (see _htmlStoreBrands).
    if (!brand) { this._storeDevices = []; this._storeLoading = false; this._renderKeepingStoreQFocus(); return; }
    this._storeLoading = true; this._renderKeepingStoreQFocus();
    try {
      const r = await this._ws({
        type: `${_DOMAIN}/store_search_devices`, entry_id: eid,
        query: brand, appliance_type: this._storeApplianceType(),
        // Pending entries are 93% of the catalog and are publicly readable (shown with
        // an "awaiting approval" tag), so approved-only made this tab show 15 of 564
        // devices -- about 6 per appliance type.
        include_pending: true,
      });
      if (!this._isActiveEntry(eid)) return;
      if (r && r.disabled) { this._storeStatus = { enabled: false }; this._storeDevices = []; }
      else this._storeDevices = this._sortStoreDevices((r && r.items) || []);
    } catch (e) {
      if (this._isActiveEntry(eid)) { this._storeDevices = []; this._showToast(this._tText('toast.store_search_failed', {error: e.message || e}, 'Search failed: ' + (e.message || e)), 'error'); }
    } finally {
      if (this._isActiveEntry(eid)) { this._storeLoading = false; this._renderKeepingStoreQFocus(); }
    }
  }

  // Own model first, then entries that carry shared programs, then the rest (each group
  // keeping the server's favourite-count order). The user's exact model has nothing
  // shared about 70% of the time, so the sibling models have to be visible -- but their
  // own machine still has to be easy to find in a 44-row list.
  _sortStoreDevices(items) {
    const mine = String((this._opts || {}).store_model || '').trim().toLowerCase();
    const rank = (d) => {
      if (mine && String(d.model || '').toLowerCase() === mine) return 0;
      return this._storeItemHasContent(d) ? 1 : 2;
    };
    return items
      .map((d, i) => ({ d, i }))
      .sort((a, b) => (rank(a.d) - rank(b.d)) || (a.i - b.i))
      .map((x) => x.d);
  }

  // True only when a positive count says so. These counters are contributor-maintained
  // and under-report where an increment was denied, so absent/zero means "unknown", not
  // "empty" -- the UI must never tell a user an entry is empty on a stale zero.
  _storeItemHasContent(d) {
    return (Number(d && d.profileCount) || 0) > 0 || (Number(d && d.cycleCount) || 0) > 0;
  }

  // Attach the GitHub-connect popup message listener exactly once. The popup
  // (served from the store web origin) posts {type:'washdata-connect', ...}; we
  // validate the origin strictly against the configured store web origin.
  _ensureStoreConnectListener() {
    if (this._storeConnectListener) return;
    const origin = this._constants.storeWebOrigin;
    if (!origin) return;
    let expectedOrigin;
    try { expectedOrigin = new URL(origin).origin; } catch (_) { return; }
    this._storeConnectListener = async (e) => {
      if (e.origin !== expectedOrigin) return;
      const d = e.data;
      if (!d) return;
      const dev = this._devices[this._selIdx];
      if (!dev) return;
      const eid = dev.entry_id;
      // A brand/device just created on the contribute page: preselect it + refresh.
      // #447: the selection is PERSISTED, not just reflected locally. The popup runs on
      // the store's own origin and knows nothing about this config entry, so without a
      // set_options here the integration never learned the appliance the user had just
      // contributed - the panel showed it, the backend had nothing, and sharing failed
      // with no_appliance_declared.
      if (d.type === 'washdata-device-created') {
        const patch = {};
        if (d.brand) patch.store_brand = d.brand;
        if (d.model) patch.store_model = d.model;
        this._catalog.brands = undefined; this._catalog.devices = undefined; this._catalog.forBrand = null;
        this._catalog.brandsFull = false; this._catalog.brandPrefixes = [];
        this._dropModelCandidates();
        this._catalogEntry = null;
        // Persist only if the device that OPENED the popup is still selected.
        // The popup is user-paced, so the selection can move while it is open,
        // and _saveStoreOptions targets whatever is selected NOW - which would
        // stamp this appliance identity onto another entry and reload it, while
        // the device that asked for it gets nothing. Before these became real
        // saves the wrong-device case could not persist anything.
        const _contribEid = this._storeContribEid || eid;
        const _hasPatch = Object.keys(patch).length > 0;
        const _sameDevice = this._isActiveEntry(_contribEid);
        // Say which happened. The success toast alone claimed the appliance had
        // been applied here, when the guard had just declined to write it and
        // nothing told the user to pick it by hand. One toast, not two: the
        // toast slot is single and a second call replaces the first.
        this._showToast(
          _hasPatch && !_sameDevice
            ? this._t('toast.contrib_device_changed', {}, 'Added to the community store, but the device changed while the form was open. Select it in Settings.')
            : this._t('toast.appliance_added', {}, 'Appliance added - awaiting approval')
        );
        if (_hasPatch && _sameDevice) {
          await this._saveStoreOptions(patch, { silent: true });
        }
        this._render();
        return;
      }
      if (d.type === 'washdata-brand-created') {
        this._catalog.brands = undefined;  // reload the brand catalog so it is pickable
        this._catalog.brandsFull = false; this._catalog.brandPrefixes = [];
        this._dropModelCandidates();
        this._catalogEntry = null;         // and re-resolve the badge for the new brand
        // Same entry guard, and the same reporting, as washdata-device-created above.
        const _brandSame = this._isActiveEntry(this._storeContribEid || eid);
        this._showToast(
          d.brand && !_brandSame
            ? this._t('toast.contrib_device_changed', {}, 'Added to the community store, but the device changed while the form was open. Select it in Settings.')
            : this._t('toast.brand_added', {}, 'Brand added - awaiting approval')
        );
        if (d.brand && _brandSame) {
          // Clear the model for the same reason as the brand picker above: a
          // brand the user just created cannot own the model saved under the
          // previous one, and this path persists rather than staging.
          await this._saveStoreOptions(
            { store_brand: d.brand, store_model: '' }, { silent: true }
          );
        }
        this._render();
        return;
      }
      if (d.type === 'washdata-profile-created') {
        // If the Share dialog is open, preselect the new profile + refresh its list.
        const m = this._modal;
        if (m && m.type === 'store-share') {
          m.program = d.program || m.program;
          this._loadShareProfiles();
        }
        this._showToast(this._t('toast.profile_added', {}, 'Profile added - awaiting approval'));
        return;
      }
      if (d.type !== 'washdata-connect') return;
      try {
        const r = await this._ws({ type: `${_DOMAIN}/store_connect`, entry_id: eid, refresh_token: d.refreshToken, uid: d.uid, name: d.displayName });
        if (r && r.error) { this._showToast(this._tText('toast.store_connect_failed', {error: r.error}, 'Connect failed: ' + r.error), 'error'); return; }
        await this._loadStoreStatus(eid);
        if (!this._isActiveEntry(eid)) return;
        this._showToast(this._t('toast.store_connected', {}, 'Connected to the community store'));
        this._render();
      } catch (err) {
        this._showToast(this._tText('toast.store_connect_failed', {error: err.message || err}, 'Connect failed: ' + (err.message || err)), 'error');
      }
    };
    window.addEventListener('message', this._storeConnectListener);
  }

  // Persist a partial set of device options via the shared set_options command
  // (same path the Settings tab uses). Merges the patch into this._opts locally.
  // `silent` suppresses the success toast for callers that already showed their own
  // (the store contribute popup), but never the failure one.
  async _saveStoreOptions(patch, { silent = false } = {}) {
    const dev = this._devices[this._selIdx];
    if (!dev) return false;
    const eid = dev.entry_id;
    try {
      await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: eid, options: patch });
      // The save landed on `eid`, but every write below is device-scoped state
      // for whatever device is selected NOW. Switching device during the await
      // would fold this patch into the new device's `_opts` - which is the
      // SAVED-options baseline (#447), so `_changedOptions` would then drop
      // those keys and a later save would never send them. Same entry guard the
      // other post-await writers use.
      if (!this._isActiveEntry(eid)) return true;
      this._opts = { ...this._opts, ...patch };
      // The value is saved now, so a stale pending copy must not shadow it on the
      // next render of the Settings form.
      for (const k of Object.keys(patch)) {
        delete this._pendingSettings[k];
        this._dirtyOptKeys.delete(k);
      }
      if (!silent) this._showToast(this._t('toast.settings_saved', {}, 'Settings saved; integration reloading'));
      return true;
    } catch (e) {
      this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error');
      return false;
    }
  }

  // ── Log drawer (slide-in side panel) ────────────────────────────────────────

  _htmlLogDrawer() {
    return `<div class="wd-log-drawer open" style="width:${this._logDrawerWidth}px">
      <div class="wd-log-resize" title="${_esc(this._t('lbl.drag_to_resize', {}, 'Drag to resize'))}"></div>
      <div class="wd-log-drawer-head">
        <span>${this._t('hdr.logs', {}, 'Logs')}</span>
        <div style="display:flex;align-items:center;gap:6px">
          <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="logs-export" style="padding:3px 8px">${this._t('btn.export', {}, 'Export')}</button>
          <button class="wd-log-close-btn" data-action="toggle-log-drawer" title="${_esc(this._t('btn.close', {}, 'Close'))}">✕</button>
        </div>
      </div>
      <div class="wd-log-drawer-body">
        <div class="wd-logbar" style="flex-wrap:wrap;margin-bottom:6px">${this._htmlLogFilters('drawer')}</div>
        <p class="wd-info" style="margin:0 0 8px;font-size:.78em">${this._t('msg.log_buffer_hint', {}, 'Newest first · buffers the last 500 ha_washdata records since restart · drag the left edge to resize.')}</p>
        <div class="wd-logs" id="wd-log-lines-drawer" style="max-height:none;resize:none">${this._logLinesHtml()}</div>
      </div>
    </div>`;
  }

  // ── Canvas drawing ──────────────────────────────────────────────────────────

  // Shared multi-series curve renderer. Returns the canvas hit-test map.
  // Supports scroll-to-zoom (viewport stored in this._canvasZoom[canvasId]).
  _drawCurves(canvasId, opts) {
    const canvas = this.shadowRoot && this.shadowRoot.getElementById(canvasId);
    if (!canvas) return null;
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    const cw = Math.max(1, Math.round(rect.width * dpr));
    const ch = Math.max(1, Math.round((rect.height || 240) * dpr));
    // Only reallocate the canvas backing store when dimensions actually changed;
    // reassigning canvas.width/height unconditionally clears the canvas AND triggers
    // a GPU-side realloc on every hover redraw.
    if (canvas.width !== cw || canvas.height !== ch) { canvas.width = cw; canvas.height = ch; }
    const ctx = canvas.getContext('2d');
    const cs = getComputedStyle(this);
    const primary = (cs.getPropertyValue('--primary-color') || '#03a9f4').trim() || '#03a9f4';
    const grid = (cs.getPropertyValue('--divider-color') || 'rgba(127,127,127,.3)').trim() || 'rgba(127,127,127,.3)';
    const txt = (cs.getPropertyValue('--secondary-text-color') || '#888').trim() || '#888';
    const padL = 44 * dpr, padR = 12 * dpr, padT = 12 * dpr, padB = 22 * dpr;
    const series = opts.series || [];
    let xMax = opts.xMax || 0;
    if (!xMax) { series.forEach(s => (s.points || []).forEach(p => { if (p[0] > xMax) xMax = p[0]; })); if (opts.band) (opts.band.max || []).forEach(p => { if (p[0] > xMax) xMax = p[0]; }); }
    xMax = xMax || 1;
    // Zoom viewport (absent key = full view). `opts.xStart` is the data's left edge
    // when it is not 0: the cycle chart draws the recorder's history before the
    // cycle at negative offsets (item 513). Every other chart starts at 0.
    const xStart = Math.min(0, Number(opts.xStart) || 0);
    const zoom = this._canvasZoom && this._canvasZoom[canvasId];
    const xMin = zoom ? zoom.xMin : xStart;
    const xViewMax = zoom ? zoom.xMax : xMax;

    // Scale y to the VISIBLE window, not the whole trace - this is HA's
    // "boundaryFilter" behaviour. Without it, zooming into a low-power tail
    // leaves the curve pinned flat along the bottom of the plot at a y scale
    // set by a peak that is no longer on screen, which is exactly the case a
    // phone user zooms in to inspect. One sample either side of the window is
    // included so a line entering/leaving the view does not clip to nothing.
    let yMax = opts.yMax || 0;
    if (!yMax) {
      const scan = a => {
        const pts = a || [];
        for (let i = 0; i < pts.length; i++) {
          const t = pts[i][0];
          if (t < xMin && !(i + 1 < pts.length && pts[i + 1][0] >= xMin)) continue;
          if (t > xViewMax && !(i > 0 && pts[i - 1][0] <= xViewMax)) continue;
          if (pts[i][1] > yMax) yMax = pts[i][1];
        }
      };
      series.forEach(s => { if (!s.noScale) scan(s.points); });
      if (opts.band) scan(opts.band.max);
      yMax = (yMax || 10) * 1.08;
    }

    const plotW = cw - padL - padR;
    const X = x => padL + ((x - xMin) / (xViewMax - xMin)) * plotW;
    const Y = y => ch - padB - (y / yMax) * (ch - padT - padB);

    ctx.clearRect(0, 0, cw, ch);
    ctx.strokeStyle = grid; ctx.lineWidth = dpr; ctx.fillStyle = txt; ctx.font = `${11 * dpr}px sans-serif`; ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
    for (let i = 0; i <= 2; i++) {
      const yy = padT + (i / 2) * (ch - padT - padB);
      ctx.beginPath(); ctx.moveTo(padL, yy); ctx.lineTo(cw - padR, yy); ctx.stroke();
      ctx.fillText(_fmtAxisW(yMax * (1 - i / 2), yMax / 2), padL - 4 * dpr, yy);
    }

    // Clip series/bands to the plot area so zoomed data doesn't bleed into margins.
    ctx.save();
    ctx.beginPath(); ctx.rect(padL, padT, plotW, ch - padT);
    ctx.clip();

    (opts.bands || []).forEach(b => { ctx.fillStyle = b.fill; const xa = X(b.x0), xb = X(b.x1); ctx.fillRect(Math.min(xa, xb), padT, Math.abs(xb - xa), ch - padT - padB); });
    if (opts.band && (opts.band.min || []).length && (opts.band.max || []).length) {
      ctx.beginPath();
      opts.band.max.forEach((p, i) => i ? ctx.lineTo(X(p[0]), Y(p[1])) : ctx.moveTo(X(p[0]), Y(p[1])));
      for (let i = opts.band.min.length - 1; i >= 0; i--) ctx.lineTo(X(opts.band.min[i][0]), Y(opts.band.min[i][1]));
      ctx.closePath(); ctx.fillStyle = opts.band.fill || _withAlpha(primary, 0.13); ctx.fill();
    }
    series.forEach(s => {
      const pts = s.points || []; if (!pts.length) return;
      const col = s.stroke === 'primary' ? primary : s.stroke;
      if (s.fill) {
        ctx.beginPath(); pts.forEach((p, i) => i ? ctx.lineTo(X(p[0]), Y(p[1])) : ctx.moveTo(X(p[0]), Y(p[1])));
        ctx.lineTo(X(pts[pts.length - 1][0]), Y(0)); ctx.lineTo(X(pts[0][0]), Y(0)); ctx.closePath();
        const g = ctx.createLinearGradient(0, padT, 0, ch - padB); g.addColorStop(0, _withAlpha(col, 0.33)); g.addColorStop(1, _withAlpha(col, 0.03)); ctx.fillStyle = g; ctx.fill();
      }
      // A null power breaks the line instead of bridging it (the cycle context's
      // unavailable rows, item 513); a series without one draws exactly as before.
      ctx.beginPath();
      let pen = false;
      pts.forEach(p => {
        if (p[1] == null) { pen = false; return; }
        if (pen) ctx.lineTo(X(p[0]), Y(p[1])); else { ctx.moveTo(X(p[0]), Y(p[1])); pen = true; }
      });
      ctx.strokeStyle = col; ctx.lineWidth = (s.width || 1.5) * dpr; ctx.lineJoin = 'round';
      if (s.dash) ctx.setLineDash([6 * dpr, 4 * dpr]);
      ctx.globalAlpha = s.alpha != null ? s.alpha : 1; ctx.stroke(); ctx.globalAlpha = 1;
      if (s.dash) ctx.setLineDash([]);
    });
    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
    (opts.vlines || []).forEach(v => {
      const x = X(v.x); ctx.beginPath(); ctx.moveTo(x, padT); ctx.lineTo(x, ch - padB);
      ctx.strokeStyle = v.color; ctx.lineWidth = 2 * dpr; ctx.setLineDash([4 * dpr, 3 * dpr]); ctx.stroke(); ctx.setLineDash([]);
      if (v.handle) { ctx.fillStyle = v.color; ctx.beginPath(); ctx.arc(x, padT + 4 * dpr, 4.5 * dpr, 0, Math.PI * 2); ctx.fill(); }
      if (v.label) { ctx.fillStyle = v.color; ctx.fillText(v.label, x, padT + (v.handle ? 12 * dpr : 2 * dpr)); }
    });
    ctx.restore();

    // Axis time labels. When zoomed: show viewport start on the left edge too.
    ctx.fillStyle = txt; ctx.font = `${11 * dpr}px sans-serif`; ctx.textBaseline = 'bottom';
    if (zoom || xStart < 0) {
      ctx.textAlign = 'left';
      ctx.fillText((xMin / 60).toFixed(zoom ? 1 : 0) + ' min', padL, ch - 2 * dpr);
    }
    ctx.textAlign = 'right';
    ctx.fillText((xViewMax / 60).toFixed(0) + ' min', cw - padR, ch - 2 * dpr);

    canvas._wd = {
      xMax, xMin, xViewMax, yMax, dpr, padT, padB, padL, ch, primary, xStart,
      // [start, end] of the cycle on this axis when context is drawn around it, so
      // the readout can say "before start" / "after end" there (item 513).
      cycleSpan: opts.cycleSpan || null,
      // CSS-px width of the plot area; the pinch/pan math needs it to turn a
      // finger travel distance into seconds at the current scale.
      plotWcss: plotW / dpr,
      Xpx: X, Ypx: Y,
      xToCss: x => X(x) / dpr,
      cssToX: px => Math.max(xMin, Math.min(xViewMax, xMin + ((px * dpr - padL) / plotW) * (xViewMax - xMin))),
      series: (opts.series || []).map(s => ({ points: s.points, stroke: s.stroke, name: s.name, cid: s.cid, bounded: s.bounded, aside: s.aside, kind: s.kind })),
      band: opts.band || null,
      artifacts: opts.artifacts || null,
      _opts: opts,
    };
    return canvas._wd;
  }

  _drawModalCanvas() {
    const m = this._modal;
    if (!m) return;
    if (m.type === 'cycle-detail') this._drawCycleEditor();
    else if (m.type === 'compare-cycles') this._drawCompareCanvas();
    else if (m.type === 'profile-group') this._drawGroupCanvas();
    else if (m.type === 'profile-panel') {
      if (m.tab === 'stats') this._drawProfileEnvelope();
      else if (m.tab === 'phases') this._drawPhaseEditor();
      else if (m.tab === 'cleanup') this._drawSpaghetti();
    }
  }

  // Re-run the base draw for a canvas (used by hover to repaint before crosshair).
  _redrawCanvas(id) {
    if (id === 'wd-status-canvas') this._drawStatusCurve();
    else if (id === 'wd-cyc-canvas') this._drawCycleEditor();
    else if (id === 'wd-compare-canvas') this._drawCompareCanvas();
    else if (id === 'wd-env-canvas') this._drawProfileEnvelope();
    else if (id === 'wd-phase-canvas') this._drawPhaseEditor();
    else if (id === 'wd-spag-canvas') this._drawSpaghetti();
    else if (id === 'wd-pgroup-canvas') this._drawGroupCanvas();
    else {
      // Generic fallback: replay _drawCurves with the stored opts so hover
      // crosshairs on any other canvas don't accumulate stale traces.
      const canvas = this.shadowRoot && this.shadowRoot.getElementById(id);
      if (canvas && canvas._wd && canvas._wd._opts) this._drawCurves(id, canvas._wd._opts);
    }
  }

  _pref(key, def) {
    const p = (this._panelCfg && this._panelCfg.prefs) || {};
    return p[key] === undefined ? def : p[key];
  }

  // Persist a single user preference (optimistic local update + server save).
  // Mirrors the data-statustoggle path so callers can flip a pref and re-render.
  _setPref(key, val) {
    if (!this._panelCfg) this._panelCfg = {};
    this._panelCfg.prefs = { ...(this._panelCfg.prefs || {}), [key]: val };
    this._ws({ type: `${_DOMAIN}/set_user_prefs`, prefs: { [key]: val } }).catch(() => {});
  }

  _drawStatusCurve() {
    const pd = this._powerData || {};
    const live = pd.live || [];
    if (live.length < 2) return;
    const env = this._statusEnv;
    const showExpected = this._pref('show_expected', true);
    const showRaw = this._pref('show_raw_active', false);
    const series = [];
    let xMax = live[live.length - 1][0];
    // Expected (matched) curve, full length, faint orange - drawn behind.
    if (pd.cycle_active && env && (env.avg || []).length && showExpected) {
      const target = env.target_duration || env.avg[env.avg.length - 1][0];
      series.push({ points: env.avg, stroke: '#ff9800', width: 2, alpha: 0.4, name: this._t('lbl.expected', {}, 'Expected') });
      xMax = Math.max(xMax, target);
    }
    // Processed live trace (primary, filled).
    series.push({ points: live, stroke: 'primary', fill: true, width: 2, name: this._t('lbl.power', {}, 'Power') });
    // Raw unthrottled socket readings (thin grey, on top). noScale so its spikes
    // don't inflate the y-axis and squash the real curve.
    if (showRaw && (pd.raw || []).length > 1) {
      series.push({ points: pd.raw, stroke: '#9e9e9e', width: 1, alpha: 0.65, name: this._t('lbl.raw_socket', {}, 'Raw socket'), noScale: true });
    }
    // Shade any HA restart gaps that occurred during this live cycle.
    const bands = [];
    (pd.restart_gaps || []).forEach(g => {
      if (!live.length) return;
      // Gaps are stored with ISO timestamps; convert to seconds-from-cycle-start.
      // live[0][0] is always 0 (cycle start); we need the absolute start.
      // Use the cycle_start_iso from powerData if available, else skip shading.
      const cycleStartIso = pd.cycle_start_iso;
      if (!cycleStartIso) return;
      const base = new Date(cycleStartIso).getTime();
      const x0 = Math.max(0, (new Date(g.start_ts).getTime() - base) / 1000);
      const x1 = Math.max(x0 + 1, (new Date(g.end_ts).getTime() - base) / 1000);
      bands.push({ x0, x1, fill: 'rgba(96,125,139,.20)' });
    });
    this._drawCurves('wd-status-canvas', { series, xMax, bands });
  }

  // ── Graph gestures (crosshair readout, zoom, pan) ───────────────────────────
  //
  // One gesture layer for every .wd-canvas-wrap chart. The split below is not
  // arbitrary: it is the only assignment that lets the browser keep enough of a
  // touch gesture to scroll the page (issue #413) while every chart feature we
  // already ship keeps the exact input it already owned.
  //
  //   1 finger, vertical    -> page scrolls (the browser claims it, see pan-y)
  //   1 finger, horizontal  -> scrub the readout, or drag a trim / phase handle
  //   2 fingers, pinch      -> zoom the x axis about the pinch centre
  //   2 fingers, drag       -> pan the x axis
  //   double tap / dblclick -> zoom in at the point, or reset if already zoomed
  //   tap (touch)           -> pin the readout so it survives lifting the finger
  //   wheel / ctrl+wheel    -> zoom about the cursor
  //
  // Two fingers pan where Home Assistant's own charts pan with one: HA can
  // afford that because its charts have no draggable handles, whereas ours do
  // (trim bounds in _wireCycleCanvas, phase edges in _wirePhaseCanvas) and
  // those own the one-finger horizontal drag.
  _attachGraphGestures(id) {
    const sr = this.shadowRoot;
    const canvas = sr && sr.getElementById(id);
    if (!canvas) return;
    // innerHTML replaced the element, so the reset button and its zoomed-state
    // class have to be re-created / re-synced on every render.
    this._syncZoomReset(id);
    this._attachTouchOwnershipGuard(canvas);

    const pts = new Map();     // pointerId -> {x, y} for every finger on this canvas
    let pinch = null;          // {dist, centerCss} baseline, refreshed each frame

    const relX = clientX => clientX - canvas.getBoundingClientRect().left;

    canvas.addEventListener('pointerdown', e => {
      pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
      if (pts.size === 1) {
        // A fresh touch dismisses a pinned readout; the scrub below re-shows it.
        if (e.pointerType === 'touch') this._unpinGraphTip();
        // HA draws a draggable axis-pointer handle so a finger does not have to
        // sit on the curve to read it. Claiming it here (a) keeps the drag ours
        // through the touch guard even if the finger drifts vertically, and
        // (b) is what makes the handle worth drawing at all.
        if (e.pointerType === 'touch' && this._onAxisHandle(canvas, id, e)) {
          canvas._wdOwnGesture = true;
          try { canvas.setPointerCapture(e.pointerId); } catch (_) {}
        }
        return;
      }
      if (pts.size !== 2) return;
      // Second finger: this is a pinch/pan. Let whichever edit handler claimed
      // the first finger back out, or it would drag its handle to wherever the
      // pinch centre happens to travel.
      canvas._wdPinching = true;
      canvas._wdOwnGesture = false;
      if (canvas._wdAbortEdit) canvas._wdAbortEdit();
      this._hideGraphTip();
      const [a, b] = [...pts.values()];
      pinch = { dist: Math.max(1, Math.abs(a.x - b.x)), centerCss: relX((a.x + b.x) / 2) };
    });

    canvas.addEventListener('pointermove', e => {
      if (pts.has(e.pointerId)) pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
      if (canvas._wdPinching) {
        if (pinch && pts.size >= 2) this._onGraphPinch(canvas, id, pts, pinch, relX);
        return;
      }
      this._onGraphHover(e, id);
    });

    const release = e => {
      pts.delete(e.pointerId);
      if (pts.size < 2) { pinch = null; canvas._wdPinching = false; }
      if (pts.size === 0) canvas._wdOwnGesture = false;
    };
    canvas.addEventListener('pointerup', e => {
      const wasPinching = canvas._wdPinching;
      release(e);
      // On touch the pointer is destroyed at lift, which fires pointerleave
      // immediately - the readout used to vanish before it could be read. Pin
      // it instead; the next tap (here or elsewhere) dismisses it.
      if (e.pointerType === 'touch' && !wasPinching) this._pinGraphTip();
    });
    canvas.addEventListener('pointercancel', e => {
      // The browser took the gesture to scroll the page. The user is navigating,
      // not inspecting, so drop the readout rather than leaving it stranded.
      release(e);
      this._hideGraphTip();
    });
    canvas.addEventListener('pointerleave', e => {
      if (e.pointerType === 'touch') return;   // handled by pointerup / -cancel
      this._hideGraphTip();
    });

    canvas.addEventListener('wheel', e => {
      const wd = canvas._wd;
      if (!wd) return;
      e.preventDefault();
      // ctrlKey is how a trackpad pinch arrives. Scale proportionally there so
      // the gesture feels continuous; a discrete wheel notch keeps its step.
      const factor = e.ctrlKey
        ? Math.min(4, Math.max(0.25, Math.exp(e.deltaY * 0.01)))
        : (e.deltaY > 0 ? 1.3 : 0.75);
      this._zoomCanvasAbout(id, wd.cssToX(relX(e.clientX)), factor);
    }, { passive: false });

    canvas.addEventListener('dblclick', e => {
      const wd = canvas._wd;
      if (!wd) return;
      if (this._canvasZoom[id]) { this._resetCanvasZoom(id); this._hideGraphTip(); return; }
      this._zoomCanvasAbout(id, wd.cssToX(relX(e.clientX)), _CANVAS_DBLTAP_ZOOM);
    });
  }

  // pan-y hands the browser any vertical swipe, which is exactly what restores
  // page scrolling. Two gestures have to survive that anyway: a pinch, and a
  // drag the chart explicitly claimed (axis handle, trim/phase handle,
  // playground threshold line). Cancelling the FIRST touchmove of such a
  // gesture is what stops the scroll from ever starting - once the browser has
  // committed to it we only get pointercancel, and preventDefault is too late.
  _attachTouchOwnershipGuard(canvas) {
    if (canvas._wdTouchGuard) return;
    canvas._wdTouchGuard = true;
    canvas.addEventListener('touchmove', e => {
      if (e.touches.length >= 2 || canvas._wdOwnGesture) e.preventDefault();
    }, { passive: false });
  }

  // Is this touch on the axis-pointer handle drawn by _onGraphHoverInner?
  _onAxisHandle(canvas, id, e) {
    const hx = this._gAxisHandle ? this._gAxisHandle[id] : null;
    const wd = canvas._wd;
    if (hx == null || !wd) return false;
    const rect = canvas.getBoundingClientRect();
    const axisY = (wd.ch - wd.padB) / wd.dpr;
    return Math.abs((e.clientX - rect.left) - hx) <= _AXIS_HANDLE_GRAB
      && Math.abs((e.clientY - rect.top) - axisY) <= _AXIS_HANDLE_GRAB;
  }

  // One pinch frame: pan by however far the two-finger centre travelled, then
  // scale about it. Both fold into a single viewport write so the canvas is
  // repainted once per frame instead of twice.
  _onGraphPinch(canvas, id, pts, pinch, relX) {
    const wd = canvas._wd;
    if (!wd) return;
    const [a, b] = [...pts.values()];
    const dist = Math.max(1, Math.abs(a.x - b.x));
    const centerCss = relX((a.x + b.x) / 2);
    // Two fingers fire pointermove twice per frame, so the repaint is
    // rAF-coalesced. The math must then run against the PENDING viewport, not
    // the painted one: reading this._canvasZoom here would re-apply every
    // in-flight delta to a stale window and the gesture would visibly lag and
    // undershoot (measured: a 90px two-finger drag moved the view ~8x too far
    // in the wrong direction).
    const pend = this._gPinchPending && this._gPinchPending.id === id ? this._gPinchPending : null;
    const cur = pend ? { xMin: pend.lo, xMax: pend.hi } : this._canvasZoom[id];
    const lo = cur ? cur.xMin : (wd.xStart || 0);
    const range = (cur ? cur.xMax : (wd.xMax || 1)) - lo;
    const plotW = Math.max(1, wd.plotWcss);
    const frac = Math.max(0, Math.min(1, centerCss / plotW));
    const tCenter = lo + frac * range;
    const newRange = range * (pinch.dist / dist);
    const newLo = tCenter - frac * newRange - ((centerCss - pinch.centerCss) / plotW) * newRange;
    pinch.dist = dist;
    pinch.centerCss = centerCss;
    this._gPinchPending = { id, lo: newLo, hi: newLo + newRange };
    if (this._gPinchRaf) return;
    this._gPinchRaf = requestAnimationFrame(() => {
      this._gPinchRaf = null;
      const p = this._gPinchPending;
      this._gPinchPending = null;
      if (p) this._setCanvasViewport(p.id, p.lo, p.hi);
    });
  }

  // ── Canvas zoom viewport ────────────────────────────────────────────────────

  // Single writer for this._canvasZoom: clamps the window, drops the key when
  // the view is effectively whole (so "unzoomed" stays one representable state),
  // repaints once and syncs the reset button.
  _setCanvasViewport(id, xMin, xMax) {
    const canvas = this.shadowRoot && this.shadowRoot.getElementById(id);
    const wd = canvas && canvas._wd;
    if (!wd) return;
    // The data's left edge is 0 except where a chart draws before it (xStart < 0,
    // the cycle chart's recorder lead-in, item 513); `full` is the whole span.
    const x0 = wd.xStart || 0;
    const full = (wd.xMax || 1) - x0;
    const minRange = Math.min(full, Math.max(full / _CANVAS_MAX_ZOOM, _CANVAS_MIN_VIEW_S));
    const range = Math.min(full, Math.max(minRange, xMax - xMin));
    if (range >= full * 0.99) { this._resetCanvasZoom(id); return; }
    const lo = Math.max(x0, Math.min(x0 + full - range, xMin));
    const prev = this._canvasZoom[id];
    if (prev && Math.abs(prev.xMin - lo) < 1e-6 && Math.abs(prev.xMax - lo - range) < 1e-6) return;
    this._canvasZoom[id] = { xMin: lo, xMax: lo + range };
    this._redrawCanvas(id);
    this._syncZoomReset(id);
  }

  // factor < 1 zooms in. focusXt (seconds) stays put under the cursor / pinch centre.
  _zoomCanvasAbout(id, focusXt, factor) {
    const canvas = this.shadowRoot && this.shadowRoot.getElementById(id);
    const wd = canvas && canvas._wd;
    if (!wd) return;
    const full = wd.xMax || 1;
    const cur = this._canvasZoom[id];
    const lo = cur ? cur.xMin : (wd.xStart || 0);
    const range = Math.max(1e-6, (cur ? cur.xMax : full) - lo);
    const frac = Math.max(0, Math.min(1, (focusXt - lo) / range));
    const newRange = range * factor;
    this._setCanvasViewport(id, focusXt - frac * newRange, focusXt + (1 - frac) * newRange);
  }

  _resetCanvasZoom(id) {
    if (!this._canvasZoom[id]) { this._syncZoomReset(id); return; }
    delete this._canvasZoom[id];
    this._redrawCanvas(id);
    this._syncZoomReset(id);
  }

  // Mirrors HA's mdiRestart chart button: created lazily beside the canvas and
  // shown only while that canvas actually has a zoom viewport. Double-tap-to-
  // reset alone was undiscoverable, since the only hint lived inside the
  // tooltip, which you could not see until you were already zoomed.
  _ensureZoomReset(id, canvas) {
    const wrap = canvas.parentElement;
    if (!wrap) return null;
    let btn = wrap.querySelector('.wd-zoom-reset');
    if (!btn) {
      btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'wd-zoom-reset';
      btn.textContent = '↻';
      btn.addEventListener('click', ev => { ev.stopPropagation(); this._resetCanvasZoom(id); });
      wrap.appendChild(btn);
    }
    // Re-label on every sync, not just at creation: the panel can render before
    // _loadPanelTranslations resolves, and a label captured then would stay
    // English for the life of that element.
    const lbl = this._t('btn.reset_zoom', {}, 'Reset zoom');
    if (btn.title !== lbl) { btn.title = lbl; btn.setAttribute('aria-label', lbl); }
    return btn;
  }

  _syncZoomReset(id) {
    const canvas = this.shadowRoot && this.shadowRoot.getElementById(id);
    if (!canvas) return;
    const btn = this._ensureZoomReset(id, canvas);
    if (btn) btn.classList.toggle('wd-zoom-reset--on', !!this._canvasZoom[id]);
  }

  _onGraphHover(e, id) {
    // rAF-coalesce: many pointermove events fire per frame; only do one redraw+overlay
    // per animation frame. Capture coordinates immediately (they may be stale by rAF).
    const px = e.clientX, py = e.clientY;
    const touch = e.pointerType === 'touch';
    if (this._hoverRafId) { this._hoverPending = { px, py, id, touch }; return; }
    this._hoverPending = { px, py, id, touch };
    this._hoverRafId = requestAnimationFrame(() => {
      this._hoverRafId = null;
      const { px: cx, py: cy, id: cid, touch: ct } = this._hoverPending || {};
      if (!cid) return;
      this._onGraphHoverInner(cx, cy, cid, { touch: ct });
    });
  }
  _onGraphHoverInner(px, py, id, opts = {}) {
    const canvas = this.shadowRoot && this.shadowRoot.getElementById(id);
    const wd = canvas && canvas._wd;
    if (!wd) return;
    const rect = canvas.getBoundingClientRect();
    const x = wd.cssToX(px - rect.left);
    const cursorYdev = (py - rect.top) * wd.dpr;
    this._redrawCanvas(id);
    const ctx = canvas.getContext('2d');
    const xp = wd.Xpx(x);
    ctx.save();
    ctx.strokeStyle = 'rgba(140,140,140,.75)';
    ctx.lineWidth = wd.dpr;
    ctx.setLineDash([3 * wd.dpr, 3 * wd.dpr]);
    ctx.beginPath(); ctx.moveTo(xp, wd.padT); ctx.lineTo(xp, wd.ch - wd.padB); ctx.stroke();
    ctx.setLineDash([]);
    const colOf = s => (s.stroke === 'primary' ? wd.primary : s.stroke);
    const dot = (v, col) => { ctx.fillStyle = col; ctx.beginPath(); ctx.arc(xp, wd.Ypx(v), 3.4 * wd.dpr, 0, 6.2832); ctx.fill(); };
    // Outside the cycle (the recorder context around it, item 513) the readout
    // says how far before the start / after the end the cursor is instead.
    const span = wd.cycleSpan;
    const lines = span && x < span[0]
      ? [`${this._t('lbl.before_start', {}, 'Before start')}: <b>${_fmtClock(span[0] - x)}</b>`]
      : span && x > span[1]
        ? [`${this._t('lbl.after_end', {}, 'After end')}: <b>${_fmtClock(x - span[1])}</b>`]
        : [`${this._t('lbl.from_start', {}, 'From start')}: <b>${_fmtClock(x)}</b>`, `${this._t('lbl.to_end', {}, 'To end')}: <b>${_fmtClock(Math.max(0, (span ? span[1] : wd.xMax) - x))}</b>`];
    const series = wd.series || [];
    // A bounded series has no value outside its own points (or in a gap), rather
    // than the clamped first/last one.
    const valOf = s => (s.bounded ? _valueInRun(s.points, x) : _valueAt(s.points, x));
    this._hoverNearest = null;
    // `aside` series (the cycle context) do not count towards the many-curves mode.
    if (series.filter(s => !s.aside).length > 4) {
      // Many curves (cleanup): highlight only the one under the cursor so the
      // user can identify exactly which cycle to act on.
      let best = null, bestD = Infinity;
      series.forEach(s => { const v = valOf(s); if (v == null) return; const d = Math.abs(wd.Ypx(v) - cursorYdev); if (d < bestD) { bestD = d; best = { s, v }; } });
      if (best) {
        const col = colOf(best.s);
        ctx.strokeStyle = col; ctx.lineWidth = 3 * wd.dpr; ctx.beginPath();
        (best.s.points || []).forEach((p, i) => i ? ctx.lineTo(wd.Xpx(p[0]), wd.Ypx(p[1])) : ctx.moveTo(wd.Xpx(p[0]), wd.Ypx(p[1]))); ctx.stroke();
        dot(best.v, col);
        lines.push(`${_esc(best.s.name || '')}: <b>${_fmtNum(best.v, best.v < 100 ? 1 : 0)} W</b>`);
        if (best.s.cid) { lines.push(`<span style="opacity:.7">${this._t('lbl.click_to_select', {}, 'click to select')}</span>`); this._hoverNearest = { id, cid: best.s.cid }; }
      }
    } else {
      series.forEach(s => { const v = valOf(s); if (v == null) return; dot(v, colOf(s)); lines.push(`${_esc(s.name || this._t('lbl.power', {}, 'Power'))}: <b>${_fmtNum(v, v < 100 ? 1 : 0)} W</b>`); });
    }
    if (wd.band) {
      const lo = _valueAt(wd.band.min, x), hi = _valueAt(wd.band.max, x);
      if (lo != null && hi != null) lines.push(`${this._t('lbl.envelope', {}, 'Envelope')}: ${_fmtNum(lo, lo < 100 ? 1 : 0)}–${_fmtNum(hi, hi < 100 ? 1 : 0)} W`);
    }
    // Anomaly detail when hovering inside a detected artifact span.
    (wd.artifacts || []).forEach(a => {
      if (x >= a.start_s && x <= a.end_s) {
        const detail = a.detail_key ? this._tText(a.detail_key, a.detail_params || {}, a.detail || '') : (a.detail || '');
        lines.push(`<span style="color:var(--warning-color,#ff9800)">⚠ ${_esc(_artifactLabel(a.type, (k, v, f) => this._t(k, v, f)))}</span>: ${_esc(detail)}`);
      }
    });
    // Gesture hint. On touch it shows unconditionally, because pinch-to-zoom is
    // undiscoverable otherwise; with a mouse it only appears once zoomed, which
    // is the pre-existing behaviour.
    const zoomed = !!this._canvasZoom[id];
    let hint = null;
    if (opts.touch) {
      hint = zoomed
        ? this._t('lbl.zoom_hint_touch_zoomed', {}, 'pinch to zoom · double-tap to reset')
        : this._t('lbl.zoom_hint_touch', {}, 'pinch to zoom');
    } else if (zoomed) {
      hint = this._t('lbl.zoom_hint', {}, 'scroll to zoom · dblclick to reset');
    }
    if (hint) lines.push(`<span style="opacity:.45">${_esc(hint)}</span>`);
    // Axis-pointer handle (HA draws the same thing on touch): a grab target
    // sitting ON the time axis, so scrubbing does not require keeping a finger
    // over the very samples being read. _onAxisHandle hit-tests against this.
    if (opts.touch) {
      const hy = wd.ch - wd.padB;
      ctx.beginPath(); ctx.arc(xp, hy, _AXIS_HANDLE_GRAB * 0.41 * wd.dpr, 0, 6.2832);
      ctx.fillStyle = wd.primary; ctx.fill();
      ctx.strokeStyle = 'rgba(255,255,255,.92)'; ctx.lineWidth = 1.6 * wd.dpr; ctx.stroke();
      if (!this._gAxisHandle) this._gAxisHandle = {};
      this._gAxisHandle[id] = wd.xToCss(x);
    } else if (this._gAxisHandle) {
      delete this._gAxisHandle[id];
    }
    ctx.restore();
    this._showGraphTip(px, py, lines, { touch: opts.touch, rect });
    this._syncSpagRowHighlight(this._hoverNearest ? this._hoverNearest.cid : null);
  }

  _showGraphTip(cx, cy, lines, opts = {}) {
    const tip = this._gtip;
    if (!tip) return;
    this._gtipLines = lines;
    tip.innerHTML = lines.join('<br>');
    tip.classList.remove('wd-gtip--pinned');
    this._gtipPinned = false;
    tip.style.display = 'block';
    const w = tip.offsetWidth, h = tip.offsetHeight, off = 16;
    let left, top;
    if (opts.touch && opts.rect) {
      // A fingertip is ~45px wide, so the mouse rule (cursor + 16px) put the
      // readout squarely underneath it - measured at exactly 16px down-right of
      // the touch point, i.e. permanently hidden. Park it OUTSIDE the plot
      // instead: on a phone the chart is only ~200px tall, so a five-line
      // readout docked inside it would cover both the finger and the curve.
      // Above the chart is preferred, below is the fallback, and only if
      // neither fits does it dock inside at the end furthest from the finger.
      const r = opts.rect;
      const gap = 8;
      if (r.top - h - gap >= 6) top = r.top - h - gap;
      else if (r.bottom + gap + h <= window.innerHeight - 6) top = r.bottom + gap;
      else top = cy > r.top + r.height * 0.5 ? r.top + 6 : r.bottom - h - 6;
      left = cx - w / 2;
    } else {
      left = cx + off;
      top = cy + off;
      if (top + h > window.innerHeight - 6) top = cy - h - off;
      if (left + w > window.innerWidth - 6) left = cx - w - off;
    }
    tip.style.left = Math.max(6, Math.min(left, window.innerWidth - w - 6)) + 'px';
    tip.style.top = Math.max(6, Math.min(top, window.innerHeight - h - 6)) + 'px';
  }

  // Touch destroys the pointer at lift, which fires pointerleave straight away;
  // the readout used to disappear in the same instant it became readable. Keep
  // it up and say so, rather than requiring the user to hold a finger down and
  // read around it.
  _pinGraphTip() {
    const tip = this._gtip;
    if (!tip || tip.style.display === 'none' || this._gtipPinned) return;
    this._gtipPinned = true;
    tip.classList.add('wd-gtip--pinned');
    const hint = this._t('lbl.tap_to_dismiss', {}, 'tap the chart to dismiss');
    tip.innerHTML = (this._gtipLines || []).join('<br>')
      + `<span class="wd-gtip-dismiss">${_esc(hint)}</span>`;
  }

  // A tap on a chart is handled by that chart's own pointerdown (it dismisses
  // and then re-scrubs). A tap anywhere else just dismisses.
  _maybeDismissGraphTip(e) {
    if (!this._gtipPinned) return;
    const t = e.target;
    if (t && t.closest && t.closest('.wd-canvas-wrap')) return;
    this._unpinGraphTip();
  }

  _unpinGraphTip() {
    if (!this._gtipPinned) return;
    this._gtipPinned = false;
    if (this._gtip) {
      this._gtip.classList.remove('wd-gtip--pinned');
      this._gtip.style.display = 'none';
    }
  }

  _hideGraphTip() {
    if (this._hoverRafId) { cancelAnimationFrame(this._hoverRafId); this._hoverRafId = null; this._hoverPending = null; }
    this._gtipPinned = false;
    if (this._gtip) { this._gtip.classList.remove('wd-gtip--pinned'); this._gtip.style.display = 'none'; }
    this._syncSpagRowHighlight(null);
  }

  // #385: keep an "i" help popover inside whatever clips it. The CSS centres the
  // bubble on its 15px anchor (`left:50%` + `translateX(-50%)`), so an anchor near
  // a container edge (every label in the cycle modal's Review tab) pushed half
  // of it outside the modal, where the overflow cut the text off mid-word. Nudge
  // it back along the x axis on hover, keeping the centred position preferred.
  _positionTip(anchor) {
    const pop = anchor.querySelector('.wd-tip-pop');
    if (!pop) return;
    // Always measure from the unshifted position so repeat hovers can't stack up.
    pop.style.transform = '';
    // On the first hover the :hover rule may not have been applied yet, so lay
    // the bubble out invisibly just to measure it.
    const hidden = !pop.offsetWidth;
    const prev = hidden ? pop.style.cssText : '';
    if (hidden) { pop.style.visibility = 'hidden'; pop.style.display = 'block'; }
    const r = pop.getBoundingClientRect();
    if (hidden) pop.style.cssText = prev;
    if (!r.width) return;
    const clip = _clipRectFor(anchor);
    const gap = 6;                                   // breathing room at the edge
    const min = clip.left + gap;
    const max = clip.right - gap - r.width;
    const left = max < min ? min : Math.min(Math.max(r.left, min), max);
    const shift = Math.round(left - r.left);
    if (shift) pop.style.transform = `translateX(calc(-50% + ${shift}px))`;
  }

  // Keep a combobox dropdown inside whatever actually clips it. The list is
  // anchored to an input that can sit anywhere in the .wd-main scroller, so a
  // fixed 220px panel opening downwards gets cut in half near the bottom - and
  // the cut-off part is unreachable, because scrolling to it moves the anchor and
  // closes the list. Opens on whichever side has more room and never asks for
  // more height than that side has; the list scrolls internally beyond that.
  _positionComboDrop(inp, drop) {
    const r = inp.getBoundingClientRect();
    if (!r.height) return;
    const clip = _clipRectFor(inp);
    const gap = 8;                                   // breathing room at the edge
    const below = clip.bottom - r.bottom - gap;
    const above = r.top - clip.top - gap;
    const up = below < 120 && above > below;         // only flip when it actually helps
    const room = Math.max(64, Math.floor(up ? above : below));
    drop.classList.toggle('wd-drop-up', up);
    drop.style.maxHeight = `${Math.min(220, room)}px`;
  }

  _syncSpagRowHighlight(cid) {
    if (cid === this._spagHoverCid) return;
    this._spagHoverCid = cid;
    const sr = this.shadowRoot;
    if (!sr) return;
    sr.querySelectorAll('tr[data-cid]').forEach(row => {
      row.style.backgroundColor = (cid && row.dataset.cid === cid) ? 'var(--secondary-background-color,rgba(0,0,0,.06))' : '';
    });
  }

  // ── Toast ────────────────────────────────────────────────────────────────

  _showToast(msg, type = 'success', opts = {}) {
    if (this._toastTimer) clearTimeout(this._toastTimer);
    const duration = opts.duration || 3500;
    this._toast = { msg, cls: `wd-toast-${type}`, actionLabel: opts.actionLabel || null, actionToken: opts.actionToken || null };
    this._render();
    this._toastTimer = setTimeout(() => { this._toast = null; this._render(); }, duration);
  }

  // ── Modals ────────────────────────────────────────────────────────────────

  // The bulk auto-label modal opens on the device's own Auto-Label Confidence,
  // clamped to the input's 0.5-0.95 range, not a fixed 0.75 below the 0.9 default
  // (audit UI-10). The Cycles tab does not load options, so they are read here;
  // `_opts` is the saved-settings baseline and is left alone (#447).
  async _openAutoLabelModal(eid) {
    let v = this._opts ? this._opts.auto_label_confidence : undefined;
    if (v == null && eid) {
      try {
        const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid });
        if (!this._isActiveEntry(eid)) return;
        v = (r && r.options || {}).auto_label_confidence;
      } catch (_) { /* fall back to the schema default */ }
    }
    if (v == null) v = (_FIELD_BY_KEY.auto_label_confidence || {}).def;
    const n = Number(v);
    const threshold = Number.isFinite(n) ? +Math.min(0.95, Math.max(0.5, n)).toFixed(2) : 0.9;
    this._modal = { type: 'auto-label', threshold };
    this._render();
  }

  // The finished auto-label task as a toast with its counts (audit UI-10); the
  // bare completion line when no result came back.
  _autoLabelToast(snap) {
    const r = snap && snap.result;
    if (!r || typeof r.labeled !== 'number') return this._tText('msg.toast_auto_label_complete', {}, 'Auto-label complete');
    if (snap.state === 'cancelled') {
      return this._tText('toast.auto_label_cancelled', {count: r.labeled}, 'Auto-label cancelled after labelling {count} cycles.');
    }
    return this._tText('toast.auto_label_done', {count: r.labeled, skipped: r.skipped || 0}, 'Auto-label complete: {count} cycles labelled, {skipped} left unlabelled.');
  }

  _profileOptions(selected) {
    return (this._profiles || []).map(p =>
      `<option value="${_esc(p.name)}" ${String(selected) === String(p.name) ? 'selected' : ''}>${_esc(p.name)}</option>`
    ).join('');
  }

  _htmlModal() {
    const m = this._modal;
    if (m.type === 'cycle-detail') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlCycleModal(m)}</div></div>`;
    if (m.type === 'profile-panel') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlProfilePanel(m)}</div></div>`;
    if (m.type === 'profile-group') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlProfileGroupModal(m)}</div></div>`;
    if (m.type === 'compare-cycles') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlCompareModal(m)}</div></div>`;
    if (m.type === 'gear-settings') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlGearModal(m)}</div></div>`;
    if (m.type === 'export-select') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlExportSelectModal(m)}</div></div>`;
    if (m.type === 'import-wizard') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlImportWizardModal(m)}</div></div>`;
    if (m.type === 'history-import') return `<div class="wd-overlay"><div class="wd-modal wd-modal-lg" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${this._htmlHistoryImportModal(m)}</div></div>`;

    let body = '';
    if (m.type === 'confirm') {
      // `items`: optional [{text, sub}] rows listed under the message (Apply-all preview).
      const items = (m.items || []).map(i => `<li>${_esc(i.text)}${i.sub ? `<div class="wd-sug-impact-line">${_esc(i.sub)}</div>` : ''}</li>`).join('');
      body = `<h2>${_esc(m.title)}</h2><p class="wd-info">${_esc(m.message)}</p>${items ? `<ul class="wd-confirm-list">${items}</ul>` : ''}
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn ${m.okPrimary ? 'wd-btn-primary' : 'wd-btn-danger'}" data-maction="ok">${_esc(m.okLabel || this._t('btn.confirm', {}, 'Confirm'))}</button></div>`;
    } else if (m.type === 'label-cycle') {
      body = `<h2>${this._t('modal.label_cycle', {}, 'Label Cycle')}</h2>
        <div class="wd-field"><label>${this._t('lbl.select_profile', {}, 'Select Profile')}</label>
          <select id="wd-label-profile"><option value="">${this._t('lbl.remove_label', {}, '- Remove label -')}</option><option value="__create_new__">${this._t('lbl.create_new_profile', {}, '+ Create new profile…')}</option>${this._profileOptions()}</select></div>
        <div id="wd-new-profile-row" class="wd-field" style="display:none"><label>${this._t('lbl.new_profile_name', {}, 'New Profile Name')}</label><input type="text" id="wd-new-profile-name" placeholder="${_esc(this._t('placeholder.profile_name', {}, 'e.g. Cotton 40°C'))}"></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="label-ok">${this._t('btn.apply_label', {}, 'Apply Label')}</button></div>`;
    } else if (m.type === 'create-profile') {
      const listed = (this._cycles || []).slice(0, 40);
      let cycleOpts = listed.map(c =>
        `<option value="${_esc(c.id)}" ${m.prefillCycle === c.id ? 'selected' : ''}>${_fmtDate(c.start_time)} - ${Math.round((c.duration || 0) / 60)}m - ${_esc(c.profile_name || this._t('lbl.unlabelled', {}, 'Unlabelled'))}</option>`).join('');
      // A coverage-gap cycle may sit outside the loaded list (the Profiles tab does
      // not load cycles): offer it anyway so the pre-selection holds.
      if (m.prefillCycle && !listed.some(c => c.id === m.prefillCycle)) {
        cycleOpts = `<option value="${_esc(m.prefillCycle)}" selected>${_esc(m.prefillCycleMin ? m.prefillCycleMin + 'm' : '')} - ${_esc(this._t('lbl.unlabelled', {}, 'Unlabelled'))}</option>` + cycleOpts;
      }
      body = `<h2>${this._t('modal.create_profile', {}, 'Create Profile')}</h2>
        <div class="wd-field"><label>${this._t('lbl.profile_name', {}, 'Profile Name')}</label><input type="text" id="wd-cp-name" placeholder="${_esc(this._t('placeholder.profile_name', {}, 'e.g. Cotton 40°C'))}" value="${_esc(m.prefillName || '')}"></div>
        <div class="wd-field"><label>${this._t('lbl.ref_cycle', {}, 'Reference Cycle (optional)')}</label><select id="wd-cp-cycle"><option value="">${this._t('lbl.ref_cycle_none', {}, 'None')}</option>${cycleOpts}</select></div>
        <div class="wd-field"><label>${this._t('lbl.manual_duration', {}, 'Manual Duration (min, optional)')}</label><input type="number" id="wd-cp-dur" min="0" max="600" value="0"><div class="wd-field-hint" id="wd-cp-dur-hint">${this._t('msg.manual_duration_ref_hint', {}, 'Only used without a reference cycle; a reference cycle sets the duration from its own length.')}</div></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="create-profile-ok">${this._t('btn.create', {}, 'Create')}</button></div>`;
    } else if (m.type === 'create-phase') {
      body = `<h2>${this._t('modal.new_phase', {}, 'New Phase')}</h2>
        <div class="wd-field"><label>${this._t('lbl.phase_name', {}, 'Phase Name')}</label><input type="text" id="wd-ph-name" placeholder="${_esc(this._t('placeholder.phase_name', {}, 'e.g. Pre-wash'))}"></div>
        <div class="wd-field"><label>${this._t('lbl.description', {}, 'Description')}</label><textarea id="wd-ph-desc" rows="3"></textarea></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="create-phase-ok">${this._t('btn.create', {}, 'Create')}</button></div>`;
    } else if (m.type === 'edit-phase') {
      const builtinNote = m.isDefault ? `<p class="wd-info" style="margin:0 0 12px">${this._t('msg.edit_builtin_phase', {}, 'This is a built-in phase. Saving creates a custom copy; delete the copy to restore the original.')}</p>` : '';
      body = `<h2>${this._t('modal.edit_phase', {}, 'Edit Phase')} ${m.isDefault ? `<span class="wd-tag">${this._t('badge.built_in_tag', {}, 'built-in')}</span>` : ''}</h2>
        ${builtinNote}
        <div class="wd-field"><label>${this._t('lbl.phase_name', {}, 'Phase Name')}</label><input type="text" id="wd-eph-name" value="${_esc(m.phaseName)}"></div>
        <div class="wd-field"><label>${this._t('lbl.description', {}, 'Description')}</label><textarea id="wd-eph-desc" rows="3">${_esc(m.phaseDesc)}</textarea></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="edit-phase-ok">${this._t('btn.save', {}, 'Save')}</button></div>`;
    } else if (m.type === 'process-recording') {
      body = `<h2>${this._t('modal.process_recording', {}, 'Process Recording')}</h2>
        <div class="wd-field"><label>${this._t('lbl.save_mode', {}, 'Save Mode')}</label><select id="wd-pr-mode"><option value="new_profile">${this._t('lbl.mode_new_profile', {}, 'Create New Profile')}</option><option value="existing_profile">${this._t('lbl.mode_existing_profile', {}, 'Add to Existing Profile')}</option></select></div>
        <div class="wd-field"><label>${this._t('lbl.profile_name', {}, 'Profile Name')}</label><input type="text" id="wd-pr-profile" placeholder="${_esc(this._t('placeholder.profile_name', {}, 'e.g. Cotton 40°C'))}">
          <div id="wd-pr-existing" style="display:none;margin-top:4px"><select id="wd-pr-profile-sel">${this._profileOptions()}</select></div></div>
        <div class="wd-field"><label>${this._t('lbl.head_trim', {}, 'Head Trim (s)')}</label><input type="number" id="wd-pr-head" min="0" value="0" step="1"><div class="wd-field-hint">${_esc(this._t('msg.head_trim_hint', {}, 'Remove this many seconds from the start'))}</div></div>
        <div class="wd-field"><label>${this._t('lbl.tail_trim', {}, 'Tail Trim (s)')}</label><input type="number" id="wd-pr-tail" min="0" value="0" step="1"><div class="wd-field-hint">${_esc(this._t('msg.tail_trim_hint', {}, 'Remove this many seconds from the end'))}</div></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="process-rec-ok">${this._t('btn.process_recording', {}, 'Save Recording')}</button></div>`;
    } else if (m.type === 'correct-feedback') {
      body = `<h2>${this._t('modal.correct_feedback', {}, 'Correct Feedback')}</h2>
        <p class="wd-info">${this._t('msg.feedback_detected', {name: _html(`<strong>${_esc(m.detectedProfile)}</strong>`)}, 'WashData detected: {name}')}</p>
        <div class="wd-field"><label>${this._t('lbl.correct_profile', {}, 'Correct Profile')}</label><select id="wd-fb-profile">${this._profileOptions()}</select></div>
        <div class="wd-field"><label>${this._t('lbl.correct_duration', {}, 'Correct Duration (min, optional)')}</label><input type="number" id="wd-fb-dur" min="0" value=""></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="correct-fb-ok">${this._t('btn.submit_correction', {}, 'Submit Correction')}</button></div>`;
    } else if (m.type === 'auto-label') {
      body = `<h2>${this._t('modal.auto_label', {}, 'Auto-Label Cycles')}</h2>
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.auto_label_intro', {}, 'Assign profiles to unlabelled cycles whose match confidence clears the threshold.')}</p>
        <div class="wd-field"><label>${this._t('lbl.confidence_threshold', {}, 'Confidence threshold')}</label><input type="number" id="wd-al-thr" value="${_esc(String(m.threshold != null ? m.threshold : 0.9))}" min="0.5" max="0.95" step="0.01"></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="auto-run">${this._t('btn.run_auto_label', {}, 'Run Auto-Label')}</button></div>`;
    } else if (m.type === 'merge-cycles') {
      body = `<h2>${this._t('modal.merge_cycles', {n: m.ids.length}, `Merge ${m.ids.length} Cycles`)}</h2>
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.merge_intro', {}, 'The selected cycles are combined into one (chronological order; gaps filled with 0 W). Pick the resulting profile.')}</p>
        <div class="wd-field"><label>${this._t('lbl.resulting_profile', {}, 'Resulting profile')}</label>
          <select id="wd-merge-prof"><option value="">${this._t('lbl.unlabelled_paren', {}, '(unlabelled)')}</option><option value="__create_new__">${this._t('lbl.create_new_profile', {}, '+ Create new profile…')}</option>${this._profileOptions()}</select></div>
        <div id="wd-merge-new" class="wd-field" style="display:none"><label>${this._t('lbl.new_profile_name', {}, 'New profile name')}</label><input type="text" id="wd-merge-newname" placeholder="${_esc(this._t('placeholder.profile_name', {}, 'e.g. Cotton 40°C'))}"></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="merge-ok">${this._t('btn.merge', {}, 'Merge')}</button></div>`;
    } else if (m.type === 'bulk-relabel') {
      // D6: reuses the same profile picker as the single-cycle label modal.
      body = `<h2>${this._t('modal.relabel_cycles', {count: m.ids.length}, `Relabel ${m.ids.length} cycles`)}</h2>
        <div class="wd-field"><label>${this._t('lbl.select_profile', {}, 'Select Profile')}</label>
          <select id="wd-relabel-profile"><option value="">${this._t('lbl.remove_label', {}, '- Remove label -')}</option>${this._profileOptions()}</select></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="bulk-relabel-ok">${this._t('btn.apply_label', {}, 'Apply Label')}</button></div>`;
    } else if (m.type === 'store-import') {
      // Choice: create a new local profile named after the store program, or
      // merge the imported reference cycle into an existing local profile.
      const newActive = m.mode !== 'merge';
      const targetSel = `<select id="wd-store-import-target"><option value="">${this._t('lbl.select_profile', {}, 'Select Profile')}</option>${this._profileOptions()}</select>`;
      body = `<h2>${this._t('modal.store_import', {}, 'Import reference cycle')}</h2>
        <div class="wd-mode-bar">
          <button class="wd-btn wd-btn-sm ${newActive ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="store-import-mode-new">${this._t('store.import_new', {}, 'New profile')}</button>
          <button class="wd-btn wd-btn-sm ${!newActive ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="store-import-mode-merge">${this._t('store.import_merge', {}, 'Merge into existing')}</button>
        </div>
        ${newActive
          ? `<div class="wd-field"><label>${this._t('lbl.new_profile_name', {}, 'New Profile Name')}</label><input type="text" id="wd-store-import-name" value="${_esc(m.program || '')}"></div>`
          : `<div class="wd-field"><label>${this._t('store.merge_target', {}, 'Merge into profile')}</label>${targetSel}</div>`}
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel" ${this._busy.has('store-import') ? 'disabled' : ''}>${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="store-import-ok" ${this._busy.has('store-import') ? 'disabled' : ''}>${this._busy.has('store-import') ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.import', {}, 'Import')}</button></div>`;
    } else if (m.type === 'store-share') {
      // Profile picker: a dropdown of the appliance's existing profiles + a "+" to
      // add a new one on the site. Falls back to the cycle's own label as an option.
      const profiles = Array.isArray(m.profiles) ? m.profiles : [];
      const names = [];
      const seen = new Set();
      const add = (n) => { const k = (n || '').toLowerCase(); if (n && !seen.has(k)) { seen.add(k); names.push(n); } };
      add(m.program);
      profiles.forEach(p => add(p.program));
      const loading = m.profiles == null ? ` <span class="wd-info" style="font-size:.85em">${this._t('msg.loading', {}, 'Loading…')}</span>` : '';
      const opts = names.length
        ? names.map(n => `<option value="${_esc(n)}" ${n === m.program ? 'selected' : ''}>${_esc(n)}</option>`).join('')
        : (m.storeUnreachable ? '<option value=""></option>'
          : `<option value="">${this._t('msg.no_profiles_option', {}, '(no profiles yet - add one)')}</option>`);
      body = `<h2>${this._t('modal.store_share', {}, 'Share to community store')}</h2>
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.store_share_intro', {}, 'Upload this reference cycle so others with the same appliance can use it. It is reviewed before appearing publicly.')}</p>
        ${m.storeUnreachable ? this._htmlStoreUnreachable() : ''}
        <div class="wd-field"><label>${this._t('lbl.profile', {}, 'Profile')}${loading}</label>
          <div class="wd-combo-row">
            <select id="wd-store-share-prog">${opts}</select>
            <button type="button" class="wd-addbtn" data-action="store-share-add-profile" title="${_esc(this._t('tip.add_profile', {}, 'Add a profile for this appliance on the community site'))}">+</button>
          </div></div>
        <div class="wd-field"><label>${this._t('store.description', {}, 'Description (optional)')}</label><textarea id="wd-store-share-desc" rows="2"></textarea></div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel" ${this._busy.has('store-share') ? 'disabled' : ''}>${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="store-share-ok" ${this._busy.has('store-share') ? 'disabled' : ''}>${this._busy.has('store-share') ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.share', {}, 'Share')}</button></div>`;
    } else if (m.type === 'store-share-device') {
      body = this._htmlShareDeviceModal(m);
    }
    return `<div class="wd-overlay"><div class="wd-modal" role="dialog" aria-modal="true" aria-labelledby="wd-modal-title" tabindex="-1">${body}</div></div>`;
  }

  // Share-device selection tree: pick which programs + reference cycles to upload
  // as one device bundle. Selection is model-driven (m.selected is the source of
  // truth) so the tree survives re-renders. Only golden/recorded real cycles are
  // offered (they are the templates worth sharing); imported cycles are excluded.
  _htmlShareDeviceModal(m) {
    const groups = this._shareableByProgram();
    const busy = this._busy.has('store-share-device');
    const sel = m.selected || new Set();
    const consented = !!m.consented;
    const selCount = groups.reduce((n, g) => n + g.cycles.filter(c => sel.has(c.id)).length, 0);
    const hasShareableGroups = groups.some(g => !g.noCycles);
    let tree;
    if (m.loading) {
      tree = `<div class="wd-empty" style="padding:24px"><div class="wd-icon">⏳</div>${this._t('msg.loading', {}, 'Loading…')}</div>`;
    } else if (!groups.length) {
      tree = `<div class="wd-empty" style="padding:24px"><div class="wd-icon">📤</div>${this._t('msg.share_device_none', {}, 'No shareable cycles yet. Mark a recorded or hand-picked cycle as a reference cycle (⭐) in the Cycles tab first.')}</div>`;
    } else {
      tree = groups.map(g => {
        if (g.noCycles) {
          return `<div class="wd-sd-group wd-sd-group-nocyc">
            <div class="wd-sd-prof wd-sd-prof-disabled">
              <span class="wd-sd-prof-name">${_esc(g.program)}</span>
              <span class="wd-sd-nocyc-note">${this._t('msg.share_profile_no_cycles', {}, 'No reference cycles – mark a cycle as ⭐ in the Cycles tab to include this profile')}</span>
            </div>
          </div>`;
        }
        const all = g.cycles.every(c => sel.has(c.id));
        const some = !all && g.cycles.some(c => sel.has(c.id));
        const rows = g.cycles.map(c => {
          const when = c.start_time ? _fmtDate(c.start_time) : '';
          const dur = c.duration != null ? _fmtDuration(c.duration) : '';
          return `<label class="wd-sd-cyc">
            <input type="checkbox" data-maction="sd-toggle-cyc" data-cid="${_esc(c.id)}" ${sel.has(c.id) ? 'checked' : ''} ${busy ? 'disabled' : ''}>
            <span class="wd-sd-cyc-meta">${_esc(when)} · ${_esc(dur)} ⭐</span>
          </label>`;
        }).join('');
        // Phase toggle: only for programs that carry a local phase map. Bundled by
        // default; travels with (at least one of) the program's selected cycles.
        const hasPhases = (this._sharePhasePrograms || []).includes(g.program);
        const phaseRow = hasPhases ? `<label class="wd-sd-phase">
            <input type="checkbox" data-maction="sd-toggle-phases" data-prog="${_esc(g.program)}" ${(m.includePhases && m.includePhases.has(g.program)) ? 'checked' : ''} ${busy ? 'disabled' : ''}>
            <span>${this._t('lbl.include_phase_map', {}, 'Include phase map')}</span>
          </label>` : '';
        return `<div class="wd-sd-group">
          <label class="wd-sd-prof">
            <input type="checkbox" data-maction="sd-toggle-prof" data-prog="${_esc(g.program)}" ${all ? 'checked' : ''} ${some ? 'data-indeterminate="1"' : ''} ${busy ? 'disabled' : ''}>
            <span class="wd-sd-prof-name">${_esc(g.program)}</span>
            <span class="wd-sd-count">${g.cycles.filter(c => sel.has(c.id)).length}/${g.cycles.length}</span>
          </label>
          <div class="wd-sd-cycles">${rows}</div>
          ${phaseRow}
        </div>`;
      }).join('');
    }
    const brand = (this._opts.store_brand || '').trim();
    const model = (this._opts.store_model || '').trim();
    // Device-level opt-in: bundle this device's recognition/matching settings.
    const settingsRow = `<label class="wd-sd-settings">
        <input type="checkbox" data-maction="sd-toggle-settings" ${m.includeSettings ? 'checked' : ''} ${busy ? 'disabled' : ''}>
        <span>${this._t('lbl.include_settings', {}, 'Include detection & matching settings')}</span>
        ${_tip(this._t('msg.include_settings_hint', {}, 'Share this device\'s detection and matching thresholds (not notifications, entities or energy price). Others choose whether to apply them.'))}
      </label>`;
    const guideBlock = `<details class="wd-share-guide" ${m.guideOpen ? 'open' : ''}>
      <summary data-maction="sd-toggle-guide">${this._t('msg.share_guidelines_title', {}, 'Before you share')}</summary>
      <ul class="wd-share-guide-list">
        <li>${this._t('msg.share_guideline_naming', {}, "Name each profile exactly as shown on the appliance dial or display (e.g. 'Cotton 40', 'Eco 60').")}</li>
        <li>${this._t('msg.share_guideline_quality', {}, 'Only share cycles that finished normally: no interruptions, door openings or power blips.')}</li>
        <li>${this._t('msg.share_guideline_review', {}, 'Your upload starts as pending and appears publicly once enough community members confirm it.')}</li>
      </ul>
    </details>`;
    const consentRow = hasShareableGroups ? `<label class="wd-sd-consent">
      <input type="checkbox" data-maction="sd-toggle-consent" ${consented ? 'checked' : ''} ${busy ? 'disabled' : ''}>
      <span>${this._t('lbl.share_consent', {}, 'I confirm these cycles ran to normal completion without interruption')}</span>
    </label>` : '';
    return `<h2 id="wd-modal-title">${this._t('modal.store_share_device', {}, 'Share this device')}</h2>
      <p class="wd-info" style="margin-bottom:12px">${this._t('msg.store_share_device_intro', {brand, model}, `Upload {brand} {model} with the reference cycles you select. Others with the same appliance can adopt your programs. Entries are reviewed before appearing publicly.`)}</p>
      ${guideBlock}
      <div class="wd-sd-tree">${tree}</div>
      ${hasShareableGroups ? settingsRow : ''}
      ${consentRow}
      <div class="wd-modal-actions">
        <button class="wd-btn wd-btn-secondary" data-maction="cancel" ${busy ? 'disabled' : ''}>${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="store-share-device-ok" ${busy || !selCount || !consented ? 'disabled' : ''}>${busy ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.share_n', {n: selCount}, `Share ${selCount} cycle(s)`)}</button>
      </div>`;
  }

  // ── Selective export/import wizard ──────────────────────────────────────────
  // Fixed display order for the category tree (mirrors _EXPORT_CATEGORIES on the
  // backend). Enumerable categories (profiles / cycles) come first.
  _wizCatOrder() {
    return ['profiles', 'real_cycles', 'reference_cycles', 'backfill_cycles', 'custom_phases',
      'profile_groups', 'settings', 'ml_models', 'feedback',
      'suggestions', 'maintenance_log', 'history_logs', 'lifetime_stats'];
  }

  // The three per-cycle categories and the selection set each one fills. Backfill
  // (cycles found in imported power history, item 129e) is a peer of the other two.
  _wizCycleCats() { return ['real_cycles', 'reference_cycles', 'backfill_cycles']; }

  _wizIdSet(sel, catId) {
    return catId === 'real_cycles' ? sel.realIds : (catId === 'backfill_cycles' ? sel.bfIds : sel.refIds);
  }

  _wizEmptySel() {
    return { cats: new Set(), profiles: new Set(), realIds: new Set(), refIds: new Set(), bfIds: new Set() };
  }

  _wizAnySel(sel) {
    return !!(sel && (sel.profiles.size || sel.realIds.size || sel.refIds.size || sel.bfIds.size || sel.cats.size));
  }

  _wizCatLabel(catId) {
    const map = {
      profiles: this._t('lbl.cat_profiles', {}, 'Profiles (programs)'),
      real_cycles: this._t('lbl.cat_real_cycles', {}, 'Cycles (run history)'),
      reference_cycles: this._t('lbl.cat_reference_cycles', {}, 'Reference cycles (imported)'),
      backfill_cycles: this._t('lbl.cat_backfill_cycles', {}, 'Cycles found in imported power history'),
      custom_phases: this._t('lbl.cat_custom_phases', {}, 'Custom phases'),
      profile_groups: this._t('lbl.cat_profile_groups', {}, 'Profile groups'),
      settings: this._t('lbl.cat_settings', {}, 'Detection & matching settings'),
      ml_models: this._t('lbl.cat_ml_models', {}, 'ML models'),
      feedback: this._t('lbl.cat_feedback', {}, 'Feedback & review labels'),
      suggestions: this._t('lbl.cat_suggestions', {}, 'Suggestions'),
      maintenance_log: this._t('lbl.cat_maintenance_log', {}, 'Maintenance log'),
      history_logs: this._t('lbl.cat_history_logs', {}, 'History & change logs'),
      lifetime_stats: this._t('lbl.cat_lifetime_stats', {}, 'Lifetime totals'),
    };
    return map[catId] || catId;
  }

  // Build a fresh selection model from a manifest. When importableOnly is set,
  // categories/items the backend marked not-importable are left unselected.
  _wizInitSel(manifest, importableOnly) {
    const sel = this._wizEmptySel();
    const c = (manifest && manifest.categories) || {};
    const ok = (info) => !!(info && info.present && (!importableOnly || info.importable !== false));
    if (ok(c.profiles)) (c.profiles.items || []).forEach(i => sel.profiles.add(i.name));
    this._wizCycleCats().forEach(cid => {
      const set = this._wizIdSet(sel, cid);
      if (ok(c[cid])) (c[cid].groups || []).forEach(g => g.cycles.forEach(cy => { if (cy.id != null) set.add(String(cy.id)); }));
    });
    Object.keys(c).forEach(cid => {
      if (cid === 'profiles' || this._wizCycleCats().includes(cid)) return;
      if (ok(c[cid])) sel.cats.add(cid);
    });
    return sel;
  }

  // The selection payload sent to the backend (categories + item subsets).
  _wizSelectionPayload(m) {
    const s = m.sel;
    const categories = [];
    if (s.profiles.size) categories.push('profiles');
    if (s.realIds.size) categories.push('real_cycles');
    if (s.refIds.size) categories.push('reference_cycles');
    if (s.bfIds.size) categories.push('backfill_cycles');
    s.cats.forEach(cid => categories.push(cid));
    const out = { categories };
    if (s.profiles.size) out.profiles = Array.from(s.profiles);
    if (s.realIds.size) out.real_cycle_ids = Array.from(s.realIds);
    if (s.refIds.size) out.reference_cycle_ids = Array.from(s.refIds);
    if (s.bfIds.size) out.backfill_cycle_ids = Array.from(s.bfIds);
    return out;
  }

  // Ids of the cycles in one manifest group (real / reference / backfill cycles).
  _wizGroupIds(manifest, catId, prof) {
    const cat = (manifest.categories || {})[catId] || {};
    const g = (cat.groups || []).find(gr => gr.profile === prof);
    return g ? g.cycles.filter(cy => cy.id != null).map(cy => String(cy.id)) : [];
  }

  // tri-state {sel, total, state} for a category, for the checkbox rendering.
  _wizCatState(m, catId, manifest) {
    const s = m.sel;
    const cat = (manifest.categories || {})[catId] || {};
    if (catId === 'profiles') {
      const items = cat.items || [];
      const total = items.length;
      const sel = items.filter(i => s.profiles.has(i.name)).length;
      return { sel, total, state: sel === 0 ? 'none' : (sel === total ? 'all' : 'some') };
    }
    if (this._wizCycleCats().includes(catId)) {
      const set = this._wizIdSet(s, catId);
      const total = cat.count || 0;
      let sel = 0;
      (cat.groups || []).forEach(g => g.cycles.forEach(cy => { if (set.has(String(cy.id))) sel++; }));
      return { sel, total, state: sel === 0 ? 'none' : (sel === total ? 'all' : 'some') };
    }
    const on = s.cats.has(catId);
    return { sel: on ? 1 : 0, total: 1, state: on ? 'all' : 'none' };
  }

  // Render the shared tri-state category tree from a manifest/inventory.
  // opts = { importableOnly, conflicts } — conflicts marks profiles that clash.
  _htmlSelectionTree(m, manifest, opts = {}) {
    const cats = (manifest && manifest.categories) || {};
    const conflictNames = new Set();
    if (opts.conflicts) (cats.profiles && cats.profiles.items || []).forEach(i => { if (i.conflict) conflictNames.add(i.name); });
    const order = this._wizCatOrder().filter(cid => cats[cid] && cats[cid].present);
    // Master select-all state across every currently-selectable category.
    let anySel = false, allSel = true;
    order.forEach(cid => {
      if (opts.importableOnly && cats[cid].importable === false) return;
      const st = this._wizCatState(m, cid, manifest);
      if (st.state !== 'none') anySel = true;
      if (st.state !== 'all') allSel = false;
    });
    const master = `<label class="wd-sd-prof" style="border-bottom:1px solid var(--divider-color, #444)">
      <input type="checkbox" data-maction="wiz-toggle-all" ${allSel ? 'checked' : ''} ${!allSel && anySel ? 'data-indeterminate="1"' : ''}>
      <span class="wd-sd-prof-name"><strong>${this._t('btn.select_all', {}, 'Select all')}</strong></span>
    </label>`;
    const rows = order.map(cid => {
      const info = cats[cid];
      const blocked = opts.importableOnly && info.importable === false;
      const st = this._wizCatState(m, cid, manifest);
      const enumerable = cid === 'profiles' || this._wizCycleCats().includes(cid);
      const countLbl = enumerable ? `${st.sel}/${info.count}` : '';
      const header = `<label class="wd-sd-prof">
        <input type="checkbox" data-maction="wiz-toggle-cat" data-cat="${cid}" ${st.state === 'all' ? 'checked' : ''} ${st.state === 'some' ? 'data-indeterminate="1"' : ''} ${blocked ? 'disabled' : ''}>
        <span class="wd-sd-prof-name">${_esc(this._wizCatLabel(cid))}${blocked ? ` <span class="wd-tag">${this._t('badge.not_importable', {}, 'n/a here')}</span>` : ''}</span>
        <span class="wd-sd-count">${countLbl}</span>
      </label>`;
      let items = '';
      if (!blocked && cid === 'profiles') {
        items = `<div class="wd-sd-cycles">${(info.items || []).map(i => `<label class="wd-sd-cyc">
          <input type="checkbox" data-maction="wiz-toggle-profile" data-name="${_esc(i.name)}" ${m.sel.profiles.has(i.name) ? 'checked' : ''}>
          <span class="wd-sd-cyc-meta">${_esc(i.name)} · ${(i.real_cycles || 0) + (i.reference_cycles || 0) + (i.backfill_cycles || 0)} ${this._t('lbl.cycles_short', {}, 'cycles')}${conflictNames.has(i.name) ? ` <span class="wd-tag" style="color:var(--warning-color,#e6a700)">${this._t('badge.exists', {}, 'exists')}</span>` : ''}</span>
        </label>`).join('')}</div>`;
      } else if (!blocked && this._wizCycleCats().includes(cid)) {
        const set = this._wizIdSet(m.sel, cid);
        items = `<div class="wd-sd-cycles">${(info.groups || []).map(g => {
          const ids = g.cycles.map(cy => String(cy.id));
          const gsel = ids.filter(id => set.has(id)).length;
          const gall = gsel === ids.length && ids.length > 0;
          const gsome = gsel > 0 && !gall;
          const key = `${cid}:${g.profile}`;
          const expanded = m.expanded && m.expanded.has(key);
          const rows2 = expanded ? g.cycles.map(cy => `<label class="wd-sd-cyc" style="margin-left:18px">
            <input type="checkbox" data-maction="wiz-toggle-cyc" data-cat="${cid}" data-cid="${_esc(String(cy.id))}" ${set.has(String(cy.id)) ? 'checked' : ''}>
            <span class="wd-sd-cyc-meta">${_esc(cy.date ? _fmtDate(cy.date) : String(cy.id))}${cy.duration != null ? ' · ' + _fmtDuration(cy.duration) : ''}</span>
          </label>`).join('') : '';
          return `<div>
            <div class="wd-sd-cyc" style="display:flex;align-items:center">
              <label style="flex:1;display:flex;align-items:center;gap:8px;cursor:pointer">
                <input type="checkbox" data-maction="wiz-toggle-cycgroup" data-cat="${cid}" data-prof="${_esc(g.profile)}" ${gall ? 'checked' : ''} ${gsome ? 'data-indeterminate="1"' : ''}>
                <span class="wd-sd-cyc-meta"><strong>${_esc(g.profile || this._t('lbl.unlabelled', {}, 'Unlabelled'))}</strong> (${gsel}/${g.count})</span>
              </label>
              <button type="button" class="wd-linkbtn" data-maction="wiz-expand" data-key="${_esc(key)}" style="margin-left:auto;background:none;border:none;color:var(--primary-color);cursor:pointer">${expanded ? '▾' : '▸'}</button>
            </div>
            ${rows2}
          </div>`;
        }).join('')}</div>`;
      }
      return `<div class="wd-sd-group">${header}${items}</div>`;
    }).join('');
    return `<div class="wd-sd-tree">${master}${rows}</div>`;
  }

  _htmlExportSelectModal(m) {
    const busy = this._busy.has('export-select');
    let body;
    if (m.loading || !m.inventory) {
      body = `<div class="wd-empty" style="padding:24px"><div class="wd-icon">⏳</div>${this._t('msg.loading', {}, 'Loading…')}</div>`;
    } else {
      body = this._htmlSelectionTree(m, { categories: m.inventory }, { importableOnly: false });
    }
    const anything = this._wizAnySel(m.sel);
    return `<h2 id="wd-modal-title">${this._t('modal.export_select', {}, 'Export - choose data')}</h2>
      <p class="wd-info" style="margin-bottom:12px">${this._t('msg.export_select_intro', {}, 'Tick what to include. Profiles without their cycles still export a matchable program.')}</p>
      ${body}
      <div class="wd-modal-actions">
        <button class="wd-btn wd-btn-secondary" data-maction="cancel" ${busy ? 'disabled' : ''}>${this._t('btn.cancel', {}, 'Cancel')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="export-generate" ${busy || !anything ? 'disabled' : ''}>${busy ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.download_export', {}, 'Download export')}</button>
      </div>`;
  }

  _htmlImportWizardModal(m) {
    const busy = this._busy.has('import-wizard');
    const title = `<h2 id="wd-modal-title">${this._t('modal.import_wizard', {}, 'Import - choose data')}</h2>`;
    if (m.step === 'input' || m.step === 'analyze') {
      const analyzing = m.step === 'analyze';
      return `${title}
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.import_analyze_hint', {}, 'Load an exported file (or paste its JSON). WashData shows what can be imported before anything changes.')}</p>
        <div class="wd-field"><label>${this._t('lbl.load_from_file', {}, 'Load from file')}</label><input type="file" id="wd-import-file" accept=".json,application/json" ${analyzing ? 'disabled' : ''}></div>
        <div class="wd-field"><label>${this._t('lbl.json_data', {}, 'JSON Data')}</label><textarea id="wd-import-json" style="min-height:120px;font-family:monospace;font-size:.78em" ${analyzing ? 'disabled' : ''}>${_esc(m.jsonText || '')}</textarea></div>
        ${m.error ? `<p class="wd-info" style="color:var(--error-color)">${_esc(m.error)}</p>` : ''}
        <div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.cancel', {}, 'Cancel')}</button>
          <button class="wd-btn wd-btn-primary" data-maction="import-analyze" ${analyzing ? 'disabled' : ''}>${analyzing ? '<span class="wd-spin"></span> ' + this._t('msg.analyzing', {}, 'Analyzing…') : this._t('btn.analyze_import', {}, 'Analyze file')}</button>
        </div>`;
    }
    // step === 'select'
    const man = m.manifest || {};
    const mismatch = man.device_type_match === false;
    // Escape: source_device_type comes verbatim from the imported/shared file's
    // device_fingerprint and is unvalidated; _t() does raw {var} substitution, so an
    // un-escaped value would inject markup into innerHTML (XSS via a crafted import).
    const srcDt = man.source_device_type || '?';
    const localDt = man.local_device_type || '?';
    const warnBanner = mismatch ? `<div class="wd-banner wd-banner-warn" style="margin-bottom:12px;padding:8px 12px;border-radius:8px;background:var(--warning-color,#e6a700);color:#111">
      ${this._t('msg.device_type_mismatch_warn', { src: srcDt, local: localDt }, 'This export is from a different appliance type ({src} vs {local}). Programs and cycles can still be imported as reference data, but not device settings or real history.')}
    </div>` : '';
    const tree = this._htmlSelectionTree(m, man, { importableOnly: true, conflicts: true });
    // Merge / replace mode toggle.
    const modeBar = `<div class="wd-field"><label>${this._t('lbl.import_mode', {}, 'How to combine')}</label>
      <div class="wd-mode-bar" style="display:flex;gap:8px">
        <button type="button" class="wd-btn ${m.mode === 'merge' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="imp-mode-merge">${this._t('lbl.mode_merge', {}, 'Merge (keep mine)')}</button>
        <button type="button" class="wd-btn ${m.mode === 'replace' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="imp-mode-replace">${this._t('lbl.mode_replace', {}, 'Replace selected')}</button>
      </div>
      <div class="wd-field-hint">${m.mode === 'replace' ? this._t('msg.replace_warn', {}, 'Each ticked category is wiped and replaced from the file. Unticked categories are left untouched.') + ' ' + this._t('msg.replace_undo_hint', {}, 'A restore point is saved first, so you can undo this import from Export / Import.') : this._t('msg.merge_hint', {}, 'Imported items are added; nothing local is lost. Name clashes are resolved below.')}</div>
    </div>`;
    // Cycle destination toggle (only relevant when cycles are being imported).
    const realAllowed = man.real_history_allowed !== false;
    const destBar = `<div class="wd-field"><label>${this._t('lbl.cycle_destination', {}, 'Where should imported cycles go?')}</label>
      <div class="wd-mode-bar" style="display:flex;gap:8px">
        <button type="button" class="wd-btn ${m.cycleDest === 'reference' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="imp-dest-reference">${this._t('lbl.dest_reference', {}, 'Reference (shape only)')}</button>
        <button type="button" class="wd-btn ${m.cycleDest === 'real_history' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="imp-dest-real" ${realAllowed ? '' : 'disabled'}>${this._t('lbl.dest_real_history', {}, 'Real history (counts in stats)')}</button>
      </div>
      <div class="wd-field-hint">${m.cycleDest === 'real_history' ? this._t('msg.dest_real_history_hint', {}, 'Imported cycles count as this device\'s own history and statistics. Use this to move an appliance to a new install.') : this._t('msg.dest_reference_hint', {}, 'Imported cycles only improve program matching and never affect usage/energy statistics.')}</div>
    </div>`;
    // Per-conflict resolution (merge mode, selected conflicting profiles).
    let conflictBar = '';
    const profItems = (man.categories && man.categories.profiles && man.categories.profiles.items) || [];
    const selConflicts = profItems.filter(i => i.conflict && m.sel.profiles.has(i.name));
    if (m.mode === 'merge' && selConflicts.length) {
      conflictBar = `<div class="wd-field"><label>${this._t('lbl.conflict_resolution', {}, 'Name clashes')}</label>
        ${selConflicts.map(i => `<div style="display:flex;align-items:center;gap:8px;margin:4px 0">
          <span style="flex:1">${_esc(i.name)}</span>
          <select data-maction="imp-conflict" data-prof="${_esc(i.name)}">
            <option value="import_as_copy" ${(m.conflicts[i.name] || 'import_as_copy') === 'import_as_copy' ? 'selected' : ''}>${this._t('lbl.conflict_import_copy', {}, 'Import as copy')}</option>
            <option value="keep_mine" ${m.conflicts[i.name] === 'keep_mine' ? 'selected' : ''}>${this._t('lbl.conflict_keep_mine', {}, 'Keep mine')}</option>
            <option value="overwrite" ${m.conflicts[i.name] === 'overwrite' ? 'selected' : ''}>${this._t('lbl.conflict_overwrite', {}, 'Overwrite')}</option>
          </select>
        </div>`).join('')}
      </div>`;
    }
    const anything = this._wizAnySel(m.sel);
    return `${title}
      ${warnBanner}
      ${tree}
      ${modeBar}
      ${destBar}
      ${conflictBar}
      <div class="wd-modal-actions">
        <button class="wd-btn wd-btn-secondary" data-maction="import-back" ${busy ? 'disabled' : ''}>${this._t('btn.back', {}, 'Back')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="import-apply-ok" ${busy || !anything ? 'disabled' : ''}>${busy ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.import_selected', {}, 'Import selected')}</button>
      </div>`;
  }

  // ── Import power history (#344) ───────────────────────────────────────────────
  //
  // Four steps: stage the data, scan it in the background, review what was found,
  // then write only the rows the user kept. Nothing is stored before the review step.
  // Parsing lives in Python so one implementation is under test; the panel only ships
  // the text up in frame-sized chunks.

  _histSkipReason(reason) {
    const map = {
      idle: this._t('lbl.hist_skip_idle', {}, 'nothing running'),
      sparse: this._t('lbl.hist_skip_sparse', {}, 'readings too far apart'),
      too_few_samples: this._t('lbl.hist_skip_short', {}, 'too few readings'),
      too_long: this._t('lbl.hist_skip_long', {}, 'no break long enough to split on'),
    };
    return map[reason] || reason || '';
  }

  _histSegReason(reason) {
    const map = {
      shorter_than_minimum: this._t('lbl.hist_reason_short', {}, 'shorter than this appliance\'s shortest real cycle'),
      no_clean_end: this._t('lbl.hist_reason_no_end', {}, 'never ended cleanly'),
      already_recorded: this._t('lbl.hist_reason_already_recorded', {}, 'overlaps a cycle WashData already recorded'),
    };
    return map[reason] || '';
  }

  _htmlHistoryImportModal(m) {
    const title = `<h2 id="wd-modal-title">${this._t('modal.history_import', {}, 'Import power history')}</h2>`;
    const err = m.error ? `<p class="wd-info" style="color:var(--error-color)">${_esc(m.error)}</p>` : '';

    if (m.step === 'input') {
      const busy = this._busy.has('hist-import');
      const dis = busy ? 'disabled' : '';
      return `${title}
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.hist_input_hint', {}, 'Upload a CSV from the History panel (entity, state, last changed), or let WashData read the sensor\'s history directly. Live detection runs over it and you choose which cycles to keep.')}</p>
        <div class="wd-field"><label>${this._t('lbl.load_from_file', {}, 'Load from file')}</label><input type="file" id="wd-hist-file" accept=".csv,text/csv,text/plain" ${dis}></div>
        <div class="wd-field"><label>${this._t('lbl.hist_csv_data', {}, 'CSV data')}</label><textarea id="wd-hist-csv" style="min-height:96px;font-family:monospace;font-size:.78em" placeholder="entity_id,state,last_changed" ${dis}>${_esc(m.csvText || '')}</textarea></div>
        <div class="wd-field">
          <label>${this._t('lbl.hist_from_recorder', {}, 'Or read it from Home Assistant')}</label>
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
            <span class="wd-info">${this._t('lbl.hist_since', {}, 'Since')}</span>
            <input type="date" id="wd-hist-since" value="${_esc(m.since || _histDefaultSince())}" min="${_esc(_histMinSince())}" max="${_esc(_histToday())}" ${dis}>
            <button class="wd-btn wd-btn-secondary" data-maction="hist-recorder" ${dis}>${this._t('btn.hist_read_recorder', {}, 'Read from Home Assistant')}</button>
          </div>
          <div class="wd-field-hint">${this._t('msg.hist_recorder_hint', {}, 'Reads from the date you pick until now. Home Assistant keeps detailed history for 10 days by default; older hourly averages are too coarse for cycle detection.')}</div>
        </div>
        ${err}
        <div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="cancel" ${dis}>${this._t('btn.cancel', {}, 'Cancel')}</button>
          <button class="wd-btn wd-btn-primary" data-maction="hist-scan" ${dis}>${busy ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.hist_scan', {}, 'Scan for cycles')}</button>
        </div>`;
    }

    if (m.step === 'scan') {
      const t = m.scanTaskId ? (this._tasks || {})[m.scanTaskId] : null;
      const pct = (t && t.total > 0) ? Math.round((t.done / t.total) * 100) : null;
      return `${title}
        <p class="wd-info" style="margin-bottom:12px">${this._t('msg.hist_scanning', {}, 'Running your history through the detector in the background. You can close this dialog and come back.')}</p>
        <div class="wd-prog-bg" style="margin-bottom:8px"><div class="wd-prog-fill" style="width:${pct == null ? 0 : pct}%"></div></div>
        <p class="wd-info">${pct == null ? this._t('status.preparing', {}, 'Preparing…') : `${pct}%`}</p>
        ${err}
        <div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="hist-cancel-scan">${this._t('btn.cancel', {}, 'Cancel')}</button>
        </div>`;
    }

    if (m.step === 'done') {
      const d = m.done || {};
      const lines = [
        this._tText('msg.hist_imported_count', { n: d.imported || 0 }, `${d.imported || 0} cycles imported.`),
        d.duplicates ? this._tText('msg.hist_duplicates', { n: d.duplicates }, `${d.duplicates} were already imported and were skipped.`) : '',
        d.capped ? this._t('msg.hist_capped', {}, 'The per-device limit for imported cycles was reached; the rest were not stored.') : '',
      ].filter(Boolean);
      return `${title}
        ${lines.map(l => `<p class="wd-info">${_esc(l)}</p>`).join('')}
        <p class="wd-info">${this._t('msg.hist_next_step', {}, 'They are in your Cycles list, tagged as imported history. Open one and use Label to name its program.')}</p>
        <div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
          <button class="wd-btn wd-btn-primary" data-maction="hist-goto-cycles">${this._t('btn.hist_goto_cycles', {}, 'Show me the cycles')}</button>
        </div>`;
    }

    // step === 'review'
    const res = m.result || {};
    const segs = res.segments || [];
    const parse = res.parse || {};
    const busy = this._busy.has('hist-apply');
    const accept = m.accept || new Set();

    // Account for every row the file contained, so "nothing found" is explained
    // rather than just reported.
    const facts = [];
    if (parse.rows_total) facts.push(this._tText('msg.hist_rows_read', { n: parse.rows_total }, `${parse.rows_total} readings read`));
    if (parse.first && parse.last) facts.push(`${_fmtDate(parse.first)} – ${_fmtDate(parse.last)}`);
    if (parse.breaks) facts.push(this._tText('msg.hist_breaks', { n: parse.breaks }, `${parse.breaks} gaps where the sensor was unavailable`));
    if (parse.rows_other_entity) facts.push(this._tText('msg.hist_other_entity', { n: parse.rows_other_entity }, `${parse.rows_other_entity} readings for other entities ignored`));
    // The 500k-row cap cut the read short (audit PLAYGROUND-11): the recorder keeps
    // the newest rows, a file its first ones. Either way part of the history is unread.
    if (parse.truncated) facts.push(this._tText('msg.hist_truncated', { n: parse.rows_total || 0 }, `stopped at the ${parse.rows_total || 0}-reading limit, so the rest of the history was not scanned`));
    // The file held one sensor and it was not this device's: it was read anyway, but say
    // so plainly - it is the difference between "my export" and "the wrong export".
    if (parse.entity_substituted_from) {
      facts.push(this._tText(
        'msg.hist_entity_substituted',
        { used: parse.entity_id || '?', wanted: parse.entity_substituted_from },
        `read ${parse.entity_id || '?'} (this device is configured for ${parse.entity_substituted_from})`,
      ));
    }
    // What the parse found suspicious about readable data (audit PLAYGROUND-24).
    const warnMsgs = {
      looks_like_kw: this._tText('msg.hist_warn_kw', { w: parse.peak_w }, `The highest reading is only ${parse.peak_w}. This sensor seems to report kilowatts; WashData needs watts, so no cycles can be detected.`),
      naive_timestamps: this._tText('msg.hist_warn_naive_time', { n: parse.rows_naive_time || 0 }, `${parse.rows_naive_time || 0} timestamps have no time zone and were read as UTC. If the file uses local time, cycles are shifted by your UTC offset and readings near a DST change may be dropped.`),
    };
    const warnLines = (parse.warnings || []).map(w => warnMsgs[w]).filter(Boolean)
      .map(t => `<p class="wd-info wd-hist-warn" style="color:var(--warning-color,#ff9800)">⚠ ${_esc(t)}</p>`).join('');
    const skipped = res.skipped || [];
    const skippedByReason = {};
    skipped.forEach(sk => { skippedByReason[sk.reason] = (skippedByReason[sk.reason] || 0) + 1; });
    const skipLine = Object.entries(skippedByReason)
      .map(([reason, n]) => `${n} × ${this._histSkipReason(reason)}`).join(', ');

    const settings = res.settings || {};
    const settingsLine = settings.min_power != null
      ? this._tText('msg.hist_settings_used', { w: settings.min_power, s: settings.off_delay },
          `Detected using this device's current settings (minimum power ${settings.min_power} W, off delay ${settings.off_delay} s).`)
      : '';

    if (!segs.length) {
      return `${title}
        <p class="wd-info">${this._t('msg.hist_none_found', {}, 'No cycles could be detected in that history.')}</p>
        ${warnLines}
        ${facts.length ? `<p class="wd-info">${_esc(facts.join(' · '))}</p>` : ''}
        ${skipLine ? `<p class="wd-info">${this._t('msg.hist_skipped_spans', {}, 'Skipped stretches')}: ${_esc(skipLine)}</p>` : ''}
        ${settingsLine ? `<p class="wd-info">${_esc(settingsLine)}</p>` : ''}
        <div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="hist-back">${this._t('btn.back', {}, 'Back')}</button>
          <button class="wd-btn wd-btn-primary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
        </div>`;
    }

    const rows = segs.map(seg => {
      const on = accept.has(seg.index);
      const reason = this._histSegReason(seg.reason);
      return `<tr data-hist-row="${seg.index}" style="${on ? '' : 'opacity:.55'}">
        <td><input type="checkbox" data-hist-pick="${seg.index}" ${on ? 'checked' : ''} aria-label="${_esc(this._t('lbl.hist_keep', {}, 'Keep this cycle'))}"></td>
        <td>${_esc(_fmtDate(seg.start_time))}</td>
        <td${seg.banked_tail_s ? ` title="${_esc(this._tText('msg.hist_tail_trimmed', { min: Math.round(seg.banked_tail_s / 60) }, `${Math.round(seg.banked_tail_s / 60)} min of waiting after the cycle ended were trimmed, as the live integration trims them`))}"` : ''}>${_esc(_fmtDuration(seg.duration_s))}${seg.banked_tail_s ? ' ✂' : ''}</td>
        <td>${seg.energy_wh != null ? _esc(_fmtNum(seg.energy_wh / 1000, 2)) + ' kWh' : '–'}</td>
        <td>${_esc(String(Math.round(seg.peak_w)))} W</td>
        <td><canvas class="wd-prof-spark" data-hist-spark="${seg.index}" width="64" height="20" aria-hidden="true"></canvas></td>
        <td>${reason ? `<span title="${_esc(reason)}" style="color:var(--warning-color,#ff9800)">⚠</span> <span class="wd-info">${_esc(reason)}</span>` : `<span class="wd-info">${_esc(this._t('lbl.hist_looks_complete', {}, 'complete'))}</span>`}</td>
      </tr>`;
    }).join('');

    const allOn = segs.every(seg => accept.has(seg.index));
    return `${title}
      <p class="wd-info" style="margin-bottom:8px">${this._t('msg.hist_found', { n: segs.length }, `Found ${segs.length} cycles. Untick anything that does not look like a real run - nothing is stored until you import.`)}</p>
      ${warnLines}
      ${facts.length ? `<p class="wd-info" style="margin-bottom:4px">${_esc(facts.join(' · '))}</p>` : ''}
      ${skipLine ? `<p class="wd-info" style="margin-bottom:4px">${this._t('msg.hist_skipped_spans', {}, 'Skipped stretches')}: ${_esc(skipLine)}</p>` : ''}
      ${settingsLine ? `<p class="wd-info" style="margin-bottom:12px">${_esc(settingsLine)}</p>` : ''}
      <div style="margin-bottom:8px"><button class="wd-btn wd-btn-secondary wd-btn-sm" data-maction="hist-toggle-all">${allOn ? this._t('btn.select_none', {}, 'Select none') : this._t('btn.select_all', {}, 'Select all')}</button></div>
      <div class="wd-table-wrap">
        <table class="wd-table"><thead><tr>
          <th></th>
          <th>${this._t('lbl.date', {}, 'Date')}</th>
          <th>${this._t('lbl.duration', {}, 'Duration')}</th>
          <th>${this._t('lbl.energy', {}, 'Energy')}</th>
          <th>${this._t('lbl.peak_power_short', {}, 'Peak')}</th>
          <th>${this._t('lbl.shape', {}, 'Shape')}</th>
          <th>${this._t('lbl.notes', {}, 'Notes')}</th>
        </tr></thead><tbody>${rows}</tbody></table>
      </div>
      ${res.capped ? `<p class="wd-info">${this._t('msg.hist_scan_capped', { n: res.found }, `Only the first candidates are shown (${res.found} were found).`)}</p>` : ''}
      ${err}
      <div class="wd-modal-actions">
        <button class="wd-btn wd-btn-secondary" data-maction="hist-back" ${busy ? 'disabled' : ''}>${this._t('btn.back', {}, 'Back')}</button>
        <button class="wd-btn wd-btn-primary" data-maction="hist-apply" ${busy || !accept.size ? 'disabled' : ''}>${busy ? '<span class="wd-spin"></span> ' : ''}${this._t('btn.hist_import_n', { n: accept.size }, `Import ${accept.size} cycles`)}</button>
      </div>`;
  }

  // Paint the candidate sparklines after a render (same painter as profile cards).
  _drawHistorySparklines() {
    const sr = this.shadowRoot;
    if (!sr) return;
    const m = this._modal;
    const segs = (m && m.result && m.result.segments) || [];
    const byIndex = {};
    segs.forEach(seg => { byIndex[String(seg.index)] = seg.curve || []; });
    sr.querySelectorAll('canvas[data-hist-spark]').forEach(cv => {
      this._paintSparkline(cv, byIndex[cv.dataset.histSpark] || []);
    });
  }

  // Interactive cycle inspector: view / trim / split.
  _htmlCycleModal(m) {
    if (!m.loaded) {
      return `<h2>${this._t('modal.cycle', {}, 'Cycle')}</h2><div class="wd-empty" style="padding:32px"><div class="wd-icon">⏳</div>${this._t('msg.loading_curve', {}, 'Loading curve…')}</div>
        <div class="wd-modal-actions"><button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button></div>`;
    }
    const cur = m.curve || {};
    const isRef = !!cur.is_reference;  // lives in reference_cycles: outside usage stats
    // Capabilities come from the backend (`_reference_capabilities`), which derives them
    // from which list the cycle lives in. An imported cycle can be labelled - that is how
    // a program gets named from imported history (#344) - but not trimmed, split or
    // reviewed, because those store functions only operate on past_cycles.
    const canLabel = cur.labelable !== false;
    const canEditCycle = cur.editable !== false;
    const fromHistory = cur.cycle_origin === 'backfill';
    const full = cur.full_duration_s || cur.duration || 0;
    const kwh = cur.energy_kwh != null ? cur.energy_kwh : null;
    // The ML "Cycle health" chip was removed in 0.5.8 (audit ML-03): it flagged
    // 16% of real cycles and 8.7% of golden ones for review.
    const ml = m.ml || null;
    const meta = `<div class="wd-kv">
      <div class="wd-kv-item"><div class="wd-kv-val">${_fmtDuration(cur.duration || full)}</div><div class="wd-kv-lbl">${this._t('lbl.duration', {}, 'Duration')}</div></div>
      <div class="wd-kv-item"><div class="wd-kv-val">${_fmtEnergy(kwh)}</div><div class="wd-kv-lbl">${this._t('lbl.energy', {}, 'Energy')}</div></div>
      <div class="wd-kv-item"><div class="wd-kv-val" style="font-size:.95em">${_esc(cur.profile_name || this._t('lbl.unlabelled', {}, 'Unlabelled'))}</div><div class="wd-kv-lbl">${this._t('lbl.profile', {}, 'Profile')}</div></div>
      <div class="wd-kv-item"><div class="wd-kv-val" style="font-size:.95em">${_esc(cur.status ? this._cycleStatusLabel(cur.status) : '-')}</div><div class="wd-kv-lbl">${this._t('lbl.status', {}, 'Status')}</div></div>
    </div>`;
    // Does this cycle still need a review? (mirrors the Cycles-list badge, so a
    // user who saw the "needs review" dot there knows to click Review here.)
    const rvw = (ml && ml.ml_review) || {};
    const hasPendingFb = (this._feedbacks || []).some(f => f.cycle_id === m.cycleId);
    // Same rule as the Cycles list: unresolved detection feedback.
    const needsReview = hasPendingFb;
    const reviewDot = (needsReview && m.mode !== 'review')
      ? ` <span title="${this._t('hdr.automation_needs_review', {}, 'This cycle needs review')}" style="color:var(--warning-color,#ff9800);font-size:1.1em;line-height:0">●</span>`
      : '';
    // Imported recordings are read-only (they seed matching templates only), so
    // the edit mode-bar is hidden and a short note explains why.
    const modeBar = (this._canEdit() && canEditCycle) ? `<div class="wd-mode-bar">
      <button class="wd-btn wd-btn-sm ${m.mode === 'view' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="cyc-view">${this._t('btn.inspect', {}, 'Inspect')}</button>
      <button class="wd-btn wd-btn-sm ${m.mode === 'trim' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="cyc-trim">${this._t('btn.trim', {}, 'Trim')}</button>
      <button class="wd-btn wd-btn-sm ${m.mode === 'split' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="cyc-split">${this._t('btn.split', {}, 'Split')}</button>
      <button class="wd-btn wd-btn-sm ${m.mode === 'review' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="cyc-review" title="${needsReview ? this._t('hdr.automation_needs_review', {}, 'This cycle needs review') : this._t('hdr.automation_review_this_cycle', {}, 'Review this cycle')}">${this._t('btn.review', {}, 'Review')}${reviewDot}</button>
    </div>` : (isRef ? `<div class="wd-info" style="margin:0 0 8px"><span style="color:var(--info-color,#2196f3)">📥</span> ${fromHistory
      ? this._t('msg.imported_history_readonly', {}, 'Found in imported power history. It helps matching but is not counted in your statistics and cannot be trimmed or split. Label it to name the program.')
      : this._t('msg.imported_readonly', {}, 'Imported from the community store. Used for reference and matching, not counted in your stats, and cannot be edited.')}</div>` : '');

    // Pending-detection-feedback banner (Confirm / Correct… / Ignore). Built once
    // and shown in BOTH Inspect and Review modes, so a cycle in the "needs review"
    // queue exposes the resolve controls without the user having to discover Review
    // mode (#331). Editors only; imported reference cycles never carry feedback.
    const pendingFb = this._canEdit() ? (this._feedbacks || []).find(f => f.cycle_id === m.cycleId) : null;
    const fbProf = pendingFb ? (pendingFb.detected_profile || pendingFb.profile_name || this._t('lbl.unknown', {}, 'Unknown')) : '';
    const fbBanner = pendingFb ? `
        <div class="wd-card" style="background:var(--secondary-background-color);border-left:3px solid var(--warning-color,#ff9800);margin:0 0 12px;padding:12px">
          <div style="font-weight:600;margin-bottom:4px">⚠ ${this._t('msg.pending_feedback', {}, 'Pending detection feedback')}</div>
          <p class="wd-info" style="margin:0 0 8px">${this._t('msg.unsure_detected_prefix', {}, 'WashData is unsure it detected')} <strong>${_esc(fbProf)}</strong>${pendingFb.confidence != null ? ` (${this._t('lbl.confidence', {}, 'confidence').toLowerCase()} ${(pendingFb.confidence * 100).toFixed(0)}%)` : ''}. ${this._t('msg.feedback_prompt', {}, 'Confirm it was right, correct the program, or ignore.')} ${this._t('msg.feedback_relabel_hint', {}, 'Re-labelling this cycle resolves it too.')}</p>
          <div style="display:flex;gap:8px;flex-wrap:wrap">
            <button class="wd-btn wd-btn-primary wd-btn-sm" data-action="fb-confirm" data-cid="${_esc(m.cycleId)}">${this._t('btn.confirm', {}, 'Confirm')}</button>
            <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="fb-correct" data-cid="${_esc(m.cycleId)}" data-prof="${_esc(fbProf)}">${this._t('btn.correct', {}, 'Correct…')}</button>
            <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="fb-ignore" data-cid="${_esc(m.cycleId)}">${this._t('btn.ignore', {}, 'Ignore')}</button>
          </div>
        </div>` : '';

    let controls = '';
    if (m.mode === 'view') {
      // Share to community store: only for recorded/golden reference cycles, and
      // only when online features are enabled AND a store account is connected.
      const isGolden = !!(ml && ml.ml_review && ml.ml_review.golden);
      const canShare = this._canEdit() && this._onlineEnabled() && this._storeConnected && isGolden;
      const shareBtn = canShare
        ? `<button class="wd-btn wd-btn-secondary" data-action="store-share-cycle" data-cid="${_esc(m.cycleId)}" data-prof="${_esc(cur.profile_name || '')}">${this._t('btn.share_to_store', {}, 'Share to store')}</button>`
        : '';
      // Delete removes a bad import; Label is offered whenever the backend says the
      // cycle can carry one, which includes imported cycles - naming the programs found
      // in imported history is the point of that import (#344), and the store handles
      // labelling a reference cycle in place.
      const editBtns = !this._canEdit() ? ''
        : `<button class="wd-btn wd-btn-danger" data-maction="cyc-delete">${this._t('btn.delete', {}, 'Delete')}</button>${canLabel
          ? `\n        <button class="wd-btn wd-btn-primary" data-maction="cyc-label">${this._t('btn.label', {}, 'Label')}</button>`
          : ''}`;
      controls = `${fbBanner}<div class="wd-modal-actions">
        <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
        ${shareBtn}
        ${editBtns}</div>`;
    } else if (m.mode === 'trim') {
      const busy = this._busy.has('cyc-trim-apply');
      const tm = m.timeMode || 's';
      const sv = tm === 'clock' ? this._offsetToClock(m.trim.start) : Math.round(m.trim.start);
      const ev = tm === 'clock' ? this._offsetToClock(m.trim.end) : Math.round(m.trim.end);
      const itype = tm === 'clock' ? 'time' : 'number';
      const iattr = tm === 'clock' ? 'step="1"' : `min="0" max="${Math.ceil(full)}" step="1"`;
      const ulbl = tm === 'clock' ? '' : ' ' + this._t('lbl.unit_s', {}, '(s)');
      controls = `<p class="wd-info" style="margin:4px 0 8px">${this._t('msg.trim_intro', {}, 'Drag the red handles, or enter values. Everything outside the window is removed.')}</p>
        <div class="wd-mode-bar" style="margin-bottom:8px;align-items:center">
          <span class="wd-info" style="margin:0">${this._t('lbl.input', {}, 'Input:')}</span>
          <button class="wd-btn wd-btn-sm ${tm === 's' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="trim-mode-s">${this._t('lbl.seconds_from_start', {}, 'Seconds from start')}</button>
          <button class="wd-btn wd-btn-sm ${tm === 'clock' ? 'wd-btn-primary' : 'wd-btn-secondary'}" data-maction="trim-mode-clock">${this._t('lbl.clock_time', {}, 'Clock time')}</button>
        </div>
        <div class="wd-form-grid">
          <div class="wd-field"><label>${this._t('lbl.start', {}, 'Start')}${ulbl}</label><input type="${itype}" id="wd-trim-start" ${iattr} value="${sv}"></div>
          <div class="wd-field"><label>${this._t('lbl.end', {}, 'End')}${ulbl}</label><input type="${itype}" id="wd-trim-end" ${iattr} value="${ev}"></div>
        </div>
        <div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
          <button class="wd-btn wd-btn-secondary" data-maction="cyc-reset-trim">${this._t('btn.reset', {}, 'Reset')}</button>
          <button class="wd-btn wd-btn-primary" data-maction="cyc-apply-trim" ${busy ? 'disabled' : ''}>${busy ? ('<span class="wd-spin"></span> ' + this._t('status.trimming', {}, 'Trimming…')) : this._t('btn.apply_trim', {}, 'Apply Trim')}</button>
        </div>`;
    } else if (m.mode === 'split') {
      const busy = this._busy.has('cyc-split-apply');
      const offs = (m.split.offsets || []).slice().sort((a, b) => a - b);
      const bounds = [0, ...offs, full];
      const segRows = bounds.slice(0, -1).map((s, i) => {
        const e = bounds[i + 1];
        return `<div class="wd-seg-row"><span class="wd-swatch" style="background:${_PALETTE[i % _PALETTE.length]}"></span>
          <span style="min-width:120px">${_fmtDuration(s)} – ${_fmtDuration(e)}</span>
          <select data-segidx="${i}"><option value="">${this._t('lbl.unlabelled_paren', {}, '(unlabelled)')}</option>${this._profileOptions(m.split.profiles[i])}</select></div>`;
      }).join('');
      controls = `<p class="wd-info" style="margin:4px 0 8px">${this._t('msg.split_intro', {}, 'Click the graph to add or remove a split point, or auto-detect by idle gaps. Each part can get its own profile.')}</p>
        <div class="wd-mode-bar">
          <div class="wd-field" style="margin:0;display:flex;align-items:center;gap:6px"><label style="margin:0;text-transform:none;letter-spacing:0">${this._t('lbl.gap_s', {}, 'Gap (s)')}</label><input type="number" id="wd-split-gap" value="900" min="30" step="30" style="width:80px"></div>
          <button class="wd-btn wd-btn-sm wd-btn-secondary" data-maction="cyc-auto-split">${this._t('btn.auto_detect_split', {}, 'Auto-detect')}</button>
          <button class="wd-btn wd-btn-sm wd-btn-secondary" data-maction="cyc-clear-split">${this._t('btn.clear_splits', {}, 'Clear')}</button>
        </div>
        <div style="margin:10px 0">${offs.length ? segRows : `<p class="wd-info">${this._t('msg.no_split_points', {}, 'No split points yet.')}</p>`}</div>
        <div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
          <button class="wd-btn wd-btn-primary" data-maction="cyc-apply-split" ${busy || !offs.length ? 'disabled' : ''}>${busy ? ('<span class="wd-spin"></span> ' + this._t('status.splitting', {}, 'Splitting…')) : this._t('btn.apply_split', {}, 'Apply Split')}</button>
        </div>`;
    } else if (m.mode === 'review') {
      const rv = (ml && ml.ml_review) || {};
      const busy = this._busy.has('cyc-review-save');
      const qOpt = (v, label) => `<option value="${v}" ${(rv.quality || '') === v ? 'selected' : ''}>${label}</option>`;
      const TAGS = [
        ['late_start', this._t('tag.late_start', {}, 'Late start')],
        ['early_end', this._t('tag.early_end', {}, 'Early end')],
        ['merged', this._t('tag.merged', {}, 'Merged cycles')],
        ['split', this._t('tag.split', {}, 'Split cycle')],
        ['noise', this._t('tag.noise', {}, 'Noise')],
        ['wrong_profile', this._t('tag.wrong_profile', {}, 'Wrong profile')],
        ['sensor_gap', this._t('tag.sensor_gap', {}, 'Sensor gap')],
      ];
      const tagChecks = TAGS.map(([v, l]) => `<label class="wd-rev-tag"><input type="checkbox" class="wd-cyc-rev-tag" value="${v}" ${(rv.tags || []).includes(v) ? 'checked' : ''}> ${l}</label>`).join('');
      const reviewedBadge = rv.reviewed_at ? `<span style="font-size:.75em;color:var(--secondary-text-color)">${this._t('lbl.reviewed_on', {date: _fmtDay(rv.reviewed_at)}, 'reviewed {date}')}</span>` : '';
      // Pending-feedback banner (Confirm/Correct/Ignore) is built in the shared
      // scope above and rendered here as well as in Inspect mode (#331).
      const tProfile = _tip(this._t('msg.review_profile_tip', {}, 'The program this cycle is labelled as. If it is wrong, correct it here; labels teach matching.'));
      const tQuality = _tip(this._t('msg.review_quality_tip', {}, 'How clean this cycle is. Good: a textbook run of this program. Bad: detected, but noisy or unusual. Unusable: mis-detected (merged, cut short or spurious). Affects the health score and which cycles train the model.'));
      const tRecorded = _tip(this._t('msg.review_recorded_tip', {}, 'Mark this as a hand-picked reference cycle for its program, like a manually recorded cycle. Reference cycles are always kept, seed the matching template, and are never removed by cleanup.'));
      const tTags = _tip(this._t('msg.review_tags_tip', {}, 'Optional flags for what went wrong, so training and cleanup can allow for it.'));
      const tNotes = _tip(this._t('msg.review_notes_tip', {}, 'Free-text notes for your own reference. Not used by matching or training.'));
      controls = `
        ${fbBanner}
        <p style="font-size:.82em;color:var(--secondary-text-color);margin:8px 0 12px">
          ${this._t('msg.review_confirm_help', {}, 'Was this cycle detected correctly? Confirming cycles improves matching for your machine. A quick Good/Bad is enough.')}
        </p>
        <div style="display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:6px 0">
          <label style="display:inline-flex;align-items:center;gap:6px">${this._t('lbl.profile', {}, 'Profile')}${tProfile}
            <select id="wd-cyc-rev-label" class="wd-filter-select"><option value="">${this._t('lbl.unlabelled_paren', {}, '(unlabelled)')}</option>${this._profileOptions(m.reviewLabel !== undefined ? m.reviewLabel : cur.profile_name)}</select>
          </label>
          <label style="display:inline-flex;align-items:center;gap:6px">${this._t('lbl.quality', {}, 'Quality')}${tQuality}
            <select id="wd-cyc-rev-quality" class="wd-filter-select">${qOpt('', '-')}${qOpt('good', this._t('quality.good', {}, 'Good'))}${qOpt('bad', this._t('quality.bad', {}, 'Bad'))}${qOpt('unusable', this._t('quality.unusable', {}, 'Unusable'))}</select>
          </label>
          <label style="display:inline-flex;align-items:center;gap:6px"><input type="checkbox" id="wd-cyc-rev-golden" ${rv.golden ? 'checked' : ''}> ${this._t('badge.golden_cycle', {}, 'Recorded reference cycle')}${tRecorded}</label>
          ${reviewedBadge}
        </div>
        <div class="wd-rev-sub">${this._t('lbl.compare_profiles', {}, 'Compare with profiles')}${_tip(this._t('msg.compare_profiles_tip', {}, 'Overlay other profiles on the chart to see which fits this cycle best.'))}</div>
        <div class="wd-rev-tags">${(this._profiles || []).map(p => {
          const on = (m.overlays || []).includes(p.name);
          const sw = on ? `<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:${_PALETTE[Math.max(0, this._profiles.findIndex(x => x.name === p.name)) % _PALETTE.length]};margin:0 2px"></span>` : '';
          return `<label class="wd-rev-tag"><input type="checkbox" class="wd-cyc-overlay" value="${_esc(p.name)}" ${on ? 'checked' : ''}> ${sw}${_esc(p.name)}</label>`;
        }).join('') || `<span class="wd-info">${this._t('msg.no_profiles_compare', {}, 'No profiles to compare.')}</span>`}</div>
        <div class="wd-rev-sub">${this._t('lbl.tags', {}, 'Tags')}${tTags}</div>
        <div class="wd-rev-tags">${tagChecks}</div>
        <div class="wd-rev-sub">${this._t('lbl.notes', {}, 'Notes')}${tNotes}</div>
        <textarea id="wd-cyc-rev-notes" class="wd-rev-notes" rows="3" placeholder="${this._t('msg.review_notes_placeholder', {}, 'Notes (optional)')}">${_esc(rv.notes || '')}</textarea>
        <div class="wd-modal-actions" style="margin-top:16px">
          <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
          <button class="wd-btn wd-btn-primary" data-maction="cyc-review-save" ${busy ? 'disabled' : ''}>${busy ? ('<span class="wd-spin"></span> ' + this._t('status.saving', {}, 'Saving…')) : this._t('btn.save_review', {}, 'Save Review')}</button>
        </div>`;
    }

    // Detected-artifact summary under the graph (Inspect/Review only). The spans
    // are shaded on the graph above; this lists them with times + plain detail.
    let artifactBox = '';
    const arts = (m.mode === 'view' || m.mode === 'review') ? (cur.artifacts || []) : [];
    if (arts.length) {
      const items = arts.map(a => {
        const detail = a.detail_key ? this._tText(a.detail_key, a.detail_params || {}, a.detail || '') : (a.detail || '');
        return `<li><b>${_esc(_artifactLabel(a.type, (k, v, f) => this._t(k, v, f)))}</b> ${this._t('lbl.at', {}, 'at')} ${_fmtClock(a.start_s)}–${_fmtClock(a.end_s)} — ${_esc(detail)}</li>`;
      }).join('');
      artifactBox = `<div class="wd-card" style="margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--warning-color,#ff9800)">
        <div style="font-weight:600;font-size:.9em">⚠ ${this._t('msg.artifact_header', {n: arts.length}, `${arts.length} anomal${arts.length > 1 ? 'ies' : 'y'} detected during this cycle`)}</div>
        <ul class="wd-info" style="margin:4px 0 0;padding-left:18px;font-size:.82em">${items}</ul>
        <div class="wd-info" style="margin:6px 0 0;font-size:.75em">${this._t('msg.artifact_footer', {}, 'Highlighted on the graph above. These are transient artifacts (e.g. the door opened mid-cycle), not necessarily problems.')}</div>
      </div>`;
    }
    // HA restart gap summary (Inspect/Review only). Shaded on the graph above.
    let restartGapBox = '';
    const gaps = (m.mode === 'view' || m.mode === 'review') ? (cur.restart_gaps || []) : [];
    if (gaps.length) {
      const items = gaps.map(g => {
        const mins = Math.round((g.gap_seconds || 0) / 60);
        const dur = mins >= 1 ? `${mins}m` : `${Math.round(g.gap_seconds || 0)}s`;
        const conf = g.match_confidence != null ? ` · ${this._t('lbl.pct_match_confidence', {pct: Math.round(g.match_confidence * 100)}, `${Math.round(g.match_confidence * 100)}% match confidence`)}` : '';
        const prof = g.profile ? ` (${_esc(g.profile)})` : '';
        return `<li>${this._t('msg.restart_gap_item', {dur}, `${dur} gap`)}: ${this._t('lbl.ha_restarted', {}, 'HA restarted')}${prof}${conf}</li>`;
      }).join('');
      restartGapBox = `<div class="wd-card" style="margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--info-color,#2196f3)">
        <div style="font-weight:600;font-size:.9em">↻ ${this._t('msg.restart_gap_header', {n: gaps.length}, `${gaps.length} HA restart gap${gaps.length > 1 ? 's' : ''} during this cycle`)}</div>
        <ul class="wd-info" style="margin:4px 0 0;padding-left:18px;font-size:.82em">${items}</ul>
        <div class="wd-info" style="margin:6px 0 0;font-size:.75em">${this._t('msg.restart_gap_footer', {}, 'Highlighted on the graph. Power data is missing for these intervals; matching used only real readings.')}</div>
      </div>`;
    }
    // Thinning caption (#395): the graph draws a decimated copy of the stored
    // trace, so a wide gap between drawn points can look like missing sensor data.
    // Declare it when the server thinned the curve so the two are not confused.
    let decNote = '';
    if (cur.decimated) {
      const shownN = (cur.samples || []).length;
      const totalN = cur.sample_count || shownN;
      decNote = `<div class="wd-info" style="margin:4px 0 0;font-size:.72em;color:var(--secondary-text-color)">${this._t('msg.samples_decimated', {shown: shownN, total: totalN}, `Showing ${shownN} of ${totalN} samples (thinned for display; peaks kept). A wide gap here is thinning, not missing data.`)}</div>`;
    }
    // Legend for the profile curves behind the trace, so a suspected program
    // (#462) is never read as the cycle's label. Same list the chart draws.
    const overlays = this._cycleProfileOverlays(m);
    const legSw = s => s.dash
      ? `background:repeating-linear-gradient(90deg,${s.stroke} 0 5px,transparent 5px 8px)`
      : `background:${s.stroke}`;
    // The recorder context (item 513) is a legend entry too, so the grey line is
    // never read as part of the cycle.
    const context = this._cycleContextSeries(m);
    const legItems = context ? [...overlays, context.series] : overlays;
    const overlayLeg = legItems.length ? `<div class="wd-leg" data-cyc-legend style="margin:8px 0 12px">
        <span class="wd-leg-i"><span class="wd-leg-sw" style="background:var(--primary-color)"></span> ${this._t('lbl.power', {}, 'Power')}</span>
        ${legItems.map(s => `<span class="wd-leg-i" data-leg="${s.kind}"><span class="wd-leg-sw" style="${legSw(s)};opacity:.8"></span> ${_esc(s.name)}</span>`).join('')}
      </div>` : '';
    return `<h2>${this._t('lbl.cycle', {}, 'Cycle')} · ${_esc(_fmtDate(cur.start_time))}</h2>
      ${meta}${modeBar}
      <div class="wd-canvas-wrap"><canvas id="wd-cyc-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_cycle_chart', {}, 'Cycle power trace'))}"></canvas></div>
      ${this._htmlCycleContextBar(m, cur)}
      ${overlayLeg}
      ${decNote}
      ${artifactBox}
      ${restartGapBox}
      ${controls}`;
  }

  // The cycle chart's recorder-history control (item 513, discussion #463): the
  // length, and one line saying what the grey context is or why there is none.
  // Inspect/Review only, and never for an imported cycle (this plug's recorder did
  // not measure it). The tip says where the setting that DOES change the cycle is.
  _htmlCycleContextBar(m, cur) {
    if ((m.mode !== 'view' && m.mode !== 'review') || cur.is_reference || !(cur.samples || []).length) return '';
    const st = m.ctx || { minutes: this._cycleContextMinutes(m.entryId), loading: false, data: null };
    const opts = _CYCLE_CONTEXT_CHOICES.map(v => `<option value="${v}" ${v === st.minutes ? 'selected' : ''}>${v
      ? this._t('lbl.cycle_context_minutes', { min: v }, `${v} min`)
      : this._t('lbl.cycle_context_off', {}, 'Off')}</option>`).join('');
    let state = '', note = '';
    if (st.minutes && st.loading) {
      state = 'loading';
      note = this._t('msg.cycle_context_loading', {}, 'Loading recorder history…');
    } else if (st.minutes && st.data && this._cycleContextSeries(m)) {
      state = 'shown';
      note = this._t('msg.cycle_context_note', {}, 'Grey: the power sensor\'s recorder history around this cycle. It is not part of the cycle and does not affect duration, energy or matching.');
    } else if (st.minutes && st.data) {
      state = 'none';
      note = this._t('msg.cycle_context_none', {}, 'The recorder holds no readings around this cycle (Home Assistant keeps 10 days of history by default).');
    }
    const tip = _tip(this._tText('msg.cycle_context_tip', {}, 'Display only: shows the power sensor\'s recorder history around this cycle, if still kept. To add failed start attempts to future cycles, use Curve Pre-roll (Settings > Detection > Cycle Start), which changes stored durations.'));
    return `<div class="wd-cyc-ctx" data-cyc-ctx style="display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 0;font-size:.8em;color:var(--secondary-text-color)">
        <label style="display:inline-flex;align-items:center;gap:6px;margin:0;text-transform:none;letter-spacing:0">${this._t('lbl.cycle_context', {}, 'Recorder history around the cycle')}
          <select id="wd-cyc-ctx" class="wd-filter-select" data-maction="cyc-ctx">${opts}</select></label>${tip}
        ${note ? `<span data-cyc-ctx-note="${state}">${note}</span>` : ''}
      </div>`;
  }

  // Per-profile control panel: stats, phases, cleanup, danger.
  _htmlProfilePanel(m) {
    const canEdit = this._canEdit();
    if (m.tab === 'danger' && !canEdit) m.tab = 'stats';
    const tabs = [['stats', this._t('tab.pp_overview',{},'Overview')], ['phases', this._t('tab.pp_phases',{},'Phases')], ['cleanup', this._t('tab.pp_cleanup',{},'Cleanup')]];
    if (canEdit) tabs.push(['danger', this._t('tab.pp_manage',{},'Manage')]);
    const tabBar = tabs.map(([id, lbl]) => `<button class="wd-mini-tab ${m.tab === id ? 'active' : ''}" data-maction="pp-tab-${id}">${lbl}</button>`).join('');
    let body = '';

    if (!m.loaded) {
      body = `<div class="wd-empty" style="padding:32px"><div class="wd-icon">⏳</div>${this._t('msg.loading', {}, 'Loading…')}</div>`;
    } else if (m.tab === 'stats') {
      const st = m.stats || {};
      const env = m.env || {};
      const cur = (this._hass && this._hass.config && this._hass.config.currency) || '';
      const total = (st.avg_energy != null && st.cycle_count) ? st.avg_energy * st.cycle_count : null;
      const mins = s => (s ? Math.round(s / 60) + 'm' : '-');
      const ph = (this._profileHealth || {})[m.name];
      const pt = (this._profileTrends || {})[m.name];
      const healthRow = ph && ph.health_status !== 'unknown' ? (() => {
        const statusColors = { healthy: ['var(--success-color,#4caf50)', 'rgba(76,175,80,.12)'], fair: ['var(--warning-color,#ff9800)', 'rgba(255,152,0,.12)'], poor: ['var(--error-color,#f44336)', 'rgba(244,67,54,.12)'] };
        const [col, bg] = statusColors[ph.health_status] || statusColors.fair;
        const pct = Math.round((ph.health_score || 0) * 100);
        const cvPct = ph.duration_cv != null ? ` · ${this._t('stat.duration_cv', {pct: Math.round(ph.duration_cv * 100)}, `duration CV ${Math.round(ph.duration_cv * 100)}%`)}` : '';
        const confPct = ph.confidence_mean != null ? ` · ${this._t('stat.avg_confidence', {pct: Math.round(ph.confidence_mean * 100)}, `avg confidence ${Math.round(ph.confidence_mean * 100)}%`)}` : '';
        return `<div style="margin:8px 0 4px;padding:8px 12px;border-radius:6px;background:${bg};border:1px solid color-mix(in srgb, ${col} 13%, transparent);display:flex;align-items:center;gap:8px;flex-wrap:wrap">
          <span style="font-weight:600;color:${col}">${ph.health_status === 'poor' ? this._t('health.poor', {}, '⚠ Poor match fit') : ph.health_status === 'fair' ? this._t('health.fair', {}, 'Fair match fit') : this._t('health.good', {}, '✓ Good match fit')}</span>
          <span style="font-size:.85em;opacity:.8">${this._t('stat.score', {pct: pct}, `score ${pct}%`)}${cvPct}${confPct}</span>
          ${this._profileAdvisory(m.name, 'poor_health') ? `<span style="font-size:.82em;opacity:.75;flex-basis:100%">${_esc(this._advisoryText(this._profileAdvisory(m.name, 'poor_health')))}</span>` : ''}
        </div>`;
      })() : '';
      // Trend row: shown when at least one metric is drifting
      const trendRow = pt && (pt.duration_trend !== 'stable' || (pt.energy_trend && pt.energy_trend !== 'stable')) ? (() => {
        const parts = [];
        if (pt.duration_trend === 'up') parts.push(this._t('msg.trend_duration_longer', {pct: `${pt.duration_slope_pct > 0 ? '+' : ''}${pt.duration_slope_pct}`, avg: `${Math.round(pt.duration_recent_mean_s / 60)}m`}, `Duration trending longer (${pt.duration_slope_pct > 0 ? '+' : ''}${pt.duration_slope_pct}%/cycle) — recent avg ${Math.round(pt.duration_recent_mean_s / 60)}m`));
        else if (pt.duration_trend === 'down') parts.push(this._t('msg.trend_duration_shorter', {pct: `${pt.duration_slope_pct}`, avg: `${Math.round(pt.duration_recent_mean_s / 60)}m`}, `Duration trending shorter (${pt.duration_slope_pct}%/cycle) — recent avg ${Math.round(pt.duration_recent_mean_s / 60)}m`));
        if (pt.energy_trend === 'up') parts.push(this._t('msg.trend_energy_up', {pct: `${pt.energy_slope_pct > 0 ? '+' : ''}${pt.energy_slope_pct}`, avg: _fmtEnergy(pt.energy_recent_mean_wh)}, `Energy trending up (${pt.energy_slope_pct > 0 ? '+' : ''}${pt.energy_slope_pct}%/cycle) — recent avg ${_fmtEnergy(pt.energy_recent_mean_wh)}`));
        else if (pt.energy_trend === 'down') parts.push(this._t('msg.trend_energy_down', {pct: `${pt.energy_slope_pct}`}, `Energy trending down (${pt.energy_slope_pct}%/cycle)`));
        const isWorrying = pt.duration_trend === 'up' || pt.energy_trend === 'up';
        const trendAdv = this._profileAdvisory(m.name, 'duration_trend_up') || this._profileAdvisory(m.name, 'energy_trend_up');
        const col = isWorrying ? 'var(--warning-color,#ff9800)' : 'var(--info-color,#2196f3)';
        const bg = isWorrying ? 'rgba(255,152,0,.10)' : 'rgba(33,150,243,.10)';
        return `<div style="margin:6px 0;padding:8px 12px;border-radius:6px;background:${bg};font-size:.88em">
          <span style="font-weight:600;color:${col}">${this._t('msg.performance_trend', {n: pt.cycle_count}, `Performance trend (${pt.cycle_count} cycles)`)}</span><br>
          ${parts.map(p => `<span>${p}</span>`).join('<br>')}
          ${trendAdv ? `<br><span style="opacity:.75">${_esc(this._advisoryText(trendAdv))}</span>` : ''}
        </div>`;
      })() : '';
      body = `<div class="wd-sg-row">
          <div class="wd-sg">
            <div class="wd-sg-h">${this._t('lbl.duration', {}, 'Duration')}</div>
            <div class="wd-sg-main">${mins(st.avg_duration)}<span>${this._t('stat.avg', {}, 'avg')}</span></div>
            <div class="wd-sg-sub">${this._t('stat.min', {v: mins(st.min_duration)}, `min ${mins(st.min_duration)}`)} · ${this._t('stat.max', {v: mins(st.max_duration)}, `max ${mins(st.max_duration)}`)}${env.duration_std_dev != null ? ` · ${this._t('stat.consistency', {v: `${Math.round(env.duration_std_dev / 60)}m`}, `consistency ±${Math.round(env.duration_std_dev / 60)}m`)}` : ''}</div>
          </div>
          <div class="wd-sg">
            <div class="wd-sg-h">${this._t('lbl.energy', {}, 'Energy')}</div>
            <div class="wd-sg-main">${_fmtEnergy(st.avg_energy)}<span>${this._t('stat.avg', {}, 'avg')}</span></div>
            <div class="wd-sg-sub">${this._t('stat.total', {v: _fmtEnergy(total)}, `total ${_fmtEnergy(total)}`)}</div>
          </div>
          ${st.avg_cost != null ? `<div class="wd-sg">
            <div class="wd-sg-h">${this._t('lbl.avg_cost', {}, 'Avg cost')}</div>
            <div class="wd-sg-main">${_fmtCost(st.avg_cost, cur)}<span>${this._t('stat.avg', {}, 'avg')}</span></div>
            <div class="wd-sg-sub">${this._t('stat.total', {v: _fmtCost(st.total_cost, cur)}, 'total {v}')}</div>
          </div>` : ''}
          <div class="wd-sg">
            <div class="wd-sg-h">${this._t('lbl.activity', {}, 'Activity')}</div>
            <div class="wd-sg-main">${st.cycle_count || 0}<span>${this._t('lbl.cycles_lc', {}, 'cycles')}</span></div>
            <div class="wd-sg-sub">${this._t('stat.last_run', {v: st.last_run ? _fmtDate(st.last_run) : '-'}, `last run ${st.last_run ? _fmtDate(st.last_run) : '-'}`)}</div>
          </div>
        </div>
        ${healthRow}
        ${trendRow}
        ${this._profileAdvisory(m.name, 'shape_drift') ? `<div style="margin-top:8px;padding:8px 10px;background:color-mix(in srgb, var(--warning-color,#ff9800) 9%, transparent);border-radius:6px;border-left:3px solid var(--warning-color,#ff9800)">
            <span style="font-weight:600;color:var(--warning-color,#ff9800)">⚠ ${_esc(this._advisoryText(this._profileAdvisory(m.name, 'shape_drift')))}</span>
          </div>` : ''}
        ${env.avg && env.avg.length ? `<div class="wd-canvas-wrap"><canvas id="wd-env-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_envelope_chart', {}, 'Profile power envelope chart'))}"></canvas></div>` : `<p class="wd-info">${this._t('msg.no_envelope', {}, 'No envelope yet - rebuild after labelling cycles.')}</p>`}`;
    } else if (m.tab === 'phases') {
      const cat = m.catalog || [];
      const rows = (m.phases || []).map((ph, i) => {
        const opts = cat.map(name => `<option value="${_esc(name)}" ${ph.name === name ? 'selected' : ''}>${_esc(name)}</option>`).join('');
        return `<div class="wd-phase-row"><span class="wd-swatch" style="background:${_PALETTE[i % _PALETTE.length]}"></span>
          <select data-phidx="${i}" data-phfield="name" style="min-width:130px"><option value="">${this._t('lbl.name_placeholder', {}, '(name)')}</option>${opts}</select>
          <input type="number" data-phidx="${i}" data-phfield="start" value="${(ph.start / 60).toFixed(1)}" step="0.5" min="0" style="width:80px"> –
          <input type="number" data-phidx="${i}" data-phfield="end" value="${(ph.end / 60).toFixed(1)}" step="0.5" min="0" style="width:80px"><span class="wd-field-hint" style="margin:0">${this._t('lbl.timer_min', {}, 'min')}</span>
          <button class="wd-btn wd-btn-danger wd-btn-sm" data-maction="pp-phase-rm" data-idx="${i}">✕</button></div>`;
      }).join('');
      const busy = this._busy.has('pp-phase-save');
      body = `<p class="wd-info" style="margin-bottom:10px">${this._t('msg.phase_ranges_intro', {}, 'Phase ranges (minutes from cycle start) overlaid on the average curve. Edit values to preview live.')}</p>
        ${m.env && m.env.avg && m.env.avg.length ? `<div class="wd-canvas-wrap"><canvas id="wd-phase-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_phase_chart', {}, 'Phase editor chart'))}"></canvas></div>` : `<p class="wd-info">${this._t('msg.no_envelope_overlay', {}, 'No envelope available to overlay.')}</p>`}
        <div style="margin:10px 0">${rows || `<p class="wd-info">${this._t('msg.no_phases_assigned', {}, 'No phases assigned.')}</p>`}</div>
        ${canEdit ? `<div class="wd-mode-bar">
          <button class="wd-btn wd-btn-sm wd-btn-secondary" data-maction="pp-phase-add">${this._t('btn.add_phase', {}, '+ Add phase')}</button>
          <button class="wd-btn wd-btn-sm wd-btn-primary" data-maction="pp-phase-save" ${busy ? 'disabled' : ''}>${busy ? ('<span class="wd-spin"></span> ' + this._t('status.saving', {}, 'Saving…')) : this._t('btn.save_phases', {}, 'Save phases')}</button>
        </div>` : ''}`;
    } else if (m.tab === 'cleanup') {
      const allCyc = (m.cleanup && m.cleanup.cycles) || [];
      const sel = (m.cleanup && m.cleanup.selected) || new Set();
      const { col: clCol, dir: clDir } = this._cleanupSort;
      const clGetters = {
        date: c => c.start_time ? new Date(c.start_time).getTime() : 0,
        duration: c => c.duration,
        energy: c => c.energy_kwh,
        status: c => c.status || '',
      };
      const cyc = _sortBy(allCyc, clGetters[clCol] || clGetters.date, clDir);
      const rows = cyc.map((c, i) => {
        const origIdx = allCyc.indexOf(c);
        const editBtn = canEdit ? `<td style="padding:4px 6px 4px 2px;white-space:nowrap">
          <button class="wd-btn wd-btn-secondary wd-btn-sm" data-action="cleanup-edit-cycle" data-cid="${_esc(c.cycle_id)}">${this._t('btn.trim_split', {}, 'Trim / Split')}</button>
        </td>` : '';
        return `<tr data-cid="${_esc(c.cycle_id)}" style="cursor:pointer">
          <td style="width:26px;padding:6px 4px"><input type="checkbox" data-cleanidx="${origIdx}" ${sel.has(c.cycle_id) ? 'checked' : ''}></td>
          <td style="width:10px;padding:6px 2px"><span class="wd-swatch" style="background:${_PALETTE[origIdx % _PALETTE.length]}"></span></td>
          <td class="wd-tc-date">${_fmtDate(c.start_time)}</td>
          <td class="wd-tc-num">${_fmtDuration(c.duration)}</td>
          <td class="wd-tc-num">${c.energy_kwh != null ? _fmtEnergy(c.energy_kwh) : '-'}</td>
          <td><span class="wd-pill">${_esc(c.status || 'completed')}</span></td>
          ${editBtn}
        </tr>`;
      }).join('');
      const thead = `<thead><tr>
        <th style="width:26px;padding:6px 4px"></th><th style="width:10px;padding:6px 2px"></th>
        ${_th(this._t('lbl.date', {}, 'Date'), 'date', clCol === 'date', clDir, 'cleanupsort')}
        ${_th(this._t('lbl.duration', {}, 'Duration'), 'duration', clCol === 'duration', clDir, 'cleanupsort', 'right')}
        ${_th(this._t('lbl.energy', {}, 'Energy'), 'energy', clCol === 'energy', clDir, 'cleanupsort', 'right')}
        ${_th(this._t('lbl.status', {}, 'Status'), 'status', clCol === 'status', clDir, 'cleanupsort')}
        ${canEdit ? '<th></th>' : ''}
      </tr></thead>`;
      const busyDel = this._busy.has('pp-cleanup-del');
      const busyUnl = this._busy.has('pp-cleanup-unlabel');
      // Both actions fan out to one WS call per selected cycle, so whichever is
      // running locks the other out - an unlabel racing a delete would re-label
      // cycles that are already gone and rebuild the envelope from a stale set.
      const clBusy = busyDel || busyUnl;
      body = `<p class="wd-info" style="margin-bottom:10px">${this._t('msg.cleanup_intro', {}, 'All labelled cycles overlaid. Tick outliers, then unlabel them (kept in history, no longer shaping this profile) or delete them.')}</p>
        ${allCyc.length ? `<div class="wd-canvas-wrap"><canvas id="wd-spag-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_spaghetti_chart', {}, 'Overlaid cycle power traces'))}"></canvas></div>` : `<p class="wd-info">${this._t('msg.no_cycles_profile', {}, 'No cycles for this profile.')}</p>`}
        ${allCyc.length ? `<div class="wd-table-wrap" style="max-height:420px;overflow:auto;margin:10px 0"><table class="wd-table">${thead}<tbody>${rows}</tbody></table></div>` : ''}
        ${canEdit ? `<div class="wd-modal-actions">
          <button class="wd-btn wd-btn-secondary" data-maction="pp-cleanup-unlabel" ${clBusy || sel.size === 0 ? 'disabled' : ''} title="${_esc(this._t('btn.unlabel_selected_tip', {}, 'Remove the label from the selected cycles. They stay in your history but stop shaping this profile.'))}">${busyUnl ? ('<span class="wd-spin"></span> ' + this._t('status.unlabelling', {}, 'Unlabelling…')) : this._t('btn.unlabel_selected', {n: sel.size}, `Unlabel selected (${sel.size})`)}</button>
          <button class="wd-btn wd-btn-danger" data-maction="pp-cleanup-del" ${clBusy || sel.size === 0 ? 'disabled' : ''}>${busyDel ? ('<span class="wd-spin"></span> ' + this._t('status.deleting', {}, 'Deleting…')) : this._t('btn.delete_selected', {n: sel.size}, `Delete selected (${sel.size})`)}</button>
        </div>` : ''}`;
    } else if (m.tab === 'danger') {
      const busyR = this._busy.has('pp-rebuild');
      const curDurMin = (m.stats && m.stats.avg_duration) ? Math.round(m.stats.avg_duration / 60) : 0;
      // #158: with cycles the duration is recomputed on every envelope rebuild, so
      // an edit could not stick; show it read-only and say where it comes from.
      const durLearned = !!(m.stats && m.stats.duration_learned);
      const durHint = durLearned
        ? this._t('msg.duration_learned_hint', {}, "Worked out from this program's cycles (outliers left out) and updated after each new one. To change it, trim or remove the cycles that are off.")
        : this._t('msg.manual_duration_hint', {}, "The profile's expected cycle length, used for time-remaining estimates. Leave it unchanged to keep the current value.");
      body = `<div class="wd-field"><label>${this._t('lbl.rename_profile', {}, 'Rename Profile')}</label><input type="text" id="wd-pp-rename" value="${_esc(m.name)}"></div>
        <div class="wd-field"><label>${this._t('lbl.expected_duration', {}, 'Expected Duration (min)')}</label><input type="number" id="wd-pp-dur" min="0" max="600" value="${curDurMin}" data-orig="${curDurMin}" ${durLearned ? 'disabled' : ''}>
          <div class="wd-field-hint">${durHint}</div></div>
        <div class="wd-card-actions">
          <button class="wd-btn wd-btn-primary" data-maction="pp-rename">${this._t('btn.save', {}, 'Save')}</button>
          <button class="wd-btn wd-btn-secondary" data-maction="pp-rebuild" ${busyR ? 'disabled' : ''}>${busyR ? ('<span class="wd-spin"></span> ' + this._t('status.rebuilding', {}, 'Rebuilding…')) : this._t('btn.rebuild_envelope', {}, 'Rebuild Envelope')}</button>
          <button class="wd-btn wd-btn-danger" data-maction="pp-delete">${this._t('btn.delete_profile', {}, 'Delete Profile')}</button>
        </div>`;
    }

    const shareProfileBtn = (this._onlineEnabled() && this._storeDeviceDeclared())
      ? `<button class="wd-btn wd-btn-ghost wd-btn-sm" type="button" data-action="store-share-profile" data-prog="${_esc(m.name)}" title="${_esc(this._t('btn.share_device_tip', {}, 'Share this appliance and its reference cycles to the community store so owners of the same machine can adopt them.'))}">⬆ ${this._t('btn.share_to_store', {}, 'Share to store')}</button>`
      : '';
    return `<h2>${this._t('modal.profile_title', {name: m.name}, 'Profile · {name}')}</h2>
      <div class="wd-mini-tabs">${tabBar}</div>
      ${body}
      <div class="wd-modal-actions" style="margin-top:14px">
        <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
        ${shareProfileBtn}
      </div>`;
  }

  // The profile curves drawn behind a cycle's trace in Inspect/Review (hidden while
  // trimming/splitting): the labelled profile's expected curve, or for an unlabelled
  // cycle with pending feedback the SUSPECTED profile and its runner-up (#462), each
  // dashed and named as such so neither reads as a confirmed label. The chart and
  // its legend both read this list, so they agree. Names are plain text.
  _cycleProfileOverlays(m) {
    const out = [];
    if (!m || (m.mode !== 'view' && m.mode !== 'review')) return out;
    const cur = m.curve || {};
    const plan = m.overlayPlan || null;
    const suspected = !!(plan && plan.suspected);
    const name = (plan && plan.name) || cur.profile_name || 'profile';
    const label = suspected
      ? this._tText('lbl.suspected_profile', { name }, '{name} (suspected)')
      : `${this._tText('lbl.expected', {}, 'Expected')} (${name})`;
    const pe = m.profileEnv;
    const envEnd = env => env.target_duration || env.avg[env.avg.length - 1][0] || 0;
    if (!suspected && (cur.expected || []).length > 1) {
      // Server-projected onto this cycle's own time axis via the same alignment
      // the artifact shading was computed with, so the overlay, the trace and the
      // shading agree. Do NOT extend the x axis - it is already in cycle time.
      out.push({ kind: 'expected', points: cur.expected, stroke: '#ff9800', width: 2, alpha: 0.45, name: label });
    } else if (pe && (pe.avg || []).length) {
      // The envelope on its own absolute grid, which slides by (duration -
      // target_duration): no stored projection, or the profile is only suspected.
      out.push({ kind: suspected ? 'suspected' : 'expected', points: pe.avg, stroke: '#ff9800', width: 2, alpha: 0.45, dash: suspected, name: label, xEnd: envEnd(pe) });
    }
    const ru = suspected && plan.runnerUp ? m.runnerUpEnv : null;
    if (ru && (ru.avg || []).length) {
      out.push({ kind: 'runner_up', points: ru.avg, stroke: '#9c27b0', width: 1.6, alpha: 0.55, dash: true, xEnd: envEnd(ru),
        name: this._tText('lbl.runner_up_profile', { name: plan.runnerUp }, '{name} (runner-up)') });
    }
    return out;
  }

  _drawCycleEditor() {
    const m = this._modal;
    if (!m || m.type !== 'cycle-detail' || !m.loaded) return;
    const cur = m.curve || {};
    const samples = cur.samples || [];
    if (!samples.length) return;
    let full = cur.full_duration_s || samples[samples.length - 1][0] || 1;
    const series = [];
    this._cycleProfileOverlays(m).forEach(s => { series.push(s); full = Math.max(full, s.xEnd || 0); });
    // User-selected comparison overlays (Review mode): draw each ticked profile's
    // envelope so the user can eyeball which profile best fits the cycle.
    if (m.mode === 'review' && (m.overlays || []).length) {
      const cache = this._profileEnvCache || {};
      (m.overlays || []).forEach(n => {
        const env = cache[n];
        if (!env || !(env.avg || []).length) return;
        const col = _PALETTE[Math.max(0, (this._profiles || []).findIndex(p => p.name === n)) % _PALETTE.length];
        series.push({ points: env.avg, stroke: col, width: 1.6, alpha: 0.7, name: n });
        const last = env.avg[env.avg.length - 1];
        full = Math.max(full, env.target_duration || (last ? last[0] : 0));
      });
    }
    // The recorder's history either side of the trace (item 513): drawn grey behind
    // the trace on a shaded background, read as "before start" / "after end", and
    // every series reads as absent outside its own points while it is shown.
    const context = this._cycleContextSeries(m);
    if (context) {
      series.forEach(s => { s.bounded = true; });
      series.push(context.series);
      full = Math.max(full, context.xEnd);
    }
    series.push({ points: samples, stroke: 'primary', fill: true, width: 2, name: this._t('lbl.power', {}, 'Power'), bounded: !!context });
    const bands = [], vlines = [];
    if (context) {
      const shade = 'rgba(127,127,127,.10)';
      if (context.xStart < context.traceStart) bands.push({ x0: context.xStart, x1: context.traceStart, fill: shade });
      if (context.xEnd > context.traceEnd) bands.push({ x0: context.traceEnd, x1: context.xEnd, fill: shade });
    }
    let artifacts = [];
    if (m.mode === 'trim') {
      const a = m.trim.start, b = m.trim.end;
      bands.push({ x0: 0, x1: a, fill: 'rgba(244,67,54,.18)' });
      bands.push({ x0: b, x1: full, fill: 'rgba(244,67,54,.18)' });
      vlines.push({ x: a, color: '#f44336', label: 'S' }, { x: b, color: '#f44336', label: 'E' });
    } else if (m.mode === 'split') {
      (m.split.offsets || []).slice().sort((x, y) => x - y).forEach((o, i) => vlines.push({ x: o, color: '#ff9800', label: '#' + (i + 1) }));
    } else {
      // View/Review: shade detected artifacts (door-open pauses, out-of-band
      // dips/spikes). Details surface in the hover readout + the list below.
      artifacts = cur.artifacts || [];
      const fillOf = { pause: 'rgba(255,152,0,.22)', dip: 'rgba(33,150,243,.18)', spike: 'rgba(244,67,54,.18)' };
      artifacts.forEach(a => bands.push({ x0: a.start_s, x1: Math.max(a.end_s, a.start_s + 1), fill: fillOf[a.type] || 'rgba(158,158,158,.18)' }));
      // Shade HA restart gaps (power trace holes). Uses a blue-gray hatched-look
      // band so the user can see where data is missing rather than zero.
      const startIso = cur.start_time;
      (cur.restart_gaps || []).forEach(g => {
        if (!startIso) return;
        const cycleStart = new Date(startIso).getTime();
        const x0 = Math.max(0, (new Date(g.start_ts).getTime() - cycleStart) / 1000);
        const x1 = Math.max(x0 + 1, (new Date(g.end_ts).getTime() - cycleStart) / 1000);
        bands.push({ x0, x1, fill: 'rgba(96,125,139,.20)', label: '↻' });
      });
    }
    this._drawCurves('wd-cyc-canvas', {
      series, xMax: full, bands, vlines, artifacts,
      ...(context ? { xStart: context.xStart, cycleSpan: [context.traceStart, context.traceEnd] } : {}),
    });
  }

  // How many minutes of recorder history the cycle dialog draws around a cycle on
  // this device (item 513): a per-user, per-device pref, 10 by default, 0 = off.
  _cycleContextMinutes(entryId) {
    const map = this._pref('cycle_context_min', null);
    const v = map && typeof map === 'object' ? map[entryId] : undefined;
    return _CYCLE_CONTEXT_CHOICES.includes(v) ? v : _CYCLE_CONTEXT_DEFAULT_MIN;
  }

  // Fetch the recorder's history around the open cycle into `m.ctx` (item 513).
  // Display only: get_cycle_context reads the recorder and nothing else. Skipped
  // for imported cycles, which this plug never measured, and while switched off.
  async _loadCycleContext(entryId, cycleId, curve) {
    const m = this._modal;
    if (!m || m.type !== 'cycle-detail' || m.cycleId !== cycleId) return;
    const minutes = this._cycleContextMinutes(entryId);
    if (!minutes || !curve || curve.is_reference || !(curve.samples || []).length) {
      m.ctx = { minutes, loading: false, data: null };
      return;
    }
    m.ctx = { minutes, loading: true, data: null };
    let data = null;
    try {
      data = await this._ws({ type: `${_DOMAIN}/get_cycle_context`, entry_id: entryId, cycle_id: cycleId, before_s: minutes * 60, after_s: minutes * 60 });
    } catch (_) { data = { available: false, reason: 'no_history' }; }
    const cur = this._modal;
    // Stale reply: the dialog closed, moved to another cycle, or the length changed.
    if (!cur || cur.type !== 'cycle-detail' || cur.cycleId !== cycleId || cur.entryId !== entryId
        || !cur.ctx || cur.ctx.minutes !== minutes) return;
    cur.ctx = { minutes, loading: false, data };
    this._render();
  }

  // The context as one drawable series plus its extent, or null when none is
  // shown (off, loading, nothing recorded, or Trim/Split, which edit the trace and
  // must not suggest they can reach outside it). A change-only sensor holds its
  // value until the next row, so it is drawn as steps: a straight line from the
  // last idle row to the first cycle reading would invent a slow rise that never
  // happened. A null power (an unavailable row) breaks the line.
  _cycleContextSeries(m) {
    if (!m || (m.mode !== 'view' && m.mode !== 'review')) return null;
    const d = m.ctx && m.ctx.data;
    const samples = (m.curve && m.curve.samples) || [];
    if (!d || !d.available || !samples.length) return null;
    const first = samples[0], last = samples[samples.length - 1];
    const pts = [];
    let hold = null;
    const add = (t, w) => {
      if (hold != null) pts.push([t, hold]);
      if (w == null) { pts.push([t, null]); hold = null; return; }
      pts.push([t, w]);
      hold = w;
    };
    const rows = (list, keep) => (Array.isArray(list) ? list : []).filter(p => Array.isArray(p) && Number.isFinite(p[0]) && keep(p[0]));
    const before = rows(d.before, t => t < first[0]);
    const after = rows(d.after, t => t >= last[0]);
    before.forEach(([t, w]) => add(t, w));
    // Hold the last reading up to the start, then rise into the trace's first one.
    if (hold != null) { pts.push([first[0], hold]); pts.push([first[0], first[1]]); }
    if (after.length) {
      if (pts.length) pts.push([last[0], null]);  // no line across the cycle itself
      hold = null;
      add(last[0], last[1]);
      after.forEach(([t, w]) => add(t, w));
      const endX = Number(d.after_end_s) || 0;
      if (hold != null && endX > pts[pts.length - 1][0]) pts.push([endX, hold]);
    }
    if (!pts.some(p => p[1] != null)) return null;
    const xStart = before.length ? Math.min(before[0][0], -(Number(d.before_s) || 0)) : first[0];
    const xEnd = after.length ? Math.max(pts[pts.length - 1][0], Number(d.after_end_s) || 0) : last[0];
    return {
      series: { kind: 'context', points: pts, stroke: '#9e9e9e', width: 2, alpha: 1, bounded: true, aside: true,
        name: this._tText('lbl.cycle_context_series', {}, 'Recorder history') },
      xStart: Math.min(0, xStart), xEnd, traceStart: first[0], traceEnd: last[0],
    };
  }

  // Multi-cycle comparison modal (opened from the Cycles select-mode "Compare"
  // button). Overlays the selected cycles on one graph with per-cycle show/hide
  // and optional learned-profile envelope overlays. Reuses _drawCurves, _PALETTE,
  // and the profile-envelope cache (_ensureProfileEnvs) rather than any new draw
  // path — same machinery as the review-mode overlays, generalized to N cycles.
  _htmlCompareModal(m) {
    const ids = m.ids || [];
    const byId = {};
    (this._cycles || []).forEach(c => { byId[c.id] = c; });
    const hidden = m.hidden || new Set();
    const cycRows = ids.map((cid, i) => {
      const c = byId[cid] || {};
      const col = _PALETTE[i % _PALETTE.length];
      const on = !hidden.has(cid);
      const loaded = !!(m.cycles && m.cycles[cid]);
      const label = `${_fmtDate(c.start_time) || String(cid).slice(0, 8)} · ${Math.round((c.duration || 0) / 60)}m · ${_esc(c.profile_name || this._t('lbl.unlabelled', {}, 'Unlabelled'))}`;
      return `<label class="wd-rev-tag"><input type="checkbox" class="wd-compare-cyc" value="${_esc(cid)}" ${on ? 'checked' : ''} ${loaded ? '' : 'disabled'}>` +
        `<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:${col};margin:0 2px"></span>${label}${loaded ? '' : ` <span class="wd-info">${this._t('lbl.loading_paren', {}, '(loading…)')}</span>`}</label>`;
    }).join('');
    const profRows = (this._profiles || []).map(p => {
      const on = (m.overlays || []).includes(p.name);
      const col = _PALETTE[Math.max(0, (this._profiles || []).findIndex(x => x.name === p.name)) % _PALETTE.length];
      const sw = on ? `<span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:${col};margin:0 2px;opacity:.55"></span>` : '';
      return `<label class="wd-rev-tag"><input type="checkbox" class="wd-compare-overlay" value="${_esc(p.name)}" ${on ? 'checked' : ''}> ${sw}${_esc(p.name)}</label>`;
    }).join('') || `<span class="wd-info">${this._t('msg.no_profiles_overlay', {}, 'No profiles to overlay.')}</span>`;
    return `<h2>${this._t('msg.compare_cycles_title', { count: ids.length }, `Compare ${ids.length} cycles`)}</h2>
      ${m.loaded ? '' : `<div class="wd-info" style="margin-bottom:6px">${this._t('msg.loading', {}, 'Loading…')}</div>`}
      <div class="wd-canvas-wrap"><canvas id="wd-compare-canvas" role="img" aria-label="${_esc(this._t('lbl.aria_compare_chart', {}, 'Cycle comparison chart'))}"></canvas></div>
      <div class="wd-rev-sub" style="margin-top:10px">${this._t('msg.compare_selected_cycles', {}, 'Selected cycles (solid) – show / hide')}</div>
      <div class="wd-rev-tags">${cycRows}</div>
      <div class="wd-rev-sub">${this._t('msg.compare_overlay_profiles', {}, 'Overlay profiles (faint)')}${_tip(this._t('msg.compare_overlay_tip', {}, 'Overlay learned profile envelopes to see which program each cycle resembles.'))}</div>
      <div class="wd-rev-tags">${profRows}</div>
      <div class="wd-modal-actions" style="margin-top:16px">
        <button class="wd-btn wd-btn-secondary" data-maction="cancel">${this._t('btn.close', {}, 'Close')}</button>
      </div>`;
  }

  _drawCompareCanvas() {
    const m = this._modal;
    if (!m || m.type !== 'compare-cycles') return;
    const ids = m.ids || [];
    const byId = {};
    (this._cycles || []).forEach(c => { byId[c.id] = c; });
    const hidden = m.hidden || new Set();
    const series = [];
    let full = 0;
    // Profile overlays first so they render faint, behind the cycle traces.
    const cache = this._profileEnvCache || {};
    (m.overlays || []).forEach(n => {
      const env = cache[n];
      if (!env || !(env.avg || []).length) return;
      const col = _PALETTE[Math.max(0, (this._profiles || []).findIndex(x => x.name === n)) % _PALETTE.length];
      series.push({ points: env.avg, stroke: col, width: 2, alpha: 0.4, name: n });
      const last = env.avg[env.avg.length - 1];
      full = Math.max(full, env.target_duration || (last ? last[0] : 0));
    });
    ids.forEach((cid, i) => {
      if (hidden.has(cid)) return;
      const cur = m.cycles && m.cycles[cid];
      const samples = cur && cur.samples;
      if (!samples || !samples.length) return;
      const col = _PALETTE[i % _PALETTE.length];
      const c = byId[cid] || {};
      // No `cid` here on purpose: the graph's click-to-select is scoped to the
      // cleanup canvas only, so a "click to select" hover hint would be
      // misleading in this modal (show/hide is via the checkboxes below).
      series.push({ points: samples, stroke: col, width: 1.8, alpha: 0.9, name: _fmtDate(c.start_time) || String(cid).slice(0, 8) });
      full = Math.max(full, cur.full_duration_s || samples[samples.length - 1][0] || 0);
    });
    this._drawCurves('wd-compare-canvas', { series, xMax: full || 1 });
  }

  _drawProfileEnvelope() {
    const m = this._modal;
    if (!m || !m.env || !(m.env.avg || []).length) return;
    const env = m.env;
    this._drawCurves('wd-env-canvas', {
      series: [{ points: env.avg, stroke: 'primary', width: 2, name: 'Average' }],
      band: { min: env.min, max: env.max },
      xMax: env.target_duration || env.avg[env.avg.length - 1][0],
    });
  }

  _drawPhaseEditor() {
    const m = this._modal;
    if (!m || !m.env || !(m.env.avg || []).length) return;
    const env = m.env;
    const full = env.target_duration || env.avg[env.avg.length - 1][0];
    const bands = (m.phases || []).map((ph, i) => ({ x0: ph.start, x1: ph.end, fill: _withAlpha(_PALETTE[i % _PALETTE.length], 0.20) }));
    const vlines = [];
    (m.phases || []).forEach((ph, i) => {
      const col = _PALETTE[i % _PALETTE.length];
      vlines.push({ x: ph.start, color: col, label: ph.name ? ph.name.slice(0, 7) : '', handle: true });
      vlines.push({ x: ph.end, color: col, handle: true });
    });
    this._drawCurves('wd-phase-canvas', { series: [{ points: env.avg, stroke: 'primary', width: 2, name: 'Average' }], band: { min: env.min, max: env.max }, bands, vlines, xMax: full });
  }

  _drawSpaghetti() {
    const m = this._modal;
    if (!m || !m.cleanup || !(m.cleanup.cycles || []).length) return;
    const cyc = m.cleanup.cycles;
    const sel = m.cleanup.selected || new Set();
    const tableHover = this._spagTableHoverCid || null;
    let xMax = 1;
    cyc.forEach(c => { const s = c.samples || []; if (s.length && s[s.length - 1][0] > xMax) xMax = s[s.length - 1][0]; });
    const series = cyc.map((c, i) => {
      const isSel = sel.has(c.cycle_id), isHov = tableHover === c.cycle_id;
      return {
        points: c.samples || [],
        stroke: _PALETTE[i % _PALETTE.length],
        width: (isSel || isHov) ? 2.6 : 1,
        alpha: sel.size ? (isSel ? 1 : 0.22) : tableHover ? (isHov ? 1 : 0.22) : 0.7,
        name: _fmtDate(c.start_time),
        cid: c.cycle_id,
      };
    });
    this._drawCurves('wd-spag-canvas', { series, xMax });
  }

  // ── Event wiring ──────────────────────────────────────────────────────────

  _wire() {
    const sr = this.shadowRoot;
    if (!sr) return;

    // Hamburger: toggle the HA sidebar (no app bar is provided for custom panels).
    const burger = sr.getElementById('wd-burger');
    if (burger) burger.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('hass-toggle-menu', { bubbles: true, composed: true }));
    });

    sr.querySelectorAll('.wd-devcard[data-idx]').forEach(btn => btn.addEventListener('click', () => this._guardUnsaved(() => this._selectDevice(parseInt(btn.dataset.idx, 10)))));

    sr.querySelectorAll('[data-tab]').forEach(btn => btn.addEventListener('click', () => {
      const target = btn.dataset.tab;
      const go = () => {
        if (target !== 'settings') { this._pendingSettings = {}; this._dirtyOptKeys = new Set(); }
        this._tab = target; this._fetchTabData();
      };
      // Leaving Settings with unsaved edits used to drop them without a word
      // (audit UI-15); the same guard covers device switches and leaving the panel.
      if (this._tab === 'settings' && target !== 'settings') { this._guardUnsaved(go); return; }
      go();
    }));
    sr.querySelectorAll('[data-sec]').forEach(btn => btn.addEventListener('click', () => { this._snapshotFormToPending(sr); this._settingsSec = btn.dataset.sec; this._settingsSearch = ''; this._settingsSugOnly = false; this._render(); }));
    sr.querySelectorAll('[data-ptab]').forEach(btn => btn.addEventListener('click', () => {
      const sub = this._panelSubtab = btn.dataset.ptab;
      this._render();
      // Lazy-load the folded Diagnostics/Logs data the first time each is opened.
      const dev = this._devices[this._selIdx];
      if (!dev) return;
      if (sub === 'diagnostics' && !this._diag) this._fetchToolsData(dev.entry_id).then(() => { if (this._panelSubtab === 'diagnostics') this._render(); });
      else if (sub === 'logs') this._fetchLogs().then(() => { if (this._panelSubtab === 'logs') this._render(); });
      else if (sub === 'ml') this._fetchTabData();
    }));

    // Cycles | Maintenance sub-nav (data-hsub, so it never collides with data-tab).
    sr.querySelectorAll('[data-hsub]').forEach(btn => btn.addEventListener('click', () => {
      this._historySub = btn.dataset.hsub;
      this._render();
      const dev = this._devices[this._selIdx];
      if (this._historySub === 'maintenance' && dev) this._fetchMaintenance(dev.entry_id).then(() => { if (this._tab === 'history') this._render(); });
      else this._fetchTabData();
    }));

    // Header gear overlay sub-nav (My Preferences / Panel Settings / Access /
    // Online). Uses data-gtab so it never collides with the main tab router.
    sr.querySelectorAll('[data-gtab]').forEach(btn => btn.addEventListener('click', () => {
      this._gearTab = btn.dataset.gtab;
      if (this._modal && this._modal.type === 'gear-settings') this._modal.tab = this._gearTab;
      const dev = this._devices[this._selIdx];
      if (this._gearTab === 'online' && dev && this._onlineEnabled()) {
        this._ensureStoreConnectListener();
        this._loadStoreStatus(dev.entry_id).then(() => { if (this._modal && this._modal.type === 'gear-settings') this._render(); });
      }
      this._render();
    }));

    // Store-backed brand/model picker inputs (Basic > Device info). Listeners fire
    // on 'change' (blur / datalist pick) only, never mid-typing; the catalog loaders
    // patch the datalists in place so the dropdown is never rebuilt out from under
    // the user. Changing the brand reloads + enables the model field.
    //
    // #447: these stage into _pendingSettings, NOT _opts. `_opts` is the panel's copy
    // of the SAVED options and is what `_changedOptions` diffs the form against before
    // a save; writing the typed value there made the save see "unchanged" and drop
    // brand/model from the set_options payload entirely ("No changes to save"). The
    // panel then showed an appliance the backend had never stored, and every upload
    // failed with no_appliance_declared. Marking them dirty is what lets
    // _snapshotFormToPending keep them across a section switch.
    const stageAppliance = (key, value) => {
      this._pendingSettings[key] = value;
      this._dirtyOptKeys.add(key);
    };
    const brandInput = sr.getElementById('wd-store-brand');
    if (brandInput) brandInput.addEventListener('change', () => {
      const v = brandInput.value.trim();
      // Drop the model with the brand it belonged to. _renderModelPicker reads
      // store_model from _editedOpts(), so without this the previous brand's
      // model stays in the field and the next save persists a brand/model pair
      // that exists in no catalog. Only when the brand actually moved: a change
      // event that re-picks the same brand must not wipe a chosen model.
      if (v !== String(this._editedOpts().store_brand || '').trim()) {
        stageAppliance('store_model', '');
        // ...and the DOM with it. `_renderPreservingFormEdits` below snapshots
        // the form BEFORE it renders, and `_snapshotFormToPending` only reads
        // keys in `_dirtyOptKeys` - which `stageAppliance` has just put
        // `store_model` into. The input is still in the DOM holding the previous
        // brand's model, and `storemodel` has no branch there, so the default
        // `this._pendingSettings[key] = el.value` writes that straight back over
        // the value staged one line up. Staging alone is not just insufficient
        // here, it is what arms the overwrite.
        const staleModel = sr.getElementById('wd-store-model');
        if (staleModel) staleModel.value = '';
      }
      stageAppliance('store_brand', v);
      this._catalog.forBrand = v; this._catalog.devices = undefined;
      // Preserving, not plain: since brand/model became PENDING edits rather
      // than immediate saves, this re-render repaints the whole Basic section.
      // Device Name / Minimum Power / Off Delay hold a typed value only in the
      // DOM until _snapshotFormToPending runs, so a plain _render() repaints
      // them from _opts and silently discards whatever the user had typed
      // before reaching for the brand picker.
      this._renderPreservingFormEdits();  // enable + reset the model field (input has blurred)
    });
    const modelInput = sr.getElementById('wd-store-model');
    if (modelInput) modelInput.addEventListener('change', () => {
      stageAppliance('store_model', modelInput.value.trim());
      this._renderPreservingFormEdits();
    });

    // F3: Playground canvas pointer interaction (threshold drag + scrub)
    const pgCanvas = sr.getElementById('wd-pg-canvas');
    if (pgCanvas) {
      const layout = () => {
        const rect = pgCanvas.getBoundingClientRect();
        const ch = rect.height || 330;
        const padT = _PG_PIN_BAND_H + 8, powerH = ch - padT - (34 + 14 + 4);
        return { rect, padT, powerH };
      };
      // Return the event pin under a client point (within the pin band), or null.
      const eventHitAt = (clientX, clientY) => {
        const rect = pgCanvas.getBoundingClientRect();
        const x = clientX - rect.left, y = clientY - rect.top;
        if (y > _PG_PIN_BAND_H + 4) return null;   // only the head band, above the plot
        const hits = this._pgEventHits || [];
        let best = null, bestD = Infinity;
        for (const h of hits) {
          const d2 = (x - h.cx) ** 2 + (y - h.cy) ** 2;
          if (d2 <= (h.r + 4) ** 2 && d2 < bestD) { best = h; bestD = d2; }
        }
        return best;
      };
      const yToWatts = (clientY) => {
        const { rect, padT, powerH } = layout();
        const pts = this._pgPowerPts; if (!pts?.length) return 0;
        const maxW = Math.max(...pts.map(p => p.w), 1);
        return Math.max(0, (1 - Math.max(0, (clientY - rect.top) - padT) / powerH) * maxW);
      };
      const thresholdY = (watts) => {
        const { rect, padT, powerH } = layout();
        const pts = this._pgPowerPts; if (!pts?.length) return 0;
        const maxW = Math.max(...pts.map(p => p.w), 1);
        return rect.top + padT + (1 - Math.max(0, +watts) / maxW) * powerH;
      };
      // clientX -> time (seconds) using the current viewport mapping set by the draw.
      const xToTime = (clientX) => {
        const m = this._pgMap; if (!m) return null;
        const { rect } = layout();
        const frac = (clientX - rect.left - m.padLpx) / Math.max(1, m.plotWpx);
        return m.vMin + Math.max(0, Math.min(1, frac)) * (m.vMax - m.vMin);
      };
      pgCanvas.addEventListener('pointermove', (e) => {
        if (pgPts.has(e.pointerId)) pgPts.set(e.pointerId, { x: e.clientX, y: e.clientY });
        if (pgCanvas._wdPinching) { pgPinchFrame(); return; }
        if (this._pgDragging === 'start_thr') {
          this._pgThreshStart = Math.max(0, yToWatts(e.clientY));
          this._pgUpdateParamInput('start_threshold_w', this._pgThreshStart);
          this._pgDrawCanvas(); return;
        }
        if (this._pgDragging === 'stop_thr') {
          this._pgThreshStop = Math.max(0, yToWatts(e.clientY));
          this._pgUpdateParamInput('stop_threshold_w', this._pgThreshStop);
          this._pgDrawCanvas(); return;
        }
        if (this._pgDragging === 'pan' && this._pgPanStart) {
          const m = this._pgMap;
          const dxFrac = (e.clientX - this._pgPanStart.clientX) / Math.max(1, m.plotWpx);
          const span = this._pgPanStart.vMax - this._pgPanStart.vMin;
          let nMin = this._pgPanStart.vMin - dxFrac * span;
          nMin = Math.max(0, Math.min(this._pgPanStart.totalDur - span, nMin));
          this._pgView = { min: nMin, max: nMin + span };
          this._pgDrawCanvas(); return;
        }
        if (!this._pgPowerPts?.length) return;
        // Event pin heads (above the plot): hover shows a tooltip, not the cursor.
        const evHit = eventHitAt(e.clientX, e.clientY);
        if (evHit) {
          pgCanvas.style.cursor = 'pointer';
          this._pgHoverEvent = { t: evHit.t, type: evHit.type };
          this._pgHoverT = null;
          this._pgDrawCanvas();
          return;
        }
        if (this._pgHoverEvent) { this._pgHoverEvent = null; this._pgDrawCanvas(); }
        const startThr = this._pgThreshStart ?? this._pgFieldVal('start_threshold_w', {}) ?? 50;
        const stopThr = this._pgThreshStop ?? this._pgFieldVal('stop_threshold_w', {}) ?? 5;
        const nearThr = Math.abs(e.clientY - thresholdY(startThr)) < 8 || Math.abs(e.clientY - thresholdY(stopThr)) < 8;
        pgCanvas.style.cursor = nearThr ? 'ns-resize' : 'crosshair';
        const t = xToTime(e.clientX);
        if (t != null) { this._pgHoverT = t; this._pgUpdateStripAt(t); this._pgDrawCanvas(); }
      });
      // Same viewport write for wheel, pinch and double tap.
      const pgZoomAbout = (tFocus, factor) => {
        const m = this._pgMap;
        if (!m || tFocus == null) return;
        const span = m.vMax - m.vMin;
        const nSpan = Math.max(30, Math.min(m.totalDur, span * factor));
        const frac = span > 0 ? Math.max(0, Math.min(1, (tFocus - m.vMin) / span)) : 0.5;
        let nMin = tFocus - frac * nSpan;
        nMin = Math.max(0, Math.min(m.totalDur - nSpan, nMin));
        this._pgView = (nSpan >= m.totalDur - 1) ? null : { min: nMin, max: nMin + nSpan };
        this._pgDrawCanvas();
      };
      // Two-finger pinch/pan, matching the .wd-canvas-wrap charts. pan-y keeps
      // the vertical swipe with the page, so this is the only way to zoom the
      // Playground trace on a phone.
      const pgPts = new Map();
      let pgPinch = null;
      pgCanvas.addEventListener('pointerdown', (e) => {
        if (!this._pgPowerPts?.length) return;
        pgPts.set(e.pointerId, { x: e.clientX, y: e.clientY });
        if (pgPts.size === 2 && this._pgMap) {
          // Abandon whatever the first finger claimed; this is a pinch now.
          pgCanvas._wdPinching = true;
          pgCanvas._wdOwnGesture = false;
          this._pgDragging = null; this._pgPanStart = null;
          pgCanvas.classList.remove('wd-pg-panning');
          const [a, b] = [...pgPts.values()];
          pgPinch = { dist: Math.max(1, Math.abs(a.x - b.x)), centerX: (a.x + b.x) / 2 };
          return;
        }
        if (pgPts.size !== 1) return;
        if (eventHitAt(e.clientX, e.clientY)) return;  // clicking a pin head is not a pan
        pgCanvas.setPointerCapture(e.pointerId);
        const startThr = this._pgThreshStart ?? this._pgFieldVal('start_threshold_w', {}) ?? 50;
        const stopThr = this._pgThreshStop ?? this._pgFieldVal('stop_threshold_w', {}) ?? 5;
        // A fingertip cannot hit a 10px band; give touch a real touch target.
        const tol = e.pointerType === 'touch' ? 18 : 10;
        if (Math.abs(e.clientY - thresholdY(startThr)) < tol) { this._pgDragging = 'start_thr'; }
        else if (Math.abs(e.clientY - thresholdY(stopThr)) < tol) { this._pgDragging = 'stop_thr'; }
        else if (this._pgMap) {
          this._pgDragging = 'pan';
          this._pgPanStart = { clientX: e.clientX, vMin: this._pgMap.vMin, vMax: this._pgMap.vMax, totalDur: this._pgMap.totalDur };
          pgCanvas.classList.add('wd-pg-panning');
        }
        // Threshold drags are VERTICAL, the one axis pan-y hands to the page,
        // so they have to be claimed through the touch guard. Panning is
        // horizontal and deliberately is NOT claimed: leaving it unclaimed is
        // what lets a vertical swipe still scroll the page (#413).
        pgCanvas._wdOwnGesture = this._pgDragging === 'start_thr' || this._pgDragging === 'stop_thr';
      });
      const pgRelease = (e) => {
        try { pgCanvas.releasePointerCapture(e.pointerId); } catch (_) {}
        pgPts.delete(e.pointerId);
        if (pgPts.size < 2) { pgPinch = null; pgCanvas._wdPinching = false; }
        if (pgPts.size === 0) pgCanvas._wdOwnGesture = false;
        const wasThr = this._pgDragging === 'start_thr' || this._pgDragging === 'stop_thr';
        this._pgDragging = null; this._pgPanStart = null;
        pgCanvas.classList.remove('wd-pg-panning');
        return wasThr;
      };
      pgCanvas.addEventListener('pointerup', (e) => {
        if (pgRelease(e)) this._pgDrawCanvas();
      });
      // Without this, a touch gesture the browser reclaims for scrolling never
      // clears _pgDragging (only pointerup did), so the NEXT hover kept dragging
      // a threshold line with no finger down.
      pgCanvas.addEventListener('pointercancel', (e) => {
        if (pgRelease(e)) this._pgDrawCanvas();
        this._pgHoverT = null; this._pgHoverEvent = null; this._pgUpdateStripAt(null); this._pgDrawCanvas();
      });
      pgCanvas.addEventListener('pointerleave', (e) => {
        if (this._pgDragging || e.pointerType === 'touch') return;
        this._pgHoverT = null; this._pgHoverEvent = null; this._pgUpdateStripAt(null); this._pgDrawCanvas();
      });
      pgCanvas.addEventListener('wheel', (e) => {
        if (!this._pgPowerPts?.length || !this._pgMap) return;
        e.preventDefault();
        const factor = e.ctrlKey
          ? Math.min(4, Math.max(0.25, Math.exp(e.deltaY * 0.01)))
          : (e.deltaY > 0 ? 1.25 : 0.8);            // wheel down = zoom out
        pgZoomAbout(xToTime(e.clientX), factor);
      }, { passive: false });
      pgCanvas.addEventListener('dblclick', (e) => {
        if (this._pgView) { this._pgView = null; this._pgDrawCanvas(); return; }
        pgZoomAbout(xToTime(e.clientX), _CANVAS_DBLTAP_ZOOM);
      });
      const pgPinchFrame = () => {
        const m = this._pgMap;
        if (!m || !pgPinch || pgPts.size < 2) return;
        const [a, b] = [...pgPts.values()];
        const dist = Math.max(1, Math.abs(a.x - b.x));
        const centerX = (a.x + b.x) / 2;
        const span = m.vMax - m.vMin;
        const nSpan = Math.max(30, Math.min(m.totalDur, span * (pgPinch.dist / dist)));
        const tCenter = xToTime(centerX);
        const dragT = ((centerX - pgPinch.centerX) / Math.max(1, m.plotWpx)) * nSpan;
        pgPinch.dist = dist;
        pgPinch.centerX = centerX;
        if (tCenter == null) return;
        const frac = span > 0 ? Math.max(0, Math.min(1, (tCenter - m.vMin) / span)) : 0.5;
        let nMin = tCenter - frac * nSpan - dragT;
        nMin = Math.max(0, Math.min(m.totalDur - nSpan, nMin));
        this._pgView = (nSpan >= m.totalDur - 1) ? null : { min: nMin, max: nMin + nSpan };
        this._pgDrawCanvas();
      };
      this._attachTouchOwnershipGuard(pgCanvas);
    }

    // F3: Param input fields → sync to threshold state + redraw. Scoped to inputs:
    // the per-row publish button shares the data-pgkey hook.
    sr.querySelectorAll('input[data-pgkey]').forEach(inp => {
      inp.addEventListener('input', () => {
        const key = inp.dataset.pgkey;
        if (inp.dataset.pgtype === 'bool') {
          const val = inp.checked;
          if (key === 'start_threshold_w') this._pgThreshStart = val;
          else if (key === 'stop_threshold_w') this._pgThreshStop = val;
          else this._pgParamOverrides[key] = val;
          this._render();
          const again = sr.querySelector(`input[data-pgkey="${key}"]`);
          // preventScroll (#443): this element already had focus before the re-render, so re-focusing it is bookkeeping, not navigation. A plain .focus() scrolls the element into view and would override the scroll position _render just restored - which is the jump the Playground reporter recorded.
          if (again) again.focus({ preventScroll: true });
          requestAnimationFrame(() => this._pgDrawCanvas());
          return;
        }
        const raw = inp.value.trim();
        if (!raw) {
          if (key === 'start_threshold_w') this._pgThreshStart = null;
          else if (key === 'stop_threshold_w') this._pgThreshStop = null;
          else delete this._pgParamOverrides[key];
        } else {
          const val = parseFloat(raw);
          if (!isNaN(val)) {
            if (key === 'start_threshold_w') this._pgThreshStart = val;
            else if (key === 'stop_threshold_w') this._pgThreshStop = val;
            else this._pgParamOverrides[key] = val;
          }
          // Partial value ("1.", ".", "-") — leave state unchanged until next keystroke.
        }
        // Save the raw text and caret before _render() destroys this input. With
        // type="text" (not number), selectionStart is a real index and setSelectionRange
        // works, so cursor restoration is reliable unlike the old type=number approach.
        const caret = inp.selectionStart;
        const rawVal = inp.value;
        this._render();
        const again = sr.querySelector(`input[data-pgkey="${key}"]`);
        if (again) {
          again.value = rawVal;   // restore raw text incl. trailing "." the browser strips
          // preventScroll (#443): this element already had focus before the re-render, so re-focusing it is bookkeeping, not navigation. A plain .focus() scrolls the element into view and would override the scroll position _render just restored - which is the jump the Playground reporter recorded.
          again.focus({ preventScroll: true });
          try { again.setSelectionRange(caret, caret); } catch (_) {}
        }
        requestAnimationFrame(() => this._pgDrawCanvas());
      });
    });

    // F3: Cycle selector
    const pgCycSel = sr.getElementById('wd-pg-cyc-sel');
    if (pgCycSel) pgCycSel.addEventListener('change', () => this._pgSelectCycle(pgCycSel.value));

    // F3: Profile selector
    const pgProfSel = sr.getElementById('wd-pg-prof-sel');
    if (pgProfSel) pgProfSel.addEventListener('change', () => { this._pgProfileName = pgProfSel.value; this._pgLoad(); });

    // F3: Settings control panel - preset picker + "save as" name buffer. Both keep
    // their value in state so a re-render (any param edit) cannot reset them.
    const pgPresetSel = sr.getElementById('wd-pg-preset-sel');
    if (pgPresetSel) pgPresetSel.addEventListener('change', () => { this._pgPresetSel = pgPresetSel.value; this._render(); });
    const pgPresetName = sr.getElementById('wd-pg-preset-name');
    if (pgPresetName) pgPresetName.addEventListener('input', () => {
      this._pgPresetName = pgPresetName.value;
      // Only the save button's disabled state and the preset-limit note depend on
      // the typed name, so patch those two in place: a full _render() per keystroke
      // would rebuild the panel DOM and repaint the Playground canvases.
      const name = (this._pgPresetName || '').trim();
      const atLimitNow = this._pgPresetAtLimit(name);
      const saveBtn = sr.querySelector('[data-action="pg-preset-save"]');
      if (saveBtn) saveBtn.disabled = !(name && !atLimitNow);
      const limitNote = sr.getElementById('wd-pg-preset-limit-note');
      if (limitNote) limitNote.style.display = atLimitNow ? '' : 'none';
    });

    // F3: Sim cycle count
    // Capped at the backend's per-run limit (audit PLAYGROUND-18: 200 was offered,
    // 50 were replayed, silently). Shared by Test on history and Optimize.
    sr.querySelectorAll('#wd-pg-simn, #wd-pg-sw-n').forEach(inp => inp.addEventListener('input', () => {
      this._pgSimCycles = Math.max(1, Math.min(_PG_MAX_BATCH_CYCLES, parseInt(inp.value, 10) || 20));
    }));

    // F3: Sweep controls
    const pgSwParam = sr.getElementById('wd-pg-sw-param');
    if (pgSwParam) pgSwParam.addEventListener('change', () => { this._pgSweepParam = pgSwParam.value; this._pgSweepNew = null; this._render(); });
    const pgSwObj = sr.getElementById('wd-pg-sw-obj');
    if (pgSwObj) pgSwObj.addEventListener('change', () => { this._pgSweepObjective = pgSwObj.value; this._pgSweepNew = null; this._render(); });
    const pgSwParamY = sr.getElementById('wd-pg-sw-paramy');
    const pgSwFrom = sr.getElementById('wd-pg-sw-from');
    if (pgSwFrom) pgSwFrom.addEventListener('input', () => { this._pgSweepFrom = pgSwFrom.value; });
    const pgSwTo = sr.getElementById('wd-pg-sw-to');
    if (pgSwTo) pgSwTo.addEventListener('input', () => { this._pgSweepTo = pgSwTo.value; });
    const pgSwSteps = sr.getElementById('wd-pg-sw-steps');
    if (pgSwSteps) pgSwSteps.addEventListener('input', () => { this._pgSweepSteps = parseInt(pgSwSteps.value, 10) || 5; });

    sr.querySelectorAll('[data-statustoggle]').forEach(el => el.addEventListener('change', async () => {
      const key = el.dataset.statustoggle, val = el.checked;
      if (!this._panelCfg) this._panelCfg = {};
      this._panelCfg.prefs = { ...(this._panelCfg.prefs || {}), [key]: val };
      this._ws({ type: `${_DOMAIN}/set_user_prefs`, prefs: { [key]: val } }).catch(() => {});
      const dev = this._devices[this._selIdx];
      if (dev && this._tab === 'status') {
        try { this._powerData = await this._ws({ type: `${_DOMAIN}/get_power_history`, entry_id: dev.entry_id, with_raw: this._pref('show_raw_active', false) }); } catch (_) { /* keep */ }
      }
      this._render();
    }));

    // Sortable table headers
    sr.querySelectorAll('[data-sortact]').forEach(th => th.addEventListener('click', () => {
      const act = th.dataset.sortact, col = th.dataset.sortcol;
      const toggle = (state) => {
        if (state.col === col) state.dir *= -1;
        else { state.col = col; state.dir = col === 'date' ? -1 : 1; }
      };
      if (act === 'cycsort') toggle(this._cycleSort);
      else if (act === 'cleanupsort') toggle(this._cleanupSort);
      this._render();
    }));

    // Cycle filter text (re-render + restore focus + cursor position)
    const cycFT = sr.getElementById('wd-cyc-filter-text');
    if (cycFT) cycFT.addEventListener('input', e => {
      const pos = e.target.selectionStart;
      this._cycleFilter.text = cycFT.value;
      this._render();
      const el = this.shadowRoot.getElementById('wd-cyc-filter-text');
      // See the Playground note above (#443): re-focus without scrolling.
      if (el) { el.focus({ preventScroll: true }); el.setSelectionRange(pos, pos); }
    });
    const setFT = sr.getElementById('wd-settings-search');
    if (setFT) setFT.addEventListener('input', e => {
      const pos = e.target.selectionStart;
      this._settingsSearch = setFT.value;
      if (setFT.value.trim()) this._settingsSugOnly = false;
      this._render();
      const el = this.shadowRoot.getElementById('wd-settings-search');
      // See the Playground note above (#443): re-focus without scrolling.
      if (el) { el.focus({ preventScroll: true }); el.setSelectionRange(pos, pos); }
    });
    const cycFS = sr.getElementById('wd-cyc-filter-status');
    if (cycFS) cycFS.addEventListener('change', () => {
      this._cycleFilter.status = cycFS.value;
      this._render();
    });

    // Entity-pill multi-pickers: add/remove chips via direct DOM mutation only
    // (never _render) so other unsaved settings-form edits are preserved.
    // One builder for a pill added by typing and by picking, matching the template.
    const mkPill = (v) => {
      const pill = document.createElement('span');
      pill.className = 'wd-pill'; pill.dataset.val = v; pill.title = v;
      const txt = document.createElement('span');
      txt.className = 'wd-pill-txt'; txt.textContent = v;
      pill.appendChild(txt);
      const x = document.createElement('button');
      x.type = 'button'; x.className = 'wd-pill-x'; x.setAttribute('aria-label', this._tText('btn.remove', {}, 'Remove'));
      x.textContent = '×';
      x.addEventListener('click', () => pill.remove());
      pill.appendChild(x);
      return pill;
    };
    sr.querySelectorAll('.wd-pillbox').forEach(box => {
      const addInput = box.querySelector('.wd-pill-add');
      const addVal = (raw) => {
        const v = String(raw || '').trim();
        if (!v) return;
        const have = Array.from(box.querySelectorAll('.wd-pill')).some(p => p.dataset.val === v);
        if (!have) box.insertBefore(mkPill(v), addInput.closest('.wd-combo') || addInput);
        if (addInput) addInput.value = '';
      };
      box.querySelectorAll('.wd-pill-x').forEach(x =>
        x.addEventListener('click', () => x.closest('.wd-pill')?.remove()));
      if (addInput) {
        addInput.addEventListener('change', () => addVal(addInput.value));
        addInput.addEventListener('keydown', (e) => {
          if (e.key === 'Enter') { e.preventDefault(); addVal(addInput.value); }
        });
        addInput.addEventListener('blur', () => addVal(addInput.value));
      }
    });

    // Custom entity combobox
    sr.querySelectorAll('.wd-combo').forEach(combo => {
      const inp = combo.querySelector('.wd-combo-inp, .wd-pill-add');
      const drop = combo.querySelector('.wd-combo-drop');
      if (!inp || !drop) return;
      const isPill = combo.classList.contains('wd-combo-pill');
      // `data-catalog` names the candidate list for a combobox that is NOT a settings
      // field (the Store tab's search box, #416). It must not carry `data-opt`:
      // _saveSettings sweeps `[data-opt]` across the whole shadow root, so the key
      // would be written back to the config entry as if it were a form value.
      const optKey = inp.dataset.catalog || inp.dataset.opt || combo.closest('[data-opt]')?.dataset.opt;

      const showDrop = (q, typed = false) => {
        // Opening the store brand/model combo is the moment the user actually needs the
        // catalog, so that is when it is fetched -- rendering the form no longer does it.
        // This costs nothing here: the fetch fills _entityListCache, which is read live
        // below, so the options appear on the next keystroke or focus without a re-render.
        this._ensureCatalogList(optKey, q, typed);
        // Read the candidate list live so async-loaded options (e.g. the store
        // brand/model catalog) appear without re-wiring the combobox.
        const entities = (this._entityListCache || {})[optKey] || [];
        const lq = (q || '').toLowerCase();
        // String(): store-catalog candidates are untyped documents (STORE-19).
        const hits = lq ? entities.filter(e => String(e).toLowerCase().includes(lq)).slice(0, 40)
                        : entities.slice(0, 20);
        if (!hits.length) { drop.hidden = true; return; }
        drop.innerHTML = hits.map(e => `<div class="wd-combo-item" data-val="${_esc(e)}">${_esc(e)}</div>`).join('');
        drop._kbd = -1;
        drop.hidden = false;
        // After unhiding, so the input's rect is final and the list can be sized
        // against the space that is really available.
        this._positionComboDrop(inp, drop);
      };

      const pick = (val) => {
        if (!val) return;
        if (isPill) {
          const box = combo.closest('.wd-pillbox');
          if (box && !Array.from(box.querySelectorAll('.wd-pill')).some(p => p.dataset.val === val)) {
            box.insertBefore(mkPill(val), combo);
          }
          inp.value = '';
        } else {
          inp.value = val;
          // Fire change so reactive consumers (e.g. the store brand picker, which
          // must load the model catalog) react immediately on pick, not only on blur.
          inp.dispatchEvent(new Event('change', { bubbles: true }));
        }
        drop.hidden = true;
      };

      inp.addEventListener('focus', () => showDrop(inp.value));
      inp.addEventListener('input', () => showDrop(inp.value, !inp._wdSyntheticInput));
      inp.addEventListener('blur', () => setTimeout(() => { drop.hidden = true; }, 150));
      inp.addEventListener('keydown', e => {
        if (drop.hidden && e.key !== 'ArrowDown') return;
        const items = drop.querySelectorAll('.wd-combo-item');
        let a = drop._kbd || -1;
        if (e.key === 'ArrowDown') { e.preventDefault(); if (drop.hidden) { showDrop(inp.value); return; } a = Math.min(a + 1, items.length - 1); }
        else if (e.key === 'ArrowUp') { e.preventDefault(); a = Math.max(a - 1, 0); }
        else if (e.key === 'Enter' && !drop.hidden) { e.preventDefault(); if (a >= 0) pick(items[a].dataset.val); else if (isPill && inp.value.trim()) pick(inp.value.trim()); return; }
        else if (e.key === 'Escape') { drop.hidden = true; return; }
        else return;
        drop._kbd = a;
        items.forEach((it, i) => it.classList.toggle('kbd', i === a));
        items[a]?.scrollIntoView({ block: 'nearest' });
      });
      drop.addEventListener('mousedown', e => {
        const item = e.target.closest('.wd-combo-item');
        if (item) { e.preventDefault(); pick(item.dataset.val); }
      });
    });

    // Store tab search: incremental, no button (#416). Typing is handled by the
    // combobox above, which shows brand suggestions from the debounced, prefix-cached
    // catalog without re-rendering. What is wired here is the *commit*, i.e. the point
    // at which a device query is worth spending: picking a suggestion, pressing Enter,
    // leaving the field, or typing a brand out in full.
    //
    // Device search is an exact `brand_lc` match server-side, so every partial prefix
    // would return nothing. That is why keystrokes drive the suggestion list and only a
    // resolved brand queries devices - a naive search-per-keystroke would show "no
    // results" for all but the last character AND spend a Firestore read on each one.
    const storeQ = sr.getElementById('wd-store-q');
    if (storeQ) {
      const commit = () => {
        const v = String(storeQ.value || '').trim();
        // A picked "MODEL · Brand" suggestion goes straight to that appliance; anything
        // else is a brand to scope the browse to.
        const model = (this._catalog.modelIndex || new Map()).get(v);
        if (model) { this._storeOpenModel(model); return; }
        if (v.toLowerCase() === String(this._storeQuery || '').trim().toLowerCase()) return;
        this._storeSearch(v);
      };
      storeQ.addEventListener('change', commit);
      storeQ.addEventListener('keydown', e => {
        if (e.key !== 'Enter') return;
        // The combobox handler (attached above, so it runs first) owns Enter only when a
        // suggestion is keyboard-highlighted: it picks it, which fires `change` and
        // commits through the listener above. With the list open but nothing
        // highlighted it swallows Enter and does nothing, so this must still commit or
        // the key would be dead exactly when the user has typed the brand out in full.
        const drop = storeQ.parentElement && storeQ.parentElement.querySelector('.wd-combo-drop');
        if (drop && !drop.hidden && drop._kbd >= 0) return;
        e.preventDefault();
        commit();
      });
      storeQ.addEventListener('input', () => {
        // A catalog load finishing refreshes the list through a synthetic input event;
        // letting that re-arm the timer would push the commit out for as long as loads
        // keep landing, so only a real keystroke restarts it.
        if (storeQ._wdSyntheticInput) return;
        clearTimeout(this._storeQTimer);
        this._storeQTimer = setTimeout(() => {
          const v = String(storeQ.value || '').trim();
          if (!v) return;
          const known = (this._entityListCache || {}).store_brand || [];
          if (known.some(b => String(b).toLowerCase() === v.toLowerCase())) commit();
        }, 450);
      });
    }

    // Cycle timer list: all mutations write-through to this._pendingSettings (the
    // unsaved-edits buffer) — never to this._opts, which is the saved baseline the
    // Revert button restores. A re-render reads _opts overlaid with these pending
    // edits, so nothing is wiped, and _saveSettings collects them on Save.
    sr.querySelectorAll('.wd-timerlist').forEach(list => {
      const key = list.dataset.opt;

      // Lazily seed a deep copy of the current timer list into _pendingSettings so
      // edits never mutate the nested arrays stored on _opts.
      const ensurePending = () => {
        if (!Array.isArray(this._pendingSettings[key])) {
          const base = Array.isArray(this._opts && this._opts[key]) ? this._opts[key] : [];
          this._pendingSettings[key] = base.map(t => ({ ...t }));
        }
        return this._pendingSettings[key];
      };

      const readRow = (row) => ({
        offset_minutes: parseFloat(row.querySelector('[data-field="offset_minutes"]').value) || 0,
        message: (row.querySelector('[data-field="message"]').value || '').trim(),
        auto_pause: row.querySelector('[data-field="auto_pause"]').checked,
      });

      const writeRow = (row) => {
        const idx = parseInt(row.dataset.tidx, 10);
        if (isNaN(idx)) return;
        const arr = ensurePending();
        arr[idx] = readRow(row);
      };

      const removeRow = (row) => {
        const idx = parseInt(row.dataset.tidx, 10);
        if (!isNaN(idx)) this._pendingSettings[key] = ensurePending().filter((_, i) => i !== idx);
        row.remove();
        // Re-index remaining rows so subsequent interactions use correct indices.
        list.querySelectorAll('.wd-timer-row').forEach((r, i) => { r.dataset.tidx = i; });
      };

      const wireRow = (row) => {
        const del = row.querySelector('.wd-timer-remove');
        if (del) del.addEventListener('click', () => removeRow(row));
        // Switch toggle and text edits both write-through to pending immediately.
        row.querySelector('[data-field="auto_pause"]')?.addEventListener('change', () => writeRow(row));
        row.querySelectorAll('[data-field="offset_minutes"],[data-field="message"]')
          .forEach(inp => inp.addEventListener('input', () => writeRow(row)));
      };

      list.querySelectorAll('.wd-timer-row').forEach(row => wireRow(row));

      const addBtn = list.querySelector('.wd-timer-add');
      if (addBtn) addBtn.addEventListener('click', () => {
        const newIdx = list.querySelectorAll('.wd-timer-row').length;
        ensurePending().push({ offset_minutes: 0, message: '', auto_pause: false });
        const row = document.createElement('div');
        row.className = 'wd-timer-row';
        row.dataset.tidx = newIdx;
        row.innerHTML =
          `<div class="wd-timer-top">` +
          `<input type="number" min="1" placeholder="${this._t('lbl.timer_min', {}, 'min')}" data-field="offset_minutes">` +
          `<textarea placeholder="${this._t('lbl.timer_msg_placeholder', {}, 'Message (optional, {device}/{program}/{minutes})')}" data-field="message"></textarea>` +
          `</div>` +
          `<div class="wd-timer-footer">` +
          `<label class="wd-switch-lbl"><span class="wd-switch"><input type="checkbox" data-field="auto_pause"><span class="wd-switch-slider"></span></span><span class="wd-switch-text">${this._t('lbl.timer_auto_pause', {}, 'Auto-pause')}</span></label>` +
          `<button type="button" class="wd-btn wd-btn-sm wd-btn-danger wd-timer-remove">${this._t('btn.remove_timer', {}, 'Delete')}</button>` +
          `</div>`;
        wireRow(row);
        list.insertBefore(row, addBtn);
      });
    });

    const progSel = sr.getElementById('wd-status-prog');
    if (progSel) progSel.addEventListener('change', () => {
      const dev = this._devices[this._selIdx]; if (!dev) return;
      const val = progSel.value;
      // No cycle under way means the choice is armed for the next one (#411), so
      // say that rather than implying it applies to something running now.
      const willArm = !_ACTIVE_STATES.includes(dev.detector_state || '');
      this._ws({ type: `${_DOMAIN}/set_program`, entry_id: dev.entry_id, program: val })
        .then(() => {
          this._showToast(
            val === 'auto_detect'
              ? this._t('msg.toast_auto_detect_enabled', {}, 'Auto-detect enabled')
              : willArm
                ? this._tText('msg.toast_program_armed', {program: val}, `Program armed for the next cycle: ${val}`)
                : this._tText('msg.toast_program_set', {program: val}, `Program set: ${val}`));
          return this._fetchAll();
        })
        .catch(e => this._showToast(this._tText('msg.toast_failed', {error: e.message || e}, 'Failed: ' + (e.message || e)), 'error'));
    });

    // Compact cycle rows: toggle selection in select mode, else open the cycle.
    sr.querySelectorAll('[data-cid]').forEach(row => row.addEventListener('click', e => {
      // Don't intercept clicks on child inputs (checkboxes) - handled below.
      if (e.target.tagName === 'INPUT') return;
      // Buttons with both data-cid and data-action (e.g. "Trim/Split") are handled by the data-action listener
      if (row.dataset.action) return;
      const cid = row.dataset.cid;
      if (row.dataset.selmode === '1') {
        if (this._cycleSel.has(cid)) this._cycleSel.delete(cid); else this._cycleSel.add(cid);
        this._render();
      } else {
        this._onAction({ dataset: { action: 'open-cycle', cid } });
      }
    }));
    // Keyboard: a focused cycle row opens (or toggles) on Enter / Space, the same as
    // a click (audit UI-04: the core "open or label a cycle" flow was mouse-only).
    sr.querySelectorAll('tr[data-cid][role="button"]').forEach(row => row.addEventListener('keydown', e => {
      if (e.target !== row || (e.key !== 'Enter' && e.key !== ' ')) return;
      e.preventDefault();
      row.click();
    }));
    // Cycle-review comparison overlays: toggle a profile's envelope on the chart.
    sr.querySelectorAll('.wd-cyc-overlay').forEach(cb => cb.addEventListener('change', () => {
      const m = this._modal;
      if (!m || m.type !== 'cycle-detail') return;
      // Preserve unsaved Review-form edits (profile/quality/golden/tags/notes)
      // before the async envelope fetch + re-render regenerates the form.
      this._snapshotCycleReviewForm(sr);
      const set = new Set(m.overlays || []);
      if (cb.checked) set.add(cb.value); else set.delete(cb.value);
      m.overlays = [...set];
      const dev = this._devices[this._selIdx];
      if (cb.checked && dev) {
        this._ensureProfileEnvs(dev.entry_id, [cb.value]).then(() => this._render());
      } else {
        this._render();
      }
    }));

    // Compare modal: per-cycle show/hide toggles (just repaint the overlay).
    sr.querySelectorAll('.wd-compare-cyc').forEach(cb => cb.addEventListener('change', () => {
      const m = this._modal;
      if (!m || m.type !== 'compare-cycles') return;
      const set = m.hidden instanceof Set ? m.hidden : new Set(m.hidden || []);
      if (cb.checked) set.delete(cb.value); else set.add(cb.value);
      m.hidden = set;
      this._render();
    }));
    // Compare modal: profile-envelope overlay toggles (ensure the envelope is
    // fetched/cached first, then repaint — mirrors the review-overlay path).
    sr.querySelectorAll('.wd-compare-overlay').forEach(cb => cb.addEventListener('change', () => {
      const m = this._modal;
      if (!m || m.type !== 'compare-cycles') return;
      const set = new Set(m.overlays || []);
      if (cb.checked) set.add(cb.value); else set.delete(cb.value);
      m.overlays = [...set];
      const dev = this._devices[this._selIdx];
      if (cb.checked && dev) {
        this._ensureProfileEnvs(dev.entry_id, [cb.value]).then(() => this._render());
      } else {
        this._render();
      }
    }));

    // Profile-group membership toggles: update the modal's member list and
    // re-render so the swatches + overlay canvas reflect the selection.
    sr.querySelectorAll('.wd-pg-mem').forEach(cb => cb.addEventListener('change', () => {
      const m = this._modal;
      if (!m || m.type !== 'profile-group') return;
      // Capture the typed group name before re-rendering, otherwise the name input
      // (which renders from m.name) reverts and the user loses what they typed.
      const nameInp = sr.getElementById('wd-pg-name');
      if (nameInp) m.name = nameInp.value;
      const set = new Set(m.members || []);
      if (cb.checked) set.add(cb.value); else set.delete(cb.value);
      m.members = [...set];
      this._render();
    }));
    // Keep the profile-group name in the model as it's typed, so any re-render
    // (membership toggle, overlay repaint) preserves the in-progress name.
    const pgNameInp = sr.getElementById('wd-pg-name');
    if (pgNameInp) pgNameInp.addEventListener('input', () => {
      const m = this._modal;
      if (m && m.type === 'profile-group') m.name = pgNameInp.value;
    });

    // Selection checkboxes: clicking the tickbox itself must update the set
    // (the row handler above intentionally ignores INPUT clicks). Without this,
    // ticking a box did nothing and reverted on re-render.
    sr.querySelectorAll('.wd-csel').forEach(cb => cb.addEventListener('change', () => {
      const rowEl = cb.closest('[data-cid]');
      const cid = rowEl && rowEl.dataset.cid;
      if (!cid) return;
      if (cb.checked) this._cycleSel.add(cid); else this._cycleSel.delete(cid);
      this._render();
    }));
    const mergeSel = sr.getElementById('wd-merge-prof');
    if (mergeSel) mergeSel.addEventListener('change', () => {
      const row = sr.getElementById('wd-merge-new');
      if (row) row.style.display = mergeSel.value === '__create_new__' ? '' : 'none';
    });

    // Log filters (level / device / component / search) — all client-side, so we
    // update the log-line containers in place (keeps the search box focused).
    sr.querySelectorAll('.wd-log-filter').forEach(el => {
      const field = el.dataset.logfilter;
      const key = { level: '_logLevel', device: '_logDevice', component: '_logComponent', search: '_logSearch' }[field];
      if (!key) return;
      const evt = field === 'search' ? 'input' : 'change';
      el.addEventListener(evt, () => { this[key] = el.value; this._refreshLogViews(); this._syncLogFilters(el); });
    });

    // Log drawer resize handle — pointer capture keeps tracking even outside the element.
    const logResize = sr.querySelector('.wd-log-resize');
    if (logResize) {
      logResize.addEventListener('pointerdown', e => {
        e.preventDefault();
        logResize.setPointerCapture(e.pointerId);
        logResize.classList.add('dragging');
        const drawer = sr.querySelector('.wd-log-drawer');
        const startX = e.clientX, startW = drawer.offsetWidth;
        const onMove = (me) => {
          const w = Math.max(280, Math.min(900, startW + (startX - me.clientX)));
          drawer.style.width = w + 'px';
          this._logDrawerWidth = w;
        };
        logResize.addEventListener('pointermove', onMove);
        logResize.addEventListener('pointerup', () => {
          logResize.removeEventListener('pointermove', onMove);
          logResize.classList.remove('dragging');
          try { localStorage.setItem('wd-log-width', String(this._logDrawerWidth)); } catch (_) {}
        }, { once: true });
      });
    }
    const histFile = sr.getElementById('wd-hist-file');
    if (histFile) histFile.addEventListener('change', () => {
      const f = histFile.files && histFile.files[0];
      if (!f) return;
      const m = this._modal;
      const reader = new FileReader();
      reader.onload = () => {
        const ta = sr.getElementById('wd-hist-csv');
        const text = String(reader.result || '');
        if (ta) ta.value = text;
        if (m && m.type === 'history-import') m.csvText = text;
      };
      reader.onerror = () => this._showToast(
        this._t('toast.file_read_failed', {}, 'Could not read that file'), 'error');
      reader.readAsText(f);
    });
    sr.querySelectorAll('[data-hist-pick]').forEach(box => box.addEventListener('change', () => {
      const m = this._modal;
      if (!m || m.type !== 'history-import') return;
      const index = parseInt(box.dataset.histPick, 10);
      if (box.checked) m.accept.add(index); else m.accept.delete(index);
      this._render();
      requestAnimationFrame(() => this._drawHistorySparklines());
    }));
    const impFile = sr.getElementById('wd-import-file');
    if (impFile) impFile.addEventListener('change', () => {
      const f = impFile.files && impFile.files[0];
      if (!f) return;
      const reader = new FileReader();
      reader.onload = () => { const ta = sr.getElementById('wd-import-json'); if (ta) ta.value = String(reader.result || ''); };
      reader.readAsText(f);
    });
    sr.querySelectorAll('[data-stab]').forEach(btn => btn.addEventListener('click', () => {
      this._toolsSubtab = btn.dataset.stab;
      const dev = this._devices[this._selIdx];
      if (dev) { this._tabLoading = true; this._render(); this._fetchToolsData(dev.entry_id).then(() => { this._tabLoading = false; this._render(); }); }
    }));

    sr.querySelectorAll('[data-proftab]').forEach(btn => btn.addEventListener('click', async () => {
      this._profSubtab = btn.dataset.proftab;
      const dev = this._devices[this._selIdx];
      if (dev && this._profSubtab === 'phase-catalog' && !this._phases.length) {
        this._tabLoading = true; this._render();
        await this._fetchPhases(dev.entry_id);
        this._tabLoading = false;
      }
      this._render();
    }));

    const saveBtn = sr.getElementById('wd-settings-save');
    if (saveBtn) saveBtn.addEventListener('click', () => this._saveSettings());
    const mlSaveBtn = sr.getElementById('wd-ml-save');
    if (mlSaveBtn) mlSaveBtn.addEventListener('click', () => this._saveSettings());
    // Guard: a stray in-form button (or Enter) must never submit the settings
    // form and reload the panel to "/?". Saving is explicit via the buttons above.
    const settingsForm = sr.getElementById('wd-settings-form');
    // #406: a real user edit is the only thing that may enter the pending-edit
    // buffer. Delegated so it covers every field type in both forms, and driven by
    // trusted input/change events, so a value written by the renderer is not
    // mistaken for one the user chose.
    const markDirty = (e) => {
      const el = e.target && e.target.closest ? e.target.closest('[data-opt]') : null;
      if (el && el.dataset.opt) this._dirtyOptKeys.add(el.dataset.opt);
    };
    // Colour field (#454): the swatch and the text box are two views of one value.
    // Neither is inside the other, so the swatch has no data-opt for markDirty to
    // find - it writes into the text box and marks that key dirty itself, the same
    // way the suggestion "Use" buttons do for a programmatic write.
    const syncColorField = (e) => {
      const t = e.target;
      if (!t || !t.closest) return;
      const wrap = t.closest('.wd-colorfield');
      if (!wrap) return;
      const txt = wrap.querySelector('input[data-opt]');
      const sw = wrap.querySelector('.wd-color-sw');
      if (!txt || !sw) return;
      if (t === sw) {
        txt.value = String(sw.value).toUpperCase();
        this._dirtyOptKeys.add(txt.dataset.opt);
      } else if (t === txt && _COLOR_HEX_RE.test(txt.value.trim())) {
        sw.value = txt.value.trim().toLowerCase();
      }
    };
    if (settingsForm) {
      settingsForm.addEventListener('submit', e => e.preventDefault());
      // Live conflict validation: re-check on any field change.
      settingsForm.addEventListener('input', (e) => { syncColorField(e); markDirty(e); this._liveValidateSettings(sr); });
      settingsForm.addEventListener('change', (e) => { syncColorField(e); markDirty(e); this._liveValidateSettings(sr); });
      // Clear button on a colour field: blank means "platform default".
      settingsForm.addEventListener('click', e => {
        const btn = e.target.closest && e.target.closest('.wd-color-clear');
        if (!btn) return;
        const txt = btn.parentElement && btn.parentElement.querySelector('input[data-opt]');
        if (!txt) return;
        txt.value = '';
        // The swatch cannot show "unset", so put it back to the same placeholder
        // colour _field() renders for an empty value - otherwise it keeps showing
        // the cleared colour until the next full re-render, which reads as the
        // clear not having worked.
        const sw = btn.parentElement.querySelector('.wd-color-sw');
        if (sw) sw.value = _colorSwatchDefault(txt.placeholder);
        this._dirtyOptKeys.add(txt.dataset.opt);
        this._liveValidateSettings(sr);
      });
      // Conflict fix-button delegation: apply the fix then cascade any downstream conflicts.
      settingsForm.addEventListener('click', e => {
        const btn = e.target.closest('.wd-conflict-fix');
        if (!btn) return;
        const key = btn.dataset.ckey, val = parseFloat(btn.dataset.cval);
        const inp = settingsForm.querySelector(`[data-opt="${key}"]`);
        // Setting .value fires no event, so mark it dirty explicitly - the user
        // clicking "Use X" is an edit and must survive the next re-render.
        if (inp && !isNaN(val)) { inp.value = val; this._dirtyOptKeys.add(key); this._cascadeConflictFix(sr, settingsForm, key); }
      });
      // Run initial validation in case the current saved opts already conflict.
      this._liveValidateSettings(sr);
    }
    const mlForm = sr.getElementById('wd-ml-form');
    if (mlForm) {
      mlForm.addEventListener('input', markDirty);
      mlForm.addEventListener('change', markDirty);
    }
    const revertBtn = sr.getElementById('wd-settings-revert');
    if (revertBtn) revertBtn.addEventListener('click', async () => {
      if (!this._prevOpts) return;
      const dev = this._devices[this._selIdx];
      if (!dev) return;
      await this._busyRun('save-settings', async () => {
        try {
          const snap = this._prevOpts;
          await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: dev.entry_id, options: snap });
          this._opts = {...snap};
          this._prevOpts = null;
          this._cascadePending = {};
          this._preCascadeOpts = null;
          this._pendingSettings = {};
          this._dirtyOptKeys = new Set();
          this._showToast(this._t('toast.settings_reverted', {}, 'Settings reverted; integration reloading'));
          this._render();
        } catch (e) { this._showToast(this._tText('msg.toast_revert_failed', {error: e.message || e}, 'Revert failed: ' + (e.message || e)), 'error'); }
      });
    });
    const reloadBtn = sr.getElementById('wd-settings-reload');
    if (reloadBtn) reloadBtn.addEventListener('click', async () => {
      const dev = this._devices[this._selIdx];
      if (dev) {
        this._prevOpts = null;
        this._cascadePending = {};
        this._preCascadeOpts = null;
        this._pendingSettings = {};
        this._dirtyOptKeys = new Set();
        const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: dev.entry_id });
        this._opts = r.options || {};
        this._optDefaults = r.defaults || {};  // #396
        await this._fetchSuggestions(dev.entry_id);
        this._render();
      }
    });

    // Panel font-size slider (accessibility): live-preview while dragging, persist
    // on release. All panel text is em-relative, so _applyFontScale scales it all.
    const fontScaleInp = sr.getElementById('wd-pref-fontscale');
    if (fontScaleInp) {
      const fsVal = sr.getElementById('wd-pref-fontscale-val');
      fontScaleInp.addEventListener('input', () => {
        const v = parseFloat(fontScaleInp.value) || 1;
        this._applyFontScale(v);
        if (fsVal) fsVal.textContent = Math.round(v * 100) + '%';
      });
      fontScaleInp.addEventListener('change', () => {
        this._setPref('font_scale', parseFloat(fontScaleInp.value) || 1);
      });
    }

    sr.querySelectorAll('[data-action]').forEach(btn => btn.addEventListener('click', e => this._onAction(e.currentTarget)));
    sr.querySelectorAll('[data-maction]').forEach(btn => btn.addEventListener('click', e => this._onModalAction(e.currentTarget.dataset.maction, e.currentTarget)));
    // A <select data-maction> commits via `change` (not `click`, esp. on keyboard
    // selection), so bind change too — otherwise e.g. the import conflict-resolution
    // dropdown never records the user's pick and silently falls back to the default.
    sr.querySelectorAll('select[data-maction]').forEach(sel => sel.addEventListener('change', e => this._onModalAction(e.currentTarget.dataset.maction, e.currentTarget)));
    // indeterminate is a JS property (no HTML attribute); apply it after render for
    // the share-device tree's partially-selected profile checkboxes.
    sr.querySelectorAll('input[data-indeterminate]').forEach(cb => { cb.indeterminate = true; });

    // D4: Undo action inside the delete toast.
    const toastUndo = sr.querySelector('[data-toast-undo]');
    if (toastUndo) toastUndo.addEventListener('click', () => this._undoDelete(toastUndo.dataset.toastUndo));

    // Suggestion "mute" (#343) -> tell the backend to stop proposing this setting.
    sr.querySelectorAll('[data-suglock]').forEach(btn => btn.addEventListener('click', async () => {
      const k = btn.dataset.suglock;
      const dev = this._devices[this._selIdx];
      const eid = dev && dev.entry_id;
      if (!eid || !k) return;
      try {
        await this._ws({ type: `${_DOMAIN}/set_suggestion_lock`, entry_id: eid, key: k, locked: true });
        if (!this._isActiveEntry(eid)) return;
        this._suggestions = (this._suggestions || []).filter(s => s.key !== k);
        if (!(this._lockedSuggestions || []).includes(k)) (this._lockedSuggestions = this._lockedSuggestions || []).push(k);
        this._showToast(this._t('msg.sug_muted', {}, "Won't suggest this setting again"), 'info');
        this._render();
      } catch (_) {
        this._showToast(this._t('msg.sug_mute_failed', {}, 'Could not mute suggestion'), 'error');
      }
    }));

    // Suggestion "Use" -> stage value into the field, then cascade-fix downstream conflicts.
    sr.querySelectorAll('[data-sugkey]').forEach(btn => btn.addEventListener('click', () => {
      const k = btn.dataset.sugkey, v = btn.dataset.sugval;
      const numV = parseFloat(v);
      // Stage into _pendingSettings (unsaved-edits buffer), not _opts (the saved
      // baseline) — the render overlays pending over opts, and _saveSettings picks
      // it up, so Revert can still restore the untouched saved values.
      this._pendingSettings[k] = isNaN(numV) ? v : numV;
      this._dirtyOptKeys.add(k);   // #406: staging a suggestion is a user edit
      this._stagedSuggestions = true;
      // Live-only: drop the accepted suggestion so the category dot and the
      // "N tuning suggestions" count update immediately. Not persisted - a
      // refresh without saving re-fetches suggestions and restores it.
      this._suggestions = this._suggestions.filter(s => s.key !== k);
      this._showToast(this._tText('msg.sug_staged', {key: k, val: v}, `Set ${k} = ${v}. Save to apply.`), 'info');
      this._render();
      // Auto-cascade: fix any downstream conflicts the staged value introduced.
      // _render() is synchronous, so the new form DOM is immediately available.
      const _sr = this.shadowRoot;
      const _form = _sr?.getElementById('wd-settings-form');
      if (_form) this._cascadeConflictFix(_sr, _form, k);
    }));

    // Label profile select (show/hide new-name field).
    const labelSel = sr.getElementById('wd-label-profile');
    if (labelSel) labelSel.addEventListener('change', () => {
      const row = sr.getElementById('wd-new-profile-row');
      const creating = labelSel.value === '__create_new__';
      if (row) row.style.display = creating ? '' : 'none';
      // Clear the field when it's hidden so a stale name can't be sent (#303).
      if (!creating) { const inp = sr.getElementById('wd-new-profile-name'); if (inp) inp.value = ''; }
    });

    // Create-profile: a reference cycle overrides Manual Duration, so disable/dim
    // the duration field when one is selected to make that unambiguous (issue #303).
    const cpCycle = sr.getElementById('wd-cp-cycle');
    if (cpCycle) {
      const syncDur = () => {
        const dur = sr.getElementById('wd-cp-dur');
        if (!dur) return;
        const hasRef = !!cpCycle.value;
        dur.disabled = hasRef;
        dur.style.opacity = hasRef ? '0.5' : '';
      };
      cpCycle.addEventListener('change', syncDur);
      syncDur();
    }

    // Process-recording mode toggle.
    const prMode = sr.getElementById('wd-pr-mode');
    if (prMode) prMode.addEventListener('change', () => {
      const nameField = sr.getElementById('wd-pr-profile'), existDiv = sr.getElementById('wd-pr-existing');
      if (!nameField || !existDiv) return;
      const existing = prMode.value === 'existing_profile';
      nameField.style.display = existing ? 'none' : '';
      existDiv.style.display = existing ? '' : 'none';
    });

    this._wireCycleCanvas(sr);
    this._wirePhaseInputs(sr);
    this._wirePhaseCanvas(sr);
    this._wireCleanup(sr);
    this._wireSplitSegments(sr);
  }

  _syncTrimInputs() {
    const sr = this.shadowRoot, m = this._modal;
    const clock = (m.timeMode || 's') === 'clock';
    const s = sr.getElementById('wd-trim-start'), e = sr.getElementById('wd-trim-end');
    if (s) s.value = clock ? this._offsetToClock(m.trim.start) : Math.round(m.trim.start);
    if (e) e.value = clock ? this._offsetToClock(m.trim.end) : Math.round(m.trim.end);
  }

  // Snap the trim window to the nearest real sample offsets so the shaded
  // preview and the eventual cut land on actual data points, not the sub-second
  // gaps between them (#373). Sample offsets are frequently fractional while the
  // inputs round to whole seconds, so without this the handle can sit just below
  // the sample the user aimed at. The store re-snaps against the full-resolution
  // trace before the irreversible write; this keeps the on-screen handles honest
  // against the (possibly decimated) displayed samples.
  _snapTrimBounds() {
    const m = this._modal;
    const samples = (m.curve && m.curve.samples) || [];
    if (samples.length < 2) return;
    const snap = (v) => samples.reduce(
      (best, s) => (Math.abs(s[0] - v) < Math.abs(best - v) ? s[0] : best),
      samples[0][0],
    );
    m.trim.start = snap(m.trim.start);
    m.trim.end = snap(m.trim.end);
    if (m.trim.end <= m.trim.start) {
      const startIdx = samples.findIndex((s) => s[0] === m.trim.start);
      if (startIdx >= 0 && startIdx + 1 < samples.length) {
        m.trim.end = samples[startIdx + 1][0];
      } else if (startIdx > 0) {
        // Start snapped to the last sample: pull start back to the previous
        // sample instead, so the window always has positive width.
        m.trim.start = samples[startIdx - 1][0];
      }
    }
  }

  // Trim-input value <-> cycle-offset seconds (supports the clock-time mode).
  _offsetToClock(offsetS) {
    const m = this._modal, st = m && m.curve && m.curve.start_time;
    if (!st) return '';
    const d = new Date(new Date(st).getTime() + (offsetS || 0) * 1000);
    return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
  }
  _clockToOffset(clockStr) {
    const m = this._modal, st = m && m.curve && m.curve.start_time;
    // Empty or unparseable input means "no change" (#366): returning 0 here used
    // to silently drag an endpoint to the cycle start, and an empty End field
    // collapsed the window to ~0 s. Signal no-change with null so the caller
    // keeps the current value instead of destroying the cycle.
    if (!st || !clockStr) return null;
    const p = String(clockStr).split(':').map(Number);
    if (!p.length || p.some(n => !Number.isFinite(n))) return null;
    const start = new Date(st);
    const dt = new Date(start);
    dt.setHours(p[0] || 0, p[1] || 0, p[2] || 0, 0);
    let off = (dt - start) / 1000;
    const full = (m.curve && m.curve.full_duration_s) || 0;
    // Only apply the past-midnight +24h correction when the shifted value still
    // lands inside the cycle. An early START (a clock time before the cycle's
    // actual start) would otherwise wrap forward a full day and clamp to the far
    // end, collapsing the window to ~1s (#373). Left negative, the clamp below
    // pins it to 0 -- i.e. "keep everything from the start".
    if (off < -1 && off + 86400 <= full) off += 86400;
    return Math.max(0, Math.min(full, off));
  }
  _trimInputToOffset(val) {
    // Empty field -> null (no change), never a collapse-to-zero (#366).
    if (val === '' || val == null) return null;
    if (this._modal.timeMode === 'clock') return this._clockToOffset(val);
    const n = _num(val, NaN);
    return Number.isFinite(n) ? n : null;
  }

  _toggleSplit(x) {
    const m = this._modal;
    const full = (m.curve && m.curve.full_duration_s) || 0;
    const tol = Math.max(20, full * 0.025);
    const offs = m.split.offsets;
    const idx = offs.findIndex(o => Math.abs(o - x) < tol);
    if (idx >= 0) offs.splice(idx, 1);
    else offs.push(Math.round(x));
    offs.sort((a, b) => a - b);
    m.split.profiles = [];   // segment count changed; re-pick labels
    this._render();
  }

  _wireCycleCanvas(sr) {
    const m = this._modal;
    if (!m || m.type !== 'cycle-detail' || !m.loaded) return;
    const cyc = sr.getElementById('wd-cyc-canvas');
    if (!cyc) return;

    if (m.mode === 'trim') {
      const start = sr.getElementById('wd-trim-start'), end = sr.getElementById('wd-trim-end');
      // 'input' tracks the live value for the preview; 'change' (blur/Enter)
      // commits and snaps both handles to real samples (#373).
      if (start) start.addEventListener('input', () => { const off = this._trimInputToOffset(start.value); if (off === null) return; m.trim.start = Math.max(0, Math.min(off, m.trim.end - 1)); this._drawCycleEditor(); });
      if (end) end.addEventListener('input', () => { const off = this._trimInputToOffset(end.value); if (off === null) return; m.trim.end = Math.min(m.curve.full_duration_s, Math.max(off, m.trim.start + 1)); this._drawCycleEditor(); });
      const commit = () => { this._snapTrimBounds(); this._syncTrimInputs(); this._drawCycleEditor(); };
      if (start) start.addEventListener('change', commit);
      if (end) end.addEventListener('change', commit);
      const stop = () => {
        if (m.drag) { this._snapTrimBounds(); this._syncTrimInputs(); this._drawCycleEditor(); }
        m.drag = null;
        cyc._wdOwnGesture = false;
      };
      // A second finger turns an in-progress handle drag into a pinch. Drop the
      // drag WITHOUT committing, or the handle lands wherever the pinch centre
      // happened to be. _attachGraphGestures calls this hook.
      cyc._wdAbortEdit = () => { m.drag = null; cyc._wdOwnGesture = false; };
      cyc.addEventListener('pointerdown', e => {
        const wd = cyc._wd; if (!wd) return;
        const r = cyc.getBoundingClientRect(); const px = e.clientX - r.left;
        const dStart = Math.abs(px - wd.xToCss(m.trim.start));
        const dEnd = Math.abs(px - wd.xToCss(m.trim.end));
        // With a mouse, clicking anywhere grabs the nearer handle - there is no
        // cost to that. With a finger there is: claiming the gesture is what
        // stops the page scrolling (see _attachTouchOwnershipGuard), so an
        // unconditional claim would make the chart a scroll trap again in trim
        // mode, i.e. re-break the very thing #413 fixed. On touch, only claim
        // when the finger actually landed on a handle.
        if (e.pointerType === 'touch' && Math.min(dStart, dEnd) > _AXIS_HANDLE_GRAB) {
          m.drag = null;
          return;
        }
        m.drag = dStart <= dEnd ? 'start' : 'end';
        // Claim it, so the touch guard keeps the drag out of the page scroller
        // even if the finger drifts vertically off the handle.
        cyc._wdOwnGesture = true;
        cyc.setPointerCapture(e.pointerId);
      });
      cyc.addEventListener('pointermove', e => {
        if (!m.drag || cyc._wdPinching) return; const wd = cyc._wd; if (!wd) return;
        const r = cyc.getBoundingClientRect(); const x = wd.cssToX(e.clientX - r.left);
        if (m.drag === 'start') m.trim.start = Math.min(x, m.trim.end - 1);
        else m.trim.end = Math.max(x, m.trim.start + 1);
        this._syncTrimInputs(); this._drawCycleEditor();
      });
      cyc.addEventListener('pointerup', stop); cyc.addEventListener('pointercancel', stop);
    } else if (m.mode === 'split') {
      cyc.addEventListener('pointerdown', e => {
        const wd = cyc._wd; if (!wd) return;
        // A pinch must not drop a split marker at the pinch centre.
        if (cyc._wdPinching) return;
        const r = cyc.getBoundingClientRect();
        this._toggleSplit(wd.cssToX(e.clientX - r.left));
      });
    }
  }

  _wireSplitSegments(sr) {
    const m = this._modal;
    if (!m || m.type !== 'cycle-detail' || m.mode !== 'split') return;
    sr.querySelectorAll('[data-segidx]').forEach(el => el.addEventListener('change', () => {
      m.split.profiles[+el.dataset.segidx] = el.value || null;
    }));
  }

  _wirePhaseInputs(sr) {
    const m = this._modal;
    if (!m || m.type !== 'profile-panel' || m.tab !== 'phases') return;
    sr.querySelectorAll('[data-phidx]').forEach(el => {
      const handler = () => {
        const i = +el.dataset.phidx, f = el.dataset.phfield, ph = m.phases[i];
        if (!ph) return;
        if (f === 'name') ph.name = el.value;
        else ph[f] = Math.max(0, (_num(el.value, 0)) * 60);
        this._drawPhaseEditor();
      };
      el.addEventListener('input', handler); el.addEventListener('change', handler);
    });
  }

  _wirePhaseCanvas(sr) {
    const m = this._modal;
    if (!m || m.type !== 'profile-panel' || m.tab !== 'phases' || !m.env || !(m.env.avg || []).length) return;
    const canvas = sr.getElementById('wd-phase-canvas');
    if (!canvas) return;
    const full = m.env.target_duration || m.env.avg[m.env.avg.length - 1][0];
    const minGap = Math.max(5, full * 0.01);
    const nearestEdge = (px, pointerType) => {
      const wd = canvas._wd; if (!wd) return null;
      // 12 px is a mouse target; a fingertip needs roughly a touch target or
      // the phase edges are not grabbable at all on a phone.
      let best = null, bestD = pointerType === 'touch' ? _AXIS_HANDLE_GRAB : 12;
      (m.phases || []).forEach((ph, i) => {
        [['start', ph.start], ['end', ph.end]].forEach(([edge, val]) => {
          const d = Math.abs(px - wd.xToCss(val));
          if (d < bestD) { bestD = d; best = { idx: i, edge }; }
        });
      });
      return best;
    };
    const stop = () => { m.phaseDrag = null; canvas._wdOwnGesture = false; };
    // Second finger: abandon the edge drag so the gesture becomes a pinch
    // instead of flinging the edge to the pinch centre.
    canvas._wdAbortEdit = stop;
    canvas.addEventListener('pointerdown', e => {
      const r = canvas.getBoundingClientRect();
      m.phaseDrag = nearestEdge(e.clientX - r.left, e.pointerType);
      if (m.phaseDrag) {
        // Claim it, so the touch guard keeps a slightly-diagonal drag ours
        // rather than handing it to the page scroller.
        canvas._wdOwnGesture = true;
        canvas.setPointerCapture(e.pointerId);
      }
    });
    canvas.addEventListener('pointermove', e => {
      if (!m.phaseDrag || canvas._wdPinching) return;
      const wd = canvas._wd; if (!wd) return;
      const r = canvas.getBoundingClientRect();
      const x = wd.cssToX(e.clientX - r.left);
      const ph = m.phases[m.phaseDrag.idx]; if (!ph) return;
      if (m.phaseDrag.edge === 'start') ph.start = Math.max(0, Math.min(x, ph.end - minGap));
      else ph.end = Math.min(full, Math.max(x, ph.start + minGap));
      this._syncPhaseInputs(m.phaseDrag.idx);
      this._drawPhaseEditor();
    });
    canvas.addEventListener('pointerup', stop);
    canvas.addEventListener('pointercancel', stop);
  }

  _syncPhaseInputs(idx) {
    const sr = this.shadowRoot, ph = this._modal.phases[idx];
    if (!ph) return;
    const s = sr.querySelector(`[data-phidx="${idx}"][data-phfield="start"]`);
    const e = sr.querySelector(`[data-phidx="${idx}"][data-phfield="end"]`);
    if (s) s.value = (ph.start / 60).toFixed(1);
    if (e) e.value = (ph.end / 60).toFixed(1);
  }

  _wireCleanup(sr) {
    const m = this._modal;
    if (!m || m.type !== 'profile-panel' || m.tab !== 'cleanup' || !m.cleanup) return;
    sr.querySelectorAll('[data-cleanidx]').forEach(el => el.addEventListener('change', () => {
      const c = m.cleanup.cycles[+el.dataset.cleanidx]; if (!c) return;
      if (el.checked) m.cleanup.selected.add(c.cycle_id); else m.cleanup.selected.delete(c.cycle_id);
      // Targeted update — avoid full re-render that resets scroll position.
      const sel = m.cleanup.selected;
      if (!this._busy.has('pp-cleanup-del') && !this._busy.has('pp-cleanup-unlabel')) {
        const acts = [
          ['pp-cleanup-unlabel', 'btn.unlabel_selected', `Unlabel selected (${sel.size})`],
          ['pp-cleanup-del', 'btn.delete_selected', `Delete selected (${sel.size})`],
        ];
        for (const [act, key, fb] of acts) {
          const b = sr.querySelector(`[data-maction="${act}"]`);
          if (!b) continue;
          b.disabled = sel.size === 0;
          b.textContent = this._tText(key, {n: sel.size}, fb);
        }
      }
      this._drawSpaghetti();
    }));
    // Hover a row to highlight the matching curve in the graph.
    sr.querySelectorAll('tr[data-cid]').forEach(row => {
      row.addEventListener('mouseenter', () => { this._spagTableHoverCid = row.dataset.cid; this._drawSpaghetti(); });
      row.addEventListener('mouseleave', () => { this._spagTableHoverCid = null; this._drawSpaghetti(); });
    });
    // Click the highlighted curve on the graph to toggle that cycle's selection.
    const spag = sr.getElementById('wd-spag-canvas');
    if (spag) spag.addEventListener('pointerdown', e => {
      // A pinch must not toggle whichever cycle happens to sit under a finger.
      if (spag._wdPinching) return;
      // Hit-test synchronously: _onGraphHover defers via rAF, so _hoverNearest
      // would still be stale/null on this same tick and the click would no-op.
      this._onGraphHoverInner(e.clientX, e.clientY, 'wd-spag-canvas', { touch: e.pointerType === 'touch' });
      const hn = this._hoverNearest;
      if (hn && hn.cid) {
        const sel = m.cleanup.selected;
        if (sel.has(hn.cid)) sel.delete(hn.cid); else sel.add(hn.cid);
        this._render();
      }
    });
  }

  // ── Action dispatch (data-action) ───────────────────────────────────────────

  _onAction(btn) {
    const a = btn.dataset.action;
    const sr = this.shadowRoot;
    // The header gear is integration-wide and always visible (incl. first-run when
    // no device exists yet), so route it BEFORE the device guard below.
    if (a === 'open-settings') {
      this._modal = { type: 'gear-settings', tab: this._gearTab || 'prefs' };
      this._render();
      return;
    }
    if (a === 'retry-load') { this._loading = true; this._fetchAll(); return; }
    const dev = this._devices[this._selIdx];
    if (!dev) return;
    const eid = dev.entry_id;

    // Prefix-grouped dispatch: these action families live in dedicated sub-methods.
    // dev / eid / sr stay derived here and are passed in, never re-derived.
    if (a.startsWith('sug-')) return this._onActSuggestions(a, btn, dev, eid, sr);
    if (a.startsWith('ml-')) return this._onActMl(a, btn, dev, eid);
    if (a.startsWith('store-')) return this._onActStore(a, btn, dev, eid, sr);
    if (a.startsWith('auto-')) return this._onActAuto(a, btn, dev, eid, sr);
    if (a.startsWith('maint-')) return this._onActMaintenance(a, btn, dev, eid, sr);
    // 'pg-new' / 'pg-edit' are profile-GROUP actions handled in the
    // chain below, not Playground ones, so they are excluded from the pg- prefix.
    if (a.startsWith('pg-') && a !== 'pg-new' && a !== 'pg-edit') {
      return this._onActPlayground(a, btn, dev, eid);
    }

    if (a === 'open-cycle') {
      const cid = btn.dataset.cid;
      // Cycles opened from the "needs review" queue jump straight to Review mode.
      const startMode = (btn.dataset.mode === 'review') ? 'review' : 'view';
      this._modal = { type: 'cycle-detail', entryId: eid, cycleId: cid, loaded: false, mode: startMode, curve: null, ml: (this._mlById || {})[cid] || null, trim: { start: 0, end: 0 }, split: { offsets: [], profiles: [] }, drag: null };
      if (!this._profiles.length) this._fetchProfiles(eid);
      this._render();
      this._ws({ type: `${_DOMAIN}/get_cycle_power_data`, entry_id: eid, cycle_id: cid })
        .then(r => { if (this._modal && this._modal.cycleId === cid) { this._modal.curve = r; this._modal.loaded = true; this._modal.trim = { start: 0, end: r.full_duration_s || 0 }; this._loadCycleOverlays(eid, cid, r); this._loadCycleContext(eid, cid, r); this._render(); } })
        .catch(e => this._showToast(this._tText('toast.could_not_load_cycle', {error: e.message || e}, 'Could not load cycle: ' + (e.message || e)), 'error'));

    } else if (a === 'cleanup-edit-cycle') {
      const cid = btn.dataset.cid;
      this._prevModal = this._modal; // save profile-panel/cleanup context
      this._modal = { type: 'cycle-detail', entryId: eid, cycleId: cid, loaded: false, mode: 'view', curve: null, ml: (this._mlById || {})[cid] || null, trim: { start: 0, end: 0 }, split: { offsets: [], profiles: [] }, drag: null };
      if (!this._profiles.length) this._fetchProfiles(eid);
      this._render();
      this._ws({ type: `${_DOMAIN}/get_cycle_power_data`, entry_id: eid, cycle_id: cid })
        .then(r => { if (this._modal && this._modal.cycleId === cid) { this._modal.curve = r; this._modal.loaded = true; this._modal.trim = { start: 0, end: r.full_duration_s || 0 }; this._loadCycleOverlays(eid, cid, r); this._loadCycleContext(eid, cid, r); this._render(); } })
        .catch(e => this._showToast(this._tText('toast.could_not_load_cycle', {error: e.message || e}, 'Could not load cycle: ' + (e.message || e)), 'error'));

    } else if (a === 'open-profile') {
      const name = btn.dataset.pname;
      this._prevModal = null; // clear any stale back-navigation context
      const stats = (this._profiles || []).find(p => p.name === name) || { name };
      this._modal = { type: 'profile-panel', name, tab: 'stats', loaded: false, stats, env: null, phases: [], catalog: [], cleanup: null };
      this._render();
      Promise.all([
        this._ws({ type: `${_DOMAIN}/get_profile_envelope`, entry_id: eid, profile_name: name }).catch(() => ({ envelope: null })),
        this._ws({ type: `${_DOMAIN}/get_profile_phases`, entry_id: eid, profile_name: name }).catch(() => ({ phases: [] })),
        this._ws({ type: `${_DOMAIN}/get_phase_catalog`, entry_id: eid }).catch(() => ({ phases: [] })),
      ]).then(([env, ph, cat]) => {
        if (!this._modal || this._modal.name !== name) return;
        this._modal.env = env.envelope;
        this._modal.phases = (ph.phases || []).map(p => ({ name: p.name, start: p.start, end: p.end }));
        this._modal.catalog = (cat.phases || []).map(x => x.name);
        this._modal.loaded = true;
        this._render();
      });

    } else if (a === 'create-profile') {
      this._modal = { type: 'create-profile' }; this._render();

    } else if (a === 'coverage-create') {
      // Pre-select the cluster's newest cycle as the reference; the user names it.
      this._modal = { type: 'create-profile', prefillCycle: btn.dataset.cid || '', prefillCycleMin: btn.dataset.min || '' };
      this._render();

    } else if (a === 'setup-cta') {
      // Setup card primary / secondary CTA — navigate to the relevant panel section.
      const ctaAction = btn.dataset.ctaAction || '';
      let params = {};
      try { params = JSON.parse(btn.dataset.ctaParams || '{}'); } catch (_) {}
      this._dispatchSetupCta(ctaAction, params);

    } else if (a === 'setup-skip') {
      // Setup card step skip (snooze 14 days or never).
      const stepKey = btn.dataset.step;
      const snooze = btn.dataset.snooze; // "never" or "14d"
      if (stepKey) {
        let val;
        if (snooze === 'never') {
          val = 'never';
        } else {
          const until = new Date();
          until.setDate(until.getDate() + 14);
          val = until.toISOString();
        }
        this._setPref(stepKey, val);
        this._reloadSetupStatus(); // async fire-and-forget; calls _render() when done
      }

    } else if (a === 'hide-setup-card') {
      // Setup card permanent hide (only offered when dismissible, i.e. phase 3/4).
      // Keep _setupStatus so _htmlSetupCard can collapse to the phase-3 chip
      // immediately (nulling it here would hide the card entirely instead — the
      // sibling setup-skip / expand-setup handlers also leave the status intact).
      this._setPref('setup_card_dismissed', true);
      this._render();

    } else if (a === 'expand-setup') {
      // Phase 3/4 chip tapped — restore full guidance card by clearing the pref.
      this._setPref('setup_card_dismissed', false);
      this._render();

    } else if (a === 'set-settings-internal') {
      // Audit UI-02: reveal or tuck away the internal tuning fields.
      this._snapshotFormToPending(sr);
      this._setPref('show_internal', !!btn.checked);
      this._render();

    } else if (a === 'set-settings-level') {
      // F2: switch the Settings tab between Basic and Advanced disclosure.
      const lvl = (btn.type === 'checkbox' ? btn.checked : btn.dataset.slevel === 'advanced') ? 'advanced' : 'basic';
      if (lvl !== this._pref('settings_level', 'basic')) {
        this._snapshotFormToPending(sr);  // keep in-progress edits across re-render
        this._setPref('settings_level', lvl);
        this._render();
      }

    } else if (a === 'pg-new' || a === 'pg-edit') {
      if (a === 'pg-new') {
        this._modal = { type: 'profile-group', orig: null, name: '', members: [] };
      } else {
        const gname = btn.dataset.gname;
        const g = ((this._profileGroups || {}).groups || []).find(x => x.name === gname);
        this._modal = { type: 'profile-group', orig: gname, name: gname, members: g ? [...(g.members || [])] : [] };
      }
      this._render();
      // Fetch every profile's envelope so ticked members render on the overlay.
      this._ensureProfileEnvs(eid, (this._profiles || []).map(p => p.name)).then(() => {
        if (this._modal && this._modal.type === 'profile-group') this._render();
      });

    } else if (a === 'rebuild-envelopes') {
      // Backgrounded task (issue #311): rebuilding every profile serially can
      // stall a low-power host, so run it via the registry with a header pill.
      this._kickAndTrack(
        { type: `${_DOMAIN}/rebuild_envelopes`, entry_id: eid },
        'rebuild-envelopes',
        async () => { this._showToast(this._t('toast.envelopes_rebuilt', {}, 'Envelopes rebuilt')); await this._fetchProfiles(eid); },
      );

    } else if (a === 'rec-start') {
      this._ws({ type: `${_DOMAIN}/start_recording`, entry_id: eid }).then(() => { this._showToast(this._t('toast.recording_started', {}, 'Recording started')); return this._fetchRecState(eid); }).then(() => this._render()).catch(e => this._showToast(this._tText('toast.start_failed', {error: e.message || e}, 'Start failed: ' + (e.message || e)), 'error'));
    } else if (a === 'rec-stop') {
      this._ws({ type: `${_DOMAIN}/stop_recording`, entry_id: eid }).then(() => { this._showToast(this._t('toast.recording_stopped', {}, 'Recording stopped')); return this._fetchRecState(eid); }).then(() => this._render()).catch(e => this._showToast(this._tText('toast.stop_failed', {error: e.message || e}, 'Stop failed: ' + (e.message || e)), 'error'));
    } else if (a === 'rec-process-open') {
      this._fetchProfiles(eid).then(() => { this._modal = { type: 'process-recording' }; this._render(); });
    } else if (a === 'rec-discard') {
      this._modal = { type: 'confirm', title: this._t('modal.discard_recording_title', {}, 'Discard Recording'), message: this._t('modal.discard_recording_msg', {}, 'Discard the saved recording? This cannot be undone.'), okLabel: this._t('btn.discard', {}, 'Discard'),
        onOk: async () => { try { await this._ws({ type: `${_DOMAIN}/discard_recording`, entry_id: eid }); this._showToast(this._t('toast.recording_discarded', {}, 'Recording discarded')); await this._fetchRecState(eid); } catch (e) { this._showToast(this._tText('toast.discard_failed', {error: e.message || e}, 'Discard failed: ' + (e.message || e)), 'error'); } } };
      this._render();

    } else if (a === 'fb-confirm') {
      const fbCid = btn.dataset.cid;
      this._ws({ type: `${_DOMAIN}/resolve_feedback`, entry_id: eid, cycle_id: fbCid, action: 'confirm' }).then(() => { this._showToast(this._t('toast.feedback_confirmed', {}, 'Feedback confirmed')); return this._fetchFeedbacks(eid); }).then(() => {
        // Confirming labels the cycle with the detected profile, so an open dialog
        // stops calling its overlay "suspected" (#462).
        const m = this._modal;
        if (m && m.type === 'cycle-detail' && m.cycleId === fbCid && m.overlayPlan && m.overlayPlan.suspected) {
          if (m.curve) m.curve.profile_name = m.overlayPlan.name;
          m.overlayPlan = { name: m.overlayPlan.name, suspected: false, runnerUp: null };
        }
        this._render();
      }).catch(e => this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'));
    } else if (a === 'fb-ignore') {
      this._ws({ type: `${_DOMAIN}/resolve_feedback`, entry_id: eid, cycle_id: btn.dataset.cid, action: 'ignore' }).then(() => { this._showToast(this._t('toast.feedback_dismissed', {}, 'Feedback dismissed')); return this._fetchFeedbacks(eid); }).then(() => this._render()).catch(e => this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'));
    } else if (a === 'fb-correct') {
      this._fetchProfiles(eid).then(() => { this._modal = { type: 'correct-feedback', cycleId: btn.dataset.cid, detectedProfile: btn.dataset.prof }; this._render(); });
    } else if (a === 'fb-dismiss-all') {
      this._modal = { type: 'confirm', title: this._t('modal.dismiss_all_title', {}, 'Dismiss All Feedbacks'), message: this._tText('modal.dismiss_all_msg', {count: this._feedbacks.length}, `Dismiss all ${this._feedbacks.length} pending feedback requests?`), okLabel: this._t('modal.dismiss_all_ok', {}, 'Dismiss All'),
        onOk: async () => { try { await this._ws({ type: `${_DOMAIN}/dismiss_all_feedbacks`, entry_id: eid }); this._showToast(this._t('toast.feedback_all_dismissed', {}, 'All feedbacks dismissed')); await this._fetchFeedbacks(eid); } catch (e) { this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'); } } };
      this._render();

    } else if (a === 'create-phase') {
      this._modal = { type: 'create-phase', deviceType: btn.dataset.dtype }; this._render();
    } else if (a === 'edit-phase') {
      this._modal = { type: 'edit-phase', phaseId: btn.dataset.pid, phaseName: btn.dataset.pname, phaseDesc: btn.dataset.pdesc, isDefault: btn.dataset.pisdefault === 'true' }; this._render();
    } else if (a === 'del-phase') {
      const pname = btn.dataset.pname, pid = btn.dataset.pid;
      // An edited built-in: delete_phase drops the override, which restores the
      // built-in and keeps profiles' ranges on it (it used to fail every time).
      const reset = btn.dataset.reset === '1';
      const msg = reset
        ? this._tText('modal.reset_phase_msg', {name: pname}, `Undo your edit of "${pname}" and restore the built-in phase? Programs keep their ranges.`)
        : this._tText('modal.delete_phase_msg', {name: pname}, `Delete phase "${pname}"?`);
      const done = reset
        ? this._tText('toast.phase_reset', {name: pname}, `"${pname}" restored to the built-in phase`)
        : this._tText('toast.phase_deleted', {name: pname}, `Phase "${pname}" deleted`);
      this._modal = { type: 'confirm', title: reset ? this._t('modal.reset_phase_title', {}, 'Reset Phase') : this._t('modal.delete_phase_title', {}, 'Delete Phase'), message: msg, okLabel: reset ? this._t('btn.reset', {}, 'Reset') : this._t('btn.delete', {}, 'Delete'),
        onOk: async () => { try { await this._ws({ type: `${_DOMAIN}/delete_phase`, entry_id: eid, phase_id: pid }); this._showToast(done); await this._fetchPhases(eid); } catch (e) { this._showToast(this._tText('msg.toast_delete_failed', {error: e.message || e}, 'Delete failed: ' + (e.message || e)), 'error'); } } };
      this._render();

    } else if (a === 'diag-refresh') {
      this._fetchToolsData(eid).then(() => this._render());

    } else if (a === 'reprocess-history') {
      this._modal = { type: 'confirm', title: this._t('modal.process_history_title', {}, 'Process History'), message: this._t('modal.process_history_msg', {}, 'Re-run matching, refresh suggestions, retrain ML (if enabled), recost cycles against recorded energy prices and recompute cycle health across all stored cycles. This may take a while.'), okLabel: this._t('modal.process_history_ok', {}, 'Process'),
        onOk: () => this._kickAndTrack({ type: `${_DOMAIN}/reprocess_history`, entry_id: eid }, 'reprocess', async (r) => {
          const nc = r.count || 0;
          const bits = [this._tText('toast.processed_cycles', {n: nc}, nc + ' cycles')];
          if (r.suggestions != null) bits.push(this._tText('toast.processed_suggestions', {n: r.suggestions}, r.suggestions + ' suggestion(s)'));
          const np = (r.ml_training && r.ml_training.ok && (r.ml_training.promoted || []).length) || 0;
          if (np) bits.push(this._tText('toast.processed_models', {n: np}, np + ' model(s) promoted'));
          this._showToast(this._tText('toast.processed', {bits: bits.join(', ')}, 'Processed ' + bits.join(', ')));
          await this._fetchToolsData(eid);
        }) };
      this._render();
    } else if (a === 'clear-debug') {
      this._modal = { type: 'confirm', title: this._t('modal.clear_debug_title', {}, 'Clear Debug Data'), message: this._t('modal.clear_debug_msg', {}, 'Delete all stored debug traces?'), okLabel: this._t('btn.clear', {}, 'Clear'),
        onOk: () => this._busyRun('clear-debug', async () => { try { const r = await this._ws({ type: `${_DOMAIN}/clear_debug_data`, entry_id: eid }); this._showToast(this._tText('toast.debug_cleared', {count: r.count || 0}, `Cleared ${r.count || 0} debug traces`)); await this._fetchToolsData(eid); } catch (e) { this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'); } }) };
      this._render();
    } else if (a === 'wipe-history') {
      this._modal = { type: 'confirm', title: this._t('modal.wipe_all_title', {}, 'Wipe All Data'), message: this._t('modal.wipe_all_msg', {}, '⚠️ This permanently deletes ALL cycles and profiles. This cannot be undone.'), okLabel: this._t('modal.wipe_all_ok', {}, 'Wipe Everything'),
        onOk: () => this._busyRun('wipe', async () => { try { await this._ws({ type: `${_DOMAIN}/wipe_history`, entry_id: eid }); this._showToast(this._t('toast.all_wiped', {}, 'All data wiped')); this._cycles = []; this._profiles = []; await this._fetchToolsData(eid); } catch (e) { this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'); } }) };
      this._render();

    } else if (a === 'import-undo') {
      // Restoring replaces the whole store again, so it is confirmed like a wipe.
      const u = this._importUndo || {};
      this._modal = { type: 'confirm', title: this._tText('modal.undo_import_title', {}, 'Undo last import'),
        message: this._tText('modal.undo_import_msg', { when: _fmtDate(u.created_at) },
          `This device's data and settings go back to how they were before the last import (${_fmtDate(u.created_at)}). Cycles recorded and changes made since then are lost.`),
        okLabel: this._tText('modal.undo_import_ok', {}, 'Undo import'),
        onOk: () => this._busyRun('import-undo', async () => {
          try {
            const r = await this._ws({ type: `${_DOMAIN}/undo_import`, entry_id: eid });
            const c = ((r && r.summary) || {}).counts || {};
            const cycles = (c.real_cycles || 0) + (c.reference_cycles || 0) + (c.backfill_cycles || 0);
            this._showToast(this._tText('toast.import_undone', { profiles: c.profiles || 0, cycles },
              `Import undone: ${c.profiles || 0} profile(s) and ${cycles} cycle(s) restored`));
          } catch (e) { this._showToast(this._tText('toast.import_undo_failed', { error: e.message || e }, 'Could not undo the import: ' + (e.message || e)), 'error'); }
          // Refresh either way: a failure can mean the restore point is already gone.
          if (!this._isActiveEntry(eid)) return;
          await this._fetchToolsData(eid);
          await this._fetchCycles(eid);
          await this._fetchProfiles(eid);
        }) };
      this._render();
    } else if (a === 'export-config') {
      this._ws({ type: `${_DOMAIN}/export_config`, entry_id: eid }).then(r => {
        const blob = new Blob([r.json_data], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a2 = document.createElement('a');
        a2.href = url; a2.download = `washdata_export_${eid.slice(0, 8)}.json`;
        document.body.appendChild(a2); a2.click(); document.body.removeChild(a2); URL.revokeObjectURL(url);
        this._showToast(this._t('toast.export_downloaded', {}, 'Export downloaded'));
      }).catch(e => this._showToast(this._tText('toast.export_failed', {error: e.message || e}, 'Export failed: ' + (e.message || e)), 'error'));
    } else if (a === 'export-select-open') {
      // Open the export wizard: fetch this device's inventory, default everything on.
      this._modal = { type: 'export-select', inventory: null, loading: true, sel: this._wizEmptySel(), expanded: new Set() };
      this._render();
      (async () => {
        let inv = null;
        try { const r = await this._ws({ type: `${_DOMAIN}/get_export_inventory`, entry_id: eid }); inv = (r && r.manifest) || null; }
        catch (e) { this._showToast(this._tText('toast.export_failed', {error: e.message || e}, 'Export failed: ' + (e.message || e)), 'error'); }
        if (!this._isActiveEntry(eid) || !this._modal || this._modal.type !== 'export-select') return;
        if (!inv) { this._modal = null; this._render(); return; }
        this._modal.inventory = inv;
        this._modal.sel = this._wizInitSel({ categories: inv }, false);
        this._modal.loading = false;
        this._render();
      })();
    } else if (a === 'cyc-select-toggle') {
      this._selectMode = !this._selectMode;
      if (!this._selectMode) this._cycleSel.clear();
      this._render();
    } else if (a === 'cyc-auto-open') {
      this._openAutoLabelModal(eid);
    } else if (a === 'cyc-merge') {
      const ids = Array.from(this._cycleSel);
      if (ids.length < 2) return;
      this._fetchProfiles(eid).then(() => { this._modal = { type: 'merge-cycles', ids }; this._render(); });
    } else if (a === 'cyc-relabel') {
      // D6: bulk relabel — reuse the existing profile picker.
      const ids = Array.from(this._cycleSel);
      if (!ids.length) return;
      this._fetchProfiles(eid).then(() => { this._modal = { type: 'bulk-relabel', ids }; this._render(); });
    } else if (a === 'cyc-load-more') {
      // D3: append the next page, preserving current sort/filter.
      this._busyRun('cyc-load-more', async () => {
        try { await this._loadMoreCycles(eid); }
        catch (e) { this._showToast(this._tText('toast.load_more_failed', { error: e.message || e }, 'Could not load more: ' + (e.message || e)), 'error'); }
      });
    } else if (a === 'task-cancel') {
      const tid = btn.dataset.taskId;
      if (tid) {
        this._cancellingTasks.add(tid);
        this._updateTaskPills();
        this._ws({ type: `${_DOMAIN}/cancel_task`, task_id: tid }).catch(() => {
          // Cancel request itself failed (dropped socket, etc.) — re-enable the
          // ✕ so the user can retry instead of leaving the pill stuck "Cancelling…".
          this._cancellingTasks.delete(tid);
          this._updateTaskPills();
        });
      }
    } else if (a === 'cyc-compare') {
      const ids = Array.from(this._cycleSel);
      if (ids.length < 2) return;
      // Open the overlay modal immediately (loading state), then fetch each
      // selected cycle's trace in parallel and fill it in as they arrive.
      this._modal = { type: 'compare-cycles', ids, cycles: {}, hidden: new Set(), overlays: [], loaded: false };
      if (!this._profiles.length) this._fetchProfiles(eid);
      this._render();
      Promise.all(ids.map(cid =>
        this._ws({ type: `${_DOMAIN}/get_cycle_power_data`, entry_id: eid, cycle_id: cid })
          .then(r => ({ cid, r })).catch(() => ({ cid, r: null }))
      )).then(results => {
        if (!this._modal || this._modal.type !== 'compare-cycles') return;
        results.forEach(({ cid, r }) => { if (r) this._modal.cycles[cid] = r; });
        this._modal.loaded = true;
        this._render();
      });
    } else if (a === 'cyc-bulk-del') {
      // D4: optimistic delete with a 10s Undo window (no confirm dialog).
      const ids = Array.from(this._cycleSel);
      if (!ids.length) return;
      this._deleteCyclesWithUndo(eid, ids);
    } else if (a === 'retry-tab') {
      this._fetchTabData();
    } else if (a === 'retry-cycles') {
      this._fetchCycles(eid).then(() => this._render());
    } else if (a === 'retry-profiles') {
      Promise.all([this._fetchProfiles(eid), this._fetchProfileGroups(eid)]).then(() => this._render());
    } else if (a === 'retry-suggestions') {
      this._fetchSuggestions(eid).then(() => this._render());
    } else if (a === 'goto-suggestions') {
      this._settingsSugOnly = true; this._tab = 'settings'; this._fetchTabData();
    } else if (a === 'goto-conflicts') {
      this._tab = 'settings'; this._fetchTabData();
    } else if (a === 'goto-standby') {
      // The standby card names the Stop Threshold, so it has to LAND on the
      // section that holds it. 'goto-conflicts' only flips the tab and keeps
      // whatever _settingsSec was last open, so from Basic or Notifications the
      // card opened a page with no Stop Threshold and no highlighted conflict -
      // and this state is not a conflict, so nothing would have highlighted.
      this._settingsSec = 'detection';
      this._settingsSearch = ''; this._settingsSugOnly = false;
      this._tab = 'settings'; this._fetchTabData();
    } else if (a === 'conf-goto-section') {
      const confKeys = this._conflictKeysFromOpts();
      for (const sec of _SETTINGS_SECTIONS) {
        const fields = sec.fields || (sec.groups || []).flatMap(g => g.fields || []);
        if (fields.some(f => confKeys.has(f.key))) { this._settingsSec = sec.id; this._render(); break; }
      }
    } else if (a === 'toggle-settings-history') {
      this._settingsHistoryOpen = !this._settingsHistoryOpen;
      this._render();

    } else if (a === 'settings-revert-key') {
      const key = btn.dataset.key;
      const val = JSON.parse(btn.dataset.val);
      if (!key) return;
      const eid = dev.entry_id;
      this._ws({ type: `${_DOMAIN}/set_options`, entry_id: eid, options: { [key]: val } })
        .then(() => this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid }))
        .then(r => { this._opts = r.options || {}; this._optDefaults = r.defaults || {}; return this._fetchSettingsChangelog(eid); })
        .then(() => {
          this._showToast(this._tText('msg.toast_reverted', { key: this._t('setting.' + key + '.label', {}, key) }, '{key} reverted'), 'success');
          this._render();
        })
        .catch(e => this._showToast(this._tText('msg.toast_error', { error: e.message || e }, 'Error: ' + (e.message || e)), 'error'));

    } else if (a === 'toggle-log-drawer') {
      this._logOpen = !this._logOpen;
      try { localStorage.setItem('wd-log-open', this._logOpen ? '1' : '0'); } catch (_) {}
      this._render();
      if (this._logOpen) this._fetchLogs().then(() => { if (this._logOpen) this._render(); });
    } else if (a === 'add-device') {
      this._navigate(`/config/integrations/integration/${_DOMAIN}`);
    } else if (a === 'goto-feedbacks') {
      this._tab = 'history'; this._historySub = 'cycles'; this._cycleFilter = { ...this._cycleFilter, status: 'needs_review' }; this._fetchTabData();
    } else if (a === 'goto-recording') {
      this._tab = 'status'; this._fetchTabData();
    } else if (a === 'logs-refresh') {
      this._fetchLogs().then(() => this._render());
    } else if (a === 'logs-export') {
      this._ws({ type: `${_DOMAIN}/get_logs`, limit: 500 }).then(r => {
        const lines = (r.logs || []).map(x => `${new Date(x.ts * 1000).toISOString()} ${x.level} ${x.msg}`).join('\n');
        const blob = new Blob([lines], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a2 = document.createElement('a');
        a2.href = url; a2.download = `washdata_logs_${Date.now()}.txt`;
        document.body.appendChild(a2); a2.click(); document.body.removeChild(a2); URL.revokeObjectURL(url);
        this._showToast(this._t('toast.logs_exported', {}, 'Logs exported'));
      }).catch(e => this._showToast(this._tText('toast.export_failed', {error: e.message || e}, 'Export failed: ' + (e.message || e)), 'error'));
    } else if (a === 'import-config-open') {
      // Open the import wizard at the paste/upload step.
      this._modal = { type: 'import-wizard', step: 'input', jsonText: '', manifest: null, error: null,
        sel: this._wizEmptySel(),
        expanded: new Set(), mode: 'merge', cycleDest: 'reference', conflicts: {} };
      this._render();
    } else if (a === 'hist-import-open') {
      // Open the power-history import wizard at the upload step. Every field is
      // initialised here so the render-smoke harness (which calls every modal
      // renderer) never meets a half-built state.
      this._modal = {
        type: 'history-import', step: 'input', csvText: '', since: _histDefaultSince(), token: null,
        scanTaskId: null, applyTaskId: null, result: null, accept: new Set(),
        done: null, error: null,
      };
      this._render();

    } else if (a === 'save-prefs') {
      const dt = sr.getElementById('wd-pref-tab')?.value || '';
      const dbg = !!sr.getElementById('wd-pref-debug')?.checked;
      const showExpected = sr.getElementById('wd-pref-expected') ? !!sr.getElementById('wd-pref-expected').checked : true;
      const showRaw = !!sr.getElementById('wd-pref-raw')?.checked;
      const dateFmt = sr.getElementById('wd-pref-datefmt')?.value || 'relative';
      const langOverrideSave = sr.getElementById('wd-pref-lang')?.value || '';
      const fontScale = parseFloat(sr.getElementById('wd-pref-fontscale')?.value) || 1;
      const prefs = { default_tab: dt, show_debug: dbg, show_expected: showExpected, show_raw: showRaw, date_format: dateFmt, lang_override: langOverrideSave, font_scale: fontScale };
      this._busyRun('save-prefs', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/set_user_prefs`, prefs });
          if (this._panelCfg) this._panelCfg.prefs = { ...(this._panelCfg.prefs || {}), ...prefs };
          // Language may have changed: ensure the (now effective) language file is
          // loaded, then re-render so the new strings take effect immediately.
          const effLang = langOverrideSave || (this._hass && this._hass.locale && this._hass.locale.language);
          await this._loadPanelLang(effLang);
          this._render();
          this._showToast(this._t('toast.preferences_saved', {}, 'Preferences saved'));
        } catch (e) { this._showToast(this._tText('toast.save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
      });

    } else if (a === 'save-panel') {
      const panel = {
        default_tab: sr.getElementById('wd-ps-deftab')?.value || 'status',
        hidden_tabs: Array.from(sr.querySelectorAll('[data-hidetab]')).filter(c => c.checked).map(c => c.dataset.hidetab),
      };
      this._busyRun('save-panel', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/set_panel_config`, panel });
          this._panelCfg = await this._ws({ type: `${_DOMAIN}/get_panel_config` });
          this._tabInitialized = true;  // keep the user on the current tab
          this._applyPanelConfig();
          this._showToast(this._t('toast.panel_settings_saved', {}, 'Panel settings saved'));
        } catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
      });

    } else if (a === 'pause-cycle') {
      this._ws({ type: `${_DOMAIN}/pause_cycle`, entry_id: eid })
        .then(r => {
          if (r && r.ok === false) { this._showToast(this._t('toast.pause_no_cycle', {}, 'No active cycle to pause'), 'error'); return; }
          this._showToast(this._t('toast.cycle_paused', {}, 'Cycle paused'));
          return this._fetchAll();
        })
        .catch(e => this._showToast(this._tText('toast.pause_failed', {error: e.message || e}, 'Pause failed: ' + (e.message || e)), 'error'));

    } else if (a === 'resume-cycle') {
      this._ws({ type: `${_DOMAIN}/resume_cycle`, entry_id: eid })
        .then(r => {
          if (r && r.ok === false) { this._showToast(this._t('toast.resume_no_cycle', {}, 'No paused cycle to resume'), 'error'); return; }
          this._showToast(this._t('toast.cycle_resumed', {}, 'Cycle resumed'));
          return this._fetchAll();
        })
        .catch(e => this._showToast(this._tText('msg.toast_resume_failed', {error: e.message || e}, 'Resume failed: ' + (e.message || e)), 'error'));

    } else if (a === 'terminate-cycle') {
      this._modal = {
        type: 'confirm',
        title: this._t('modal.force_stop_title', {}, 'Force Stop Cycle'),
        message: this._t('modal.force_stop_msg', {}, 'Force-stop the active cycle now? The cycle will be saved as interrupted.'),
        okLabel: this._t('btn.force_stop', {}, 'Force Stop'),
        onOk: async () => {
          try {
            await this._ws({ type: `${_DOMAIN}/terminate_cycle`, entry_id: eid });
            this._showToast(this._t('toast.cycle_force_stopped', {}, 'Cycle force-stopped'));
            await this._fetchAll();
          } catch (e) { this._showToast(this._tText('msg.toast_force_stop_failed', {error: e.message || e}, 'Force stop failed: ' + (e.message || e)), 'error'); }
        },
      };
      this._render();

    } else if (a === 'save-rbac') {
      const enabled = !!sr.getElementById('wd-rbac-enabled')?.checked;
      const default_level = sr.getElementById('wd-rbac-default')?.value || 'none';
      const usersMap = {};
      sr.querySelectorAll('[data-rbacuser]').forEach(el => {
        const uid = el.dataset.rbacuser, dev = el.dataset.rbacdev, val = el.value;
        if (!usersMap[uid]) usersMap[uid] = { default: 'none', devices: {} };
        if (dev === '__default__') usersMap[uid].default = val;
        else if (val && val !== 'inherit') usersMap[uid].devices[dev] = val;
      });
      this._busyRun('save-rbac', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/set_panel_config`, rbac: { enabled, default_level, users: usersMap } });
          this._panelCfg = await this._ws({ type: `${_DOMAIN}/get_panel_config` });
          this._showToast(this._t('toast.access_saved', {}, 'Access control saved'));
        } catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
      });
    }
  }

  _applyAllSuggestions(eid, keys) {
    this._busyRun('save-settings', async () => {
      try {
        await this._ws({ type: `${_DOMAIN}/apply_suggestions`, entry_id: eid, keys });
        this._showToast(this._t('toast.suggestions_applied', {}, 'Suggestions applied; integration reloading'));
        await this._fetchSuggestions(eid);
        const r = await this._ws({ type: `${_DOMAIN}/get_options`, entry_id: eid });
        this._opts = r.options || {};
        this._optDefaults = r.defaults || {};  // #396
        this._prevOpts = null;
        this._cascadePending = {};
        this._preCascadeOpts = null;
      } catch (e) { this._showToast(this._tText('toast.apply_failed', {error: e.message || e}, 'Apply failed: ' + (e.message || e)), 'error'); }
    });
  }

  _onActSuggestions(a, btn, dev, eid, sr) {
    if (a === 'sug-apply-all') {
      const keys = this._suggestions.map(s => s.key);
      // Preview first: up to 17 coupled changes used to land on one click.
      const items = this._suggestions.map(sg => {
        const f = _FIELD_BY_KEY[sg.key] || {};
        const u = f.unit ? ` ${f.unit}` : '';
        const cur = sg.current == null || sg.current === '' ? '-' : `${sg.current}${u}`;
        return {
          text: `${this._t('setting.' + sg.key + '.label', {}, f.label || sg.key)}: ${cur} → ${sg.suggested}${u}`,
          sub: _sugImpact(this._t.bind(this), sg.key, sg.suggested, sg.current),
        };
      });
      this._modal = {
        type: 'confirm', okPrimary: true, items,
        title: this._t('modal.apply_suggestions_title', {}, 'Apply suggestions'),
        message: this._tText('modal.apply_suggestions_msg', {n: items.length}, `Change these ${items.length} settings? The integration reloads after saving.`),
        okLabel: this._t('btn.apply_all', {}, 'Apply all'),
        onOk: () => this._applyAllSuggestions(eid, keys),
      };
      this._render();

    } else if (a === 'sug-show-all') {
      this._settingsSugOnly = false; this._render();

    } else if (a === 'sug-dismiss') {
      this._settingsSugOnly = false;
      this._busyRun('save-settings', async () => {
        try { await this._ws({ type: `${_DOMAIN}/clear_suggestions`, entry_id: eid }); this._suggestions = []; this._showToast(this._t('toast.suggestions_dismissed', {}, 'Suggestions dismissed')); }
        catch (e) { this._showToast(this._tText('toast.error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'); }
      });

    } else if (a === 'sug-unmute-all') {
      // #343: un-mute every locked suggestion so the auto-tuner can propose them again.
      this._busyRun('save-settings', async () => {
        try {
          const keys = [...(this._lockedSuggestions || [])];
          const results = await Promise.allSettled(
            keys.map(k => this._ws({ type: `${_DOMAIN}/set_suggestion_lock`, entry_id: eid, key: k, locked: false }))
          );
          if (!this._isActiveEntry(eid)) return;  // device switched mid-flight
          const failed = results.filter(r => r.status === 'rejected').length;
          const lastOk = results.slice().reverse().find(r => r.status === 'fulfilled');
          this._lockedSuggestions = (lastOk && lastOk.value && lastOk.value.locked_suggestions) || [];
          await this._fetchSuggestions(eid);
          if (failed) {
            this._showToast(this._tText('toast.error', {error: `${failed} suggestion(s) failed to unlock`}, `${failed} suggestion(s) failed to unlock`), 'error');
          } else {
            this._showToast(this._t('msg.sug_unmuted_all', {}, 'Muted suggestions reset'), 'success');
          }
        } catch (e) { this._showToast(this._tText('toast.error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'); }
      });

    } else if (a === 'sug-analyze') {
      this._busyRun('sug-analyze', async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/run_suggestion_analysis`, entry_id: eid });
          const n = (r && r.count) || 0;
          this._showToast(n ? this._tText('toast.analysis_complete', {count: n}, `Analysis complete: ${n} suggestion(s)`) : this._t('toast.analysis_complete_none', {}, 'Analysis complete: no new suggestions'));
          await this._fetchSuggestions(eid);
        } catch (e) { this._showToast(this._tText('toast.analysis_failed', {error: e.message || e}, 'Analysis failed: ' + (e.message || e)), 'error'); }
      });
    }
  }

  _onActMl(a, btn, dev, eid) {
    if (a === 'ml-train-now') {
      // Detached, registry-tracked task: a header pill shows progress and it
      // survives a dropped socket; the result loads when it settles.
      this._kickAndTrack({ type: `${_DOMAIN}/trigger_ml_training`, entry_id: eid }, 'ml-train-now:' + eid, async (r) => {
        if (r && r.ok) {
          const promoted = (r.promoted || []).length;
          // Not promoted: say why (audit ML-20), not a blanket "no improvement".
          const kept = !promoted && (r.results || []).find(x => x && x.promoted === false && x.reason_code);
          this._showToast(promoted ? this._tText('toast.ml_training_promoted', {count: promoted}, `Training complete: promoted ${promoted} model(s)`)
            : kept ? this._mlSkipReason(kept)[1]
            : this._t('toast.ml_training_no_improvement', {}, 'Training complete: baseline kept (no improvement)'));
        } else {
          this._showToast(this._t('toast.ml_training_no_improvement', {}, 'Training complete: baseline kept (no improvement)'), 'info');
        }
        await this._loadMlTrainingStatus(eid);
      });

    } else if (a === 'ml-revert-models') {
      this._busyRun('ml-revert-models', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/revert_ml_models`, entry_id: eid });
          this._showToast(this._t('toast.models_reverted', {}, 'On-device models reverted to baseline'));
          await this._loadMlTrainingStatus(eid);
        } catch (e) { this._showToast(this._tText('msg.toast_revert_failed', {error: e.message || e}, 'Revert failed: ' + (e.message || e)), 'error'); }
      });
    }
  }

  _onActStore(a, btn, dev, eid, sr) {
    // ── Community Store ──────────────────────────────────────────────────────
    if (a === 'store-toggle-online') {
      // Online features are integration-wide: persist via the global store_set_online.
      const on = !!btn.checked;
      this._busyRun('store-account', async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/store_set_online`, entry_id: eid, enabled: on });
          this._constants.storeOnlineEnabled = !!(r && r.enabled);
          if (this._constants.storeOnlineEnabled) { await this._loadStoreStatus(eid); this._ensureStoreConnectListener(); }
          else { this._storeStatus = { enabled: false }; this._storeConnected = false; }
        } catch (e) {
          this._showToast(this._tText('toast.store_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error');
        }
      });

    } else if (a === 'store-toggle-pref') {
      // Generic community-store preference toggle (declarative _STORE_PREFS).
      const key = btn.dataset.pref;
      const val = !!btn.checked;
      if (!key) return;
      this._busyRun('store-account', async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/store_set_prefs`, entry_id: eid, prefs: { [key]: val } });
          if (r && r.prefs) this._constants = { ...this._constants, storePrefs: r.prefs };
        } catch (e) {
          this._showToast(this._tText('toast.store_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error');
        }
      });

    } else if (a === 'store-goto-identity') {
      this._tab = 'settings';
      this._settingsSec = 'basic';   // the Device info group lives in Basic
      this._fetchTabData();
      // Focus the brand picker once the Settings form has rendered. Focusing it also
      // opens its dropdown, which is what loads the brand catalog (_ensureCatalogList).
      requestAnimationFrame(() => requestAnimationFrame(() => {
        const el = this.shadowRoot && this.shadowRoot.getElementById('wd-store-brand');
        if (el) { el.focus(); el.scrollIntoView({ block: 'center' }); }
      }));

    } else if (a === 'store-refresh-catalog') {
      // Drop the backend's cached catalog AND every local copy of it, so the next time a
      // picker is opened it genuinely re-reads the store.
      this._busyRun('store-refresh-catalog', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/store_refresh_catalog`, entry_id: eid });
          clearTimeout(this._brandSearchTimer); this._brandSearchTimer = null;
          this._catalog.brands = undefined; this._catalog.devices = undefined;
          this._catalog.forBrand = null;
          this._catalog.brandsFull = false; this._catalog.brandPrefixes = [];
          this._dropModelCandidates();
          this._catalogEntry = null;
          if (this._entityListCache) {
            delete this._entityListCache.store_brand;
            delete this._entityListCache.store_model;
          }
          this._showToast(this._t('toast.catalog_refreshed', {}, 'Community catalog refreshed'));
        } catch (e) {
          this._showToast(this._tText('toast.store_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error');
        }
      });

    } else if (a === 'store-connect') {
      const origin = this._constants.storeWebOrigin;
      if (!origin) { this._showToast(this._t('toast.store_unavailable', {}, 'The community store is not available.'), 'error'); return; }
      this._ensureStoreConnectListener();
      window.open(origin + '/connect.html?origin=' + encodeURIComponent(location.origin), 'washdata_connect', 'width=480,height=640');

    } else if (a === 'store-disconnect') {
      this._busyRun('store-account', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/store_disconnect`, entry_id: eid });
          await this._loadStoreStatus(eid);
          this._showToast(this._t('toast.store_disconnected', {}, 'Disconnected from the community store'));
        } catch (e) { this._showToast(this._tText('toast.store_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'); }
      });

    } else if (a === 'store-add-appliance') {
      const origin = this._constants.storeWebOrigin;
      if (!origin) { this._showToast(this._t('toast.store_unavailable', {}, 'The community store is not available.'), 'error'); return; }
      this._ensureStoreConnectListener();
      const modelEl = sr.getElementById('wd-store-model');
      const brandEl = sr.getElementById('wd-store-brand');
      const q = new URLSearchParams({
        mode: 'device', type: this._storeApplianceType(),
        brand: (brandEl && brandEl.value) || this._opts.store_brand || '',
        model: (modelEl && modelEl.value) || this._opts.store_model || '', origin: location.origin,
      }).toString();
      // Remember WHICH device asked. The popup is user-paced, so the panel's
      // selection can change while it is open - and since these contributions
      // became real saves via _saveStoreOptions, returning to a different
      // device would write this appliance identity onto that entry and reload
      // it, while the device that asked never gets it.
      this._storeContribEid = eid;
      window.open(origin + '/create.html?' + q, 'washdata_create', 'width=560,height=760');

    } else if (a === 'store-add-brand') {
      const origin = this._constants.storeWebOrigin;
      if (!origin) { this._showToast(this._t('toast.store_unavailable', {}, 'The community store is not available.'), 'error'); return; }
      this._ensureStoreConnectListener();
      const brandEl = sr.getElementById('wd-store-brand');
      const q = new URLSearchParams({
        mode: 'brand', brand: (brandEl && brandEl.value) || this._opts.store_brand || '', origin: location.origin,
      }).toString();
      this._storeContribEid = eid;  // see store-add-appliance
      window.open(origin + '/create.html?' + q, 'washdata_create', 'width=560,height=760');

    } else if (a === 'store-confirm-device') {
      const did = btn.dataset.deviceId;
      this._busyRun('store-account', async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/store_confirm_device`, entry_id: eid, device_id: did });
          if (r && r.error) { this._showToast(this._tText('toast.store_error', {error: r.error}, 'Error: ' + r.error), 'error'); return; }
          // Patch every copy of the row the UI may be showing: the picker's badge now
          // reads the resolved catalog entry, while the Store tab reads the browse list.
          const rows = [
            ...(this._catalog.devices || []),
            ...(this._storeDevices || []),
            (this._catalogEntry && this._catalogEntry.device) || null,
          ];
          for (const d of rows) {
            if (r && d && String(d.id) === String(did)) { d.confirmCount = r.confirmCount; d.status = r.status; }
          }
          this._showToast(r && r.status === 'approved' ? this._t('toast.device_approved', {}, 'Approved by the community') : this._t('toast.thanks_confirming', {}, 'Thanks for confirming'));
          this._render();
        } catch (e2) { this._showToast(this._tText('toast.store_error', {error: e2.message || e2}, 'Error: ' + (e2.message || e2)), 'error'); }
      });

    } else if (a === 'store-rate-device') {
      const did = btn.dataset.deviceId;
      const rating = parseInt(btn.dataset.rating, 10);
      if (!(rating >= 1 && rating <= 5)) return;
      this._busyRun('store-account', async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/store_rate_device`, entry_id: eid, device_id: did, rating });
          if (r && r.error) { this._showToast(this._tText('toast.store_error', {error: r.error}, 'Error: ' + r.error), 'error'); return; }
          this._showToast(this._t('toast.rating_saved', {}, 'Quality rating saved'));
        } catch (e2) { this._showToast(this._tText('toast.store_error', {error: e2.message || e2}, 'Error: ' + (e2.message || e2)), 'error'); }
      });

    } else if (a === 'store-nav') {
      const view = btn.dataset.view;
      if (view === 'brands') { this._storeView = 'brands'; this._storeDevice = null; this._storeProfile = null; this._render(); }
      else if (view === 'device') { this._storeView = 'device'; this._storeProfile = null; this._render(); }

    } else if (a === 'store-open-device') {
      const id = btn.dataset.deviceId;
      const d = (this._storeDevices || []).find(x => String(x.id) === String(id));
      if (d) this._storeOpenDevice(d);

    } else if (a === 'store-open-profile') {
      const id = btn.dataset.profileId;
      const p = (this._storeProfiles || []).find(x => String(x.id) === String(id));
      if (!p) return;
      this._storeProfile = p; this._storeView = 'profile';
      this._storeCycles = []; this._storeLoading = true; this._storeBrowseErr = false; this._render();
      this._ws({ type: `${_DOMAIN}/store_get_cycles`, entry_id: eid, profile_id: p.id })
        .then(r => { if (!this._isActiveEntry(eid) || this._storeView !== 'profile') return; this._storeCycles = (r && r.items) || []; this._storeBrowseErr = !!(r && r.error); })
        .catch(() => { if (this._isActiveEntry(eid)) { this._storeCycles = []; this._storeBrowseErr = true; } })
        .finally(() => { if (this._isActiveEntry(eid)) { this._storeLoading = false; this._render(); } });

    } else if (a === 'store-onboard') {
      // Onboarding jump: open the Store tab pre-filtered to this device's brand
      // (when declared) so an empty device can adopt a community setup.
      this._storeQuery = (this._opts.store_brand || '').trim();
      this._storeView = 'brands'; this._storeDevice = null; this._storeProfile = null;
      this._tab = 'store'; this._fetchTabData();

    } else if (a === 'store-toggle-dl-settings') {
      this._dlSettings = !!btn.checked;

    } else if (a === 'store-download-device') {
      const did = btn.dataset.deviceId;
      if (!did) return;
      const withSettings = !!this._dlSettings;
      this._busyRun('store-download-device', async () => {
        try {
          const started = await this._ws({ type: `${_DOMAIN}/store_download_device`, entry_id: eid, device_id: did, include_settings: withSettings });
          // A registry task now (audit STORE-10); its result is the old reply.
          const r = started && started.task_id ? ((await this._awaitTask(started.task_id)) || {}).result : started;
          if (r && (r.error || r.disabled)) { const why = r.error || 'unavailable'; this._showToast(this._tText('toast.store_download_failed', {error: why}, 'Download failed: ' + why), 'error'); return; }
          const p = (r && r.profiles_adopted) || 0, c = (r && r.cycles_imported) || 0;
          const sa = (r && r.settings_applied) || 0;
          const sk = (r && r.cycles_skipped) || 0;
          const skipped = sk ? this._tText('toast.store_download_skipped', {n: sk}, `${sk} recording(s) skipped: too short, too gappy or already on your device.`) : '';
          if (!p && !c && !sa) {
            // Nothing adopted: either already imported, or the fetch came back empty.
            this._showToast(skipped || this._t('toast.store_download_nothing', {}, 'Nothing new to download - this setup is already on your device.'), 'info');
            return;
          }
          await this._fetchProfiles(eid);
          await this._fetchCycles(eid);
          const ph = (r && r.phases_applied) || 0;
          let done;
          if (sa) done = this._tText('toast.store_device_downloaded_settings', {p, c, ph, s: sa}, `${p} program(s), ${c} recording(s), ${ph} phase map(s), ${sa} setting(s) added`);
          else if (ph) done = this._tText('toast.store_device_downloaded_phases', {p, c, ph}, `${p} program(s), ${c} recording(s), ${ph} phase map(s) added`);
          else done = this._tText('toast.store_device_downloaded', {p, c}, `${p} program(s), ${c} recording(s) added`);
          const fp = (r && r.partial && r.failed_profiles) || 0;
          const partial = fp ? this._tText('toast.store_download_partial', {n: fp}, `${fp} program(s) could not be downloaded; try again later.`) : '';
          this._showToast([done, skipped, partial].filter(Boolean).join('. '), fp ? 'info' : undefined);
        } catch (e) { this._showToast(this._tText('toast.store_download_failed', {error: e.message || e}, 'Download failed: ' + (e.message || e)), 'error'); }
      });

    } else if (a === 'store-import') {
      const cid = btn.dataset.cycleId;
      const program = (this._storeProfile && this._storeProfile.program) || '';
      this._modal = { type: 'store-import', cycleId: cid, program, mode: 'new' };
      this._render();

    } else if (a === 'store-share-cycle') {
      const cid = btn.dataset.cid;
      const program = btn.dataset.prof || '';
      this._modal = { type: 'store-share', cycleId: cid, program, profiles: null, deviceId: null };
      this._render();
      this._loadShareProfiles();

    } else if (a === 'store-share-device') {
      // Open the device-bundle share tree. Fetch the FULL shareable set (all
      // recorded/golden reference cycles, every page) and default-check them all.
      this._modal = { type: 'store-share-device', selected: new Set(), includePhases: new Set(), includeSettings: false, loading: true };
      this._render();
      (async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/get_shareable_cycles`, entry_id: eid });
          this._shareableCycles = (r && r.items) || [];
          this._sharePhasePrograms = (r && r.phase_programs) || [];
          this._shareAllPrograms = (r && r.all_programs) || [];
        } catch (_) { this._shareableCycles = []; this._sharePhasePrograms = []; this._shareAllPrograms = []; }
        if (!this._isActiveEntry(eid) || !this._modal || this._modal.type !== 'store-share-device') return;
        const sel = new Set();
        this._shareableByProgram().forEach(g => g.cycles.forEach(c => sel.add(c.id)));
        this._modal.selected = sel;
        // Default: bundle the phase map for every program that has one.
        this._modal.includePhases = new Set(this._sharePhasePrograms);
        this._modal.loading = false;
        this._render();
      })();

    } else if (a === 'store-share-profile') {
      // Open the share modal pre-filtered to a single profile's cycles.
      const prog = btn.dataset.prog || '';
      this._modal = { type: 'store-share-device', selected: new Set(), includePhases: new Set(), includeSettings: false, loading: true, focusProfile: prog };
      this._render();
      (async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/get_shareable_cycles`, entry_id: eid });
          this._shareableCycles = (r && r.items) || [];
          this._sharePhasePrograms = (r && r.phase_programs) || [];
          this._shareAllPrograms = (r && r.all_programs) || [];
        } catch (_) { this._shareableCycles = []; this._sharePhasePrograms = []; this._shareAllPrograms = []; }
        if (!this._isActiveEntry(eid) || !this._modal || this._modal.type !== 'store-share-device') return;
        // Pre-select only cycles belonging to the chosen profile.
        const sel = new Set();
        this._shareableByProgram()
          .filter(g => g.program === prog)
          .forEach(g => g.cycles.forEach(c => sel.add(c.id)));
        this._modal.selected = sel;
        // Include the phase map for this profile if one exists.
        this._modal.includePhases = new Set((this._sharePhasePrograms || []).filter(p => p === prog));
        this._modal.loading = false;
        this._render();
      })();

    } else if (a === 'store-share-add-profile') {
      const m = this._modal;
      const origin = this._constants.storeWebOrigin;
      if (!origin || !m) { if (!origin) this._showToast(this._t('toast.store_unavailable', {}, 'The community store is not available.'), 'error'); return; }
      this._ensureStoreConnectListener();
      const q = new URLSearchParams({
        mode: 'profile', device: m.deviceId || '', type: this._storeApplianceType(),
        brand: this._opts.store_brand || '', model: this._opts.store_model || '', origin: location.origin,
      }).toString();
      window.open(origin + '/create.html?' + q, 'washdata_create', 'width=560,height=760');
    }
  }

  _onActAuto(a, btn, dev, eid, sr) {
    if (a === 'auto-new') {
      this._navigate('/config/automation/edit/new');

    } else if (a === 'auto-new-started') {
      this._newAutomationFromEvent('started');

    } else if (a === 'auto-new-finished') {
      this._newAutomationFromEvent('finished');

    } else if (a === 'auto-delete') {
      const autoId = btn.dataset.autoid, autoName = btn.dataset.autoname || 'this automation';
      this._modal = { type: 'confirm', title: this._t('modal.delete_automation_title', {}, 'Delete Automation'), message: this._tText('modal.delete_automation_msg', {name: autoName}, `Delete the automation "${autoName}" from Home Assistant? This cannot be undone.`), okLabel: this._t('btn.delete', {}, 'Delete'),
        onOk: async () => {
          try {
            await this._hass.callApi('DELETE', 'config/automation/config/' + autoId);
            this._showToast(this._t('toast.automation_deleted', {}, 'Automation deleted'));
            await this._loadDeviceAutomations(eid);
          } catch (e) { this._showToast(this._tText('toast.delete_failed', {error: e.message || e}, 'Delete failed: ' + (e.message || e)), 'error'); }
        } };
      this._render();

    } else if (a === 'auto-convert-legacy') {
      this._convertLegacyActions();

    } else if (a === 'auto-remove-legacy') {
      this._modal = { type: 'confirm', title: this._t('modal.remove_legacy_title', {}, 'Remove Legacy Actions'), message: this._t('modal.remove_legacy_msg', {}, 'Remove the legacy custom actions? They will stop firing on cycle events. This cannot be undone from the panel.'), okLabel: this._t('btn.remove', {}, 'Remove'),
        onOk: async () => {
          try {
            await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: eid, options: { notify_actions: [] } });
            this._opts = { ...this._opts, notify_actions: [] };
            this._showToast(this._t('toast.legacy_removed', {}, 'Legacy actions removed'));
          } catch (e) { this._showToast(this._tText('toast.remove_failed', {error: e.message || e}, 'Remove failed: ' + (e.message || e)), 'error'); }
        } };
      this._render();
    }
  }

  _onActMaintenance(a, btn, dev, eid, sr) {
    if (a === 'maint-add') {
      const eventType = sr.getElementById('wd-maint-type')?.value || '';
      const date = sr.getElementById('wd-maint-date')?.value || '';
      const notes = (sr.getElementById('wd-maint-notes')?.value || '').trim();
      if (!eventType) { this._showToast(this._tText('toast.maint_add_failed', { error: this._t('lbl.event_type', {}, 'Event type') }, 'Could not add event: Event type'), 'error'); return; }
      this._busyRun('maint-add', async () => {
        try {
          const payload = { type: `${_DOMAIN}/add_maintenance_event`, entry_id: eid, event_type: eventType };
          if (date) payload.date = date;
          if (notes) payload.notes = notes;
          await this._ws(payload);
          await this._fetchMaintenance(eid);
          this._showToast(this._t('toast.maint_added', {}, 'Maintenance event added'));
          this._render();
        } catch (e) { this._showToast(this._tText('toast.maint_add_failed', { error: e.message || e }, 'Could not add event: ' + (e.message || e)), 'error'); }
      });
    } else if (a === 'maint-delete') {
      const mid = btn.dataset.mid;
      this._modal = { type: 'confirm', title: this._t('modal.delete_maintenance_title', {}, 'Delete Maintenance Event'), message: this._t('modal.delete_maintenance_msg', {}, 'Delete this maintenance record? This cannot be undone.'), okLabel: this._t('btn.delete', {}, 'Delete'),
        onOk: () => this._busyRun('maint-delete', async () => {
          try {
            await this._ws({ type: `${_DOMAIN}/delete_maintenance_event`, entry_id: eid, event_id: mid });
            await this._fetchMaintenance(eid);
            this._showToast(this._t('toast.maint_deleted', {}, 'Maintenance event deleted'));
          } catch (e) { this._showToast(this._tText('toast.maint_delete_failed', { error: e.message || e }, 'Could not delete event: ' + (e.message || e)), 'error'); }
        }) };
      this._render();
    } else if (a === 'maint-save-odometer') {
      const raw = sr.getElementById('wd-maint-odometer')?.value;
      const count = parseInt(raw, 10);
      if (isNaN(count) || count < 0) { this._showToast(this._tText('toast.odometer_save_failed', { error: this._t('lbl.total_cycles_run', {}, 'cycles run in total') }, 'Could not save total: cycles run in total'), 'error'); return; }
      this._busyRun('maint-save-odometer', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/set_lifetime_cycle_count`, entry_id: eid, count: count });
          await this._fetchMaintenance(eid);
          this._showToast(this._t('toast.odometer_saved', {}, 'Total cycles saved'));
          this._render();
        } catch (e) { this._showToast(this._tText('toast.odometer_save_failed', { error: e.message || e }, 'Could not save total: ' + (e.message || e)), 'error'); }
      });
    } else if (a === 'maint-save-reminders') {
      const mt = this._maintenance || {};
      const saved = mt.reminders || {};
      const dict = {};
      sr.querySelectorAll('[data-maint-rem]').forEach(el => {
        const t = el.dataset.maintRem;
        const n = parseInt(el.value, 10);
        dict[t] = (!isNaN(n) && n > 0) ? n : 0;
      });
      // Only a real change goes through set_options (it reloads the entry).
      const builtinChanged = Object.keys(dict).some(t => dict[t] !== (parseInt(saved[t], 10) || 0));
      // Custom tasks (#461): rename / interval edits made in place, plus a new task
      // typed into the "New task" row and saved without pressing "Add task".
      const updates = [];
      for (const t of (Array.isArray(mt.custom_tasks) ? mt.custom_tasks : [])) {
        const nameEl = sr.querySelector(`[data-mtask-name="${CSS.escape(t.id)}"]`);
        if (!nameEl) continue;
        const name = nameEl.value.trim();
        if (!name) { this._showToast(this._tText('toast.task_name_required', {}, 'Give the task a name'), 'error'); return; }
        const cycles = this._maintInterval(sr.querySelector(`[data-mtask-cycles="${CSS.escape(t.id)}"]`));
        const days = this._maintInterval(sr.querySelector(`[data-mtask-days="${CSS.escape(t.id)}"]`));
        const patch = {};
        if (name !== t.name) patch.name = name;
        if (cycles !== (t.cycles || 0)) patch.cycles = cycles;
        if (days !== (t.days || 0)) patch.days = days;
        if (Object.keys(patch).length) updates.push({ task_id: t.id, ...patch });
      }
      // Read before _busyRun: its first render rebuilds the inputs.
      const newTask = this._maintNewTaskInput(sr);
      this._busyRun('maint-save-reminders', async () => {
        try {
          if (builtinChanged) {
            await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: eid, options: { maintenance_reminder_cycles: dict } });
          }
          for (const u of updates) {
            await this._ws({ type: `${_DOMAIN}/update_maintenance_task`, entry_id: eid, ...u });
          }
          if (newTask.name) await this._maintAddTask(eid, newTask);
          await this._fetchMaintenance(eid);
          this._showToast(this._t('toast.reminders_saved', {}, 'Service reminders saved'));
          this._render();
        } catch (e) {
          // A partial save (one task refused) still refreshes what did land.
          await this._fetchMaintenance(eid).catch(() => {});
          this._render();
          this._showToast(this._tText('toast.reminders_save_failed', { error: e.message || e }, 'Could not save reminders: ' + (e.message || e)), 'error');
        }
      });
    } else if (a === 'maint-task-add') {
      const newTask = this._maintNewTaskInput(sr);
      if (!newTask.name) { this._showToast(this._tText('toast.task_name_required', {}, 'Give the task a name'), 'error'); return; }
      this._busyRun('maint-task-add', async () => {
        try {
          await this._maintAddTask(eid, newTask);
          await this._fetchMaintenance(eid);
          this._showToast(this._t('toast.task_added', {}, 'Task added'));
          this._render();
        } catch (e) { this._showToast(this._tText('toast.task_save_failed', { error: e.message || e }, 'Could not save task: ' + (e.message || e)), 'error'); }
      });
    } else if (a === 'maint-task-remove') {
      const tid = btn.dataset.mtask;
      const task = ((this._maintenance && this._maintenance.custom_tasks) || []).find(t => t.id === tid);
      const name = task ? task.name : tid;
      this._modal = { type: 'confirm', title: this._t('modal.remove_task_title', {}, 'Remove Task'),
        message: this._tText('modal.remove_task_msg', { task: name }, 'Remove the reminder "{task}"? Its entries in the maintenance log are kept.'),
        okLabel: this._t('btn.remove', {}, 'Remove'),
        onOk: () => this._busyRun('maint-task-remove', async () => {
          try {
            await this._ws({ type: `${_DOMAIN}/delete_maintenance_task`, entry_id: eid, task_id: tid });
            await this._fetchMaintenance(eid);
            this._showToast(this._t('toast.task_removed', {}, 'Task removed'));
          } catch (e) { this._showToast(this._tText('toast.task_save_failed', { error: e.message || e }, 'Could not save task: ' + (e.message || e)), 'error'); }
        }) };
      this._render();
    } else if (a === 'maint-log-done') {
      // One click per due task (#461): logs it as done now, which restarts its count.
      const eventType = btn.dataset.mtype;
      if (!eventType) return;
      const label = this._maintLabel(eventType);
      this._busyRun('maint-log-done', async () => {
        try {
          await this._ws({ type: `${_DOMAIN}/add_maintenance_event`, entry_id: eid, event_type: eventType });
          await this._fetchMaintenance(eid);
          this._showToast(this._tText('toast.maint_logged', { task: label }, 'Logged as done: {task}'));
          this._render();
        } catch (e) { this._showToast(this._tText('toast.maint_add_failed', { error: e.message || e }, 'Could not add event: ' + (e.message || e)), 'error'); }
      });
    }
  }

  // A custom-task interval input's value: blank is 0 (off); anything else is sent
  // as typed so the backend's single validation rule decides (and names the error).
  _maintInterval(el) {
    const raw = String((el && el.value) || '').trim();
    if (!raw) return 0;
    const n = Number(raw);
    return isNaN(n) ? raw : n;
  }

  // What the "New task" row holds (#461).
  _maintNewTaskInput(sr) {
    return {
      name: (sr.getElementById('wd-mtask-new-name')?.value || '').trim(),
      cycles: this._maintInterval(sr.getElementById('wd-mtask-new-cycles')),
      days: this._maintInterval(sr.getElementById('wd-mtask-new-days')),
    };
  }

  // Create a custom task from `_maintNewTaskInput` values.
  async _maintAddTask(eid, task) {
    const payload = { type: `${_DOMAIN}/add_maintenance_task`, entry_id: eid, name: task.name };
    if (task.cycles) payload.cycles = task.cycles;
    if (task.days) payload.days = task.days;
    return this._ws(payload);
  }

  _onActPlayground(a, btn, dev, eid) {
    if (a === 'pg-analysis-tab') {
      const tab = btn.dataset.subtab || 'history';
      if (tab !== this._pgAnalysisTab) { this._pgAnalysisTab = tab; this._render(); requestAnimationFrame(() => this._drawPlaygroundCanvases()); }
    } else if (a === 'pg-run-history') {
      this._pgRunHistory();
    } else if (a === 'pg-batch-cancel') {
      this._pgBatchCancel = true;
      const tid = this._pgHistoryTaskId || this._pgSweepTaskId;
      if (tid) this._ws({ type: `${_DOMAIN}/cancel_task`, task_id: tid }).catch(() => {});
    } else if (a === 'pg-load-run') {
      const tid = btn.dataset.taskId;
      if (!tid) return;
      const t = this._tasks[tid];
      // Only reload a known Playground batch/sweep run; anything else (missing or an
      // unexpected kind) is not loadable - don't silently default it to sweep.
      if (!t || (t.kind !== 'pg_history' && t.kind !== 'pg_sweep')) {
        this._showToast(this._t('toast.pg_run_gone', {}, 'That run is no longer available.'), 'info'); return;
      }
      const teid = t.entry_id;
      this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: tid }).then(r => {
        // Device may have switched during the await; never write a stale run into it.
        if (!this._isActiveEntry(teid)) return;
        const result = r && r.result;
        if (!result) { this._showToast(this._t('toast.pg_run_gone', {}, 'That run is no longer available.'), 'info'); return; }
        if (t.kind === 'pg_history') { this._pgHistory = result; this._pgAnalysisTab = 'history'; }
        else { this._pgSweepNew = (!result.error) ? result : null; this._pgAnalysisTab = 'sweep'; }
        this._render();
      }).catch(() => this._showToast(this._t('toast.pg_run_gone', {}, 'That run is no longer available.'), 'info'));
    } else if (a === 'pg-open-cycle') {
      this._pgSelectCycle(btn.dataset.cid);
    } else if (a === 'pg-sweep-run2') {
      this._pgRunSweep2();
    } else if (a === 'pg-sweep-apply2') {
      this._pgApplySweepValue(btn.dataset.val);
    } else if (a === 'pg-run' || a === 'pg-load') {
      this._pgLoad();
    } else if (a === 'pg-rerun') {
      this._pgRerunDetail();
    } else if (a === 'pg-cancel-run') {
      this._pgCancelRun();
    } else if (a === 'pg-reset-params') {
      this._pgThreshStart = null; this._pgThreshStop = null; this._pgParamOverrides = {};
        this._render(); requestAnimationFrame(() => this._pgDrawCanvas());
    } else if (a === 'pg-apply-settings') {
      this._pgApplyToSettings();
    } else if (a === 'pg-load-live') {
      this._pgLoadLive();
    } else if (a === 'pg-load-suggested') {
      this._pgLoadSuggested();
    } else if (a === 'pg-preset-save') {
      this._pgSavePreset();
    } else if (a === 'pg-preset-load') {
      this._pgLoadPreset();
    } else if (a === 'pg-preset-delete') {
      this._pgDeletePreset();
    } else if (a === 'pg-publish-one') {
      this._pgPublishOne(btn.dataset.pgkey);
    }
  }

  // ── Modal action dispatch (data-maction) ────────────────────────────────────

  async _onModalAction(action, btn) {
    const sr = this.shadowRoot;
    const dev = this._devices[this._selIdx];
    const eid = dev ? dev.entry_id : null;
    const m = this._modal;

    if (action === 'cancel') {
      if (m && m.type === 'cycle-detail' && this._prevModal) {
        const dev = this._devices[this._selIdx];
        if (dev) { await this._closeCycleDetail(dev.entry_id); } else { this._modal = null; this._render(); }
      } else { this._modal = null; this._render(); }
      return;
    }
    if (action === 'ok' && m && m.onOk) { const fn = m.onOk; this._modal = null; this._render(); await fn(); this._render(); return; }

    // ---- Profile group management ----
    if (m && m.type === 'profile-group') {
      if (action === 'pg-save') {
        const name = sr.getElementById('wd-pg-name')?.value?.trim();
        const members = Array.from(sr.querySelectorAll('.wd-pg-mem')).filter(c => c.checked).map(c => c.value);
        if (!name) { this._showToast(this._t('toast.group_name_required', {}, 'Group name is required'), 'error'); return; }
        if (members.length < 2) { this._showToast(this._t('toast.min_2_profiles', {}, 'Select at least 2 profiles for a group'), 'error'); return; }
        await this._busyRun('pg-save', async () => {
          try {
            if (m.orig && m.orig !== name) {
              await this._ws({ type: `${_DOMAIN}/rename_profile_group`, entry_id: eid, name: m.orig, new_name: name });
            }
            await this._ws({ type: `${_DOMAIN}/save_profile_group`, entry_id: eid, name, members });
            this._showToast(this._t('toast.group_saved', {}, 'Group saved')); this._modal = null;
            await this._fetchProfileGroups(eid);
          } catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
      if (action === 'pg-delete' && m.orig) {
        await this._busyRun('pg-save', async () => {
          try {
            await this._ws({ type: `${_DOMAIN}/delete_profile_group`, entry_id: eid, name: m.orig });
            this._showToast(this._t('toast.group_deleted', {}, 'Group deleted')); this._modal = null;
            await this._fetchProfileGroups(eid);
          } catch (e) { this._showToast(this._tText('msg.toast_delete_failed', {error: e.message || e}, 'Delete failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
    }

    // The 'import-' names are matched one by one rather than by prefix.
    if (action.startsWith('store-import-') || action === 'store-share-ok'
        || action.startsWith('wiz-') || action.startsWith('imp-')
        || action === 'import-back' || action === 'import-analyze' || action === 'import-apply-ok') {
      return this._onMActImport(action, btn, m, eid, sr);
    }

    if (action.startsWith('hist-')) return this._onMActHistoryImport(action, btn, m, eid, sr);

    if (action.startsWith('sd-') || action === 'store-share-device-ok') return this._onMActStoreShare(action, btn, m, eid);

    // Export wizard: generate + download the filtered JSON.
    if (m && m.type === 'export-select' && action === 'export-generate' && eid) {
      const selection = this._wizSelectionPayload(m);
      await this._busyRun('export-select', async () => {
        try {
          const r = await this._ws({ type: `${_DOMAIN}/export_config_selective`, entry_id: eid, selection });
          const blob = new Blob([r.json_data], { type: 'application/json' });
          const url = URL.createObjectURL(blob);
          const a2 = document.createElement('a');
          a2.href = url; a2.download = `washdata_export_${eid.slice(0, 8)}.json`;
          document.body.appendChild(a2); a2.click(); document.body.removeChild(a2); URL.revokeObjectURL(url);
          this._modal = null;
          this._showToast(this._t('toast.export_selective_done', {}, 'Export downloaded'));
        } catch (e) { this._showToast(this._tText('toast.export_failed', {error: e.message || e}, 'Export failed: ' + (e.message || e)), 'error'); }
      });
      return;
    }

    if (action.startsWith('cyc-') || action.startsWith('trim-mode-')) return this._onMActCycleDetail(action, m, eid, sr);

    // ---- Profile control panel ----
    if (m && m.type === 'profile-panel') {
      if (action.indexOf('pp-tab-') === 0) {
        const tab = action.slice(7); m.tab = tab; this._render();
        if (tab === 'cleanup' && !m.cleanup) {
          this._ws({ type: `${_DOMAIN}/get_profile_cycles`, entry_id: eid, profile_name: m.name })
            .then(r => { if (this._modal && this._modal.name === m.name) { this._modal.cleanup = { cycles: r.cycles || [], selected: new Set() }; this._render(); } })
            .catch(() => { if (this._modal) { this._modal.cleanup = { cycles: [], selected: new Set() }; this._render(); } });
        }
        return;
      }
      return this._onMActProfilePanel(action, btn, m, eid, sr);
    }

    // ---- Simple form modals ----
    if (action === 'label-ok' && eid) {
      const sel = sr.getElementById('wd-label-profile');
      const rawSel = sel ? sel.value : '';
      const profileName = rawSel || null;
      // Only send a new name when actually creating a profile ("__create_new__");
      // otherwise a stale value in the hidden field would be sent and silently
      // discarded while the cycle goes to the selected existing profile (issue #303).
      const newName = rawSel === '__create_new__'
        ? (sr.getElementById('wd-new-profile-name')?.value?.trim() || null)
        : null;
      this._modal = null;
      // Re-fetch feedbacks too: labelling a review cycle now resolves its pending
      // feedback backend-side (#331), so the "needs review" queue must refresh.
      try { await this._ws({ type: `${_DOMAIN}/label_cycle`, entry_id: eid, cycle_id: m.cycleId, profile_name: profileName || null, new_profile_name: newName }); this._showToast(this._t('toast.cycle_labelled', {}, 'Cycle labelled')); await this._fetchCycles(eid); await this._fetchProfiles(eid); await this._fetchFeedbacks(eid); }
      catch (e) { this._showToast(this._tText('toast.label_failed', {error: e.message || e}, 'Label failed: ' + (e.message || e)), 'error'); }
      this._render();
    } else if (action === 'create-profile-ok' && eid) {
      const name = sr.getElementById('wd-cp-name')?.value?.trim();
      const cycle = sr.getElementById('wd-cp-cycle')?.value || null;
      const dur = parseFloat(sr.getElementById('wd-cp-dur')?.value || 0);
      this._modal = null;
      if (!name) { this._showToast(this._t('toast.profile_name_required', {}, 'Profile name is required'), 'error'); this._render(); return; }
      // A reference cycle sets the duration from its own length, so never send a
      // manual duration alongside one (issue #303 — no silently-ignored field).
      const manualDur = (!cycle && dur > 0) ? dur : null;
      try { await this._ws({ type: `${_DOMAIN}/create_profile`, entry_id: eid, name, reference_cycle: cycle || null, manual_duration_min: manualDur }); this._showToast(this._tText('toast.profile_created', {name}, `Profile "${name}" created`)); await this._fetchProfiles(eid); }
      catch (e) { this._showToast(this._tText('toast.create_failed', {error: e.message || e}, 'Create failed: ' + (e.message || e)), 'error'); }
      this._render();
    } else if (action === 'create-phase-ok' && eid) {
      const name = sr.getElementById('wd-ph-name')?.value?.trim();
      const desc = sr.getElementById('wd-ph-desc')?.value?.trim() || '';
      this._modal = null;
      if (!name) { this._showToast(this._t('toast.phase_name_required', {}, 'Phase name is required'), 'error'); this._render(); return; }
      try { await this._ws({ type: `${_DOMAIN}/create_phase`, entry_id: eid, device_type: m.deviceType || '', name, description: desc }); this._showToast(this._tText('toast.phase_created', {name}, `Phase "${name}" created`)); await this._fetchPhases(eid); }
      catch (e) { this._showToast(this._tText('msg.toast_create_failed', {error: e.message || e}, 'Create failed: ' + (e.message || e)), 'error'); }
      this._render();
    } else if (action === 'edit-phase-ok' && eid) {
      const newName = sr.getElementById('wd-eph-name')?.value?.trim();
      const desc = sr.getElementById('wd-eph-desc')?.value?.trim() || '';
      this._modal = null;
      if (!newName) { this._showToast(this._t('toast.name_required', {}, 'Name required'), 'error'); this._render(); return; }
      try { await this._ws({ type: `${_DOMAIN}/update_phase`, entry_id: eid, phase_id: m.phaseId, new_name: newName, description: desc }); this._showToast(this._t('toast.phase_updated', {}, 'Phase updated')); await this._fetchPhases(eid); }
      catch (e) { this._showToast(this._tText('toast.update_failed', {error: e.message || e}, 'Update failed: ' + (e.message || e)), 'error'); }
      this._render();
    } else if (action === 'process-rec-ok' && eid) {
      const mode = sr.getElementById('wd-pr-mode')?.value;
      let profileName = sr.getElementById('wd-pr-profile')?.value?.trim();
      if (mode === 'existing_profile') profileName = sr.getElementById('wd-pr-profile-sel')?.value || profileName;
      const head = parseFloat(sr.getElementById('wd-pr-head')?.value || 0);
      const tail = parseFloat(sr.getElementById('wd-pr-tail')?.value || 0);
      this._modal = null;
      if (!profileName) { this._showToast(this._t('msg.toast_profile_name_required', {}, 'Profile name is required'), 'error'); this._render(); return; }
      try { await this._ws({ type: `${_DOMAIN}/process_recording`, entry_id: eid, profile_name: profileName, save_mode: mode, head_trim: head, tail_trim: tail }); this._showToast(this._t('toast.recording_saved', {}, 'Recording saved to profile')); await this._fetchRecState(eid); await this._fetchProfiles(eid); }
      catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
      this._render();
    } else if (action === 'correct-fb-ok' && eid) {
      const corrected = sr.getElementById('wd-fb-profile')?.value;
      const dur = parseFloat(sr.getElementById('wd-fb-dur')?.value || 0) || null;
      this._modal = null;
      try { await this._ws({ type: `${_DOMAIN}/resolve_feedback`, entry_id: eid, cycle_id: m.cycleId, action: 'correct', corrected_profile: corrected, corrected_duration_min: dur }); this._showToast(this._t('toast.correction_submitted', {}, 'Correction submitted')); await this._fetchFeedbacks(eid); }
      catch (e) { this._showToast(this._tText('msg.toast_error', {error: e.message || e}, 'Error: ' + (e.message || e)), 'error'); }
      this._render();
    } else if (action === 'auto-run' && eid) {
      // An empty or unparsable field sends no threshold, and the backend applies
      // the device's own Auto-Label Confidence (audit UI-10).
      const thr = parseFloat(sr.getElementById('wd-al-thr')?.value || '');
      const req = { type: `${_DOMAIN}/auto_label_cycles`, entry_id: eid };
      if (Number.isFinite(thr)) req.confidence_threshold = Math.min(0.95, Math.max(0.5, thr));
      this._modal = null; this._render();
      await this._busyRun('auto-label', async () => {
        try {
          const st = await this._ws(req);
          const snap = st && st.task_id ? await this._awaitTask(st.task_id) : null;
          this._showToast(this._autoLabelToast(snap));
          await this._fetchCycles(eid);
        }
        catch (e) { this._showToast(this._tText('msg.toast_auto_label_failed', {error: e.message || e}, 'Auto-label failed: ' + (e.message || e)), 'error'); }
      });
    } else if (action === 'merge-ok' && eid) {
      const target = sr.getElementById('wd-merge-prof')?.value || '';
      const newName = sr.getElementById('wd-merge-newname')?.value?.trim() || null;
      const ids = m.ids || [];
      this._modal = null; this._render();
      // Backgrounded task (issue #311): gap-fill + affected envelope rebuilds can
      // stall a low-power host, so run it via the registry with a header pill.
      this._kickAndTrack(
        { type: `${_DOMAIN}/apply_merge`, entry_id: eid, cycle_ids: ids, target_profile: target || null, new_profile_name: newName },
        'cyc-merge',
        async () => {
          this._showToast(this._t('toast.cycles_merged', {}, 'Cycles merged'));
          this._cycleSel.clear(); this._selectMode = false;
          await this._fetchCycles(eid); await this._fetchProfiles(eid);
        },
      );
    } else if (action === 'bulk-relabel-ok' && eid) {
      // D6: apply the chosen label to every selected cycle via label_cycle.
      const profileName = sr.getElementById('wd-relabel-profile')?.value || '';
      const ids = (m.ids || []).slice();
      this._modal = null; this._render();
      if (!ids.length) return;
      await this._busyRun('cyc-relabel', async () => {
        try {
          for (const cid of ids) await this._ws({ type: `${_DOMAIN}/label_cycle`, entry_id: eid, cycle_id: cid, profile_name: profileName || null });
          this._showToast(this._tText('toast.relabel_done', { count: ids.length }, `Relabelled ${ids.length} cycle(s)`));
          this._cycleSel.clear(); this._selectMode = false;
          // Bulk relabel resolves any pending feedback on those cycles (#331).
          await this._fetchCycles(eid); await this._fetchProfiles(eid); await this._fetchFeedbacks(eid);
        } catch (e) { this._showToast(this._tText('toast.relabel_failed', { error: e.message || e }, 'Relabel failed: ' + (e.message || e)), 'error'); }
      });
    }
  }

  // ── Import power history (#344): upload, scan, review, apply ─────────────────

  // Ship the staged text in frame-sized chunks. Home Assistant builds its WebSocket
  // with aiohttp's default 4 MiB frame cap, and ten days of 5-second data is 5-8 MB of
  // text - an over-cap frame is not rejected, it closes the connection and takes every
  // subscription with it. Chunks are split on line boundaries so the server never has to
  // reassemble a partial row.
  async _histUpload(eid, text) {
    const begun = await this._ws({ type: `${_DOMAIN}/history_import_begin`, entry_id: eid });
    const limit = Math.max(4096, begun.chunk_bytes || 512 * 1024);
    let seq = 0;
    let from = 0;
    while (from < text.length) {
      let to = Math.min(text.length, from + limit);
      if (to < text.length) {
        const nl = text.lastIndexOf('\n', to);
        if (nl > from) to = nl + 1;
      }
      await this._ws({
        type: `${_DOMAIN}/history_import_chunk`, entry_id: eid,
        token: begun.token, seq, text: text.slice(from, to),
      });
      seq += 1;
      from = to;
    }
    return begun.token;
  }

  async _histStartScan(eid, m, token) {
    m.token = token;
    m.step = 'scan';
    m.error = null;
    this._render();
    const started = await this._ws({
      type: `${_DOMAIN}/start_history_import_scan`, entry_id: eid, token,
    });
    m.scanTaskId = started.task_id;
    this._addProvisionalTask(started.task_id, 'history_import', eid, 0);
    if (!this._tasksSubscribed) this._pollTaskGeneric(started.task_id);
    // A short history can finish before this reply arrives, in which case the task
    // event fired while we still had no id to match it against. Adopt the current
    // snapshot so a fast scan is never lost.
    this._histAdopt(started.task_id);
  }

  // Pick up a task that may already have settled. Safe to call for a running task.
  async _histAdopt(taskId) {
    if (!taskId) return;
    let snap = (this._tasks || {})[taskId];
    if (!snap || snap.state === 'running') {
      try {
        snap = await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: taskId });
      } catch (_) { return; }
    }
    if (snap && snap.state && snap.state !== 'running') this._histTaskFinished(snap);
  }

  // Called from the task-registry snapshot handler when one of our tasks finishes, so a
  // dropped socket or a closed dialog cannot lose the run.
  async _histTaskFinished(task) {
    const m = this._modal;
    if (!m || m.type !== 'history-import') return;
    // Both the task-event stream and the post-start adoption can deliver the same
    // terminal snapshot; settle each task once. The id is only marked once it is known
    // to be one of ours - an event that arrives before the start reply recorded the id
    // must not burn it, or the adoption that follows would be a no-op and the wizard
    // would sit on the progress step forever.
    if (task.id !== m.scanTaskId && task.id !== m.applyTaskId) return;
    this._histSettled = this._histSettled || new Set();
    if (this._histSettled.has(task.id)) return;
    this._histSettled.add(task.id);
    if (task.id === m.scanTaskId) {
      if (task.state === 'error') {
        m.step = 'input';
        m.error = task.error || this._t('msg.hist_scan_failed', {}, 'Scanning failed.');
        this._render();
        return;
      }
      try {
        const res = task.result ? task : await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: task.id });
        m.result = res.result || {};
        m.accept = new Set((m.result.segments || []).filter(seg => seg.accept).map(seg => seg.index));
        m.step = 'review';
        this._render();
        requestAnimationFrame(() => this._drawHistorySparklines());
      } catch (e) {
        m.step = 'input';
        m.error = String((e && e.message) || e);
        this._render();
      }
      return;
    }
    if (task.id === m.applyTaskId) {
      if (task.state === 'error') {
        m.error = task.error === 'scan_expired'
          ? this._t('msg.hist_scan_expired', {}, 'That scan is no longer available. Scan again.')
          : (task.error || this._t('msg.hist_import_failed', {}, 'Import failed.'));
        m.step = 'review';
        this._render();
        return;
      }
      try {
        const res = task.result ? task : await this._ws({ type: `${_DOMAIN}/get_task_result`, task_id: task.id });
        m.done = res.result || {};
      } catch (_) { m.done = {}; }
      m.step = 'done';
      this._render();
      const dev = this._devices[this._selIdx];
      if (dev) { this._fetchCycles(dev.entry_id); this._fetchProfiles(dev.entry_id); }
    }
  }

  async _onMActHistoryImport(action, btn, m, eid, sr) {
    if (!m || m.type !== 'history-import' || !eid) return;

    if (action === 'hist-scan') {
      const ta = sr.getElementById('wd-hist-csv');
      const text = ta ? ta.value : (m.csvText || '');
      if (!text.trim()) {
        this._showToast(this._t('toast.hist_csv_required', {}, 'Load a CSV file or paste its contents first'), 'error');
        return;
      }
      m.csvText = text;
      await this._busyRun('hist-import', async () => {
        try {
          const token = await this._histUpload(eid, text);
          await this._histStartScan(eid, m, token);
        } catch (e) {
          m.error = String((e && e.message) || e);
          this._render();
        }
      });
      return;
    }

    if (action === 'hist-recorder') {
      const sinceInput = sr.getElementById('wd-hist-since');
      const since = (sinceInput && sinceInput.value) || _histDefaultSince();
      m.since = since;
      await this._busyRun('hist-import', async () => {
        try {
          const res = await this._ws({
            type: `${_DOMAIN}/history_import_recorder`, entry_id: eid, start_date: since,
          });
          if (!res.rows) {
            m.error = this._t('msg.hist_recorder_empty', {}, 'Home Assistant has no detailed history for this sensor in that window.');
            this._render();
            return;
          }
          await this._histStartScan(eid, m, res.token);
        } catch (e) {
          m.error = String((e && e.message) || e);
          this._render();
        }
      });
      return;
    }

    if (action === 'hist-cancel-scan') {
      if (m.scanTaskId) {
        try { await this._ws({ type: `${_DOMAIN}/cancel_task`, task_id: m.scanTaskId }); } catch (_) {}
      }
      m.step = 'input';
      m.scanTaskId = null;
      this._render();
      return;
    }

    if (action === 'hist-back') {
      m.step = 'input';
      m.result = null;
      m.error = null;
      this._render();
      return;
    }

    if (action === 'hist-toggle-all') {
      const segs = (m.result && m.result.segments) || [];
      const allOn = segs.every(seg => m.accept.has(seg.index));
      m.accept = allOn ? new Set() : new Set(segs.map(seg => seg.index));
      this._render();
      requestAnimationFrame(() => this._drawHistorySparklines());
      return;
    }

    if (action === 'hist-apply') {
      if (!m.accept || !m.accept.size) return;
      await this._busyRun('hist-apply', async () => {
        try {
          const res = await this._ws({
            type: `${_DOMAIN}/apply_history_import`, entry_id: eid,
            scan_task_id: m.scanTaskId, accept: [...m.accept].sort((a, b) => a - b),
          });
          m.applyTaskId = res.task_id;
          this._addProvisionalTask(res.task_id, 'history_import_apply', eid, m.accept.size);
          if (!this._tasksSubscribed) this._pollTaskGeneric(res.task_id);
          this._histAdopt(res.task_id);
        } catch (e) {
          m.error = String((e && e.message) || e);
          this._render();
        }
      });
      return;
    }

    if (action === 'hist-goto-cycles') {
      this._modal = null;
      this._tab = 'history'; this._historySub = 'cycles';
      this._cycleFilter = { ...(this._cycleFilter || {}), status: 'imported' };
      this._fetchTabData();
      return;
    }
  }

  async _onMActImport(action, btn, m, eid, sr) {
    // ---- Community Store: import a reference cycle ----
    if (m && m.type === 'store-import') {
      if (action === 'store-import-mode-new') { m.mode = 'new'; this._render(); return; }
      if (action === 'store-import-mode-merge') { m.mode = 'merge'; this._render(); return; }
      if (action === 'store-import-ok') {
        const msg = { type: `${_DOMAIN}/store_import_cycle`, entry_id: eid, cycle_id: m.cycleId };
        if (m.mode === 'merge') {
          const target = sr.getElementById('wd-store-import-target')?.value || '';
          if (!target) { this._showToast(this._t('toast.store_pick_profile', {}, 'Pick a profile to merge into'), 'error'); return; }
          msg.target_profile = target;
        } else {
          const name = (sr.getElementById('wd-store-import-name')?.value || '').trim() || m.program;
          if (!name) { this._showToast(this._t('toast.store_name_required', {}, 'Enter a profile name'), 'error'); return; }
          msg.new_profile_name = name;
        }
        await this._busyRun('store-import', async () => {
          try {
            const r = await this._ws(msg);
            if (r && r.error === 'low_quality') { this._showToast(this._t('toast.store_import_low_quality', {}, 'This recording is too short, too gappy or implausible to import.'), 'error'); return; }
            if (r && r.error === 'duplicate') { this._showToast(this._t('toast.store_import_duplicate', {}, 'This recording is already on your device.'), 'info'); return; }
            if (r && r.error) { this._showToast(this._tText('toast.store_import_failed', {error: r.error}, 'Import failed: ' + r.error), 'error'); return; }
            this._modal = null;
            this._showToast(this._tText('toast.store_imported', {profile: (r && r.profile) || ''}, `Imported into ${(r && r.profile) || 'profile'}`));
            await this._fetchProfiles(eid);
          } catch (e) { this._showToast(this._tText('toast.store_import_failed', {error: e.message || e}, 'Import failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
    }

    // ---- Community Store: share a golden cycle ----
    if (m && m.type === 'store-share') {
      if (action === 'store-share-ok') {
        const program = (sr.getElementById('wd-store-share-prog')?.value || '').trim();
        const description = (sr.getElementById('wd-store-share-desc')?.value || '').trim();
        if (!program) { this._showToast(this._t('toast.store_pick_profile_share', {}, 'Pick a profile to share into'), 'error'); return; }
        await this._busyRun('store-share', async () => {
          try {
            const r = await this._ws({ type: `${_DOMAIN}/store_upload_cycle`, entry_id: eid, local_cycle_id: m.cycleId, program, description });
            if (r && r.error) {
              if (r.error === 'no_appliance_declared') this._showToast(this._t('toast.store_no_appliance', {}, 'Set your appliance brand and model in Settings first.'), 'error');
              else { const why = r.detail ? `${r.error} - ${r.detail}` : r.error; this._showToast(this._tText('toast.store_share_failed', {error: why}, 'Share failed: ' + why), 'error'); }
              return;
            }
            this._modal = null;
            this._showToast(this._t('toast.store_shared', {}, 'Shared to the community store - pending review.'));
          } catch (e) { this._showToast(this._tText('toast.store_share_failed', {error: e.message || e}, 'Share failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
    }

    // ---- Selective export / import wizard ----
    if (m && (m.type === 'export-select' || m.type === 'import-wizard')) {
      // The manifest that backs the tree: inventory for export, analyze result for import.
      const man = m.type === 'export-select' ? { categories: m.inventory || {} } : (m.manifest || { categories: {} });
      if (action === 'wiz-toggle-all') {
        const cats = man.categories || {};
        const importableOnly = m.type === 'import-wizard';
        // If everything is already selected, clear; otherwise select all selectable.
        let allSel = true;
        this._wizCatOrder().filter(cid => cats[cid] && cats[cid].present).forEach(cid => {
          if (importableOnly && cats[cid].importable === false) return;
          if (this._wizCatState(m, cid, man).state !== 'all') allSel = false;
        });
        m.sel = allSel ? this._wizEmptySel() : this._wizInitSel(man, importableOnly);
        this._render();
        return;
      }
      if (action === 'wiz-toggle-cat') {
        const cid = btn.dataset.cat;
        const st = this._wizCatState(m, cid, man);
        const turnOn = st.state !== 'all';
        if (cid === 'profiles') {
          const items = (man.categories.profiles && man.categories.profiles.items) || [];
          m.sel.profiles = new Set(turnOn ? items.map(i => i.name) : []);
        } else if (this._wizCycleCats().includes(cid)) {
          const set = this._wizIdSet(m.sel, cid);
          set.clear();
          if (turnOn) ((man.categories[cid] && man.categories[cid].groups) || []).forEach(g => g.cycles.forEach(cy => { if (cy.id != null) set.add(String(cy.id)); }));
        } else if (turnOn) { m.sel.cats.add(cid); } else { m.sel.cats.delete(cid); }
        this._render();
        return;
      }
      if (action === 'wiz-toggle-profile') {
        const name = btn.dataset.name;
        if (m.sel.profiles.has(name)) m.sel.profiles.delete(name); else m.sel.profiles.add(name);
        this._render();
        return;
      }
      if (action === 'wiz-toggle-cycgroup') {
        const cid = btn.dataset.cat; const prof = btn.dataset.prof;
        const set = this._wizIdSet(m.sel, cid);
        const ids = this._wizGroupIds(man, cid, prof);
        const all = ids.length > 0 && ids.every(id => set.has(id));
        ids.forEach(id => { if (all) set.delete(id); else set.add(id); });
        this._render();
        return;
      }
      if (action === 'wiz-toggle-cyc') {
        const cid = btn.dataset.cat; const id = btn.dataset.cid;
        const set = this._wizIdSet(m.sel, cid);
        if (set.has(id)) set.delete(id); else set.add(id);
        this._render();
        return;
      }
      if (action === 'wiz-expand') {
        const key = btn.dataset.key;
        if (!m.expanded) m.expanded = new Set();
        if (m.expanded.has(key)) m.expanded.delete(key); else m.expanded.add(key);
        this._render();
        return;
      }
    }

    // Import wizard: step machine + toggles + apply.
    if (m && m.type === 'import-wizard') {
      if (action === 'import-back') {
        m.step = 'input'; m.error = null; this._render();
        return;
      }
      if (action === 'imp-mode-merge') { m.mode = 'merge'; this._render(); return; }
      if (action === 'imp-mode-replace') { m.mode = 'replace'; this._render(); return; }
      if (action === 'imp-dest-reference') { m.cycleDest = 'reference'; this._render(); return; }
      if (action === 'imp-dest-real') { if ((m.manifest || {}).real_history_allowed !== false) { m.cycleDest = 'real_history'; this._render(); } return; }
      if (action === 'imp-conflict') { m.conflicts[btn.dataset.prof] = btn.value; return; }
      if (action === 'import-analyze' && eid) {
        const ta = sr.getElementById('wd-import-json');
        const jsonText = ta ? ta.value : (m.jsonText || '');
        m.jsonText = jsonText;
        if (!jsonText.trim()) { this._showToast(this._t('toast.json_required', {}, 'JSON data is required'), 'error'); return; }
        m.step = 'analyze'; m.error = null; this._render();
        try {
          const r = await this._ws({ type: `${_DOMAIN}/analyze_import`, entry_id: eid, json_data: jsonText });
          if (!this._isActiveEntry(eid) || !this._modal || this._modal.type !== 'import-wizard') return;
          const manifest = (r && r.manifest) || {};
          if (manifest.error) { m.step = 'input'; m.error = manifest.error; this._render(); return; }
          m.manifest = manifest;
          m.sel = this._wizInitSel(manifest, true);
          // Default every conflicting profile to the safest resolution.
          m.conflicts = {};
          ((manifest.categories && manifest.categories.profiles && manifest.categories.profiles.items) || [])
            .forEach(i => { if (i.conflict) m.conflicts[i.name] = 'import_as_copy'; });
          m.step = 'select';
          this._render();
        } catch (e) {
          if (!this._isActiveEntry(eid) || !this._modal || this._modal.type !== 'import-wizard') return;
          m.step = 'input'; m.error = (e && e.message) || String(e); this._render();
        }
        return;
      }
      if (action === 'import-apply-ok' && eid) {
        const selection = this._wizSelectionPayload(m);
        await this._busyRun('import-wizard', async () => {
          try {
            const r = await this._ws({ type: `${_DOMAIN}/import_config_selective`, entry_id: eid,
              json_data: m.jsonText, selection, mode: m.mode,
              conflict_resolutions: m.conflicts, cycle_destination: m.cycleDest, apply_settings: true });
            const s = (r && r.summary) || {};
            this._modal = null;
            const cycles = (s.real_cycles_imported || 0) + (s.reference_cycles_imported || 0) + (s.backfill_cycles_imported || 0);
            // A replace (or an overwrite) saves a restore point first; say so when it
            // could not, since the undo the hint promised will not be there.
            const destructive = m.mode === 'replace' || Object.values(m.conflicts || {}).includes('overwrite');
            if (destructive && s.restore_point_saved === false) {
              this._showToast(this._tText('toast.import_no_restore_point', {}, 'Imported, but no restore point could be saved, so this import cannot be undone'), 'error');
            } else {
              this._showToast(this._tText('toast.import_selective_done', {
                profiles: s.profiles_imported || 0, cycles,
              }, `Imported ${s.profiles_imported || 0} profile(s) and ${cycles} cycle(s)`));
            }
            await this._fetchCycles(eid);
            await this._fetchProfiles(eid);
            // Show (or refresh) "Undo last import" in the Export / Import card.
            if (s.restore_point_saved) await this._fetchToolsData(eid);
          } catch (e) { this._showToast(this._tText('toast.import_failed', {error: e.message || e}, 'Import failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
    }
  }

  async _onMActStoreShare(action, btn, m, eid) {
    // ---- Community Store: share a whole device bundle ----
    if (m && m.type === 'store-share-device') {
      if (action === 'sd-toggle-cyc') {
        const cid = btn.dataset.cid;
        if (m.selected.has(cid)) m.selected.delete(cid); else m.selected.add(cid);
        this._render();
        return;
      }
      if (action === 'sd-toggle-prof') {
        const prog = btn.dataset.prog;
        const grp = this._shareableByProgram().find(g => g.program === prog);
        if (grp) {
          const all = grp.cycles.every(c => m.selected.has(c.id));
          grp.cycles.forEach(c => { if (all) m.selected.delete(c.id); else m.selected.add(c.id); });
        }
        this._render();
        return;
      }
      if (action === 'sd-toggle-phases') {
        const prog = btn.dataset.prog;
        if (!m.includePhases) m.includePhases = new Set();
        if (m.includePhases.has(prog)) m.includePhases.delete(prog); else m.includePhases.add(prog);
        this._render();
        return;
      }
      if (action === 'sd-toggle-settings') { m.includeSettings = !m.includeSettings; this._render(); return; }
      if (action === 'sd-toggle-consent') { m.consented = !m.consented; this._render(); return; }
      if (action === 'sd-toggle-guide') { m.guideOpen = !m.guideOpen; this._render(); return; }
      if (action === 'store-share-device-ok') {
        // Build the {local_cycle_id, program} items from the model selection,
        // resolving each cycle's program from the fetched shareable list.
        const progById = new Map();
        (this._shareableCycles || []).forEach(c => progById.set(c.id, (c.profile_name || '').trim()));
        const items = Array.from(m.selected)
          .map(cid => ({ local_cycle_id: cid, program: progById.get(cid) || '' }))
          .filter(it => it.program);
        if (!items.length) { this._showToast(this._t('toast.share_device_none_sel', {}, 'Select at least one cycle to share'), 'error'); return; }
        // Only send phases for programs that both opted in AND have a selected cycle.
        const selectedProgs = new Set(items.map(it => it.program));
        const includePhases = Array.from(m.includePhases || []).filter(p => selectedProgs.has(p));
        await this._busyRun('store-share-device', async () => {
          try {
            const r = await this._ws({ type: `${_DOMAIN}/store_upload_device`, entry_id: eid, items, include_phases: includePhases, include_settings: !!m.includeSettings });
            // Pre-flight gate error (not connected / no appliance): keep the modal open.
            if (r && r.error) {
              if (r.error === 'no_appliance_declared') this._showToast(this._t('toast.store_no_appliance', {}, 'Set your appliance brand and model in Settings first.'), 'error');
              else { const why = r.detail ? `${r.error} - ${r.detail}` : r.error; this._showToast(this._tText('toast.store_share_failed', {error: why}, 'Share failed: ' + why), 'error'); }
              return;
            }
            const n = (r && r.cycle_ids && r.cycle_ids.length) || 0;
            const failed = (r && r.errors && r.errors.length) || 0;
            const dup = (r && r.duplicates) || 0;
            const created = (r && r.created != null) ? r.created : n;
            if (!n) {
              // Nothing uploaded: surface the first error and keep the modal for retry.
              const why = (r && r.errors && r.errors[0]) || (r && r.detail) || 'upload_failed';
              this._showToast(this._tText('toast.store_share_failed', {error: why}, 'Share failed: ' + why), 'error');
              return;
            }
            this._modal = null;
            if (failed) this._showToast(this._tText('toast.store_device_shared_partial', {n, failed}, `Shared ${n} cycle(s); ${failed} could not be uploaded.`), 'info');
            else if (dup && !created) this._showToast(this._tText('toast.store_device_shared_all_dup', {n: dup}, `All ${dup} cycle(s) were already in the community store.`), 'info');
            else if (dup) this._showToast(this._tText('toast.store_device_shared_some_dup', {created, dup}, `Shared ${created} cycle(s); ${dup} were already in the store.`));
            else this._showToast(this._tText('toast.store_device_shared', {n: created}, `Shared ${created} cycle(s) to the community store - pending review.`));
          } catch (e) { this._showToast(this._tText('toast.store_share_failed', {error: e.message || e}, 'Share failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
    }
  }

  async _onMActCycleDetail(action, m, eid, sr) {
    // ---- Cycle inspector ----
    if (m && m.type === 'cycle-detail') {
      if (action === 'cyc-view') { m.mode = 'view'; this._render(); return; }
      if (action === 'cyc-trim') { m.mode = 'trim'; if (!m.trim || m.trim.end <= 0) m.trim = { start: 0, end: (m.curve && m.curve.full_duration_s) || 0 }; this._render(); return; }
      if (action === 'cyc-split') { m.mode = 'split'; this._render(); return; }
      if (action === 'cyc-review') { m.mode = 'review'; this._render(); return; }
      if (action === 'cyc-ctx') {
        // Recorder-history length (item 513). The select fires on click too, so an
        // unchanged value is a no-op; a new one is remembered for this device.
        const v = Number(sr.getElementById('wd-cyc-ctx')?.value);
        const ceid = m.entryId || eid;
        if (!_CYCLE_CONTEXT_CHOICES.includes(v) || (m.ctx && m.ctx.minutes === v)) return;
        const map = this._pref('cycle_context_min', null);
        this._setPref('cycle_context_min', { ...(map && typeof map === 'object' ? map : {}), [ceid]: v });
        delete this._canvasZoom['wd-cyc-canvas'];  // a viewport inside the old lead-in
        this._loadCycleContext(ceid, m.cycleId, m.curve);
        this._render();
        return;
      }
      if (action === 'cyc-review-save') {
        const cid = m.cycleId;
        const quality = sr.getElementById('wd-cyc-rev-quality')?.value || '';
        const golden = !!sr.getElementById('wd-cyc-rev-golden')?.checked;
        const notes = sr.getElementById('wd-cyc-rev-notes')?.value || '';
        const tags = Array.from(sr.querySelectorAll('.wd-cyc-rev-tag')).filter(cb => cb.checked).map(cb => cb.value);
        const newLabel = sr.getElementById('wd-cyc-rev-label')?.value ?? '';
        const curLabel = (m.curve && m.curve.profile_name) || '';
        await this._busyRun('cyc-review-save', async () => {
          try {
            await this._ws({ type: `${_DOMAIN}/set_ml_review`, entry_id: eid, cycle_id: cid, quality, golden, tags, notes });
            if (newLabel !== curLabel) {
              await this._ws({ type: `${_DOMAIN}/label_cycle`, entry_id: eid, cycle_id: cid, profile_name: newLabel || null });
            }
            this._showToast(this._t('toast.review_saved', {}, 'Review saved'));
            await this._fetchCycles(eid);
            // A label change in review now resolves the pending feedback backend-side
            // (#331), so refresh the queue rather than leaving a stale entry.
            if (newLabel !== curLabel) await this._fetchFeedbacks(eid);
            await this._loadMlIndex(eid);
            const open = this._modal;
            if (open && open.type === 'cycle-detail' && open.cycleId === cid) {
              open.ml = (this._mlById || {})[cid] || open.ml;
              // The open dialog showed the label it was opened with, so a relabel
              // looked unsaved and saving back to that label was skipped (#469).
              delete open.reviewLabel;
              if (newLabel !== curLabel && open.curve) {
                open.curve.profile_name = newLabel || null;
                open.profileEnv = null;
                open.runnerUpEnv = null;
                this._loadCycleOverlays(eid, cid, open.curve);
              }
            }
          } catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
      if (action === 'trim-mode-s') { m.timeMode = 's'; this._render(); return; }
      if (action === 'trim-mode-clock') { m.timeMode = 'clock'; this._render(); return; }
      if (action === 'cyc-reset-trim') { m.trim = { start: 0, end: (m.curve && m.curve.full_duration_s) || 0 }; this._render(); return; }
      if (action === 'cyc-clear-split') { m.split = { offsets: [], profiles: [] }; this._render(); return; }
      if (action === 'cyc-label') { if (!this._profiles.length) await this._fetchProfiles(eid); this._modal = { type: 'label-cycle', cycleId: m.cycleId }; this._render(); return; }
      if (action === 'cyc-delete') {
        // D4: optimistic delete with Undo (close the inspector first).
        const cid = m.cycleId;
        this._modal = null; this._render();
        this._deleteCyclesWithUndo(eid, [cid]);
        return;
      }
      if (action === 'cyc-auto-split') {
        const gap = parseInt(sr.getElementById('wd-split-gap')?.value || '900', 10);
        await this._busyRun('cyc-auto', async () => {
          try { const r = await this._ws({ type: `${_DOMAIN}/analyze_split`, entry_id: eid, cycle_id: m.cycleId, gap_seconds: gap }); m.split.offsets = (r.split_offsets || []).slice(); m.split.profiles = []; if (!m.split.offsets.length) this._showToast(this._t('toast.no_split_found', {}, 'No idle gaps found to split on'), 'info'); }
          catch (e) { this._showToast(this._tText('toast.auto_detect_failed', {error: e.message || e}, 'Auto-detect failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
      if (action === 'cyc-apply-trim') {
        // Backgrounded task (issue #311): recompute + envelope rebuild can stall a
        // low-power host, so run it via the registry with a header pill.
        const cid = m.cycleId, s = m.trim.start, e2 = m.trim.end;
        // The trim is irreversible (no undo). Confirm before discarding the
        // majority of the trace so an accidental collapse can't slip through on
        // a single click (#373).
        const full = (m.curve && m.curve.full_duration_s) || 0;
        const keptPct = full > 0 ? Math.max(0, Math.round(((e2 - s) / full) * 100)) : 100;
        if (keptPct < 50 && !confirm(this._tText('msg.trim_destructive_confirm', {pct: keptPct}, `This keeps only ${keptPct}% of the cycle and cannot be undone. Continue?`))) return;
        this._kickAndTrack(
          { type: `${_DOMAIN}/trim_cycle`, entry_id: eid, cycle_id: cid, start_s: s, end_s: e2 },
          'cyc-trim-apply',
          async () => {
            this._showToast(this._t('toast.cycle_trimmed', {}, 'Cycle trimmed'));
            await this._closeCycleDetail(eid);
            await this._fetchCycles(eid);
          },
        );
        return;
      }
      if (action === 'cyc-apply-split') {
        // Backgrounded task (issue #311): per-segment extraction + affected
        // envelope rebuilds can stall a low-power host, so run it via the registry.
        const cid = m.cycleId, offs = m.split.offsets.slice(), profs = m.split.profiles.slice();
        this._kickAndTrack(
          { type: `${_DOMAIN}/apply_split`, entry_id: eid, cycle_id: cid, split_offsets: offs, segment_profiles: profs },
          'cyc-split-apply',
          async (result) => {
            this._showToast(this._tText('toast.split_complete', {count: (result.new_ids || []).length}, `Split into ${(result.new_ids || []).length} cycles`));
            await this._closeCycleDetail(eid);
            await this._fetchCycles(eid);
            await this._fetchProfiles(eid);
          },
        );
        return;
      }
    }
  }

  async _onMActProfilePanel(action, btn, m, eid, sr) {
    if (m && m.type === 'profile-panel') {
      if (action === 'pp-phase-add') {
        const full = (m.env && m.env.target_duration) || (m.env && m.env.avg && m.env.avg.length ? m.env.avg[m.env.avg.length - 1][0] : 600);
        const last = m.phases.length ? m.phases[m.phases.length - 1].end : 0;
        const st = Math.min(last, full);
        m.phases.push({ name: m.catalog[0] || '', start: st, end: Math.min(st + Math.max(60, full * 0.1), full) });
        this._render(); return;
      }
      if (action === 'pp-phase-rm') { const i = +((btn && btn.dataset.idx) || -1); if (i >= 0) { m.phases.splice(i, 1); this._render(); } return; }
      if (action === 'pp-phase-save') {
        const phases = m.phases.filter(p => p.name).map(p => ({ name: p.name, start: p.start, end: p.end }));
        await this._busyRun('pp-phase-save', async () => {
          try { await this._ws({ type: `${_DOMAIN}/set_profile_phases`, entry_id: eid, profile_name: m.name, phases }); this._showToast(this._t('toast.phases_saved', {}, 'Phases saved')); }
          catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
      if (action === 'pp-cleanup-del') {
        const sel = m.cleanup ? Array.from(m.cleanup.selected) : [];
        if (!sel.length) return;
        await this._busyRun('pp-cleanup-del', async () => {
          try {
            for (const cid of sel) await this._ws({ type: `${_DOMAIN}/delete_cycle`, entry_id: eid, cycle_id: cid });
            this._showToast(this._tText('toast.cycles_deleted', {count: sel.length}, `Deleted ${sel.length} cycle(s)`));
            const r = await this._ws({ type: `${_DOMAIN}/get_profile_cycles`, entry_id: eid, profile_name: m.name });
            if (this._modal) this._modal.cleanup = { cycles: r.cycles || [], selected: new Set() };
            await this._fetchProfiles(eid);
          } catch (e) { this._showToast(this._tText('msg.toast_delete_failed', {error: e.message || e}, 'Delete failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
      if (action === 'pp-cleanup-unlabel') {
        // Non-destructive half of the cleanup selection: strip the profile label but
        // keep the cycles. label_cycle with a null profile is the same command the
        // Cycles tab's bulk relabel uses, so it also resolves any pending feedback and
        // clears the review queue for those cycles (#331) — hence the wider refetch.
        const sel = m.cleanup ? Array.from(m.cleanup.selected) : [];
        if (!sel.length) return;
        await this._busyRun('pp-cleanup-unlabel', async () => {
          try {
            for (const cid of sel) await this._ws({ type: `${_DOMAIN}/label_cycle`, entry_id: eid, cycle_id: cid, profile_name: null });
            this._showToast(this._tText('toast.unlabel_done', {count: sel.length}, `Unlabelled ${sel.length} cycle(s)`));
            const r = await this._ws({ type: `${_DOMAIN}/get_profile_cycles`, entry_id: eid, profile_name: m.name });
            // Only adopt the fresh list if this very modal is still the open one; the
            // user may have closed it or moved to another profile while we ran.
            if (this._modal === m) m.cleanup = { cycles: r.cycles || [], selected: new Set() };
            await this._fetchProfiles(eid);
            await this._fetchCycles(eid);
            await this._fetchFeedbacks(eid);
          } catch (e) { this._showToast(this._tText('toast.unlabel_failed', {error: e.message || e}, 'Unlabel failed: ' + (e.message || e)), 'error'); }
        });
        return;
      }
      if (action === 'pp-rename') {
        const nn = sr.getElementById('wd-pp-rename')?.value?.trim();
        const durEl = sr.getElementById('wd-pp-dur');
        const dur = parseFloat(durEl?.value || '0');
        // Only an edited value is sent (#158): resending the rounded minutes on a
        // plain rename overwrote the stored duration, and a computed one is read-only.
        const durEdited = !!durEl && !durEl.disabled && dur > 0 && dur !== parseFloat(durEl.dataset.orig || '0');
        if (!nn) { this._showToast(this._t('msg.toast_name_required', {}, 'Name required'), 'error'); return; }
        try {
          await this._ws({ type: `${_DOMAIN}/rename_profile`, entry_id: eid, profile_name: m.name, new_name: nn, manual_duration_min: durEdited ? dur : null });
          this._showToast(this._t('toast.profile_renamed', {}, 'Profile renamed')); m.name = nn;
          // rename_profile also rewrites the member name inside any profile group
          // (profile_store.update_profile step 4); re-fetch groups too or the stale
          // old name leaves the renamed profile looking removed from its group, and
          // resaving that stale modal would drop it for real.
          await Promise.all([this._fetchProfiles(eid), this._fetchProfileGroups(eid)]);
          m.stats = (this._profiles || []).find(p => p.name === nn) || m.stats; this._render();
        } catch (e) { this._showToast(this._tText('toast.rename_failed', {error: e.message || e}, 'Rename failed: ' + (e.message || e)), 'error'); }
        return;
      }
      if (action === 'pp-rebuild') {
        // Backgrounded task (issue #311): rebuild runs via the registry; the
        // profile's fresh envelope is fetched only once the task has settled.
        this._kickAndTrack(
          { type: `${_DOMAIN}/rebuild_envelopes`, entry_id: eid },
          'pp-rebuild',
          async () => {
            try {
              const r = await this._ws({ type: `${_DOMAIN}/get_profile_envelope`, entry_id: eid, profile_name: m.name });
              if (this._modal) this._modal.env = r.envelope;
            } catch (_) { /* modal may have closed */ }
            this._showToast(this._t('toast.envelope_rebuilt', {}, 'Envelope rebuilt'));
          },
        );
        return;
      }
      if (action === 'pp-delete') {
        // D4: optimistic delete with Undo (close the profile panel first).
        this._deleteProfileWithUndo(eid, m.name);
        return;
      }
    }
  }

  // ── Settings save ─────────────────────────────────────────────────────────

  // Runs all conflict rules against this._opts (no DOM required).
  // Returns a Set of setting keys that have at least one active conflict.
  // Used by the Overview attention card, the tab-bar indicator, and the Settings
  // Capture current form values into this._pendingSettings before a section
  // switch so edits survive re-renders (mirrors the read logic in _saveSettings).
  _snapshotFormToPending(sr) {
    if (!sr) return;
    // Covers both the Settings form and the ML Training form so a background
    // reload (ML comparison / training status / automations) that re-renders can
    // never discard the user's unsaved edits in either place.
    sr.querySelectorAll('#wd-settings-form [data-opt], #wd-ml-form [data-opt]').forEach(el => {
      const key = el.dataset.opt;
      // #406: only fields the user actually touched. Snapshotting everything meant a
      // background re-render (ML comparison / automations / store status all call
      // _renderPreservingFormEdits) froze the whole rendered form into
      // _pendingSettings - including any field the renderer could not represent.
      if (!this._dirtyOptKeys.has(key)) return;
      const f = _FIELD_BY_KEY[key];
      const ftype = (f && f.type) || el.dataset.ftype || 'text';
      if (el.type === 'checkbox') { this._pendingSettings[key] = el.checked; return; }
      if (ftype === 'checkboxlist') { this._pendingSettings[key] = this._collectCheckboxlist(el, key); return; }
      if (ftype === 'entitylist') {
        this._pendingSettings[key] = Array.from(el.querySelectorAll('.wd-pill')).map(p => p.dataset.val).filter(Boolean);
        return;
      }
      if (ftype === 'timerlist') {
        this._pendingSettings[key] = Array.from(el.querySelectorAll('.wd-timer-row')).map(row => ({
          offset_minutes: parseFloat(row.querySelector('[data-field="offset_minutes"]').value) || 0,
          message: (row.querySelector('[data-field="message"]').value || '').trim(),
          auto_pause: row.querySelector('[data-field="auto_pause"]').checked,
        })).filter(t => t.offset_minutes > 0);
        return;
      }
      if (ftype === 'number') {
        const t = String(el.value).trim();
        // Mirror _saveSettings: an emptied clearable field snapshots as null so the
        // cleared state survives a section switch / background re-render; a blank
        // non-clearable field drops any stale staged value so it isn't re-applied.
        if (t === '') { if (f && f.clearable) this._pendingSettings[key] = null; else delete this._pendingSettings[key]; return; }
        const n = parseFloat(t); if (!isNaN(n)) this._pendingSettings[key] = n; return;
      }
      if (ftype === 'list') { this._pendingSettings[key] = String(el.value).split(',').map(s => s.trim()).filter(Boolean); return; }
      if (ftype === 'intlist') { this._pendingSettings[key] = _parseIntList(el.value); return; }
      if (ftype === 'json') {
        const t = String(el.value).trim();
        if (!t) { this._pendingSettings[key] = []; return; }
        try { this._pendingSettings[key] = JSON.parse(t); } catch (_) { /* leave previous value */ }
        return;
      }
      if (ftype === 'entity' || ftype === 'device') { const t = String(el.value).trim(); this._pendingSettings[key] = t ? t : null; return; }
      this._pendingSettings[key] = el.value;
    });
  }

  // Collect a checkboxlist field's ticked choices. An empty result on a field whose
  // default is a non-empty set (profile_evidence_sources) is normalised to that default:
  // an empty evidence selection is not a valid "none" - the backend silently uses all
  // three - so persisting/staging [] would leave the UI showing all-unchecked while
  // matching used every source (#2). The default set is the honest, stored value.
  _collectCheckboxlist(el, key) {
    const chosen = Array.from(el.querySelectorAll('[data-choice]'))
      .filter(c => c.checked).map(c => c.dataset.choice);
    if (chosen.length) return chosen;
    const f = _FIELD_BY_KEY[key];
    return (f && Array.isArray(f.def) && f.def.length) ? f.def.slice() : chosen;
  }

  // Compute conflicting field keys from any options dict (used by device cards and section dots).
  // `defaults` supplies the device-resolved value for a field the user never set
  // (#396: sampling/watchdog/start_duration/smart-term ratio resolve per device type
  // and are sent by the backend as `defaults`/`option_defaults`, never stored in
  // options). Merging them UNDER `opts` means a cross-section rule (watchdog>=2*sampling)
  // sees the value the integration would actually use even when the partner field's
  // section was never opened this session - otherwise the unset partner reads as
  // `undefined`, the rule's `!= null` guard short-circuits, and the conflict is missed.
  _conflictKeysForOpts(opts, defaults) {
    const v = Object.assign({}, defaults || {}, opts);
    const ctx = this._conflictCtx();
    const keys = new Set();
    for (const rule of _SETTING_CONFLICTS) {
      if (!rule.check(v, ctx)) continue;
      for (const key of Object.keys(rule.fieldErrors(v, ctx))) keys.add(key);
    }
    return keys;
  }

  // Entity lookups for rules that judge a chosen entity rather than a number (#439).
  _conflictCtx() {
    const states = (this._hass && this._hass.states) ? this._hass.states : {};
    return { stateOf: (id) => (id ? states[id] || null : null) };
  }

  _conflictCountForOpts(opts, defaults) { return this._conflictKeysForOpts(opts, defaults).size; }

  // section-pill dots to surface saved-settings conflicts without needing the form.
  _conflictKeysFromOpts() {
    return this._conflictKeysForOpts(this._editedOpts(), this._optDefaults);
  }

  // Collect current numeric form values from DOM, falling back to saved opts (and
  // the device-resolved defaults for unset fields, #396) for fields not rendered in
  // the current section (cross-section conflicts).
  _readSettingsFormValues(sr) {
    const vals = Object.assign({}, this._optDefaults, this._opts, this._pendingSettings);
    if (!sr) return vals;
    sr.querySelectorAll('#wd-settings-form [data-opt]').forEach(el => {
      const key = el.dataset.opt;
      if (el.type === 'checkbox') { vals[key] = el.checked; return; }
      if (el.dataset.ftype === 'checkboxlist') {
        vals[key] = this._collectCheckboxlist(el, key);
        return;
      }
      if (el.dataset.ftype === 'entity' || el.dataset.ftype === 'device') {
        // A cleared picker means "unset", not "keep the saved value": the #439
        // price-entity rule must stop warning the moment the field is emptied.
        vals[key] = String(el.value).trim() || null;
        return;
      }
      const n = parseFloat(el.value);
      if (!isNaN(n)) vals[key] = n;
      else if (el.value !== '') vals[key] = el.value;
    });
    return vals;
  }

  // Run all conflict checks against current form values, update the error DOM,
  // and return an object mapping each affected key -> true when a conflict exists.
  // Called on every form input change and before saving.
  _liveValidateSettings(sr) {
    if (!sr) return {};
    const vals = this._readSettingsFormValues(sr);
    const form = sr.getElementById('wd-settings-form');
    if (!form) return {};

    // Build a map of pending suggestion values so we can note when a suggestion
    // would resolve a conflict (instead of showing a generic fix button).
    const suggMap = {};
    for (const s of (this._suggestions || [])) {
      if (s.key != null && s.suggested != null) suggMap[s.key] = +s.suggested;
    }

    // Compute per-key errors across all conflict rules.
    const keyErrors = {};   // key -> [{msgKey, msgVars, msgFb, fixVal, suggFix?}, ...]
    const ctx = this._conflictCtx();
    for (const rule of _SETTING_CONFLICTS) {
      if (!rule.check(vals, ctx)) continue;
      const errs = rule.fieldErrors(vals, ctx);
      for (const [key, info] of Object.entries(errs)) {
        // Tag the error with `suggFix` when a pending suggestion for this key
        // would satisfy the constraint — so the panel can explain that instead
        // of offering a generic "Use X" fix button.
        const sugV = suggMap[key];
        const errInfo = (sugV != null && !rule.check({...vals, [key]: sugV}, ctx))
          ? {...info, suggFix: sugV}
          : info;
        (keyErrors[key] = keyErrors[key] || []).push(errInfo);
      }
    }

    // Derived-value notes (#445). Separate list, separate DOM slot: these are not
    // violations, so they must not highlight the field or feed the section dots.
    const keyNotes = {};
    for (const rule of _SETTING_NOTES) {
      if (!rule.check(vals, ctx)) continue;
      for (const [key, info] of Object.entries(rule.fieldNotes(vals, ctx))) {
        (keyNotes[key] = keyNotes[key] || []).push(info);
      }
    }
    form.querySelectorAll('[data-cnote]').forEach(div => {
      const notes = keyNotes[div.dataset.cnote];
      if (!notes || !notes.length) { div.hidden = true; div.innerHTML = ''; return; }
      div.hidden = false;
      div.innerHTML = notes
        .map(n => _esc(this._tText(n.msgKey, n.msgVars, n.msgFb)))
        .join('<br>');
    });

    // Update the DOM: show/hide conflict error divs and field highlights.
    form.querySelectorAll('[data-cerr]').forEach(div => {
      const key = div.dataset.cerr;
      const errs = keyErrors[key];
      const fieldEl = form.querySelector(`.wd-field[data-field="${key}"]`);
      if (!errs || !errs.length) {
        div.hidden = true;
        div.innerHTML = '';
        if (fieldEl) fieldEl.classList.remove('wd-has-conflict');
      } else {
        div.hidden = false;
        if (fieldEl) fieldEl.classList.add('wd-has-conflict');
        div.innerHTML = errs.map(e => {
          const msg = this._tText(e.msgKey, e.msgVars, e.msgFb);
          let fixHtml = '';
          if (e.suggFix != null) {
            const displaySug = +e.suggFix.toFixed(2);
            fixHtml = `<span class="wd-conflict-sug-note">${this._t('conflict.suggestion_resolves', {val: displaySug}, `Stage the pending suggestion (${displaySug}) below to fix this`)}</span>`;
          } else if (e.fixVal != null && !isNaN(+e.fixVal)) {
            const displayVal = Number.isInteger(e.fixVal) ? e.fixVal : +e.fixVal.toFixed(2);
            fixHtml = `<button type="button" class="wd-conflict-fix" data-ckey="${key}" data-cval="${e.fixVal}">${this._t('conflict.use_fix', {val: displayVal}, `Use ${displayVal}`)}</button>`;
          }
          return `<div class="wd-conflict-row">⚠ ${_esc(msg)}${fixHtml}</div>`;
        }).join('');
      }
    });

    return keyErrors;
  }

  // After the user clicks a "Use X" fix button, re-validate in a loop and
  // automatically apply cascading fixes for downstream conflicts.
  // On-screen fields: update the DOM input directly.
  // Off-screen fields (different settings section): update this._opts so the
  // validation fallback picks up the new value; track in _cascadePending so
  // _saveSettings includes them in the next save payload.
  _cascadeConflictFix(sr, form, initialKey) {
    const autoChanged = new Set();
    for (let i = 0; i < 10; i++) {
      const keyErrors = this._liveValidateSettings(sr);
      let anyFixed = false;
      for (const [key, errs] of Object.entries(keyErrors)) {
        if (key === initialKey) continue;
        const fixErr = errs.find(e => e.fixVal != null && !isNaN(+e.fixVal) && +e.fixVal > 0);
        if (!fixErr) continue;
        const inp = form.querySelector(`[data-opt="${key}"]`);
        if (inp) {
          inp.value = fixErr.fixVal;
          this._dirtyOptKeys.add(key);  // programmatic write: no event to mark it
        } else {
          // Off-screen: mutate this._opts so validation fallback sees the new value.
          // But snapshot the untouched last-saved baseline FIRST (once), so Revert
          // restores the real pre-save values rather than these off-screen cascade
          // adjustments — _saveSettings prefers _preCascadeOpts for its undo snapshot.
          if (this._preCascadeOpts == null) this._preCascadeOpts = JSON.parse(JSON.stringify(this._opts || {}));
          this._opts = {...this._opts, [key]: fixErr.fixVal};
          (this._cascadePending ??= {})[key] = fixErr.fixVal;
        }
        autoChanged.add(key);
        anyFixed = true;
        break; // one fix per pass so each fixVal is computed on fresh state
      }
      if (!anyFixed) break;
    }
    this._liveValidateSettings(sr);
    // Persist the visible cascade fixes (on-screen inputs were changed directly in
    // the DOM) into _pendingSettings so the next re-render doesn't revert them.
    this._snapshotFormToPending(sr);
    if (autoChanged.size > 0) {
      const n = autoChanged.size, s = n > 1 ? 's' : '';
      this._showToast(this._tText('conflict.cascade_toast', {n}, `Other settings adjusted for consistency: ${n}`), 'success');
    }
  }

  // #406: reduce a collected form payload to the keys that actually differ from the
  // saved baseline. The save collector reads every [data-opt] in the DOM, so without
  // this a save rewrote every field in the current section whether or not the user
  // touched it - and any field the form could not render faithfully (a <select> whose
  // stored value had no <option>, a form painted from stale options) was silently
  // persisted at its rendered value. That is how an untouched "Group under device"
  // was cleared by a save of an unrelated setting.
  //
  // The baseline is _preCascadeOpts when set, NOT the live _opts: an off-screen
  // cascade fix writes its value into _opts as it goes (so cross-section conflict
  // validation sees it) and records it in _cascadePending. Diffing against the
  // mutated _opts would call those keys unchanged and silently drop them from the
  // payload. _preCascadeOpts is the untouched last-saved baseline - the same
  // expression _saveSettings uses for its undo snapshot.
  _changedOptions(updates) {
    const baseline = this._preCascadeOpts || this._opts || {};
    const changed = {};
    for (const [k, val] of Object.entries(updates)) {
      if (JSON.stringify(val) === JSON.stringify(baseline[k])) continue;
      // A blank/cleared value for a key that was never stored is a no-op: there is
      // nothing to clear, and writing it would pin an empty string into options.
      if (!(k in baseline) && (val === '' || val === null)) continue;
      // A never-stored switch rendered at its default (energy_price_dynamic,
      // notify_fire_events) is not an edit either: submitting it rewrote options the
      // user never touched. Lists keep their own normalisation (evidence sources).
      if (!(k in baseline) && typeof val === 'boolean') {
        const d = (this._optDefaults && k in this._optDefaults) ? this._optDefaults[k] : (_FIELD_BY_KEY[k] || {}).def;
        if (d !== undefined && JSON.stringify(val) === JSON.stringify(d)) continue;
      }
      changed[k] = val;
    }
    return changed;
  }

  async _saveSettings() {
    const sr = this.shadowRoot;
    const dev = this._devices[this._selIdx];
    if (!dev) return;

    // Start with off-screen pending edits (section switches) and cascade fixes;
    // DOM values (current section) will override both below.
    const updates = Object.assign({}, this._pendingSettings, this._cascadePending);
    this._invalidJson = null;
    sr.querySelectorAll('[data-opt]').forEach(el => {
      const key = el.dataset.opt;
      const f = _FIELD_BY_KEY[key];
      const ftype = (f && f.type) || el.dataset.ftype || 'text';
      if (el.type === 'checkbox') { updates[key] = el.checked; return; }
      if (ftype === 'checkboxlist') { updates[key] = this._collectCheckboxlist(el, key); return; }
      if (ftype === 'entitylist') { updates[key] = Array.from(el.querySelectorAll('.wd-pill')).map(p => p.dataset.val).filter(Boolean); return; }
      if (ftype === 'timerlist') {
        updates[key] = Array.from(el.querySelectorAll('.wd-timer-row')).map(row => ({
          offset_minutes: parseFloat(row.querySelector('[data-field="offset_minutes"]').value) || 0,
          message: (row.querySelector('[data-field="message"]').value || '').trim(),
          auto_pause: row.querySelector('[data-field="auto_pause"]').checked,
        })).filter(t => t.offset_minutes > 0);
        return;
      }
      const val = el.value;
      if (ftype === 'number') {
        const t = String(val).trim();
        // An emptied "blank-to-disable" (clearable) field must be sent as the
        // backend's explicit unset value (null) so it can actually be cleared —
        // omitting it would silently keep the previous value. A blank non-clearable
        // field is "leave unchanged": omit it from the payload AND drop any value
        // inherited from _pendingSettings/_cascadePending so a stale off-screen
        // value for this key can't be saved by accident.
        if (t === '') { if (f && f.clearable) updates[key] = null; else delete updates[key]; return; }
        const n = parseFloat(t); if (!isNaN(n)) updates[key] = n; return;
      }
      if (ftype === 'list') { updates[key] = String(val).split(',').map(s => s.trim()).filter(Boolean); return; }
      if (ftype === 'intlist') { updates[key] = _parseIntList(val); return; }
      if (ftype === 'json') {
        const t = String(val).trim();
        if (!t) { updates[key] = []; return; }
        try { updates[key] = JSON.parse(t); }
        catch (_) { this._invalidJson = key; }  // leave unchanged; flagged below
        return;
      }
      if (ftype === 'entity' || ftype === 'device') { const t = String(val).trim(); updates[key] = t ? t : null; return; }
      updates[key] = val;  // text, textarea, select, devicetype
    });

    // #396/#393: the cadence/ratio fields render their runtime-resolved default when
    // unset (from _optDefaults). Persisting that default back as an explicit option
    // pins the value against future default changes and defeats "unset -> resolve per
    // device type", so drop a field that is (a) not already an explicit option and
    // (b) still equal to the resolved default - the backend resolves the identical
    // value, so runtime behaviour is unchanged. A value the user actually changed away
    // from the default (or a field they had already set) is untouched and still saves.
    const _od = this._optDefaults || {};
    for (const k of Object.keys(_od)) {
      if (!(k in this._opts) && (k in updates)
          && JSON.stringify(updates[k]) === JSON.stringify(_od[k])) {
        delete updates[k];
      }
    }

    if (this._invalidJson) {
      this._showToast(this._tText('toast.invalid_json', {key: this._invalidJson}, `"${this._invalidJson}" is not valid JSON - fix it or clear the field before saving.`), 'error');
      return;
    }
    const conflicts = this._liveValidateSettings(sr);
    const conflictKeys = new Set(Object.keys(conflicts));
    if (conflictKeys.size > 0) {
      // Only the fields INVOLVED in a conflict are blocked. Everything else the user
      // changed (identity + basic config: name, power sensor, min power, off delay,
      // brand/model, group, ...) saves normally, since those aren't conflict-checked.
      // Conflicting in-progress edits are kept in the pending buffer so the fields +
      // banner survive the reload for the user to fix.
      const rest = {}; const heldBack = {};
      for (const [k, val] of Object.entries(updates)) {
        if (conflictKeys.has(k)) heldBack[k] = val; else rest[k] = val;
      }
      const safe = this._changedOptions(rest);
      this._pendingSettings = { ...this._pendingSettings, ...heldBack };
      if (Object.keys(safe).length) {
        await this._busyRun('save-settings', async () => {
          try {
            await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: dev.entry_id, options: safe });
            this._opts = { ...this._opts, ...safe };
            this._showToast(this._t('toast.saved_except_conflicts', {}, 'Saved. Fix the highlighted conflicts to save the rest.'), 'info');
          } catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
        });
      } else {
        this._showToast(this._t('toast.settings_conflicts', {}, 'Fix the highlighted setting conflicts before saving.'), 'error');
      }
      return;
    }
    const changed = this._changedOptions(updates);
    if (!Object.keys(changed).length) {
      // Nothing to write. set_options always reloads the entry, so an empty save
      // would take the entities unavailable for no reason.
      this._pendingSettings = {};
      this._dirtyOptKeys = new Set();
      this._showToast(this._t('toast.settings_no_changes', {}, 'No changes to save'), 'info');
      return;
    }
    await this._busyRun('save-settings', async () => {
      try {
        // Snapshot current state before overwriting — one-level undo for the Revert
        // button. Deep-clone so nested arrays (e.g. cycle timers) are captured by
        // value and can't be mutated by later edits sharing the reference. Prefer the
        // pre-cascade baseline: off-screen cascade fixes mutate this._opts before the
        // save, so cloning it here would bake those adjustments into the undo target.
        const prevSnap = JSON.parse(JSON.stringify(this._preCascadeOpts || this._opts || {}));
        await this._ws({ type: `${_DOMAIN}/set_options`, entry_id: dev.entry_id, options: changed });
        // Reflect the saved values locally so the re-render keeps them (the
        // backend reload is async; without this the form snaps back to the
        // pre-edit values because this._opts was never updated).
        this._opts = { ...this._opts, ...changed };
        this._prevOpts = prevSnap;
        this._cascadePending = {};
        this._preCascadeOpts = null;
        this._pendingSettings = {};
        this._dirtyOptKeys = new Set();
        if (this._stagedSuggestions) {
          try { await this._ws({ type: `${_DOMAIN}/clear_suggestions`, entry_id: dev.entry_id }); } catch (_) { /* non-fatal */ }
          this._stagedSuggestions = false; this._suggestions = [];
        }
        this._showToast(this._t('toast.settings_saved', {}, 'Settings saved; integration reloading'));
      } catch (e) { this._showToast(this._tText('msg.toast_save_failed', {error: e.message || e}, 'Save failed: ' + (e.message || e)), 'error'); }
    });
  }
}

if (!customElements.get('ha-washdata-panel')) {
  customElements.define('ha-washdata-panel', HaWashdataPanel);
}