[DEMO] Frontend demo-mode (punto 4): demo-mode.js + demo-selectors.js + demo.css + hook ?demo=

Avatar di prodotto, product-demo-protocol v1.0.1 (NIS2 multi-page):
- public/js/demo-mode.js: runtime canale postMessage (inbound navigate/highlight/scroll_to/
  trigger_action/open_tab/...; outbound ready/spa_state_changed/step_animation_done/...),
  verifica origin+HMAC (chiave SHA-256(jwt:seed:demo-control-channel))+idempotency, banner read-only.
- public/js/demo-selectors.js: whitelist 17 viste (view->url) + azioni read-only sicure.
- public/css/demo.css: highlight pulse-blue/halo + banner.
- common-bi.js: hook che inietta gli asset SOLO con ?demo= (no-op per utenti normali).

NOTE: (a) HMAC canonical del MESSAGGIO da riconciliare con AgileHub al collaudo (canonicalize()).
(b) manca il manifest (steps+selettori) — dipende dagli id stabili in corso.
node --check OK su tutti.

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

public/js/common-bi.js

@@ -170,3 +170,18 @@
     // Override globale: le pagine -bi chiamano loadSidebar() come le originali.
     window.loadSidebar = loadSidebarBI;
 })();
+
+// ── Avatar di prodotto: hook demo-mode (product-demo-protocol v1.0.1) ──
+// Solo in presenza di ?demo=<session_id> inietta gli asset demo (no-op per utenti normali).
+(function () {
+    try {
+        if (!new URLSearchParams(window.location.search).get('demo')) return;
+        var css = document.createElement('link'); css.rel = 'stylesheet'; css.href = '/css/demo.css'; document.head.appendChild(css);
+        var inject = function () {
+            var s1 = document.createElement('script'); s1.src = '/js/demo-selectors.js';
+            s1.onload = function () { var s2 = document.createElement('script'); s2.src = '/js/demo-mode.js'; document.body.appendChild(s2); };
+            document.body.appendChild(s1);
+        };
+        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', inject); else inject();
+    } catch (e) { /* noop */ }
+})();