UX-13 P3: Simple view and Batteries screen

- Batteries: one card per battery with On/Off, the mode list (cheap hours
  and selling greyed out until OPT-11 P3), level, and Now / Today / Why
  lines built in homeview.py. Replaces the OPT-11 P1 minimal cards and uses
  the existing pack_use / pack_mode actions and store keys.
- An Off battery the peak limit still needs says so with its figure; no line
  shows 0 W beside moving power (OPT-11 P1 test F2). Today says "Not planned
  yet" until OPT-11 P3/P4.
- Home's plan leaves Off batteries out, except for the peak limit.
- Settings opens on Simple: the layout's simple fields with an applies chip
  and a note, plus the battery switches and modes. Installer is one tap.
- English and Dutch words in app/ui_text; test_batteries_screen.py; browser
  check tools/ux13_browser_check.py (CHECK=1 ux13_screenshots.sh); new and
  changed screenshots only.

No control, allocator, arbiter or command module changed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UBtqPrG1mDLXzTEBnhEkkV

goodwe_controller/app/static/app.css

@@ -228,3 +228,19 @@ input.txt.time{width:5.5em;text-align:center;font-variant-numeric:tabular-nums}
 .sev.bad{background:var(--bad-bg);color:var(--bad)} .sev.warn{background:var(--warn-bg);color:var(--warn)}
 .checklist li{display:flex;gap:8px;align-items:flex-start;overflow-wrap:anywhere}
 .kettle .row{margin-top:8px}
+/* UX-13 P3: the Batteries screen and the Simple settings view */
+.bcard .hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
+.bcard .name{font-weight:700;font-size:16px}
+.bcard .modebox .lbl{display:block;margin-bottom:4px}
+.bcard .modebox .help{font-size:13px;color:var(--muted);margin-top:4px}
+.bcard.off .modebox{opacity:.6}
+.bcard .kv dd{overflow-wrap:anywhere}
+.switch:disabled{opacity:.45;cursor:not-allowed}
+select.sel:disabled{opacity:.6}
+.simple .card>.row{margin-bottom:4px}
+.vhide{display:none!important}
+.simple .card>.f{border-top:0;padding-top:0}
+.simple .f>.head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
+.simple .card .lbl{font-weight:600;font-size:15px}
+.simple .inv .hd{border-bottom:0}
+.simple .inv .f{border-top:0;padding-top:0}

goodwe_controller/app/static/app.js

@@ -78,10 +78,12 @@
     if (!r.ok) throw new Error("action " + r.status);
     return r.json();
   }
-  async function refresh() {
+  // `force`: redraw the battery cards even under a focused mode list, after
+  // the person used it (P3).
+  async function refresh(force) {
     if (busy) return;
     busy = true;
-    try { S = await getStatus(); render(); }
+    try { S = await getStatus(); render(force === true); }
     catch (e) { offline(); }
     finally { busy = false; }
   }
@@ -104,7 +106,7 @@
     $("#pill").replaceChildren(h("span", { class: "dot" + dot, "aria-hidden": "true" }), h("span", {}, words));
   }
 
-  function render() {
+  function render(force) {
     renderPill();
     const structured = S.now && S.plan && !S.home_error;
     // UX-15: setup-only mode commands nothing and has no control to offer.
@@ -114,7 +116,8 @@
     if (structured) { renderNow(); renderPlan(); renderPeak(); renderAttention(); }
     renderControl(structured, setup);
     renderDetails(!structured && !setup);
-    renderBatteries();
+    renderBatteries(force);
+    document.dispatchEvent(new CustomEvent("ux13:status"));
   }
 
   /* ---------------- Home: now ---------------- */
@@ -308,50 +311,112 @@
     if (open) $("#c-details").open = true;
   }
 
-  /* ---------------- Batteries (placeholder until UX-13 P3) ---------------- */
-  // OPT-11 P1: with battery modes on, each card gets an On/Off switch and a
-  // mode choice (`mode_key` in /status). UX-13 P3 replaces these cards.
+  /* ---------------- Batteries (UX-13 P3) ---------------- */
+  // One card per battery. With battery modes on (`mode_key` in /status) each
+  // card has an On/Off switch and a mode list, sent as `pack_use` and
+  // `pack_mode` through /action (OPT-11 P1). Selling and cheap-hours charging
+  // are shown greyed out until OPT-11 P3. The Now, Today and Why lines are
+  // homeview.py's sentences. The Simple settings view draws the same switch
+  // and list into its own card (simpleHost).
   const MODES = ["solar_first", "leftover_solar"];
+  const say = (text, vars) => Object.keys(vars).reduce((x, k) => x.replace("{" + k + "}", vars[k]), text);
   let packBusy = false;
-  async function packAct(what, unit, value) {
+  let simpleHost = null;
+  async function packAct(what, b, value) {
     if (packBusy) return;
     packBusy = true;
     try {
       const r = await fetch("action", { method: "POST", headers: { "Content-Type": "application/json" },
-                                        body: JSON.stringify({ action: what, unit: unit, value: value }) });
+                                        body: JSON.stringify({ action: what, unit: b.name, value: value }) });
       const j = await r.json().catch(() => ({}));
-      toast(r.ok ? t("toast.done") : (j.error || t("toast.failed")));
+      if (!r.ok) toast(j.error || t("toast.failed"));
+      else if (what === "pack_use") toast(say(value ? t("batteries.toast.on") : t("batteries.toast.off"), { name: b.name }));
+      else toast(say(t("batteries.toast.mode"), { name: b.name, mode: t("batteries.choice." + value + ".name") }));
     } catch (e) { toast(t("toast.failed")); }
     finally { packBusy = false; }
-    refresh();
+    await refresh(true);
   }
-  function modeControls(b) {
-    const sw = h("button", { class: "btn" + (b.use ? " primary" : ""), type: "button", role: "switch",
-                             "aria-checked": String(b.use), "aria-label": b.name + ": " + t("batteries.use"),
-                             onclick: () => packAct("pack_use", b.name, !b.use) },
-                 b.use ? t("batteries.on") : t("batteries.off"));
-    const sel = h("select", { class: "sel", "aria-label": b.name + ": " + t("batteries.mode"), disabled: !b.use,
-                              onchange: (e) => packAct("pack_mode", b.name, e.target.value) },
-      ...MODES.map((k) => h("option", { value: k, selected: b.mode_choice === k }, t("batteries.choice." + k + ".name"))));
-    return [h("div", { class: "row spread", style: "margin-top:8px" }, h("span", { class: "small" }, t("batteries.use")), sw),
-            h("div", { class: "row spread", style: "margin-top:8px" }, h("span", { class: "small" }, t("batteries.mode")), sel),
-            h("p", { class: "tiny muted", style: "margin:6px 0 0" }, t("batteries.choice." + b.mode_key + ".description"))];
+  function onSwitch(b, i, where, lid) {
+    const sw = h("button", { type: "button", class: "switch", role: "switch", id: "bsw-" + where + i,
+                             "aria-checked": String(b.use), "aria-labelledby": lid,
+                             onclick: () => packAct("pack_use", b, !b.use) });
+    return h("span", { class: "swrap" }, sw, h("span", { class: "swtext", "aria-hidden": "true" }, b.use ? t("batteries.on") : t("batteries.off")));
   }
-  function renderBatteries() {
-    if (!S.batteries) { $("#bcards").replaceChildren(); return; }
-    // Do not rebuild a card under an open mode list or a request in flight.
-    if (packBusy || ($("#bcards").contains(document.activeElement) && document.activeElement.tagName === "SELECT")) return;
-    const modes = S.batteries.some((b) => b.mode_key != null);
-    $("#batt-desc").textContent = t(modes ? "batteries.with_modes.description" : "batteries.description");
-    $("#bcards").replaceChildren(...S.batteries.map((b) => h("div", { class: "card" },
-      h("div", { class: "row spread" }, h("strong", {}, b.name), h("span", { class: "small muted" }, b.capacity_kwh ? b.capacity_kwh + " kWh" : "")),
+  function modeSelect(b, i, where, lid) {
+    return h("select", { class: "sel", id: "bsel-" + where + i, "aria-labelledby": lid, disabled: !b.use,
+                         onchange: (e) => packAct("pack_mode", b, e.target.value) },
+      ...MODES.map((k) => h("option", { value: k, selected: b.mode_choice === k }, t("batteries.choice." + k + ".name"))),
+      h("option", { value: "", disabled: true }, t("batteries.later")));
+  }
+  function sellRow(i, where) {
+    const lid = "bsl-" + where + i;
+    return h("div", { class: "f inline" },
+      h("div", {}, h("div", { class: "lbl", id: lid }, t("batteries.sell.name")), h("div", { class: "help" }, t("batteries.sell.description"))),
+      h("div", { class: "ctl" }, h("button", { type: "button", class: "switch", role: "switch", "aria-checked": "false",
+                                               "aria-labelledby": lid, disabled: true })));
+  }
+  function todayLines(b) {
+    if (!b.today || !b.today.length) return b.today_line || "–";
+    return b.today.map((r) => h("div", {}, r.from + " " + t("plan.time_to") + " " + r.to + ": " + r.what));
+  }
+  function batteryCard(b, i) {
+    const modes = b.mode_key != null;
+    const lid = "bname-" + i;
+    const lvl = b.level_pct == null ? "–" : Math.round(b.level_pct) + " %";
+    const stored = b.stored_kwh != null ? " · " + dec(b.stored_kwh.toFixed(1)) + " kWh " + t("batteries.stored").toLowerCase() : "";
+    return h("div", { class: "card bcard" + (modes && !b.use ? " off" : "") },
+      h("div", { class: "hd" },
+        h("div", { class: "grow" }, h("div", { class: "name", id: lid }, b.name),
+          h("div", { class: "tiny muted" }, b.capacity_kwh ? dec(Number(b.capacity_kwh).toFixed(1)) + " kWh" : "")),
+        modes ? onSwitch(b, i, "c", lid) : null),
+      modes ? h("div", { class: "modebox" },
+        h("label", { class: "lbl small", for: "bsel-c" + i }, t("batteries.mode")),
+        modeSelect(b, i, "c", null),
+        h("div", { class: "help" }, t("batteries.choice." + b.mode_key + ".description")),
+        sellRow(i, "c")) : null,
       levelBar(b.level_pct, b.name),
       h("dl", { class: "kv" },
-        h("dt", {}, t("batteries.level")), h("dd", {}, b.level_pct == null ? "–" : Math.round(b.level_pct) + " %"),
-        b.stored_kwh != null ? [h("dt", {}, t("batteries.stored")), h("dd", {}, dec(b.stored_kwh.toFixed(1)) + " kWh")] : null,
+        h("dt", {}, t("batteries.level")), h("dd", {}, lvl + stored),
         h("dt", {}, t("batteries.now")), h("dd", {}, b.now),
-        b.mode_key == null ? [h("dt", {}, t("batteries.mode")), h("dd", {}, b.mode)] : null),
-      b.mode_key != null ? modeControls(b) : null)));
+        h("dt", {}, t("batteries.today")), h("dd", {}, todayLines(b)),
+        h("dt", {}, t("batteries.why")), h("dd", { class: "muted" }, b.why || "–")));
+  }
+  function simpleRow(b, i) {
+    const lid = "bsname-" + i;
+    return h("div", { class: "inv" },
+      h("div", { class: "hd" }, h("span", { class: "grow", id: lid }, b.name), onSwitch(b, i, "s", lid)),
+      h("div", { class: "f" }, h("label", { class: "lbl", for: "bsel-s" + i }, t("batteries.mode")),
+        h("div", { class: "ctl" }, modeSelect(b, i, "s", null)),
+        h("div", { class: "help" }, b.now + " " + (b.why || ""))));
+  }
+  // Rebuild without losing the focused control, and never under an open list
+  // or a request in flight.
+  function keepFocus(fn) {
+    const id = document.activeElement && document.activeElement.id;
+    fn();
+    if (id && /^bs(w|el)-/.test(id)) { const e = document.getElementById(id); if (e) e.focus(); }
+  }
+  // The modes-off card's button opens Settings on the Installer view, where
+  // the "Battery modes" switch is (settings.js sets window.UX13.settingsView).
+  $("#batt-off a").addEventListener("click", () => { if (window.UX13.settingsView) window.UX13.settingsView("installer"); });
+  function renderBatteries(force) {
+    if (!S || !S.batteries) { $("#bcards").replaceChildren(); return; }
+    const a = document.activeElement;
+    if (!force && (packBusy || (a && a.tagName === "SELECT" && /^bsel-/.test(a.id)))) return;
+    const modes = S.modes_on === true || S.batteries.some((b) => b.mode_key != null);
+    $("#batt-off").hidden = modes;
+    $("#batt-how").hidden = !modes;
+    const docs = $("#batt-docs");
+    if (S.control && S.control.docs_url) { docs.href = S.control.docs_url; docs.hidden = false; } else docs.hidden = true;
+    if (S.state && ["shadow", "stopped", "alarm"].includes(S.state.kind)) banner($("#batt-banner"), S.level, S.state.pill, S.state.sub, S.level === "bad" ? "alert" : null);
+    else $("#batt-banner").replaceChildren();
+    keepFocus(() => {
+      $("#bcards").replaceChildren(...S.batteries.map(batteryCard));
+      if (simpleHost && simpleHost.isConnected) {
+        simpleHost.replaceChildren(...(modes ? S.batteries.map(simpleRow)
+          : [h("p", { class: "small muted", style: "margin:4px 0" }, t("batteries.modes_off.name") + ". " + t("batteries.description"))]));
+      }
+    });
   }
 
   /* ---------------- control buttons ---------------- */
@@ -385,7 +450,10 @@
   // Shared with settings.js, which loads after this file.
   // `first`: the page opened with no route, so settings.js may open the setup
   // wizard on a new install (UX-13 P4).
-  window.UX13 = { h, ask, toast, t, words: WORDS, lang: LANG, maint: (what) => ask(what, () => simple(what)), first: !location.hash };
+  window.UX13 = { h, ask, toast, t, words: WORDS, lang: LANG, maint: (what) => ask(what, () => simple(what)), first: !location.hash,
+                  // P3: the Simple settings view's battery card, drawn from /status.
+                  batteries: (host) => { simpleHost = host; if (S) renderBatteries(); refresh(); },
+                  status: () => S, kw };
 
   /* ---------------- tabs: hash routes, arrow keys ---------------- */
   const TABS = [...document.querySelectorAll(".tab")];

goodwe_controller/app/static/index.html

@@ -94,11 +94,23 @@
 </section>
 
 <section class="screen" id="s-batt" role="tabpanel" aria-labelledby="t-batt" hidden>
-  <div id="bcards"></div>
-  <div class="card">
-    <p class="small muted" style="margin:0 0 10px" id="batt-desc" data-t="batteries.description"></p>
+  <div id="batt-banner"></div>
+  <div class="card" id="batt-off" hidden>
+    <h2 data-t="batteries.modes_off.name"></h2>
+    <p class="small muted" style="margin:0 0 10px" data-t="batteries.description"></p>
     <a class="btn" href="#settings" data-t="batteries.settings"></a>
   </div>
+  <div id="bcards"></div>
+  <details class="grp" id="batt-how" hidden>
+    <summary><span class="grow"><strong data-t="batteries.how.name"></strong><span class="small muted gdesc" data-t="batteries.how.description"></span></span><span class="chev" aria-hidden="true">&#8250;</span></summary>
+    <div class="body small">
+      <p data-t="batteries.how.solar_first.description"></p>
+      <p data-t="batteries.how.leftover_solar.description"></p>
+      <p data-t="batteries.how.off.description"></p>
+      <p class="muted" data-t="batteries.how.rules.description"></p>
+      <p><a id="batt-docs" hidden target="_top" rel="noopener" data-t="control.docs"></a></p>
+    </div>
+  </details>
 </section>
 
 <section class="screen" id="s-set" role="tabpanel" aria-labelledby="t-set" hidden>
@@ -106,8 +118,15 @@
     <h2 style="margin:0" data-s="name"></h2>
     <a class="small" href="config" id="set-classic" data-s="classic"></a>
   </div>
-  <p class="small muted" style="margin:0 0 10px" data-s="description"></p>
+  <div class="row" style="margin-bottom:8px">
+    <div class="seg" role="radiogroup" id="set-view" data-s-label="view.name">
+      <button type="button" role="radio" aria-checked="true" data-v="simple" data-s="view.simple"></button>
+      <button type="button" role="radio" aria-checked="false" data-v="installer" tabindex="-1" data-s="view.installer"></button>
+    </div>
+    <span class="tiny muted grow" id="set-desc"></span>
+  </div>
   <div id="set-banner" aria-live="polite"></div>
+  <div id="simple" class="simple" hidden></div>
   <div id="set-body">
     <input class="search" id="set-search" type="search" autocomplete="off" spellcheck="false" data-s-ph="search.description" data-s-label="search.name">
     <div class="card" id="set-other" hidden><h2 data-s="other"></h2><ul class="plain small" id="set-other-list"></ul></div>

goodwe_controller/app/static/settings.js

@@ -32,6 +32,10 @@
   let FILLED = {};           // field key -> the preset field that fills it
   let view = null;           // "settings" or "setup": the tab drawing V
   let STEPS = {};            // wizard step -> refusals that block it
+  // P3: "simple" (the default, for home owners) or "installer". Remembered in
+  // this browser only; a blocked storage just means Simple each time.
+  let mode = "simple";
+  try { if (localStorage.getItem("ux13.settings.view") === "installer") mode = "installer"; } catch (e) { /* no storage */ }
   let uid = 0;
   const ROWS = [];
   const OPEN = new Set();
@@ -337,7 +341,7 @@
   function fieldRow(f, card, gid) {
     if (f.control === "inverter_list") return cardList(f, gid);
     const lid = "sf" + (++uid);
-    const keys = keyText(f, card);
+    const keys = gid === "simple" ? "" : keyText(f, card);     // Simple shows no keys
     const msg = h("div", { class: "msgs" });
     const make = CONTROLS[f.control] || text;
     const row = h("div", { class: "f" + (f.control === "toggle" ? " inline" : ""), "data-key": f.key, "data-card": card },
@@ -421,10 +425,79 @@
       d.append(body);
       host.append(d);
     }
+    renderSimple();
     paint();
     window.scrollTo(0, y);
   }
 
+  /* ---------------- Settings, Simple (P3) ---------------- */
+  // The fields the layout marks `simple`, each in its own card with when it
+  // applies, and the batteries' switches and modes (runtime state, applied at
+  // once) drawn by app.js from /status. The Installer rows stay built but
+  // hidden, so the save bar counts every unsaved change in either view.
+  const chip = (applies) => h("span", { class: "chip " + (applies === "now" ? "now" : "rs") }, ROOT.applies[applies].name);
+  // A note with {kw} is filled from /status (app.js sends ux13:status).
+  function fillNotes() {
+    const st = window.UX13.status();
+    const mp = st && st.month_peak;
+    document.querySelectorAll("#simple [data-kw-note]").forEach((e) => {
+      const ok = mp && mp.peak_w != null;
+      e.hidden = !ok;
+      e.textContent = ok ? e.dataset.kwNote.replace("{kw}", window.UX13.kw(mp.peak_w) + " kW") : "";
+    });
+  }
+  document.addEventListener("ux13:status", fillNotes);
+  function simpleField(f) {
+    const row = fieldRow(f, null, "simple");
+    row.querySelector(".head").append(chip(f.applies));
+    const n = f.note && W.simple.note[f.note];
+    if (n && n.description.includes("{kw}")) {
+      row.append(h("div", { class: "small muted", "data-kw-note": n.description, hidden: true }));
+    } else if (n) {
+      // A plain note replaces the option's installer help on this view.
+      const help = row.querySelector(".help");
+      if (help) help.textContent = n.description;
+    }
+    return h("div", { class: "card" }, row);
+  }
+  function renderSimple() {
+    const host = $("#simple");
+    host.replaceChildren();
+    if (mode !== "simple") return;
+    const cards = allFields().filter((f) => f.simple).map(simpleField);
+    const batts = h("div", {});
+    cards.splice(Math.min(1, cards.length), 0, h("div", { class: "card" },
+      h("div", { class: "row spread" }, h("div", { class: "lbl" }, W.simple.batteries.name), chip("now")), batts));
+    host.append(...cards, h("p", { class: "small muted", style: "margin:4px 2px" }, W.simple.more.description + " ",
+      h("button", { type: "button", class: "btn link", onclick: () => setMode("installer", true) }, W.simple.installer)));
+    window.UX13.batteries(batts);
+    fillNotes();
+  }
+  function setMode(v, redraw) {
+    mode = v;
+    try { localStorage.setItem("ux13.settings.view", v); } catch (e) { /* no storage */ }
+    document.querySelectorAll("#set-view [role=radio]").forEach((b) => {
+      const on = b.dataset.v === v;
+      b.setAttribute("aria-checked", String(on)); b.tabIndex = on ? 0 : -1;
+    });
+    $("#set-desc").textContent = v === "simple" ? W.simple.description : W.description;
+    $("#simple").hidden = v !== "simple";
+    ["#set-search", "#groups", "#set-nomatch"].forEach((id) => { $(id).classList.toggle("vhide", v === "simple"); });
+    if (redraw && M && view === "settings") render();
+  }
+  document.querySelectorAll("#set-view [role=radio]").forEach((b, i, all) => {
+    b.addEventListener("click", () => setMode(b.dataset.v, true));
+    b.addEventListener("keydown", (e) => {
+      const d = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[e.key];
+      if (!d) return;
+      e.preventDefault();
+      const j = all[(i + d + all.length) % all.length];
+      setMode(j.dataset.v, true); j.focus();
+    });
+  });
+  setMode(mode, false);
+  window.UX13.settingsView = (v) => setMode(v, true);
+
   /* ---------------- messages, visibility, search, badges ---------------- */
   const ICON = { bad: "×", warn: "!", info: "i" };
   const RANK = { bad: 0, warn: 1, info: 2 };
@@ -434,11 +507,13 @@
     return m.card == null ? r.card === 0 : m.card === r.card;
   }
   function paint() {
-    const q = view === "setup" ? "" : $("#set-search").value.trim().toLowerCase();
+    const q = view === "setup" || mode === "simple" ? "" : $("#set-search").value.trim().toLowerCase();
+    // A message counts as shown only beside a row of the view on screen.
+    const onScreen = (r) => view === "setup" || (mode === "simple") === (r.gid === "simple");
     const placed = new Set();
     for (const r of ROWS) {
       r.visible = visible(r.f);
-      const msgs = MSG.filter((m, i) => { const hit = mine(r, m); if (hit && r.visible) placed.add(i); return hit; })
+      const msgs = MSG.filter((m, i) => { const hit = mine(r, m); if (hit && r.visible && onScreen(r)) placed.add(i); return hit; })
         .sort((a, z) => RANK[a.tier] - RANK[z.tier]);
       r.tiers = new Set(msgs.map((m) => m.tier));
       r.msg.replaceChildren(...msgs.map((m) => h("div", { class: "msg " + m.tier },
@@ -562,7 +637,9 @@
     validate();
   }
   function firstBad() {
-    const r = ROWS.find((x) => x.tiers && x.tiers.has("bad") && x.visible);
+    if (view === "settings" && mode === "simple" && !ROWS.some((x) => x.gid === "simple" && x.tiers && x.tiers.has("bad") && x.visible)
+        && ROWS.some((x) => x.tiers && x.tiers.has("bad") && x.visible)) setMode("installer", true);
+    const r = ROWS.find((x) => x.tiers && x.tiers.has("bad") && x.visible && (view !== "settings" || (mode === "simple") === (x.gid === "simple")));
     if (!r) { if (!$("#set-other").hidden) $("#set-other").scrollIntoView({ block: "center" }); return; }
     for (let p = r.el.parentElement; p; p = p.parentElement) if (p.tagName === "DETAILS") p.open = true;
     r.el.scrollIntoView({ block: "center" });