feat(ux): embed the full civic analyst as the Risk lens (ADR-0035) (#122)

The Risk lens was a condensed subset of the civic risk app with a link out to /civic/.
It now embeds the FULL analyst in-shell — briefing + Presentation Mode (3D + holographic
info board) + analyze/verify — as a full-bleed, same-origin <iframe src="/civic/?embed=1">,
so there's no subset and zero re-implementation. Visual/integration only; golden numbers
byte-identical (584 green / 1 skipped, no test edits).

map.html (embed mode via ?embed=1):
- hide the "‹ UrbanOS" homelink (the shell's lens rail is the way back).
- bridge keyboard lens-switching to the parent: 1–4 + Escape postMessage to the shell
  (parent-window keys don't fire while focus is inside the iframe), guarded vs typing/chords.
- gate the Presentation camera moves (flyTo/easeTo pitch) on prefers-reduced-motion (CSS
  guards don't collapse MapLibre JS animations).

os.html:
- Risk lens lazily creates the iframe (kept the condensed panel markup verbatim — a11y/test
  markers + a fallback — but hides it under the embed; dropped the now-redundant drill-down link).
- #civ-embed full-bleed at z-index 5 (below the dock/topbar at z 6/5, clearing top:52/left:108);
  explicit calc() size since an <iframe> is a replaced element (width:auto → 300×150 intrinsic).
- teardown at the single setLens chokepoint (covers click / keyboard / postMessage), so only
  one WebGL context is ever live; restores the panel + moves focus to the incoming dock button.
- origin-checked message listener receives the iframe's 1–4 / Escape bridge.

Verified with Playwright: the Risk lens shows the full civic app (briefing + analyze 500 Bloor
→ Food 0.126 LOW / Activity 0.381 MED + 5 click-to-verify); homelink suppressed; dock/topbar
clickable above the iframe; 1 (in-iframe) and Escape both switch lens + tear down the iframe;
panel restored on exit; 0 console errors.

Author: k2jac9

src/urbanos/kernel/static/os.html

@@ -73,6 +73,17 @@
       box-shadow: var(--shadow-3); }
     #panel.swap { animation: swap .28s ease; }
     @keyframes swap { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
+    /* The Risk lens embeds the full civic analyst full-bleed. z-index 5 keeps it BELOW the
+       dock + topbar (z 6/5) so the lens rail and help stay clickable; top:52px clears the
+       topbar, left:108px clears the dock. Created/removed by the safety lens / setLens. */
+    /* Explicit calc() size: an <iframe> is a replaced element, so width/height:auto would
+       resolve to its intrinsic 300×150 default — insets alone don't stretch it. */
+    #civ-embed { position: fixed; top: 52px; left: 108px; width: calc(100% - 108px);
+      height: calc(100% - 52px); border: 0; z-index: 5; background: var(--map-bg); }
+    /* While the embed is up, hide the shell's condensed panel (z 6 would otherwise float
+       over the iframe). The panel markup still ships in the JS source (test markers); the
+       embedded civic app provides the real Risk panel. */
+    body.risk-embed #panel { display: none; }
     /* .ptitle is an <h2> (per-lens section heading); the class keeps its visual size. */
     .ptitle { font-size: 18px; font-weight: 800; margin: 0 0 2px; color: var(--text-strong); }
     .psub { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
@@ -848,13 +859,20 @@ <h3>Appearance</h3>
             '<button class="gh" id="hot-btn" aria-pressed="false">◉ Risk hotspots</button></div>'+
           '<div id="hotbox"></div>'+
           '<h3 class="panel-h">Highest-risk addresses<span class="hint" style="text-transform:none;font-weight:400"> · ranked by most-elevated index</span></h3><ul id="addrlist">'+rows+'</ul>'+
-          '<div id="detail"><p class="hint">Pick a pin or address for its grounded risk read.</p></div>'+
-          // Drill-down to the full civic Risk view (same product, /civic/) — its
-          // free-text search, city briefing & 3D presentation aren't in this panel.
-          '<p class="hint" style="margin-top:14px">'+
-            '<a href="/civic/" style="color:var(--accent-link);font-weight:700;text-decoration:none">Open the full Risk view ↗</a>'+
-            ' — address search, city briefing &amp; 3D presentation</p>'
+          '<div id="detail"><p class="hint">Pick a pin or address for its grounded risk read.</p></div>'
         );
+        // The condensed panel above is kept as markup (a11y/test markers + a fallback if
+        // the embed fails) but is covered by the full civic analyst: the Risk lens embeds
+        // the real /civic/ app full-bleed (briefing + Presentation 3D + analyze/verify),
+        // so there's no subset. Same-origin relative src (stays offline-safe); appended to
+        // <body> (not #panel) so paint() can't clobber it; lazily created once.
+        if (!document.getElementById('civ-embed')) {
+          const f = document.createElement('iframe');
+          f.id = 'civ-embed'; f.src = '/civic/?embed=1';
+          f.title = 'Risk lens — full civic analyst';
+          document.body.appendChild(f);
+        }
+        document.body.classList.add('risk-embed');   // hides #panel under the iframe; torn down in setLens
         panel.querySelector('#addrlist').addEventListener('click', e => { const b = e.target.closest('button[data-label]'); if (b) analyzeAddress(b.dataset.label); });
         panel.querySelectorAll('.gh[data-label]').forEach(b => b.addEventListener('click', () => analyzeAddress(b.dataset.label)));
         const hb = document.getElementById('hot-btn'); if (hb) hb.addEventListener('click', () => toggleHotspots(hb));
@@ -974,6 +992,18 @@ <h3>Appearance</h3>
   function setLens(id) {
     if (LENS === id) return;
     LENS = id;
+    // Tear down the Risk-lens civic embed at this single chokepoint (covers click /
+    // keyboard / postMessage switch paths), so only one map/WebGL context is ever live
+    // and the panel's aria-live is restored before the next lens enters.
+    const emb = document.getElementById('civ-embed');
+    if (emb) {
+      emb.remove();
+      // Focus was inside the (now-removed) iframe — move it to the incoming lens's dock
+      // button so keyboard / screen-reader users aren't dropped to <body>.
+      const btn = document.querySelector('.lens[data-lens="' + id + '"]');
+      if (btn) try { btn.focus(); } catch (_) {}
+    }
+    document.body.classList.remove('risk-embed');
     // ADR-0026 Phase 2: cluster overlay belongs to the Safety lens — clear it on any
     // switch so hotspot circles never linger on the City/Flow map.
     HOTSPOTS_ON = false; vis('civ-clusters', false); vis('civ-clusters-lbl', false);
@@ -1207,6 +1237,14 @@ <h3>Appearance</h3>
     const id = LENS_KEYS[e.key];
     if (id && LENSES[id]) { setLens(id); e.preventDefault(); }
   });
+  // Keyboard bridge from the embedded Risk-lens iframe: parent-window keys don't fire while
+  // focus is inside the iframe, so the embedded /civic/ page postMessages 1–4 / Escape here.
+  // Strict same-origin check (message-injection guard).
+  addEventListener('message', e => {
+    if (e.origin !== location.origin || !e.data) return;
+    if (e.data.type === 'os-lens' && LENS_KEYS[e.data.key]) setLens(LENS_KEYS[e.data.key]);
+    else if (e.data.type === 'os-exit-risk') setLens('city');
+  });
 
   async function boot() {
     try {

src/urbanos/risk/api/static/map.html

@@ -240,6 +240,26 @@ <h2 id="addrhead" hidden>Browse addresses by risk</h2>
     maplibregl.addProtocol('pmtiles', protocol.tile);
     const PMTILES = `pmtiles://${location.origin}/static/toronto.pmtiles`;
 
+    // Embedded mode: this page runs full-bleed inside the UrbanOS shell's Risk lens
+    // (<iframe src="/civic/?embed=1">). Hide the home link (the shell's lens rail is the
+    // way back; a homelink here would nest the shell in itself), and bridge keyboard
+    // lens-switching to the parent (1–4 + Escape) since parent-window keys don't fire
+    // while focus is inside the iframe. Same-origin → postMessage to location.origin only.
+    const EMBED = new URLSearchParams(location.search).has('embed');
+    if (EMBED) {
+      document.querySelector('.homelink')?.setAttribute('hidden', '');
+      addEventListener('keydown', (e) => {
+        const t = e.target;
+        if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable)) return;
+        if (e.altKey || e.ctrlKey || e.metaKey) return;
+        if (['1', '2', '3', '4'].includes(e.key)) window.parent.postMessage({ type: 'os-lens', key: e.key }, location.origin);
+        else if (e.key === 'Escape') window.parent.postMessage({ type: 'os-exit-risk' }, location.origin);
+      });
+    }
+    // Reduced motion: CSS guards don't collapse MapLibre JS camera animations, so gate
+    // the Presentation fly/pitch moves on the OS setting (applies embedded + standalone).
+    const RM = (() => { try { return matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (_) { return false; } })();
+
     const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g,
       (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
     // Risk band: a non-color cue (shape + word) so risk isn't conveyed by color alone.
@@ -511,7 +531,7 @@ <h2 id="addrhead" hidden>Browse addresses by risk</h2>
                      'fill-extrusion-opacity': 0.85 } }, 'risk-pins');
         } catch (e) { /* basemap may lack a buildings layer */ }
       }
-      map.easeTo({ pitch: 55, bearing: -18, duration: 900 });
+      map.easeTo({ pitch: RM ? 0 : 55, bearing: RM ? 0 : -18, duration: RM ? 0 : 900 });
     }
     function exit3D() {
       clearFocus();
@@ -562,7 +582,7 @@ <h2 id="addrhead" hidden>Browse addresses by risk</h2>
       // its info card — the band-coloured pin dot already marks the spot.
       clearFocus();
       showBoard(row, d);
-      map.flyTo({ center: [row.lng, row.lat], zoom: 17.3, pitch: 64, bearing: -22, duration: 1200 });
+      map.flyTo({ center: [row.lng, row.lat], zoom: 17.3, pitch: RM ? 0 : 64, bearing: RM ? 0 : -22, duration: RM ? 0 : 1200 });
     }
     function setPresentation(on) {
       PRES = on;