OPT-11 P3: price runs per battery

Cheap and expensive hours as runs of consecutive firm price slots
(priceruns.py); each battery's role per tick from its mode (modetrade.py):
grid charging for Leftover solar / Cheap hours only, never Solar first;
holding for the expensive runs; selling per battery (pack_sell) above the
spread and the floor. The site trade is sized inside the modes (loop bound)
and the peak guard's headroom; a run edge reseeds the loop. Cheap hours only
and selling are enabled on the Batteries screen and in the HA select
(appended). The site Why row no longer says "held back" when the peak limit
pushes power up (F2). Modes off: byte-identical to 7a00f12 on the trade path.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

goodwe_controller/app/static/app.js

@@ -314,11 +314,11 @@
   /* ---------------- 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
+  // `pack_mode` through /action (OPT-11 P1), and a selling switch, sent as
+  // `pack_sell` (P3; Leftover solar and Cheap hours only). 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 MODES = ["solar_first", "leftover_solar", "cheap_hours"];
   const say = (text, vars) => Object.keys(vars).reduce((x, k) => x.replace("{" + k + "}", vars[k]), text);
   let packBusy = false;
   let simpleHost = null;
@@ -331,6 +331,7 @@
       const j = await r.json().catch(() => ({}));
       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 if (what === "pack_sell") toast(say(value ? t("batteries.toast.sell_on") : t("batteries.toast.sell_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; }
@@ -345,15 +346,17 @@
   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")));
+      ...MODES.map((k) => h("option", { value: k, selected: b.mode_choice === k }, t("batteries.choice." + k + ".name"))));
   }
-  function sellRow(i, where) {
+  function sellRow(b, i, where) {
     const lid = "bsl-" + where + i;
+    const can = b.use && b.can_sell === true;
     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 })));
+      h("div", {}, h("div", { class: "lbl", id: lid }, t("batteries.sell.name")),
+        h("div", { class: "help" }, b.can_sell === true ? t("batteries.sell.description") : t("batteries.sell.off"))),
+      h("div", { class: "ctl" }, h("button", { type: "button", class: "switch", role: "switch", id: "bsw-sell-" + where + i,
+                                               "aria-checked": String(can && b.sell === true), "aria-labelledby": lid, disabled: !can,
+                                               onclick: () => packAct("pack_sell", b, !(b.sell === true)) })));
   }
   function todayLines(b) {
     if (!b.today || !b.today.length) return b.today_line || "–";
@@ -373,7 +376,7 @@
         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,
+        sellRow(b, i, "c")) : null,
       levelBar(b.level_pct, b.name),
       h("dl", { class: "kv" },
         h("dt", {}, t("batteries.level")), h("dd", {}, lvl + stored),