UX-13 P5: Dutch text, STYLE check, DOCS screenshots, period editor

- app/ui_text/nl.json and app/uitext.py: every page word in Dutch, English
  fallback per key; the page picks by browser language. Home's sentences
  move into ui_text `home_words`, so /status?lang=nl builds them in Dutch.
- test_ui_text.py: EN/NL key and placeholder parity, STYLE limits, jargon
  lists for both languages, no inline details, untranslated Dutch caught.
  Shared rules moved unchanged to tools/style_rules.py.
- tools/ux13_screenshots.sh/.py: DOCS screenshots from the demo fixtures in
  headless Chromium; docs/img/ux13/. Battery modes (P3): no screenshot.
- "Other time windows": a list editor (ui.periods) that builds
  static_profile and names bad times, empty prices, overlaps and gaps.

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

goodwe_controller/app/static/app.css

@@ -206,6 +206,10 @@ input:disabled{opacity:.6}
 .ent-all{display:flex;gap:6px;padding:6px 10px;align-items:center;min-height:44px}
 .elist .erow{padding:6px 0;border-bottom:1px dashed var(--line)}
 .elist>.btn{margin-top:8px}
+.plist .prow{display:grid;gap:6px}
+.plist .pf{display:flex;flex-direction:column;gap:2px}
+.plist .pf>select.sel{width:100%}
+input.txt.time{width:5.5em;text-align:center;font-variant-numeric:tabular-nums}
 .inv{border:1px solid var(--line);border-radius:10px;padding:0 12px;margin:10px 0}
 .inv>.hd{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;flex-wrap:wrap}
 .inv>.f:nth-child(2){border-top:0}

goodwe_controller/app/static/app.js

@@ -5,7 +5,19 @@
    labels) or from /status (sentences built by app/homeview.py), so STYLE.md
    is checked in Python. Data is always set as text, never as HTML. */
 (function () {
-  const T = JSON.parse(document.getElementById("ui-text").textContent).home;
+  // P5: English or Dutch, by the browser's language. A word missing in Dutch
+  // falls back to English, key by key (app/uitext.py does the same).
+  const ALL = JSON.parse(document.getElementById("ui-text").textContent);
+  const LANG = /^nl\b/i.test(navigator.language || "") ? "nl" : "en";
+  const merge = (a, b) => {
+    if (!b || typeof a !== "object" || typeof b !== "object" || Array.isArray(a)) return b ?? a;
+    const out = Object.assign({}, a);
+    for (const k in b) out[k] = k in a ? merge(a[k], b[k]) : b[k];
+    return out;
+  };
+  const WORDS = LANG === "en" ? ALL.en : merge(ALL.en, ALL[LANG]);
+  document.documentElement.lang = LANG;
+  const T = WORDS.home;
   const $ = (s) => document.querySelector(s);
   const t = (path) => path.split(".").reduce((o, k) => (o == null ? o : o[k]), T);
   function h(tag, attrs, ...kids) {
@@ -24,8 +36,9 @@
     }
     return e;
   }
-  const kw = (w) => (Math.abs(Number(w)) / 1000).toFixed(1);
-  const eur = (v) => "€" + Number(v).toFixed(2);
+  const dec = (x) => (LANG === "nl" ? x.replace(".", ",") : x);
+  const kw = (w) => dec((Math.abs(Number(w)) / 1000).toFixed(1));
+  const eur = (v) => "€" + dec(Number(v).toFixed(2));
 
   // Fixed labels from ui_text.
   document.querySelectorAll("[data-t]").forEach((e) => { e.textContent = t(e.dataset.t) || ""; });
@@ -55,7 +68,7 @@
 
   /* ---------------- data ---------------- */
   async function getStatus() {
-    const r = await fetch("status", { cache: "no-store" });
+    const r = await fetch("status?lang=" + LANG, { cache: "no-store" });
     if (!r.ok) throw new Error("status " + r.status);
     return r.json();
   }
@@ -87,7 +100,7 @@
     const st = S.state || null;
     const dot = st ? ({ running: "", shadow: " warn", stopped: " warn", warning: " warn", alarm: " bad" }[st.kind] ?? " warn")
                    : (S.level === "ok" ? "" : S.level === "bad" ? " bad" : " warn");
-    const words = st ? [st.pill, st.ran].filter(Boolean).join(". ") : S.banner;
+    const words = st ? [st.pill, st.ran].filter(Boolean).join(". ") : S.setup_only === true ? t("setup_only.name") : S.banner;
     $("#pill").replaceChildren(h("span", { class: "dot" + dot, "aria-hidden": "true" }), h("span", {}, words));
   }
 
@@ -96,7 +109,7 @@
     const structured = S.now && S.plan && !S.home_error;
     // UX-15: setup-only mode commands nothing and has no control to offer.
     const setup = S.setup_only === true;
-    banner($("#home-banner"), S.level, S.banner, structured ? S.state.sub : setup ? t("setup_only.description") : "", S.level === "bad" ? "alert" : null);
+    banner($("#home-banner"), S.level, setup ? t("setup_only.name") : S.banner, structured ? S.state.sub : setup ? t("setup_only.description") : "", S.level === "bad" ? "alert" : null);
     ["#c-now", "#c-plan", "#c-peak", "#c-attn"].forEach((id) => { $(id).hidden = !structured; });
     if (structured) { renderNow(); renderPlan(); renderPeak(); renderAttention(); }
     renderControl(structured, setup);
@@ -303,7 +316,7 @@
       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", {}, b.stored_kwh.toFixed(1) + " kWh")] : null,
+        b.stored_kwh != null ? [h("dt", {}, t("batteries.stored")), h("dd", {}, dec(b.stored_kwh.toFixed(1)) + " kWh")] : null,
         h("dt", {}, t("batteries.now")), h("dd", {}, b.now),
         h("dt", {}, t("batteries.mode")), h("dd", {}, b.mode)))));
   }
@@ -339,7 +352,7 @@
   // 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, 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 };
 
   /* ---------------- tabs: hash routes, arrow keys ---------------- */
   const TABS = [...document.querySelectorAll(".tab")];

goodwe_controller/app/static/settings.js

@@ -9,9 +9,9 @@
    P4: the Setup tab's wizard is the same page model, drawn one step at a
    time from each field's `wizard` step, and saved through the same routes. */
 (function () {
-  const ROOT = JSON.parse(document.getElementById("ui-text").textContent);
+  const ROOT = window.UX13.words;       // English or Dutch (app.js)
   const W = ROOT.settings;
-  const { h, ask, toast, maint } = window.UX13;
+  const { h, ask, toast, maint, lang } = window.UX13;
   const $ = (s) => document.querySelector(s);
   const ws = (path) => path.split(".").reduce((o, k) => (o == null ? o : o[k]), W);
   const clone = (x) => (x === undefined ? undefined : JSON.parse(JSON.stringify(x)));
@@ -288,8 +288,45 @@
     box.append(h("button", { type: "button", class: "btn", onclick: () => put(f, card, arr().concat([{ entity: "", reversed: false }]), true) }, "+ " + W.add_solar));
     return box;
   }
+  // P5: time windows, each a start, an end, its days and a price. The add-on
+  // builds the tariff from the rows and names the first overlap or gap.
+  function periodList(f, card) {
+    const P = W.periods;
+    const arr = () => (Array.isArray(get(f, card)) ? get(f, card) : []);
+    const box = h("div", { class: "elist plist" });
+    if (!Array.isArray(get(f, card))) return h("div", { class: "msg info" }, W.derive.custom_profile.description);
+    arr().forEach((row, i) => {
+      const set = (k, v) => { const a = clone(arr()); a[i][k] = v; put(f, card, a); };
+      const say = (what) => P.window + " " + (i + 1) + ", " + what;
+      const time = (k) => {
+        const e = h("input", { class: "txt time", type: "text", inputmode: "numeric", maxlength: "5", placeholder: "00:00",
+                               value: row[k] == null ? "" : row[k], autocomplete: "off", spellcheck: "false", "aria-label": say(P[k]) });
+        e.addEventListener("input", () => set(k, e.value.trim()));
+        return e;
+      };
+      const days = h("select", { class: "sel", "aria-label": say(P.days) });
+      for (const [v, label] of f.days || []) days.append(h("option", { value: v, selected: v === row.days }, label));
+      days.addEventListener("change", () => set("days", days.value));
+      const price = h("input", { class: "num", type: "number", inputmode: "decimal", step: "0.01",
+                                 value: row.price == null ? "" : row.price, "aria-label": say(P.price) });
+      price.addEventListener("input", () => set("price", price.value === "" || isNaN(+price.value) ? null : +price.value));
+      const cell = (label, ...kids) => h("label", { class: "pf" }, h("span", { class: "tiny muted" }, label), ...kids);
+      box.append(h("div", { class: "erow prow" },
+        h("div", { class: "row spread" }, h("strong", { class: "small" }, P.window + " " + (i + 1)),
+          h("button", { type: "button", class: "btn link tiny", onclick: () => { const a = clone(arr()); a.splice(i, 1); put(f, card, a, true); } }, W.remove)),
+        h("div", { class: "row" }, cell(P.from, time("from")), cell(P.to, time("to")),
+          cell(P.price, h("span", { class: "row" }, price, f.unit ? h("span", { class: "unit" }, f.unit) : null))),
+        cell(P.days, days)));
+    });
+    box.append(h("button", { type: "button", class: "btn", onclick: () => {
+      const a = arr(), last = a[a.length - 1];
+      put(f, card, clone(a).concat([{ from: last ? last.to : "00:00", to: "24:00", days: last ? last.days : "mon-sun", price: null }]), true);
+    } }, "+ " + P.add));
+    return box;
+  }
   const CONTROLS = { toggle, segmented: (f, c, l) => radios(f, c, l, false), choice: (f, c, l) => radios(f, c, l, true),
-                     select, slider, number, text, locked, entity, entity_list: entityList, solar_list: solarList };
+                     select, slider, number, text, locked, entity, entity_list: entityList, solar_list: solarList,
+                     period_list: periodList };
 
   /* ---------------- rows, cards and groups ---------------- */
   function keyText(f, card) {
@@ -304,7 +341,7 @@
     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 },
-      h("div", { class: "head" }, h("div", { class: "lbl", id: lid }, f.label, f.unit && f.control !== "slider" && f.control !== "number" && f.control !== "locked" ? " (" + f.unit + ")" : ""),
+      h("div", { class: "head" }, h("div", { class: "lbl", id: lid }, f.label, f.unit && !["slider", "number", "locked", "period_list"].includes(f.control) ? " (" + f.unit + ")" : ""),
         keys ? h("div", { class: "key" }, keys) : null),
       h("div", { class: "ctl" }, make(f, card, lid)),
       f.help ? h("div", { class: "help" }, f.help) : null, msg);
@@ -469,7 +506,7 @@
     const seq = ++vseq;
     try {
       const r = await fetch("config/validate", { method: "POST", headers: { "Content-Type": "application/json" },
-                                                 body: JSON.stringify(Object.assign({ model: V }, extra || {})) });
+                                                 body: JSON.stringify(Object.assign({ model: V, lang }, extra || {})) });
       const b = await r.json();
       if (seq !== vseq) return null;
       MSG = b.messages || [];
@@ -498,7 +535,7 @@
   async function load(after) {
     let m;
     try {
-      const r = await fetch("config/model?lang=en", { cache: "no-store" });
+      const r = await fetch("config/model?lang=" + lang, { cache: "no-store" });
       if (!r.ok) throw new Error("model " + r.status);
       m = await r.json();
       if (!m.layout || !m.ui) throw new Error("no layout");
@@ -538,7 +575,7 @@
   // what is stored now (UX-15 F2).
   async function postSave(extra) {
     const r = await fetch("config/save", { method: "POST", headers: { "Content-Type": "application/json" },
-                                           body: JSON.stringify(Object.assign({ model: V, base: ORIG, fingerprint: FP }, extra || {})) });
+                                           body: JSON.stringify(Object.assign({ model: V, base: ORIG, fingerprint: FP, lang }, extra || {})) });
     const b = await r.json().catch(() => ({}));
     if (r.status === 409 && b.kind === "stale") FP = b.fingerprint || FP;
     return { r, b };