fix(web): harden, polish and optimize the web UI per the Sept 2026 audit (#568)

* fix(web): harden, polish and optimize the web UI per the September 2026 audit

Works through docs/archive/WEB_UI_AUDIT_2026-09.md (health 8/20).

Implementation integrity (P0)
- app.css now defines every utility class the templates and JS use,
  including .hidden, so the ~145 JS show/hide toggles work. Button reset,
  and base component rules (.btn, .form-control) wrapped in :where() so
  utility classes on the same element win. New static-audit test fails
  when a used utility class has no rule.

Accessibility
- Focus rings render (the old ring rule referenced undefined variables);
  one :focus-visible outline everywhere; skip link; labelled nav landmarks.
- Shared dialog helper (js/utils/dialog.js): role/aria-modal, focus trap,
  Escape, focus return, applied to every modal.
- Named icon-only buttons and labelled ~70 form fields.
- Toasts announced once; errors persist >= 10s; one showNotification.
- Captive WiFi page: live region, timeouts, dark mode, 16px inputs.

Performance (Pi Zero 2 W)
- SSE streams and tab timers pause when hidden or off-tab; the display
  stream only runs while a preview is visible. app-shell.js deferred.
- Widget scripts served as one versioned bundle (/assets/widgets.js):
  52 -> 21 script tags, 66 -> 35 requests on first load.
- Stdlib gzip fallback when flask-compress is missing: first-load JS/CSS
  1358 KB -> 291 KB on the wire. SSE untouched.

Theming and responsive
- File managers, form fields and Fonts upload on theme tokens; bare
  inputs themed in dark mode; no more white surfaces.
- No horizontal overflow at 375px on any tab; 44px touch targets on
  coarse pointers; reduced-motion respected; header title truncates.

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

* fix(web): clear Codacy findings on #568

- json-file-manager: focus-trap releases kept in a Map (no dynamic
  property access or delete; no value-returning forEach callback)
- notification / schedule-picker: style and day-label lookups via Map
- app.js: move the pending-queue assignment out of the expression
- diff_viewer / error_handler: named function declarations instead of
  arrow consts

No behavior change.

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

* test: check the OAuth widget ships in the widget bundle

base.html no longer tags widget scripts one by one; they load through
/assets/widgets.js. Assert the page requests the bundle and the bundle
contains google-oauth.js, which is what the test was protecting.

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

* fix(web): address review feedback on #568

- widget bundle version fingerprints every file (name, mtime_ns, size)
- gzip fallback appends Accept-Encoding to an existing Vary header
- dialog helper: releasing a non-top dialog no longer moves focus out of
  the dialog the user is in
- labels: file-upload targets its file input; fallback config fields get
  label for/id pairs; native color input has a fallback name
- utility audit also reads class names inside bound :class expressions

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

* fix(web): give the native color-picker input an accessible name

CodeRabbit flagged this on PR #568 as an outside-diff finding (never
posted inline, so it was missed in the round of fixes that addressed
the other 6 review comments). The <input type="color"> only carried a
title attribute; screen readers don't reliably announce title, and
there's no other label naming the control when showHexInput is false.

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

* fix(web): clear Codacy findings in app-shell.js

- drop the unused catch binding on the SSE JSON parse
- move the pending-notification queue assignment out of the expression

No behavior change.

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

* fix(web): contain plugin widgets/ dir and bound style-editor retries

From CodeRabbit review on #568 (code that arrived with the main merge):
- serve_plugin_widget resolves widgets/ with resolve_under before
  resolving the manifest script under it, so a symlinked widgets
  directory can't become the containment base (CWE-22). New test.
- style-editor init stops polling after ~10s when the widget never
  registers and leaves the plain fallback fields in place.

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

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

test/web_interface/test_gzip_fallback.py

@@ -0,0 +1,68 @@
+"""The stdlib gzip fallback must compress the UI's text assets.
+
+flask-compress is optional (app.py tolerates its absence). Without a fallback a
+Pi missing it ships ~1.2 MB of uncompressed JavaScript to a phone over WiFi on
+every first load and every update. These pin the fallback's contract: text
+assets compress and round-trip byte-for-byte, clients that don't ask for gzip
+get the original bytes, and small or non-text responses are left alone.
+"""
+
+import gzip
+from pathlib import Path
+
+import pytest
+
+STATIC = Path(__file__).resolve().parents[2] / "web_interface" / "static"
+
+
+@pytest.fixture
+def client(monkeypatch):
+    import web_interface.app as web_app
+    # Exercise the fallback even on machines that do have flask-compress.
+    monkeypatch.setattr(web_app, "_HAVE_FLASK_COMPRESS", False)
+    web_app.app.config["TESTING"] = True
+    with web_app.app.test_client() as c:
+        yield c
+
+
+@pytest.mark.parametrize("url,path", [
+    ("/static/v3/plugins_manager.js", "v3/plugins_manager.js"),
+    ("/static/v3/app.css", "v3/app.css"),
+])
+def test_static_text_asset_is_gzipped_and_round_trips(client, url, path):
+    resp = client.get(url, headers={"Accept-Encoding": "gzip, deflate"})
+    assert resp.status_code == 200
+    assert resp.headers.get("Content-Encoding") == "gzip"
+    assert "Accept-Encoding" in resp.headers.get("Vary", "")
+    original = (STATIC / path).read_bytes()
+    assert gzip.decompress(resp.data) == original
+    assert len(resp.data) < len(original) / 2
+    assert int(resp.headers["Content-Length"]) == len(resp.data)
+
+
+def test_repeat_request_serves_identical_compressed_bytes(client):
+    headers = {"Accept-Encoding": "gzip"}
+    first = client.get("/static/v3/js/app-shell.js", headers=headers).data
+    second = client.get("/static/v3/js/app-shell.js", headers=headers).data
+    assert first == second
+
+
+def test_client_without_gzip_gets_the_original_bytes(client):
+    resp = client.get("/static/v3/app.css", headers={"Accept-Encoding": "identity"})
+    assert resp.status_code == 200
+    assert "Content-Encoding" not in resp.headers
+    assert resp.data == (STATIC / "v3/app.css").read_bytes()
+
+
+def test_binary_assets_are_not_recompressed(client):
+    resp = client.get("/static/v3/icons/icon-192.png", headers={"Accept-Encoding": "gzip"})
+    assert resp.status_code == 200
+    assert "Content-Encoding" not in resp.headers
+
+
+def test_widget_bundle_is_gzipped_and_immutable(client):
+    resp = client.get("/assets/widgets.js", headers={"Accept-Encoding": "gzip"})
+    assert resp.status_code == 200
+    assert resp.headers.get("Content-Encoding") == "gzip"
+    assert "immutable" in resp.headers.get("Cache-Control", "")
+    assert b"/* registry.js */" in gzip.decompress(resp.data)