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.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")];