refactoring-the-assembled-ui

Refactoring the assembled UI

scripts/ui/ does not hold standalone files. It holds ordered parts of one artifact. _report_ui.py, _panel_ui.py and panel-server.py read them at import and join them into a single self-contained HTML page. Almost every surprise in this area comes from forgetting that.

The assembly contract

• One inline <style>, and one inline <script> carrying code. The tags live in the Python modules, never in the assets — selftests pin both, and pin that the .js files carry no <script> tags of their own.

  Carrying code is not hedging. The panel emits one of each; the shipped report emits three <script> tags — window.AUDIT_USAGE (2.6 KB of data), window.AUDIT_MD_B64 (the 6.9 KB base64 Markdown twin), and the code (81 KB). Check the artifact, not this sentence: grep -c '<script' examples/acme-store/acme-store-audit.html prints 3.

  The pin that reads SCRIPT.count("<script>") == 1 counts tags in a Python string — the code block alone — not in the page. It has never contradicted the above, which is exactly why the wrong version of this bullet survived: the pin that looked like it was guarding the claim was guarding something else.

• No external resources, ever. CI asserts the rendered report contains no <script src, <img , <link , <iframe or url(http. No CDN, no web font, no separate stylesheet.

• A module script, but no cross-file import. The report's code block is <script type="module">: that is where its scope and its strict mode come from, and it is why no IIFE wraps it. What a module does NOT buy here is loading — import/export cannot work on an opaque file:// origin. There is no build step and there will not be one.

• The panel is different in kind, and it has been measured. It is served over http://127.0.0.1, where a real cross-file import DOES work — verified in Chromium against the panel server's exact response profile, with a file:// control in the same run reproducing the report's net::ERR_FAILED. What blocks it is not the browser: panel-server.py has no static route (a module fetch gets 403 without the session token, 404 with it), a relative specifier inherits the path but never the ?t= query, module scripts are strictly MIME-checked, and the __*__ placeholders substituted into the script text would need a new home. The panel's script is also still a CLASSIC <script>, so it has neither module scope nor strict mode; it boots unchanged as type="module" (measured by rewriting only the response body), which removes every top-level function declaration from window. Until a route is decided, Python joins the parts — but do not repeat "ES modules are impossible here" as if it covered both surfaces.

• Order is load-bearing. TOKEN_CSS must come first — both stylesheets are individually invalid without it (undeclared custom properties, and panel.css alone fails the color-scheme check). Then base, then components, then the surface file, because report.css's @media (max-width:52rem) thead th{position:static} beats the shared rule by source order alone.

• Every part ends with \n. panel-server.py runs a line-based lint over UI_HTML.splitlines(); a part without a trailing newline joins two lines and can hide a real offender or manufacture a false one.

• .gitattributes pins scripts/ui/** text eol=lf as a glob, so new parts inherit it. No .py may ever land in scripts/ui/ — a selftest pins that directory as Python-free.