κ-store: 12 shell blobs (aggregate 5061bc7afbef)

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+b/f6caa9eeead2c99deeb2cdb70b7e25bbaa2cf5c60555f5b4030ecf6b6d9efa51 filter=lfs diff=lfs merge=lfs -text

b/1f7746684dce60648c3d5ffbd4d289f862222ab4eb82c14c5f07239d1b47f5c6

@@ -0,0 +1,16 @@
+// messenger-skin.mjs — bakes the SLACK re-tone as the messenger default (aubergine chrome + a floating,
+// inset content pane; see the data-skin="slack" block in messenger-skins.css) and applies the hi-DPI /
+// high-FPS perf layer. No picker / no toggle. Additive + guarded. Escape hatch: set localStorage
+// "holo.skin" to graphite | warm | contrast | light (or "" to remove) to override the default.
+
+(function () {
+  if (!document.querySelector("link[data-holo-skins]")) {
+    const l = document.createElement("link"); l.rel = "stylesheet"; l.href = "/apps/holo-messenger/messenger-skins.css"; l.setAttribute("data-holo-skins", "1"); document.head.appendChild(l);
+  }
+  let skin = "slack";
+  try { const s = localStorage.getItem("holo.skin"); if (s) skin = s; } catch {}
+  if (skin) document.documentElement.setAttribute("data-skin", skin); else document.documentElement.removeAttribute("data-skin");
+  // remove any lingering picker + its persisted flag from earlier ?skins=1 sessions
+  try { localStorage.removeItem("holo.skins"); } catch {}
+  try { const p = document.querySelector(".holo-skin-pick"); if (p) p.remove(); } catch {}
+})();

b/38689d2013d1f64086bf523e77d557616cd702511c322e60ef15a5ebb325b6ad

@@ -0,0 +1,127 @@
+// holo-m1-boot.mjs — M1: INSTANT SERVERLESS BOOT. One self-verifying link boots the WHOLE messenger.
+//
+// A single web link that, opened in a COLD browser, brings up the entire Holo Messenger — shell + your
+// identity + Q — with ZERO origin servers in the delivery path (every shell byte is a content-addressed κ
+// object, served from cache/OPFS on repeat opens). The descriptor travels INSIDE the link (b64url JSON in
+// the URL fragment), exactly like holo-chat-link.mjs / holo-together.mjs: a bare browser verifies it LOCALLY
+// (Law L5: re-derive the κ), then boots. The κ is SHA-256 of the canonical PUBLIC fields — the shareable,
+// tamper-evident id. Any private pairing bearer is EXCLUDED from the κ (whoever holds the link may adopt it).
+//
+// This commits to the SHELL MANIFEST (the exact asset set the service worker precaches), so a tampered link
+// that points the boot at a different/injected asset set breaks integrity and is refused. Laws: L2 canonical,
+// L5 verify-by-re-derivation. Additive + fail-soft: if anything here throws, app.html's normal boot proceeds.
+
+export const BOOT_LINK_VERSION = 1;
+const ENTRY_PATH = "/apps/holo-messenger/app.html";
+
+// THE SHELL — the minimal asset set required to paint the messenger and reach interactive, and the single
+// source of truth the service worker precaches (messenger-sw.js mirrors these basenames; the M1 witness
+// asserts the two never drift). Q's brain, the bridges, and all media are DELIBERATELY absent: they are
+// deferred (never on the first-paint critical path), so the shell stays tiny and cache-resident.
+export const SHELL_MANIFEST = [
+  "/apps/holo-messenger/app.html",
+  "/apps/holo-messenger/_vendor/ui/chat-ui.bundle.js",
+  "/apps/holo-messenger/_vendor/ui/chat-ui.bundle.css",
+  "/apps/holo-messenger/holo-messenger-app.mjs",
+  "/apps/holo-messenger/messenger-shadcn-ui.mjs",
+  "/apps/holo-messenger/holo-messenger-weave.mjs",
+  "/apps/holo-messenger/messenger-skin.mjs",
+  "/apps/holo-messenger/messenger-skins.css",
+  "/apps/holo-messenger/messenger-sw-register.mjs",
+  "/apps/holo-messenger/holo-m1-boot.mjs",
+  "/apps/holo-messenger/mail/holo-mail-attach.mjs",
+  "/apps/holo-messenger/_vendor/wallpaper-default.jpg",
+];
+
+const _te = new TextEncoder();
+async function _sha256hex(s) { const h = await (globalThis.crypto || crypto).subtle.digest("SHA-256", _te.encode(s)); return [...new Uint8Array(h)].map((x) => x.toString(16).padStart(2, "0")).join(""); }
+function _b64urlEncode(obj) { const b = btoa(unescape(encodeURIComponent(JSON.stringify(obj)))); return b.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); }
+function _b64urlDecode(str) { const b = String(str).replace(/-/g, "+").replace(/_/g, "/"); return JSON.parse(decodeURIComponent(escape(atob(b)))); }
+
+// The shell manifest (shell-manifest.json, minted by _build/gen-shell-manifest.mjs) is the content hash of
+// every shell BYTE: [{ path, kappa=SHA-256(bytes) }]. In a browser we fetch it; in Node the caller passes it.
+export async function loadShellManifest() {
+  try {
+    if (typeof fetch === "function" && typeof location !== "undefined") {
+      const r = await fetch("/apps/holo-messenger/shell-manifest.json", { cache: "no-store" });
+      if (r && r.ok) return await r.json();
+    }
+  } catch {}
+  return null;
+}
+
+// The ONE hash the boot link commits: SHA-256 over the SORTED per-asset content κs. Any browser re-derives it
+// from shell-manifest.json → thereby verifies EVERY shell byte (Law L5). Recomputed from `assets`, never trusting
+// the manifest's self-declared `aggregate`, so a forged manifest fails. Empty (unverifiable) → no commitment.
+export async function shellAggregate(manifest) {
+  const m = manifest || (await loadShellManifest());
+  if (!m || !Array.isArray(m.assets) || !m.assets.length) return "";
+  return _sha256hex(m.assets.map((a) => String(a.kappa)).sort().join(","));
+}
+
+// canonical PUBLIC form — any private `pair` bearer is EXCLUDED so the κ is the shareable id. Commits to the
+// entry, the shell set, the display identity (so a tampered "this is <who>'s messenger" card breaks — anti-phish).
+function _canon(d) {
+  return [
+    "v" + (d.v | 0), d.kind || "boot", d.app || "holo-messenger", d.entry || ENTRY_PATH,
+    d.shell || "", d.name || "", d.truename || "", d.op || "",
+    String(d.created || 0), String(d.expires || 0),
+  ].join("␟");
+}
+
+// Build the one-link door for the whole messenger. `op`/`name`/`truename` are PUBLIC display identity (the
+// landing shows "resume <name>'s messenger"); `pair` is an optional bearer pairing payload (device-roam) and
+// is NOT part of the κ. Opening the link still auto-enrolls a sovereign identity unless a pair bearer is honored.
+export async function makeBootLink({ op = "", name = "", truename = "", pair = null, ttlSeconds = 30 * 24 * 3600, origin = null, nowMs = null, aggregate = null, manifest = null } = {}) {
+  const now = nowMs || Date.now();
+  const shell = aggregate || (await shellAggregate(manifest));      // commit the shell BYTES (aggregate content κ)
+  const d = {
+    v: BOOT_LINK_VERSION, kind: "boot", app: "holo-messenger", entry: ENTRY_PATH,
+    shell,
+    op: String(op || "").slice(0, 96), name: String(name || "").slice(0, 60), truename: String(truename || "").slice(0, 60),
+    created: now, expires: now + ttlSeconds * 1000,
+  };
+  if (pair) d.pair = pair;                         // bearer pairing payload — NOT part of the κ
+  d.kappa = await _sha256hex(_canon(d));
+  const payload = _b64urlEncode(d);
+  const org = origin || (typeof location !== "undefined" ? location.origin : "");
+  return { kappa: d.kappa, payload, descriptor: d,
+    https: `${org}${ENTRY_PATH}#m1=${payload}`,     // opens in ANY cold browser
+    holo: `holo://os${ENTRY_PATH}#m1=${payload}` }; // in-shell full surface
+}
+
+// parse a boot link (URL, holo:// form, `#m1=<payload>`, or bare payload) → { ok, descriptor, integrity, expired }.
+export async function parseBootLink(input, { nowMs = null, aggregate = null, manifest = null } = {}) {
+  let payload = String(input || "");
+  if (payload.includes("#")) payload = payload.split("#").pop();
+  payload = payload.replace(/^m1=/, "");
+  let d; try { d = _b64urlDecode(payload); } catch { return { ok: false, error: "unreadable boot link" }; }
+  if (!d || d.v !== BOOT_LINK_VERSION || d.kind !== "boot" || d.app !== "holo-messenger" || !d.kappa) return { ok: false, error: "not a valid messenger boot link" };
+  const integrity = (await _sha256hex(_canon(d))) === d.kappa;                     // Law L5: re-derive; tamper → false
+  const current = aggregate != null ? aggregate : (await shellAggregate(manifest));// THIS build's shell-byte aggregate
+  const shellMatches = !!current && d.shell === current;                           // link's shell BYTES must match (unverifiable → false)
+  const expired = !!(d.expires && (nowMs || Date.now()) > d.expires);
+  return { ok: true, descriptor: d, integrity, shellMatches, expired, aggregate: current };
+}
+
+// convenience: verify + return the boot descriptor only if it is safe to act on (integrity + shell + fresh).
+export async function resolveBootLink(input, opts = {}) {
+  const p = await parseBootLink(input, opts);
+  if (!p.ok) return { ok: false, reason: p.error };
+  if (!p.integrity) return { ok: false, reason: "tampered" };
+  if (!p.shellMatches) return { ok: false, reason: "shell-mismatch" };
+  if (p.expired) return { ok: false, reason: "expired" };
+  return { ok: true, descriptor: p.descriptor, pair: p.descriptor.pair || null };
+}
+
+export function describe(d) {
+  const who = (d && (d.name || d.truename)) || "someone";
+  return { headline: `Resume ${who}'s messenger`, cta: "Open" };
+}
+
+export function installM1Boot() {
+  if (typeof window === "undefined") return false;
+  window.HoloM1Boot = Object.assign(window.HoloM1Boot || {}, { version: BOOT_LINK_VERSION, SHELL_MANIFEST, makeBootLink, parseBootLink, resolveBootLink, describe, loadShellManifest, shellAggregate });
+  return true;
+}
+try { installM1Boot(); } catch {}

b/3946cf9e0a3bfb709b722ab949131b69f5670cbb75221f1c28701877ecdd4ec6

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Holo Messenger</title>
+<link rel="stylesheet" href="/apps/holo-messenger/_vendor/ui/chat-ui.bundle.css?v=ec9aea0c39ca">
+<style>html,body{height:100%;margin:0;background:#0b141a;color-scheme:dark}#root{height:100vh}</style>
+<link rel="preload" as="image" href="/apps/holo-messenger/_vendor/wallpaper-default.jpg" fetchpriority="high">
+</head><body>
+<div id="root"></div>
+<script type="module">
+  // ?v=N - bump on each deploy so the browser can never serve a stale cached bundle (the cause of a frozen/old build).
+  import "/apps/holo-messenger/_vendor/ui/chat-ui.bundle.js?v=c741295f6742";   // → window.HoloMessengerUI
+  // Opt-in: render the WhatsApp UX from STREAMING shadcn κ-components instead of the chatscope bundle.
+  // Additive — only takes over window.HoloMessengerUI.mount when ?ui=shadcn (or localStorage["holo.ui.shadcn"]="1");
+  // the default boot stays the untouched chatscope UI. Runs before boot() so it is fed the same live model.
+  import "/apps/holo-messenger/messenger-shadcn-ui.mjs";
+  import { boot } from "/apps/holo-messenger/holo-messenger-app.mjs?v=040b54338f22";
+  boot(document.getElementById("root")).catch(e => {
+    document.body.innerHTML = "<pre style='color:#f88;padding:16px;white-space:pre-wrap'>boot error: " + (e && e.stack || e) + "</pre>";
+  });
+  // Intelligent Inbox (holo-mail) - additive, feature-flagged OFF by default. Dynamic import + catch so it
+  // can NEVER block or break the messenger boot. Enable per-operator: localStorage["holo.mail.enabled"]="1".
+  import("/apps/holo-messenger/mail/holo-mail-attach.mjs").catch(() => {});
+  // HoloChat, woven into THIS messenger — one canonical surface, no separate overlay. Cards render natively
+  // in the bubbles; the composer "+" opens the unified tray (apps · Spaces · money · identity · prove).
+  // Additive + catch-guarded so it can never block boot. Enable: localStorage["holo.chat.enabled"]="1" or ?chat=1.
+  import("/apps/holo-messenger/holo-messenger-weave.mjs").catch(() => {});
+  // Colour re-tone picker (Default · Graphite · Warm · Contrast · Light) — colours only, all features
+  // intact. Gated: shows only with ?skins=1 or localStorage["holo.skins"]="1". Additive + catch-guarded.
+  import("/apps/holo-messenger/messenger-skin.mjs").catch(() => {});
+  // Asset cache (service worker) — repeat opens serve wallpaper/logos/bundle/css/js NETWORK-FREE. Caches
+  // only own-origin static assets (stale-while-revalidate); all dynamic/API/bridge/media traffic passes
+  // through untouched. Additive + catch-guarded. Escape hatch: open with ?nosw=1 to unregister.
+  import("/apps/holo-messenger/messenger-sw-register.mjs").catch(() => {});
+</script>
+</body></html>

b/4e8a770de63abc7d655780dad449eda292e54e62f96b7252ae978bbca40f1586

@@ -0,0 +1,256 @@
+/* messenger-skins.css — OPTIONAL colour re-tones, applied ONLY when <html> carries data-skin="…".
+ * Default (no attribute) is untouched, so this can never disturb the shipping look. Colours only — no
+ * layout — safe and fully reversible.
+ *
+ * The theme drives ~half its colour from --wa-* vars on .holo-wa-root and hardcodes the other half to the
+ * same values. This shared block re-points the major hardcoded surfaces back onto the vars; each skin then
+ * only remaps the vars and the whole surface re-tones consistently. */
+
+html[data-skin] .holo-wa-root { background: var(--wa-bg) !important; color: var(--wa-ink); }
+html[data-skin] .holo-wa-root .cs-main-container,
+html[data-skin] .holo-wa-root .cs-chat-container,
+html[data-skin] .holo-wa-root .cs-message-list { background: transparent; }
+html[data-skin] .holo-wa-root .cs-sidebar,
+html[data-skin] .holo-wa-root .holo-rail,
+html[data-skin] .holo-wa-root .cs-conversation-list { background: var(--wa-side) !important; }
+html[data-skin] .holo-wa-root .cs-conversation-header,
+html[data-skin] .holo-wa-root .holo-list-title,
+html[data-skin] .holo-wa-root .cs-message-input,
+html[data-skin] .holo-wa-root .holo-composer { background: var(--wa-head) !important; }
+html[data-skin] .holo-wa-root .cs-search,
+html[data-skin] .holo-wa-root .holo-wp-search,
+html[data-skin] .holo-wa-root .cs-message-input__content-editor-wrapper,
+html[data-skin] .holo-wa-root .cs-message-input__content-editor { background: color-mix(in srgb, var(--wa-head) 78%, var(--wa-bg)) !important; color: var(--wa-ink) !important; }
+html[data-skin] .holo-wa-root .cs-conversation:hover,
+html[data-skin] .holo-wa-root .cs-conversation.cs-conversation--active { background: var(--wa-head) !important; }
+html[data-skin] .holo-wa-root .cs-conversation__name,
+html[data-skin] .holo-wa-root .cs-conversation-header__user-name { color: var(--wa-ink) !important; }
+html[data-skin] .holo-wa-root .cs-conversation__info,
+html[data-skin] .holo-wa-root .cs-conversation__last-sender,
+html[data-skin] .holo-wa-root .cs-conversation-header__info { color: var(--wa-dim) !important; }
+html[data-skin] .holo-wa-root .cs-message--incoming .cs-message__content { background: var(--wa-in) !important; color: var(--wa-ink) !important; }
+html[data-skin] .holo-wa-root .cs-message--outgoing .cs-message__content { background: var(--wa-out) !important; }
+html[data-skin] .holo-wa-root .cs-message__content { color: var(--wa-ink); }
+html[data-skin] .holo-wa-root .holo-rail-btn.on,
+html[data-skin] .holo-wa-root .holo-rail-net.on,
+html[data-skin] .holo-wa-root .holo-catchup-pill { color: var(--wa-accent) !important; }
+html[data-skin] .holo-wa-root .holo-c-send,
+html[data-skin] .holo-wa-root .cs-button--send { background: var(--wa-accent) !important; }
+
+/* ── cooler / graphite ── */
+html[data-skin="graphite"] .holo-wa-root { --wa-bg:#0d1117; --wa-side:#12171e; --wa-head:#1c232c; --wa-in:#1c232c; --wa-out:#1f4a55; --wa-ink:#e6eaf0; --wa-dim:#8b96a3; --wa-accent:#4ab3d4; --wa-line:#222a34; }
+/* ── warmer ── */
+html[data-skin="warm"] .holo-wa-root { --wa-bg:#14100c; --wa-side:#1b1611; --wa-head:#271f18; --wa-in:#271f18; --wa-out:#4d3f1f; --wa-ink:#efe8df; --wa-dim:#a89a88; --wa-accent:#e0a53c; --wa-line:#2c241b; }
+/* ── higher contrast ── */
+html[data-skin="contrast"] .holo-wa-root { --wa-bg:#000000; --wa-side:#0a0a0a; --wa-head:#181818; --wa-in:#1d1d1d; --wa-out:#00805e; --wa-ink:#ffffff; --wa-dim:#a6adb4; --wa-accent:#00e08a; --wa-line:#2a2a2a; }
+/* ── light mode (experimental: some deep-hardcoded text may stay dark) ── */
+html[data-skin="light"] .holo-wa-root { --wa-bg:#d7dce1; --wa-side:#ffffff; --wa-head:#f0f2f5; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-ink:#111b21; --wa-dim:#54656f; --wa-accent:#008069; --wa-line:#e4e8ec; }
+html[data-skin="light"] .holo-wa-root .cs-message__content { color: #111b21 !important; }
+html[data-skin="light"] .holo-wa-root .cs-message-list { background: var(--wa-bg) !important; background-image: none !important; }
+html[data-skin="light"] .holo-wa-root .holo-wp-tile { background-image: none !important; }
+
+/* ────────────────────────────────────────────────────────────────────────────────────────────────
+ * HI-DPI + HIGH-FPS layer (always on, colour-independent). The honest "8K/retina" story: a DOM/CSS UI
+ * is ALREADY resolution-independent — text and the SVG icons are vectors, so on a retina/4K/8K panel it
+ * renders at the display's native device pixels with zero extra work (no bitmaps to upscale). What we
+ * actually tune here is smoothness + latency:
+ *   • content-visibility skips rendering/layout of off-screen chat rows → a huge list scrolls at the
+ *     display's full refresh (60/120Hz) and first paint is near-instant (browser does O(visible) work).
+ *   • the scrollers are promoted to their own GPU layer so scrolling never touches the main thread.
+ *   • crisp text rasterisation + high-quality image scaling for hi-DPI. */
+.holo-wa-root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
+.holo-wa-root .cs-conversation { content-visibility: auto; contain-intrinsic-size: auto 72px; }
+.holo-wa-root .cs-message { content-visibility: auto; contain-intrinsic-size: auto 44px; }
+.holo-wa-root .cs-conversation-list,
+.holo-wa-root .cs-message-list .scrollbar-container,
+.holo-wa-root .cs-message-list__scroll-wrapper { will-change: scroll-position; transform: translateZ(0); backface-visibility: hidden; overflow-anchor: auto; }
+.holo-wa-root .cs-avatar img, .holo-wa-root .holo-av-real, .holo-wa-root .holo-media-el img { image-rendering: auto; }
+.holo-wa-root .holo-media-el img, .holo-wa-root .cs-message img { image-rendering: -webkit-optimize-contrast; }
+@media (min-resolution: 1.5dppx) { .holo-wa-root { text-rendering: geometricPrecision; } }
+
+/* floating skin picker */
+.holo-skin-pick { position: fixed; right: 16px; bottom: 86px; z-index: 90; display: flex; gap: 4px; align-items: center; background: #0b141aee; border: 1px solid #2a3942; border-radius: 999px; padding: 5px; backdrop-filter: blur(10px); font: 12.5px ui-sans-serif, system-ui, sans-serif; box-shadow: 0 8px 30px #0007; }
+.holo-skin-pick button { background: transparent; border: 0; color: #aebac1; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
+.holo-skin-pick button:hover { background: #ffffff14; color: #e9edef; }
+.holo-skin-pick button.on { background: #00a884; color: #0b141a; font-weight: 600; }
+
+/* instant wallpaper */
+/* An inline low-res earth paints INSTANTLY (zero network — it ships in this CSS) as the chat-pane
+ * backdrop; the full 2560px wallpaper is preloaded (see app.html) and covers it the moment it decodes.
+ * So the pane is never empty and there is no visible load. */
+html[data-skin] .holo-wa-root .cs-chat-container { background: var(--wa-bg) url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDABQODxIPDRQSERIXFhQYHzMhHxwcHz8tLyUzSkFOTUlBSEZSXHZkUldvWEZIZoxob3p9hIWET2ORm4+AmnaBhH//2wBDARYXFx8bHzwhITx/VEhUf39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f3//wAARCAAgADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCAR+1SLHVaPUYm2Zyp/jyOB9KE1AbzgjPXaRgAf41pdisjQSL2/SphDx0/Sq8epW64zknuBV6O+s3XKzJ9CcGk5tFciZGIT6fpT1h+YZx+VTC5tuomT880yTUdNgI8ycF89EXJqPavoP2aW5ya28f8bMT9cVIsVqDyCfq1VPtPIOwgfWpDcKFyvzH8q1ujKzL8bWynAiT8RmpGmTsiAfSs0XR/5aKOem3mnrdkcBGz+FF0Go6aW6ZiEwF/6ZjH61XNvdH/AJZnn3qc3rFdrQMwqP7bcKP3cSj2C0tB3Z//2Q==") center center / cover no-repeat !important; }
+html[data-skin] .holo-wa-root .cs-message-list { transition: background-image .25s ease; }
+
+/* ────────────────────────────────────────────────────────────────────────────────────────────────
+ * SLACK skin — data-skin="slack". Unlike the colour-only re-tones above, this one also does LAYOUT: the
+ * Slack "window envelope". An aubergine chrome (far-left rail + channel sidebar) wraps a content pane that
+ * floats as a rounded island inset by an EVEN margin on ALL FOUR sides — the darker chrome shows through
+ * every gap (top, right, bottom, AND a left gutter between sidebar and pane), with rounded corners + a soft
+ * shadow for depth. Placed at end-of-file so source order beats the base skin block AND the wallpaper rule
+ * above (equal specificity → later wins); every rule carries `.holo-wa-root` to match the base depth.
+ *
+ * Two coupling facts make the float robust: (1) the composer is a position:absolute overlay on .holo-main
+ * whose `left` is CSS `34%` — the SAME 34% as the sidebar's flex-basis — so re-anchoring it to
+ * `calc(34% + gap)` keeps it glued to the gapped pane at every window width, no JS. (2) the bundle gives the
+ * pane height:100%, which ignores margin and overflows; `height:auto` + flex:1 1 auto lets the even margin
+ * actually shrink it. ALL geometry lives in the ≥900px media query so the narrow/mobile single-column layout
+ * (sidebar collapses, composer full-bleed) is left exactly as the bundle intends. Colours + margins only,
+ * fully reversible, every feature intact. */
+html[data-skin="slack"] .holo-wa-root {
+  --wa-bg:#150E1A; --wa-side:#2A1530; --wa-head:#1B1B1F; --wa-in:#26262B; --wa-out:#3A2140;
+  --wa-ink:#E9E5ED; --wa-dim:#A99DB4; --wa-accent:#C6A6E6; --wa-line:#ffffff12;
+  --slk-pane:#1B1B1F; --slk-hi:#5C2D66; --slk-hover:#3A2140; --slk-gap:10px;
+  background: var(--wa-bg) !important;
+}
+/* chrome behind the floating pane (the colour seen in the inset margin/gutter) */
+html[data-skin="slack"] .holo-wa-root.holo-wa-root,
+html[data-skin="slack"] .holo-wa-root .cs-main-container { background: var(--wa-bg) !important; }
+/* the WebGPU wallpaper backdrop is off in Slack — the pane is a flat surface */
+html[data-skin="slack"] .holo-wa-root .holo-backdrop { display: none !important; }
+/* far-left workspace rail: darkest aubergine */
+html[data-skin="slack"] .holo-wa-root .holo-rail { background:#1C0E22 !important; border-right:1px solid #ffffff10; }
+html[data-skin="slack"] .holo-wa-root .holo-rail-btn.on,
+html[data-skin="slack"] .holo-wa-root .holo-rail-net.on { color: var(--wa-accent) !important; }
+/* cohesive aubergine sidebar (title/chips/catch-up all share the sidebar surface) */
+html[data-skin="slack"] .holo-wa-root .holo-list-head,
+html[data-skin="slack"] .holo-wa-root .holo-list-title,
+html[data-skin="slack"] .holo-wa-root .holo-chips,
+html[data-skin="slack"] .holo-wa-root .holo-catchup { background: var(--wa-side) !important; }
+html[data-skin="slack"] .holo-wa-root .cs-search { background:#1F0F24 !important; border:1px solid #ffffff12 !important; color:var(--wa-ink) !important; }
+/* conversation rows = inset rounded pills (Slack). Inset applied to EVERY row so hover/active only swap the
+ * background — no layout jump. Active carries the highlight + white text. */
+html[data-skin="slack"] .holo-wa-root .cs-conversation { margin:1px 8px !important; border-radius:8px !important; }
+html[data-skin="slack"] .holo-wa-root .cs-conversation:hover { background: var(--slk-hover) !important; }
+html[data-skin="slack"] .holo-wa-root .cs-conversation.cs-conversation--active { background: var(--slk-hi) !important; color:#fff !important; }
+html[data-skin="slack"] .holo-wa-root .cs-conversation.cs-conversation--active * { color:#fff !important; }
+/* pane + its inner surfaces (colours are width-independent; the float geometry is gated below) */
+html[data-skin="slack"] .holo-wa-root .cs-chat-container { background: var(--slk-pane) !important; }
+html[data-skin="slack"] .holo-wa-root .cs-message-list { background: var(--slk-pane) !important; background-image: none !important; }
+html[data-skin="slack"] .holo-wa-root .cs-conversation-header { background: var(--slk-pane) !important; border-bottom: 1px solid #ffffff12; }
+html[data-skin="slack"] .holo-wa-root .holo-composer { background: var(--slk-pane) !important; border-top: 1px solid #ffffff12; }
+html[data-skin="slack"] .holo-wa-root .holo-c-input { background:#26262B !important; border:1px solid #ffffff14 !important; border-radius:8px !important; color:var(--wa-ink) !important; }
+
+/* ── the floating envelope (desktop only; narrow layout keeps the bundle's single-column defaults) ── */
+@media (min-width: 900px) {
+  html[data-skin="slack"] .holo-wa-root .cs-chat-container {
+    flex: 1 1 auto !important; min-width: 0; height: auto !important; align-self: stretch;
+    margin: var(--slk-gap) !important;                 /* even inset on all four sides */
+    border-radius: 12px; overflow: hidden;
+    box-shadow: 0 0 0 1px #00000055, 0 14px 38px #00000085;
+  }
+  /* glue the composer to the gapped pane: left tracks the sidebar's 34%, plus the gutter */
+  html[data-skin="slack"] .holo-wa-root .holo-composer {
+    left: calc(34% + var(--slk-gap)) !important; right: var(--slk-gap) !important;
+    bottom: var(--slk-gap) !important; width: auto !important; border-radius: 0 0 12px 12px;
+  }
+}
+
+/* ── THEATRE MODE — full-screen wallpaper + glass, under the Slack skin ────────────────────────────
+ * Theatre (`.theater`, toggle ⌘/Ctrl+\) collapses the rail + sidebar and floats ONE conversation over a
+ * FULL-BLEED wallpaper as centred glass capsules (see whatsapp-theme.css "Stage 6"). Three things make it
+ * immersive + fast here:
+ *   1. WALLPAPER edge-to-edge — a static image on the root (the whole viewport), NOT the WebGPU `.holo-backdrop`
+ *      canvas (which we turn OFF: it was rendering at opacity:0, all cost no pixels). The image is the one
+ *      app.html already preloads, so it paints with zero extra latency; every layer above it is transparent.
+ *   2. LIGHT + CLEAR — the heavy radial vignette + hue-tint is replaced by a soft top/bottom legibility scrim
+ *      only, so the middle of the wallpaper stays bright and open.
+ *   3. STUNNING GLASS, CHEAP — real backdrop-blur is limited to the TWO capsules (header + composer); message
+ *      bubbles are plain translucent fills (no per-bubble blur) so a long thread never janks input.
+ * Selector depth `…"slack"] .holo-wa-root.theater .X` = (0,4,1) beats the base slack rules (0,3,1) and
+ * theatre's own (0,3,0); transforms are left untouched so theatre's centring + auto-quiet fade keep animating. */
+html[data-skin="slack"] .holo-wa-root.theater {
+  /* FOLLOW the operator's chosen wallpaper (--wp-img, set from localStorage holo-messenger/wallpaper-src),
+     falling back to the preloaded default when unset. `none` (the "plain" mode) is honoured → dark. */
+  background: #0b0f14 var(--wp-img, url("/apps/holo-messenger/_vendor/wallpaper-default.jpg")) center center / cover no-repeat !important;
+}
+html[data-skin="slack"] .holo-wa-root.theater .holo-backdrop { display: none !important; }                 /* WebGPU canvas off → lower latency */
+html[data-skin="slack"] .holo-wa-root.theater .cs-chat-container {
+  background: transparent !important; margin: 0 !important; border-radius: 0 !important;
+  overflow: visible !important; box-shadow: none !important;                                               /* full-bleed, no slack box */
+}
+/* transparent reading column, aligned to the SAME 812px as the chrome so bubbles line up with the composer */
+html[data-skin="slack"] .holo-wa-root.theater .cs-message-list {
+  background: transparent !important;
+  padding-left: max(20px, calc((100% - 812px) / 2)) !important;
+  padding-right: max(20px, calc((100% - 812px) / 2)) !important;
+}
+/* clear + light: only a soft top/bottom scrim for legibility; the wallpaper stays bright in the middle */
+html[data-skin="slack"] .holo-wa-root.theater .holo-main::before {
+  background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, transparent 16%, transparent 80%, rgba(0,0,0,.42) 100%) !important;
+}
+/* stunning glass capsules — vivid backdrop-blur, crisp edge, top highlight (only these two get real blur) */
+html[data-skin="slack"] .holo-wa-root.theater .cs-conversation-header,
+html[data-skin="slack"] .holo-wa-root.theater .holo-composer {
+  background: rgba(22,24,32,.44) !important;
+  -webkit-backdrop-filter: blur(30px) saturate(1.4) brightness(1.06) !important;
+  backdrop-filter: blur(30px) saturate(1.4) brightness(1.06) !important;
+  border: 1px solid rgba(255,255,255,.16) !important;
+  box-shadow: 0 14px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16) !important;
+}
+html[data-skin="slack"] .holo-wa-root.theater .holo-composer {
+  left: 50% !important; right: auto !important; width: min(calc(100% - 40px), 812px) !important;
+  bottom: 18px !important; border-radius: 18px !important;
+}
+/* bubbles: light translucent fills (no blur = no jank on long threads) */
+html[data-skin="slack"] .holo-wa-root.theater .cs-message--incoming .cs-message__content { background: rgba(28,28,36,.62) !important; }
+html[data-skin="slack"] .holo-wa-root.theater .cs-message--outgoing .cs-message__content { background: rgba(58,33,64,.60) !important; }
+
+/* ── FRAME-COLLAPSED — the immersive focus view (chats folded into the rail) ───────────────────────
+ * "Collapse chats into the rail" (`.holo-main.frame-collapsed`) folds the conversation list away and lets
+ * ONE conversation take the whole frame. The slack skin otherwise left it broken: the composer stayed pinned
+ * to `left:34%` (the vanished sidebar edge) so it floated stranded in the middle. Here we make it the SAME
+ * immersive treatment as theatre — full-screen wallpaper + glass capsules — but KEEP the rail as a clean
+ * glass nav (that's the whole point of this mode), and centre the header/composer/reading-column in the frame
+ * to the RIGHT of the rail so everything lines up.
+ *   · `:has(.holo-main.frame-collapsed)` puts the wallpaper on the ROOT (so it sits behind the rail too).
+ *   · `:not(.theater)` so theatre (which hides the rail) keeps full ownership when both happen to be on.
+ *   · Only 3 blur layers total (rail + header + composer); bubbles are plain translucent — stays responsive. */
+html[data-skin="slack"] .holo-wa-root:has(.holo-main.frame-collapsed):not(.theater) {
+  /* same as theatre: follow the operator's --wp-img, fall back to the preloaded default */
+  background: #0b0f14 var(--wp-img, url("/apps/holo-messenger/_vendor/wallpaper-default.jpg")) center center / cover no-repeat !important;
+}
+html[data-skin="slack"] .holo-wa-root:has(.holo-main.frame-collapsed):not(.theater) .holo-backdrop { display: none !important; }
+/* the left nav bar stays — a clean SOLID strip; the wallpaper covers the entire screen EXCEPT this rail */
+html[data-skin="slack"] .holo-wa-root:has(.holo-main.frame-collapsed):not(.theater) .holo-rail {
+  background: #17111D !important;
+  border-right: 1px solid rgba(255,255,255,.08) !important;
+}
+/* transparent full-bleed frame + reading column centred in the space right of the rail */
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .cs-chat-container {
+  background: transparent !important; margin: 0 !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important;
+}
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .cs-message-list {
+  background: transparent !important;
+  padding-left: max(20px, calc((100% - 812px) / 2)) !important;
+  padding-right: max(20px, calc((100% - 812px) / 2)) !important;
+}
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed::before {
+  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
+  background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, transparent 16%, transparent 80%, rgba(0,0,0,.42) 100%);
+}
+/* glass header + composer, centred in the frame (the rail is the nav, the frame is everything right of it) */
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .cs-conversation-header,
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .holo-composer {
+  background: rgba(22,24,32,.44) !important;
+  -webkit-backdrop-filter: blur(30px) saturate(1.4) brightness(1.06) !important;
+  backdrop-filter: blur(30px) saturate(1.4) brightness(1.06) !important;
+  border: 1px solid rgba(255,255,255,.16) !important;
+  box-shadow: 0 14px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16) !important;
+}
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .cs-conversation-header {
+  margin: 14px auto 0 !important; max-width: 812px !important; width: calc(100% - 40px) !important; border-radius: 16px !important;
+}
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .holo-composer {
+  left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
+  width: min(calc(100% - 40px), 812px) !important; bottom: 18px !important; border-radius: 18px !important;
+}
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .cs-message--incoming .cs-message__content { background: rgba(28,28,36,.62) !important; }
+html[data-skin="slack"] .holo-wa-root:not(.theater) .holo-main.frame-collapsed .cs-message--outgoing .cs-message__content { background: rgba(58,33,64,.60) !important; }
+
+/* ── BASE-LAYER fix: composer alignment in frame-collapsed, for ANY skin ───────────────────────────
+ * Skin-agnostic (this file is loaded regardless of the active skin). The bundle pins the composer to
+ * `left:34%` — the sidebar's flex-basis — but frame-collapsed folds the sidebar to 0, so on every NON-slack
+ * skin (graphite/warm/contrast/light/none) the composer floated stranded in the middle. Align it to the
+ * full-bleed chat (left:0 = the rail's right edge; right:0 is already the base). `:not(.theater)` yields to
+ * theatre's own centred composer; slack's higher-specificity immersive rule above wins for the slack skin. */
+.holo-wa-root:not(.theater) .holo-main.frame-collapsed .holo-composer { left: 0 !important; }

b/6bbf54f41980838ea8cf1c08123b7aa6e9820eeb58da964cd50e875b2893faef

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Holo Messenger</title>
+<link rel="stylesheet" href="/apps/holo-messenger/_vendor/ui/chat-ui.bundle.css?v=a0c782c6ebee">
+<style>html,body{height:100%;margin:0;background:#0b141a;color-scheme:dark}#root{height:100vh}</style>
+<link rel="preload" as="image" href="/apps/holo-messenger/_vendor/wallpaper-default.jpg" fetchpriority="high">
+</head><body>
+<div id="root"></div>
+<script type="module">
+  // ?v=N - bump on each deploy so the browser can never serve a stale cached bundle (the cause of a frozen/old build).
+  import "/apps/holo-messenger/_vendor/ui/chat-ui.bundle.js?v=11d9ba0d372a";   // → window.HoloMessengerUI
+  // Opt-in: render the WhatsApp UX from STREAMING shadcn κ-components instead of the chatscope bundle.
+  // Additive — only takes over window.HoloMessengerUI.mount when ?ui=shadcn (or localStorage["holo.ui.shadcn"]="1");
+  // the default boot stays the untouched chatscope UI. Runs before boot() so it is fed the same live model.
+  import "/apps/holo-messenger/messenger-shadcn-ui.mjs";
+  import { boot } from "/apps/holo-messenger/holo-messenger-app.mjs?v=076005621416";
+  boot(document.getElementById("root")).catch(e => {
+    document.body.innerHTML = "<pre style='color:#f88;padding:16px;white-space:pre-wrap'>boot error: " + (e && e.stack || e) + "</pre>";
+  });
+  // Intelligent Inbox (holo-mail) - additive, feature-flagged OFF by default. Dynamic import + catch so it
+  // can NEVER block or break the messenger boot. Enable per-operator: localStorage["holo.mail.enabled"]="1".
+  import("/apps/holo-messenger/mail/holo-mail-attach.mjs").catch(() => {});
+  // HoloChat, woven into THIS messenger — one canonical surface, no separate overlay. Cards render natively
+  // in the bubbles; the composer "+" opens the unified tray (apps · Spaces · money · identity · prove).
+  // Additive + catch-guarded so it can never block boot. Enable: localStorage["holo.chat.enabled"]="1" or ?chat=1.
+  import("/apps/holo-messenger/holo-messenger-weave.mjs").catch(() => {});
+  // Colour re-tone picker (Default · Graphite · Warm · Contrast · Light) — colours only, all features
+  // intact. Gated: shows only with ?skins=1 or localStorage["holo.skins"]="1". Additive + catch-guarded.
+  import("/apps/holo-messenger/messenger-skin.mjs").catch(() => {});
+  // Asset cache (service worker) — repeat opens serve wallpaper/logos/bundle/css/js NETWORK-FREE. Caches
+  // only own-origin static assets (stale-while-revalidate); all dynamic/API/bridge/media traffic passes
+  // through untouched. Additive + catch-guarded. Escape hatch: open with ?nosw=1 to unregister.
+  import("/apps/holo-messenger/messenger-sw-register.mjs").catch(() => {});
+</script>
+</body></html>

b/8bd23f0acbaf00093b9daedeac08c9513ccbe0a8647b91eb104bfd27175682a8

@@ -0,0 +1,30 @@
+// messenger-sw-register.mjs — eagerly register the ONE messenger service worker (holo-sw.js: Reach push +
+// M1 shell cache) on boot, so repeat opens are network-free even before push permission is granted. Additive
+// + catch-guarded so it can never block boot. Escape hatch: open with ?nosw=1 to unregister it.
+//
+// holo-sw.js is ALSO registered by the Reach push flow (holo-push.mjs) — same script, same {type:module}, same
+// dir scope, so the two calls collapse to one registration (idempotent). We register here too because caching
+// must not wait on push. We also retire any stale competing worker (the old messenger-sw.js) at this scope.
+
+(async () => {
+  if (!("serviceWorker" in navigator)) return;
+  try {
+    const u = new URL(location.href);
+    if (u.searchParams.get("nosw") === "1") {
+      for (const r of await navigator.serviceWorker.getRegistrations()) {
+        if ((r.scope || "").includes("/apps/holo-messenger/")) await r.unregister();
+      }
+      console.log("[msgr-sw] unregistered (nosw=1)");
+      return;
+    }
+    // retire the old competing cache-worker if a previous build left it controlling this scope.
+    try {
+      for (const r of await navigator.serviceWorker.getRegistrations()) {
+        const s = (r.active && r.active.scriptURL) || (r.installing && r.installing.scriptURL) || (r.waiting && r.waiting.scriptURL) || "";
+        if (s.includes("/messenger-sw.js")) { await r.unregister(); console.log("[msgr-sw] retired stale messenger-sw.js"); }
+      }
+    } catch {}
+    await navigator.serviceWorker.register("/apps/holo-messenger/holo-sw.js", { type: "module", scope: "/apps/holo-messenger/" });
+    console.log("[msgr-sw] one worker active (push + shell cache) — repeat opens serve the shell network-free");
+  } catch (e) { /* never block boot */ }
+})();

b/9e602f8270c163a794c8e1b9d455569a2069c15e2f7db955ded05659b326567b

@@ -0,0 +1,196 @@
+// holo-mail-attach.mjs - the in-app entry. Loaded additively by app.html; mounts the Intelligent Inbox
+// (holo-mail-ui) over the REAL engine (email-bridge provider + on-device Q + holo-strand) as a full-screen
+// overlay. When no mailbox is linked yet, it shows the one-tap ONBOARDING first. FEATURE-FLAGGED OFF by
+// default: with the flag off nothing is added to the page, so it can't affect the messenger's paint.
+//   flag on:  localStorage.setItem("holo.mail.enabled","1")   - or open with ?mail=1
+//   manual:   window.HoloMailOpen()   (always available)
+
+import { makeMailProvider } from "/apps/holo-messenger/mail/holo-mail-provider.mjs";
+import { makeMultiProvider } from "/apps/holo-messenger/mail/holo-mail-multi.mjs";
+import { attachMailEngine } from "/apps/holo-messenger/mail/holo-mail-engine.mjs";
+import { mountMailUI } from "/apps/holo-messenger/mail/holo-mail-ui.mjs";
+import { makeOnboarding } from "/apps/holo-messenger/mail/holo-mail-onboard.mjs";
+import { mountOnboard } from "/apps/holo-messenger/mail/holo-mail-onboard-ui.mjs";
+import { makeMailHealth } from "/apps/holo-messenger/mail/holo-mail-health.mjs";
+
+const BASE = "http://127.0.0.1:8793";              // the primary bridge (account #1). More = more ports.
+const SUPERVISOR = "http://127.0.0.1:8795";        // email-supervisor: spawns/owns one bridge per mailbox
+const ACCOUNTS_KEY = "holo.mail.accounts";
+// Each account is its own email-bridge instance on its own port (isolated state dir), spawned by the
+// supervisor. The list is cached in localStorage so buildProvider() stays synchronous; the supervisor is the
+// source of truth and we refresh from it whenever the inbox opens. The provider is ALWAYS the unified
+// multi-provider, so the engine/UI work over one or many mailboxes unchanged.
+const DEFAULT_ACCOUNTS = [{ id: "default", label: "", base: BASE }];
+function loadAccounts() {
+  try { const a = JSON.parse(localStorage.getItem(ACCOUNTS_KEY) || "null"); if (Array.isArray(a) && a.length) return a; } catch {}
+  return DEFAULT_ACCOUNTS.slice();
+}
+function saveAccounts(list) { try { localStorage.setItem(ACCOUNTS_KEY, JSON.stringify(list)); } catch {} }
+const primaryBase = () => (loadAccounts()[0] || { base: BASE }).base;
+const flagOn = () => { try { return localStorage.getItem("holo.mail.enabled") === "1" || /(?:^|[?&])mail=1(?:&|$)/.test(location.search); } catch { return false; } };
+
+function buildProvider() {
+  return makeMultiProvider({ accounts: loadAccounts().map((a) => ({ id: a.id, label: a.label, provider: makeMailProvider({ base: a.base }) })) });
+}
+
+// the supervisor's control API (loopback). Absent in the web preview / no-host dev - every call fails soft.
+function supervisor(base = SUPERVISOR) {
+  const j = async (p, init) => { const r = await fetch(base + p, init); if (!r.ok) throw new Error(`${p} → ${r.status}`); return r.json(); };
+  return {
+    reachable: async () => { try { await j("/health"); return true; } catch { return false; } },
+    accounts: () => j("/accounts"),
+    add: (label) => j("/accounts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ label }) }),
+    remove: (id) => j("/accounts/" + encodeURIComponent(id), { method: "DELETE" }),
+  };
+}
+// pull the authoritative account list from the supervisor into the local cache (so buildProvider sees it).
+async function syncAccountsFromSupervisor() {
+  try {
+    const rows = await supervisor().accounts();
+    if (Array.isArray(rows) && rows.length) saveAccounts(rows.map((r) => ({ id: r.id, label: r.label || "", base: r.base })));
+    return rows;
+  } catch { return null; }   // supervisor down → keep whatever's cached (single default account still works)
+}
+
+// Account management surface. add() asks the supervisor to spawn a fresh bridge, then walks the user through
+// linking THAT mailbox; it then joins the unified inbox. Fallback (no supervisor): register a manual port.
+if (typeof window !== "undefined") window.HoloMailAccounts = {
+  list: () => loadAccounts(),
+  refresh: () => syncAccountsFromSupervisor(),
+  async add({ label = "", port, base } = {}) {
+    if (await supervisor().reachable()) {
+      const acct = await supervisor().add(label);                    // spawns the bridge on a fresh port
+      await syncAccountsFromSupervisor();
+      await addAccountFlow(acct.base);                               // link the new mailbox → unified inbox
+      return loadAccounts();
+    }
+    // no supervisor: accept a manually-started bridge (EMAIL_BRIDGE_PORT=<port> node email-bridge.mjs)
+    const b = base || (port ? `http://127.0.0.1:${port}` : null);
+    if (!b) throw new Error("no supervisor - pass a port of a manually-started bridge");
+    const list = loadAccounts();
+    if (!list.some((a) => a.base === b)) { list.push({ id: "acct" + (list.length + 1), label, base: b }); saveAccounts(list); }
+    await addAccountFlow(b);
+    return loadAccounts();
+  },
+  async remove(id) {
+    try { if (await supervisor().reachable()) await supervisor().remove(id); } catch {}
+    const list = loadAccounts().filter((a) => a.id !== id); saveAccounts(list.length ? list : DEFAULT_ACCOUNTS.slice());
+    if (overlay && overlay.style.display !== "none") openMail(true);
+    return loadAccounts();
+  },
+  reset() { try { localStorage.removeItem(ACCOUNTS_KEY); } catch {} return loadAccounts(); },
+};
+
+// drive onboarding for a specific (freshly-spawned, unlinked) mailbox, then return to the unified inbox.
+async function addAccountFlow(targetBase) {
+  if (!overlay) await openMail();
+  showOnboarding(buildProvider(), targetBase);
+}
+
+// a thin client over the loopback bridge (creds pass straight through, never stored here).
+function bridgeClient(base) {
+  const j = async (p, init) => { const r = await fetch(base + p, init); if (!r.ok) throw new Error(`${p} → ${r.status}`); return r.json(); };
+  return {
+    status: () => j("/status"),
+    login: (body) => j("/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }),
+  };
+}
+
+// build the inbox UI's `source` over the live provider corpus (filled by the bridge SSE stream).
+function buildSource(provider) {
+  return {
+    async ids() {
+      let list = []; try { list = await provider.listThreads(); } catch {}
+      const ids = (list || []).map((s) => s.jid).filter(Boolean);
+      if (ids.length) return ids;
+      const seen = new Set(); provider.allMessages().forEach((m) => seen.add(m.threadId)); return [...seen];
+    },
+    meta(jid) {
+      const msgs = provider.threadMessages(jid);
+      const inbound = msgs.find((m) => !m.fromMe) || msgs[0] || {};
+      const last = msgs[msgs.length - 1] || {};
+      return { who: inbound.fromName || inbound.from || jid, subj: last.subject || inbound.subject || "(no subject)",
+        account: provider.accountLabel ? provider.accountLabel(jid) : null,
+        msgs: msgs.map((m) => ({ fromMe: m.fromMe, fromName: m.fromName || m.from, from: m.from, date: m.date, text: m.text })) };
+    },
+  };
+}
+
+let overlay = null, host = null, banner = null, ui = null, health = null;
+
+const clearHost = () => { host.innerHTML = ""; host.className = ""; };
+
+function showBanner(state) {
+  if (!banner) return;
+  if (state && state.needsReconnect) {
+    banner.innerHTML = `<span>${state.message || "Reconnect needed."}</span><button class="hm-reconnect">Reconnect</button>`;
+    banner.style.display = "flex";
+    banner.querySelector(".hm-reconnect").onclick = () => { banner.style.display = "none"; showOnboarding(buildProvider()); };
+  } else { banner.style.display = "none"; }
+}
+
+function showOnboarding(provider, targetBase = primaryBase()) {
+  if (health) { health.stop(); health = null; }
+  clearHost();
+  const onboarding = makeOnboarding({ bridge: bridgeClient(targetBase) });
+  mountOnboard(host, { onboarding, onLinked: () => showInbox(buildProvider()) });   // rebuild → include newly-linked account
+}
+
+async function showInbox(provider) {
+  clearHost();
+  const engine = await attachMailEngine({ base: primaryBase(), provider });   // real Q + window.HoloStrand
+  try { await provider.connect(); } catch {}                          // live SSE stream (fans out to all accounts)
+  await new Promise((r) => setTimeout(r, 600));                       // let first messages land
+  ui = mountMailUI(host, { engine, source: buildSource(provider), foot: "On-device Q · sovereign κ",
+    onSend: (jid, text) => { try { provider.sendReply({ chat: jid, text }); } catch {} } });
+  // keep the mailbox healthy: a dropped/expired sign-in surfaces a reconnect banner instead of a dead inbox.
+  health = makeMailHealth({ bridge: bridgeClient(primaryBase()) });
+  health.start(showBanner);
+}
+
+export async function openMail(rebuild = false) {
+  if (overlay && rebuild) { closeMail(); overlay.remove(); overlay = null; }   // re-render over a changed account set
+  if (overlay) { overlay.style.display = "block"; return; }
+  overlay = document.createElement("div");
+  overlay.id = "holo-mail-overlay";
+  overlay.style.cssText = "position:fixed;inset:0;z-index:2147482000;background:#0b0d10";
+  banner = document.createElement("div");
+  banner.style.cssText = "display:none;position:absolute;top:0;left:0;right:0;z-index:2147483001;align-items:center;justify-content:center;gap:12px;padding:9px 14px;background:#e6462e;color:#fff;font:600 13px system-ui";
+  host = document.createElement("div"); host.style.cssText = "position:absolute;inset:0";
+  const closer = document.createElement("button"); closer.textContent = "✕"; closer.title = "Close (Esc)";
+  closer.style.cssText = "position:fixed;top:10px;right:14px;z-index:2147483002;border:0;background:#0006;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px";
+  closer.onclick = closeMail;
+  const reBtnCss = "border:0;background:#fff;color:#e6462e;border-radius:7px;padding:4px 12px;font:inherit;font-weight:700;cursor:pointer";
+  const style = document.createElement("style"); style.textContent = `.hm-reconnect{${reBtnCss}}`; overlay.appendChild(style);
+  overlay.append(host, banner, closer); document.body.appendChild(overlay);
+  document.addEventListener("keydown", escClose);
+
+  // refresh the account list from the supervisor (source of truth), then build the unified multi-provider.
+  await syncAccountsFromSupervisor();
+  const provider = buildProvider();
+  let st = null; try { st = await bridgeClient(primaryBase()).status(); } catch {}
+  if (st && st.linked) return showInbox(provider);
+  showOnboarding(provider);
+}
+
+export function closeMail() { if (health) { health.stop(); health = null; } if (overlay) overlay.style.display = "none"; }
+function escClose(e) { if (e.key === "Escape" && overlay && overlay.style.display !== "none" && !document.querySelector(".hm-scrim.on")) closeMail(); }
+
+function addLauncher() {
+  if (document.getElementById("holo-mail-launch")) return;
+  const b = document.createElement("button");
+  b.id = "holo-mail-launch"; b.title = "Holo Mail"; b.textContent = "✦";
+  b.style.cssText = "position:fixed;bottom:18px;right:18px;z-index:2147481000;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:18px;background:linear-gradient(135deg,#3b6ef5,#8a4fd6);box-shadow:0 6px 20px rgba(0,0,0,.35)";
+  b.onclick = openMail; document.body.appendChild(b);
+}
+
+if (typeof window !== "undefined") {
+  window.HoloMailOpen = openMail;
+  window.HoloMailClose = closeMail;
+  if (flagOn()) {
+    if (document.readyState !== "loading") addLauncher();
+    else document.addEventListener("DOMContentLoaded", addLauncher);
+  }
+}
+
+export default { openMail, closeMail };

b/9f62d9e0480be19a114542104a51a4e69da89a49c2960d75910ed0b57ea41c55

@@ -0,0 +1,141 @@
+// holo-messenger-weave.mjs — weave HoloChat INTO the real messenger (additive, no monolith edits).
+//
+// Why: there were two messengers — the beautiful one, and a plainer HoloChat surface behind "#". This
+//   dissolves the second into the first, so apps/money/identity/proofs live in the messenger you know.
+// How: the real UI is a closed React/chatscope app exposing only low-level globals, so we weave at the
+//   DOM seam (the pattern the app itself uses to turn pay/watch links into cards): a body-level observer
+//   upgrades card-text bubbles into native cards, and the composer attach "+" opens the unified App Tray.
+// What: in ANY conversation, a message whose text is a HoloChat card renders as that card; tapping "+"
+//   opens apps · Spaces · money · identity · prove, and a pick sends into the current conversation.
+
+import "/apps/holo-messenger/holo-app-tray.mjs";   // installs window.HoloApps (+ HoloOpen)
+
+const CONTENT = ".cs-message__content";
+const EDITOR = ".cs-message-input__content-editor";
+const SEND = ".cs-button--send";
+const ATTACH = ".cs-button--attachment";
+
+// drop a card into whatever conversation is open by POPULATING the real composer (reliable), then the user
+// presses Send — exactly like attaching in WhatsApp. Set the contenteditable's text + dispatch a native
+// `input` event so chatscope's React onInput registers it and enables Send; place the cursor at the end.
+function composerChannel() {
+  return {
+    send(text) {
+      const ed = document.querySelector(EDITOR); if (!ed) return;
+      ed.focus();
+      ed.textContent = String(text);
+      ed.dispatchEvent(new InputEvent("input", { bubbles: true, cancelable: true, inputType: "insertText", data: String(text) }));
+      try { const r = document.createRange(); r.selectNodeContents(ed); r.collapse(false); const sel = getSelection(); sel.removeAllRanges(); sel.addRange(r); } catch {}
+    },
+  };
+}
+
+// upgrade one message-content node: if its text is a HoloChat card, replace it with the rendered card.
+function upgrade(node) {
+  try {
+    if (!node || node.dataset.holoCard) return;
+    const A = window.HoloApps; if (!A || !A.isCard) return;
+    const text = (node.textContent || "").trim();
+    if (!A.isCard(text)) return;
+    node.dataset.holoCard = "1";
+    node.textContent = "";
+    node.appendChild(A.renderCard(text, composerChannel()));
+  } catch {}
+}
+
+// the composer attach "+" opens the unified tray (the modern "attach anything": apps, money, id, files).
+function hookAttach(btn) {
+  if (!btn || btn.dataset.holoAttach) return;
+  btn.dataset.holoAttach = "1";
+  btn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); if (window.HoloApps) window.HoloApps.pick(composerChannel()); }, true);
+}
+
+// a native "Spaces" rail at the top of the chat list — the familiar status/Communities strip. Placed in
+// the app's own .holo-convlist-wrap (a sibling of React's <ul>, so it survives re-renders); tap → open.
+const WRAP = ".holo-convlist-wrap";
+// one clean word per Space — no truncation, no ellipsis.
+const SPACE_SHORT = { "org.hologram.holospace.Web3": "Web3", "org.hologram.holospace.CreatorStudio": "Studio", "org.hologram.holospace.DevCockpit": "Dev", "org.hologram.holospace.AILab": "AI", "org.hologram.holospace.TrustCenter": "Trust", "org.hologram.holospace.EmulationArcade": "Arcade" };
+async function mountSpaces() {
+  try {
+    if (document.getElementById("holo-spaces")) return;
+    const list = document.querySelector(".cs-conversation-list"); if (!list) return;
+    const wrap = document.querySelector(WRAP) || list.parentElement; if (!wrap) return;
+    const A = window.HoloApps; if (!A || !A.catalog) return;
+    const spaces = (await A.catalog()).filter((x) => x.kind === "space");
+    if (!spaces.length || document.getElementById("holo-spaces")) return;
+    const open0 = (() => { try { return localStorage.getItem("holo.spaces.open") === "1"; } catch { return false; } })();
+    const sec = document.createElement("div"); sec.id = "holo-spaces";
+    sec.style.cssText = "flex:0 0 auto;border-bottom:1px solid #ffffff0d;background:transparent;";
+    const head = document.createElement("button"); head.type = "button";   // one quiet line by default; tap to reveal
+    head.style.cssText = "display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:#e9edef;cursor:pointer;padding:11px 16px;font:600 13px system-ui;opacity:.6;transition:opacity .15s ease;";
+    head.innerHTML = `<span style="font-size:15px;">✨</span><span style="flex:1;text-align:left;">Spaces</span><span class="hsp-chev" style="font-size:17px;line-height:1;opacity:.7;transition:transform .18s ease;">›</span>`;
+    head.onmouseenter = () => { head.style.opacity = "1"; }; head.onmouseleave = () => { head.style.opacity = ".6"; };
+    const rail = document.createElement("div"); rail.style.cssText = "display:" + (open0 ? "flex" : "none") + ";gap:18px;overflow-x:auto;padding:2px 16px 12px;scrollbar-width:none;";
+    for (const s of spaces) {
+      const nm = SPACE_SHORT[s.id] || s.name;
+      const b = document.createElement("button"); b.type = "button"; b.title = s.tagline || s.name;
+      b.style.cssText = "flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;color:#e9edef;cursor:pointer;";
+      b.innerHTML = `<span class="hsp-av" style="width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:${s.accent}12;box-shadow:inset 0 0 0 1px ${s.accent}44;transition:transform .15s ease,box-shadow .15s ease;">${s.glyph}</span>` +
+        `<span style="font-size:13px;font-weight:500;opacity:.62;">${nm}</span>`;
+      const av = b.querySelector(".hsp-av");
+      b.onmouseenter = () => { av.style.transform = "scale(1.08)"; av.style.boxShadow = "inset 0 0 0 1.5px " + s.accent + "aa"; b.lastChild.style.opacity = "1"; };
+      b.onmouseleave = () => { av.style.transform = "scale(1)"; av.style.boxShadow = "inset 0 0 0 1px " + s.accent + "44"; b.lastChild.style.opacity = ".62"; };
+      b.onclick = () => (window.HoloOpen ? window.HoloOpen(s) : A.openSpace(s));
+      rail.appendChild(b);
+    }
+    const chev = head.querySelector(".hsp-chev"); chev.style.transform = open0 ? "rotate(90deg)" : "rotate(0deg)";
+    head.onclick = () => {
+      const opening = rail.style.display === "none";
+      rail.style.display = opening ? "flex" : "none";
+      chev.style.transform = opening ? "rotate(90deg)" : "rotate(0deg)";
+      try { localStorage.setItem("holo.spaces.open", opening ? "1" : "0"); } catch {}
+    };
+    sec.append(head, rail); wrap.insertBefore(sec, list);
+  } catch {}
+}
+
+function scan(root) {
+  (root || document).querySelectorAll?.(CONTENT).forEach(upgrade);
+  (root || document).querySelectorAll?.(ATTACH).forEach(hookAttach);
+  mountSpaces();
+}
+
+// a light, reversible calm: soften the loudest native strip (the "need you" banner) and hide the rail's
+// scrollbar. Conservative — no functional element is hidden; remove #holo-calm to revert entirely.
+function injectCalm() {
+  if (document.getElementById("holo-calm")) return;
+  const st = document.createElement("style"); st.id = "holo-calm";
+  st.textContent = [
+    ".holo-catchup{opacity:.8;}",                     // soften the loud "need you" banner
+    ".holo-chip:not(.on){opacity:.62;font-weight:500;}", // quiet the inactive filters (all still work)
+    ".holo-chip{transition:opacity .15s ease;} .holo-chip:hover{opacity:1;}",
+    "#holo-spaces::-webkit-scrollbar{display:none;height:0;}",
+  ].join("");
+  (document.head || document.documentElement).appendChild(st);
+}
+
+let _obs = null;
+function start() {
+  if (_obs || typeof MutationObserver === "undefined") return;
+  injectCalm();
+  scan(document);
+  _obs = new MutationObserver((muts) => {
+    for (const m of muts) for (const n of m.addedNodes) {
+      if (n.nodeType !== 1) continue;
+      if (n.matches?.(CONTENT)) upgrade(n);
+      if (n.matches?.(ATTACH)) hookAttach(n);
+      n.querySelectorAll?.(CONTENT).forEach(upgrade);
+      n.querySelectorAll?.(ATTACH).forEach(hookAttach);
+      if (n.matches?.(".cs-conversation-list") || n.querySelector?.(".cs-conversation-list")) mountSpaces();
+    }
+  });
+  _obs.observe(document.body, { childList: true, subtree: true });
+}
+
+export function installWeave() { if (typeof document !== "undefined") { if (document.body) start(); else document.addEventListener("DOMContentLoaded", start); } return true; }
+
+if (typeof window !== "undefined") {
+  const flag = () => { try { return localStorage.getItem("holo.chat.enabled") === "1" || /(?:^|[?&])chat=1(?:&|$)/.test(location.search); } catch { return false; } };
+  if (flag()) installWeave();
+}
+export default { installWeave };

b/be803875bc9cdbbc411c84e5f8a407189d775d7d9fc3e72f0a28093f37414933

@@ -0,0 +1,380 @@
+// messenger-shadcn-ui.mjs — DROP-IN mount(el, model) rendering the Holo Messenger UX from STREAMING
+// shadcn κ-components, faithful to the real app (network app-rail · Q sidebar · triage · rich rows ·
+// Q chat pane · earth wallpaper · real SVG line icons), same contract as the chatscope bundle.
+//
+// ADDITIVE + SAFE: only takes over window.HoloMessengerUI.mount on opt-in (?ui=shadcn or
+// localStorage["holo.ui.shadcn"]="1"). Default boot stays the untouched chatscope UI.
+//
+// PERF: memoized rows · composer owns its draft · windowed thread (≤WINDOW rows in DOM; 1M chat stays tiny).
+// PASS 1 = faithful shell. Rich message content + action surface are Pass 2/3.
+
+const WANT = (() => {
+  try { const u = new URL(location.href);
+    if (u.searchParams.get("ui") === "shadcn") return true;
+    if (u.searchParams.get("ui") === "chatscope") return false;
+    return localStorage.getItem("holo.ui.shadcn") === "1";
+  } catch { return false; }
+})();
+
+const WINDOW = 80;
+const BRANDS = "/usr/share/brands/";
+const WP = "/apps/holo-messenger/_vendor/wallpaper-default.jpg";   // the earth photo (default)
+const NET_SLUG = { whatsapp: "whatsapp", telegram: "telegram", signal: "signal", imessage: "imessage", instagram: "instagram", messenger: "messenger", discord: "discord", slack: "slack", gmessages: "googlemessages", googlemessages: "googlemessages", x: "x", twitter: "x", linkedin: "linkedin", gmail: "gmail", email: "gmail", internal: null };
+
+const CSS = `
+  .wa{height:100dvh;display:grid;grid-template-columns:64px minmax(300px,.46fr) minmax(0,1fr);background:#0b141a;color:#e9edef;
+    font:14.5px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+  .wa *{box-sizing:border-box}
+  .wa svg{display:block}
+  .rail{background:#111b21;border-right:1px solid #0a1015;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0}
+  .rb{position:relative;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;cursor:pointer;color:#aebac1;transition:background .12s,color .12s;background:transparent;border:0}
+  .rb:hover{background:#202c33;color:#e9edef}.rb.on{background:#2a3942;color:#00a884}
+  .rb img{width:28px;height:28px;border-radius:8px;object-fit:cover}
+  .rb .dot{position:absolute;right:5px;bottom:5px;width:10px;height:10px;border-radius:50%;background:#00d95f;border:2px solid #111b21}
+  .rb .bdg{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:10px;background:#00a884;color:#0b141a;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid #111b21}
+  .rsep{width:28px;height:1px;background:#22303a;margin:3px 0}
+  .rgrow{flex:1 1 auto}
+  .rav{width:40px;height:40px;border-radius:50%;overflow:hidden;cursor:pointer;background:radial-gradient(circle at 35% 30%,#7cf0c8,#2b9e7a 60%,#0b3b2e);margin-top:2px}
+  .side{background:#111b21;border-right:1px solid #222d34;display:flex;flex-direction:column;min-width:0}
+  .stitle{display:flex;align-items:center;gap:6px;padding:15px 14px 10px}
+  .stitle .t{font-size:23px;font-weight:600;letter-spacing:-.4px;flex:1 1 auto}
+  .search{padding:4px 12px 8px;position:relative}
+  .search .si{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:#8696a0;pointer-events:none;z-index:1;display:grid}
+  .filt{display:flex;align-items:center;gap:8px;padding:2px 14px 8px}
+  .chip{display:inline-flex;align-items:center;gap:6px;background:#202c33;color:#8696a0;border:0;border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer}
+  .chip.on{background:#0b3b2e;color:#00d95f}
+  .caret{background:#202c33;color:#8696a0;border:0;border-radius:999px;width:30px;height:28px;display:grid;place-items:center;cursor:pointer;font-size:11px}
+  .triage{margin:2px 12px 8px;display:flex;align-items:center;gap:9px;background:linear-gradient(90deg,#0e2a24,#122a1e);color:#7cf0c8;border:1px solid #123c30;border-radius:14px;padding:9px 14px;font-size:13.5px;cursor:pointer}
+  .triage .sk{color:#00d95f;display:grid;flex:0 0 auto}
+  .chats{flex:1 1 auto;overflow-y:auto;overflow-x:hidden}
+  .chats::-webkit-scrollbar{width:6px}.chats::-webkit-scrollbar-thumb{background:#374248;border-radius:6px}
+  .row{display:flex;gap:13px;align-items:center;padding:9px 14px;cursor:pointer;position:relative}
+  .row:after{content:"";position:absolute;left:78px;right:0;bottom:0;height:1px;background:#1c262d}
+  .row:hover{background:#202c33}.row.on{background:#2a3942}.row.on:after{background:transparent}
+  .av{position:relative;flex:0 0 auto;border-radius:50%;overflow:hidden}
+  .av img{width:100%;height:100%;object-fit:cover;display:block}
+  .row .b{min-width:0;flex:1 1 auto}
+  .row .n{color:#e9edef;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
+  .row .p{color:#8696a0;font-size:13.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px}
+  .row .rc{color:#53bdeb}
+  .row .m{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
+  .row .t{color:#8696a0;font-size:12px}.row.unread .t{color:#00d95f;font-weight:500}
+  .row .pin{color:#f15c6d;font-size:13px;transform:rotate(45deg)}
+  .netdot{width:16px;height:16px;border-radius:4px;object-fit:cover;flex:0 0 auto}
+  .main{position:relative;display:flex;flex-direction:column;min-width:0;background:#0b141a}
+  .wp{position:absolute;inset:0;background:#0b141a center/cover no-repeat;z-index:0}
+  .wp:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,20,26,.35),rgba(11,20,26,.5))}
+  .mh,.thread,.composer,.e2ewrap{position:relative;z-index:1}
+  .mh{height:60px;flex:0 0 auto;background:#202c33;display:flex;align-items:center;gap:14px;padding:0 16px}
+  .mh .who .n{font-size:16px;color:#e9edef;font-weight:500}
+  .mh .who .s{font-size:13px;color:#00a884;margin-top:1px}
+  .mh .sp{margin-left:auto}.mh .icons{display:flex;gap:2px}
+  .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#aebac1;cursor:pointer;transition:background .12s;background:transparent;border:0}
+  .ico:hover{background:#ffffff14;color:#e9edef}
+  .ico.sk{color:#00d95f}
+  .e2ewrap{display:flex;justify-content:center;padding:14px 0 2px}
+  .e2e{background:#182229;color:#ffd279;font-size:12.5px;padding:6px 14px;border-radius:8px;box-shadow:0 1px .5px #0003}
+  .thread{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:10px 8% 14px;display:flex;flex-direction:column;gap:3px}
+  .thread::-webkit-scrollbar{width:6px}.thread::-webkit-scrollbar-thumb{background:#374248cc;border-radius:6px}
+  .more{align-self:center;color:#8696a0;font-size:12px;padding:8px;opacity:.85}
+  .day{align-self:center;background:#182229;color:#8696a0;font-size:12.5px;padding:5px 12px;border-radius:8px;margin:8px 0 6px;box-shadow:0 1px .5px #0003}
+  .bub{max-width:65%;padding:6px 9px 8px 10px;border-radius:8px;font-size:14.2px;line-height:1.42;box-shadow:0 1px .5px #0003;word-wrap:break-word;white-space:pre-wrap}
+  .in{align-self:flex-start;background:#202c33;border-top-left-radius:0}
+  .out{align-self:flex-end;background:#005c4b;border-top-right-radius:0}
+  .grp{margin-top:8px}
+  .bub .tt{font-size:11px;color:#ffffff8a;float:right;margin:6px 0 -3px 12px;position:relative;top:4px}
+  .bub .tt .rc{color:#53bdeb}
+  .empty{margin:auto;color:#8696a0;text-align:center;background:#182229;padding:8px 16px;border-radius:8px}
+  .composer{flex:0 0 auto;background:#202c33;display:flex;align-items:center;gap:6px;padding:8px 14px}
+  .composer .grow{flex:1 1 auto}
+  .send{width:44px;height:44px;border-radius:50%;background:#00a884;color:#0b141a;border:0;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
+  /* media */
+  .m-img{display:block;max-width:320px;max-height:340px;border-radius:6px;cursor:pointer;object-fit:cover}
+  .m-vid{position:relative;max-width:320px;border-radius:6px;overflow:hidden;cursor:pointer}
+  .m-vid img{display:block;width:100%;border-radius:6px}
+  .m-play{position:absolute;inset:0;display:grid;place-items:center}
+  .m-play span{width:48px;height:48px;border-radius:50%;background:#0009;color:#fff;display:grid;place-items:center;font-size:20px}
+  .m-file{display:flex;align-items:center;gap:10px;background:#ffffff0f;border-radius:8px;padding:9px 11px;min-width:200px;cursor:pointer}
+  .m-file .fi{width:38px;height:38px;border-radius:8px;background:#00a88433;color:#7cf0c8;display:grid;place-items:center;font-size:16px;flex:0 0 auto}
+  .m-file .fn{font-size:13.5px;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .m-file .fs{font-size:12px;color:#8696a0;margin-top:2px}
+  .m-aud{display:flex;align-items:center;gap:10px;min-width:220px;padding:2px 0}
+  .m-aud audio{height:34px}
+  .lb{position:fixed;inset:0;background:#000c;z-index:60;display:grid;place-items:center;cursor:zoom-out}
+  .lb img,.lb video{max-width:90vw;max-height:90vh;border-radius:8px}
+  .lb .x{position:absolute;top:18px;right:22px;color:#fff;font-size:28px;cursor:pointer;background:0;border:0}
+  /* attach tray + pay sheet */
+  .tray{position:absolute;bottom:66px;left:14px;background:#233138;border-radius:12px;box-shadow:0 10px 34px #0009;padding:6px;z-index:6;min-width:236px}
+  .tray button{display:flex;align-items:center;gap:11px;width:100%;background:0;border:0;color:#e9edef;font-size:14.5px;padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left}
+  .tray button:hover{background:#2a3942}.tray button:disabled{opacity:.5}
+  .tray .sep{height:1px;background:#2a3942;margin:4px 6px}
+  .paywrap{position:fixed;inset:0;background:#000a;z-index:60;display:grid;place-items:center}
+  .pay{background:#111b21;border-radius:14px;padding:20px;width:346px;max-width:90vw;box-shadow:0 20px 60px #000a}
+  .pay h3{margin:0 0 4px;font-size:17px}.pay .psub{color:#8696a0;font-size:13px;margin-bottom:14px}
+  .pay .seg{display:flex;background:#202c33;border-radius:10px;padding:3px;margin-bottom:14px}
+  .pay .seg button{flex:1;background:0;border:0;color:#8696a0;padding:8px;border-radius:8px;cursor:pointer;font-size:14px}
+  .pay .seg button.on{background:#00a884;color:#0b141a;font-weight:600}
+  .pay .amt{width:100%;background:#202c33;border:0;border-radius:10px;color:#e9edef;font-size:26px;text-align:center;padding:12px;margin-bottom:10px;outline:0}
+  .pay .chips{display:flex;gap:8px;margin-bottom:12px}
+  .pay .chips button{flex:1;background:#202c33;border:0;color:#e9edef;border-radius:8px;padding:9px;cursor:pointer}
+  .pay .chips button.on{background:#0b3b2e;color:#00d95f}
+  .pay .memo{width:100%;background:#202c33;border:0;border-radius:10px;color:#e9edef;padding:10px 12px;margin-bottom:12px;font-size:14px;outline:0}
+  .pay .err{color:#f15c6d;font-size:13px;margin-bottom:8px;text-align:center}
+  .pay .go{width:100%;background:#00a884;color:#0b141a;border:0;border-radius:10px;padding:12px;font-weight:600;cursor:pointer;font-size:15px}
+  .pay .go:disabled{opacity:.5;cursor:default}
+  .pay .cancel{width:100%;background:0;color:#8696a0;border:0;padding:10px;margin-top:6px;cursor:pointer}
+`;
+
+async function ensureImportmap() {
+  if (document.querySelector('script[type="importmap"][data-holo-ui]')) return;
+  const map = await (await fetch("/apps/ui/vendor/importmap.json")).json();
+  const imports = {}; for (const [k, v] of Object.entries(map.imports || map)) imports[k] = typeof v === "string" ? v.replace(/^\.\//, "/apps/ui/") : v;
+  const s = document.createElement("script"); s.type = "importmap"; s.setAttribute("data-holo-ui", "1"); s.textContent = JSON.stringify({ imports }); document.head.appendChild(s);
+}
+let _deps = null;
+async function deps() {
+  if (_deps) return _deps;
+  await ensureImportmap();
+  const React = await import("react");
+  const { createRoot } = await import("react-dom/client");
+  const reg = await (await fetch("/apps/ui/registry/index.json")).json();
+  const K = Object.fromEntries(reg.components.map((c) => [c.name, c.holo]));
+  const [button, badge, avatar, input] = await Promise.all(["button", "badge", "avatar", "input"].map((n) => import(K[n])));
+  return (_deps = { React, createRoot, C: { button, badge, avatar, input } });
+}
+if (!document.getElementById("wa-shadcn-css")) { const st = document.createElement("style"); st.id = "wa-shadcn-css"; st.textContent = CSS; document.head.appendChild(st); }
+
+const initials = (s) => (String(s || "?").trim().split(/\s+/).map((w) => w[0]).join("").slice(0, 2) || "?").toUpperCase();
+const hue = (s) => { let h = 0; s = String(s || ""); for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return `hsl(${h % 360} 40% 46%)`; };
+const isOut = (m) => !!(m && (m.mine || m.out || m.fromMe || m.dir === "out" || m.from === "me" || m.self));
+const threadOf = (model, id) => { try { if (id && model.thread) return model.thread(id) || []; } catch {} return (model.threads && model.threads[id]) || []; };
+const rcMark = (m) => m.status === "read" || m.status === "delivered" ? "✓✓" : m.status === "sent" ? "✓" : "";
+const slugOf = (net) => { const k = String(net || "").toLowerCase(); return NET_SLUG[k] === undefined ? k : NET_SLUG[k]; };
+const mimeKind = (mime, kind) => { const k = String(kind || "").toLowerCase(); if (["image", "video", "audio", "voice"].includes(k)) return k === "voice" ? "audio" : k; const t = String(mime || "").split("/")[0]; if (t === "image" || t === "video" || t === "audio") return t; return "file"; };
+const humanSize = (n) => { n = +n || 0; if (!n) return ""; const u = ["B", "KB", "MB", "GB"]; let i = 0; while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; } return (n < 10 && i ? n.toFixed(1) : Math.round(n)) + " " + u[i]; };
+const fileGlyph = (mime, name) => { const m = String(mime || ""), e = String(name || "").split(".").pop().toLowerCase(); if (m.includes("pdf") || e === "pdf") return "📕"; if (["zip", "rar", "7z"].includes(e)) return "🗜"; if (["doc", "docx"].includes(e)) return "📘"; if (["xls", "xlsx", "csv"].includes(e)) return "📗"; return "📄"; };
+
+function buildApp({ React, C }) {
+  const { createElement: h, memo, useState, useRef, useEffect, useCallback, useLayoutEffect } = React;
+  const Avatar = C.avatar.Avatar, AvatarImage = C.avatar.AvatarImage, AvatarFallback = C.avatar.AvatarFallback;
+  const Button = C.button.Button, Input = C.input.Input, Badge = C.badge.Badge;
+
+  // exact SVG line icons (from the real app's IC set)
+  const svg = (kids, s = 22, w = 1.8) => h("svg", { viewBox: "0 0 24 24", width: s, height: s, fill: "none", stroke: "currentColor", strokeWidth: w, strokeLinecap: "round", strokeLinejoin: "round" }, ...kids);
+  const P = (d, e) => h("path", { d, ...e });
+  const CIR = (cx, cy, r, e) => h("circle", { cx, cy, r, ...e });
+  const RC = (x, y, width, height, rx, e) => h("rect", { x, y, width, height, rx, ...e });
+  const fillC = { fill: "currentColor", stroke: "none" };
+  const IC = {
+    chats: () => svg([P("M20 11.4A7.6 7.6 0 0 1 8.9 18.2L4.5 19.4l1.2-4.2A7.6 7.6 0 1 1 20 11.4Z")]),
+    search: (s) => svg([CIR(11, 11, 7), P("m20 20-3.6-3.6")], s || 19),
+    phone: () => svg([P("M6.6 4H4.5A1.5 1.5 0 0 0 3 5.6 16 16 0 0 0 18.4 21a1.5 1.5 0 0 0 1.6-1.5v-2.1a1.5 1.5 0 0 0-1.2-1.45l-2.2-.45a1.5 1.5 0 0 0-1.5.6l-.5.7a12 12 0 0 1-5.1-5.1l.7-.5a1.5 1.5 0 0 0 .6-1.5l-.45-2.2A1.5 1.5 0 0 0 6.6 4Z")]),
+    video: () => svg([RC(3, 6.5, 12, 11, 2.5), P("m15 10.5 5.5-3v9l-5.5-3Z")]),
+    menu: () => svg([CIR(12, 5, 1.35, fillC), CIR(12, 12, 1.35, fillC), CIR(12, 19, 1.35, fillC)]),
+    newchat: () => svg([P("M13.5 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.5"), P("M18.4 3.6a2 2 0 0 1 2.8 2.8L13 14.6l-3.4.9.9-3.4 7.9-8.5Z")]),
+    emoji: () => svg([CIR(12, 12, 8.5), P("M8.8 14.2a4.2 4.2 0 0 0 6.4 0"), CIR(9, 10, 1, fillC), CIR(15, 10, 1, fillC)]),
+    plus: () => svg([P("M12 5.5v13M5.5 12h13")]),
+    mic: () => svg([RC(9, 3, 6, 11, 3), P("M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7")]),
+    send: () => svg([P("M4.5 12 20.5 4.5 13 20.5l-2.8-6.4L4.5 12Z")]),
+    spark: (s) => svg([P("M12 3.2l1.7 4.6 4.6 1.7-4.6 1.7L12 15.8l-1.7-4.6L5.7 9.5l4.6-1.7L12 3.2Z"), P("M5.5 15.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8.8-2Z")], s || 20),
+    sun: () => svg([CIR(12, 12, 4), P("M12 2v2M12 20v2M4 12H2M22 12h-2M5.6 5.6 4.2 4.2M19.8 19.8l-1.4-1.4M18.4 5.6l1.4-1.4M4.2 19.8l1.4-1.4")]),
+    plusThin: () => svg([P("M12 5.5v13M5.5 12h13")], 26, 1.6),
+  };
+
+  const Av = (name, size, bg, src) => h("div", { className: "av", style: { height: size + "px", width: size + "px" } },
+    h(Avatar, { style: { height: "100%", width: "100%", background: bg || hue(name), display: "grid", placeItems: "center" } },
+      src ? h(AvatarImage, { src, alt: "", style: { height: "100%", width: "100%", objectFit: "cover" } }) : null,
+      h(AvatarFallback, { style: { background: bg || hue(name), color: "#fff", fontSize: (size * 0.36) + "px", fontWeight: 500, height: "100%", width: "100%", display: "grid", placeItems: "center" } }, initials(name))));
+  const Ico = (icon, onClick, title, cls) => h("button", { className: "ico" + (cls ? " " + cls : ""), onClick, title }, icon);
+  const netLogo = (net) => { const s = slugOf(net); return s ? h("img", { className: "netdot", src: BRANDS + s + ".svg", alt: "", onError: (e) => { e.currentTarget.style.display = "none"; } }) : null; };
+
+  // rich media in a bubble — image/video/audio/file, with lazy bridge-media resolution
+  function MediaView({ media, model, onMedia }) {
+    const [url, setUrl] = useState(media.url || media.thumb || "");
+    const bucket = mimeKind(media.mime, media.kind);
+    useEffect(() => { let alive = true;
+      if (!media.url && (media.lazy || media.pending || media.ref) && model.resolveBridgeMedia) {
+        Promise.resolve(model.resolveBridgeMedia(media)).then((u) => { if (alive && u) setUrl(typeof u === "string" ? u : (u.url || u.src || "")); }).catch(() => {});
+      } return () => { alive = false; }; }, []);
+    if (bucket === "image") return url ? h("img", { className: "m-img", src: url, alt: "", loading: "lazy", onClick: () => onMedia({ kind: "image", url }) }) : h("div", { className: "m-file" }, "🖼 Photo");
+    if (bucket === "video") return h("div", { className: "m-vid", onClick: () => onMedia({ kind: "video", url }) }, h("img", { src: media.thumb || url, alt: "" }), h("div", { className: "m-play" }, h("span", {}, "▶")));
+    if (bucket === "audio") return h("div", { className: "m-aud" }, url ? h("audio", { controls: true, src: url }) : h("span", {}, "🎤 Voice message"));
+    return h("div", { className: "m-file", onClick: () => url && window.open(url, "_blank") }, h("div", { className: "fi" }, fileGlyph(media.mime, media.filename)), h("div", { style: { minWidth: 0 } }, h("div", { className: "fn" }, media.filename || "File"), media.size ? h("div", { className: "fs" }, humanSize(media.size)) : null));
+  }
+
+  const Rail = memo(function Rail({ nets, active, totalUnread, onPick }) {
+    return h("nav", { className: "rail" },
+      h("button", { className: "rb" + (active === "All" ? " on" : ""), title: "All chats", onClick: () => onPick("All") }, IC.chats(), totalUnread ? h("span", { className: "bdg" }, totalUnread > 99 ? "99+" : totalUnread) : null),
+      nets.length ? h("div", { className: "rsep" }) : null,
+      nets.map((n) => h("button", { key: n.id, className: "rb" + (active === n.id ? " on" : ""), title: n.label, onClick: () => onPick(n.id) },
+        (() => { const s = slugOf(n.id); return s ? h("img", { src: BRANDS + s + ".svg", alt: n.label, onError: (e) => { const t = document.createTextNode((n.label || "?")[0].toUpperCase()); try { e.currentTarget.replaceWith(t); } catch {} } }) : (n.label || "?")[0].toUpperCase(); })(),
+        h("span", { className: "dot" }), n.unread ? h("span", { className: "bdg" }, n.unread > 99 ? "99+" : n.unread) : null)),
+      h("button", { className: "rb", title: "Add network", onClick: () => onPick("+") }, IC.plusThin()),
+      h("div", { className: "rgrow" }),
+      h("button", { className: "rb", title: "Theme" }, IC.sun()),
+      h("div", { className: "rav", title: "Your profile" }));
+  });
+
+  const Row = memo(function Row({ c, on, preview, receipt, onSelect }) {
+    return h("div", { className: "row" + (on ? " on" : "") + (c.unread ? " unread" : ""), onClick: () => onSelect(c.id) },
+      Av(c.name, 49, c.isQ ? "#12b886" : hue(c.name), c.avatar),
+      h("div", { className: "b" },
+        h("div", { className: "n" }, c.name || c.id || "Chat", c.network ? netLogo(c.network) : null),
+        h("div", { className: "p" }, receipt ? h("span", { className: "rc" }, receipt + " ") : null, preview)),
+      h("div", { className: "m" },
+        h("div", { className: "t" }, c.time || c.ts || ""),
+        c.pinned ? h("span", { className: "pin" }, "📌") : null,
+        c.unread ? h(Badge, { style: { background: "#00a884", color: "#0b141a", borderRadius: "999px", height: "20px", minWidth: "20px", justifyContent: "center", padding: "0 6px", fontSize: "12px", fontWeight: 600 } }, String(c.unread)) : null));
+  });
+
+  function Thread({ model, activeId, onMedia }) {
+    const all = threadOf(model, activeId);
+    const [limit, setLimit] = useState(WINDOW);
+    const ref = useRef(null), prevId = useRef(activeId), anchorH = useRef(0), pin = useRef(true);
+    const toBottom = (el) => { el.scrollTop = el.scrollHeight; };
+    useEffect(() => { setLimit(WINDOW); }, [activeId]);
+    // Runs after every render (no deps): a fresh chat, or new messages arriving, both flow through here.
+    // While "pinned" we stay glued to the newest message — exactly like WhatsApp.
+    useLayoutEffect(() => { const el = ref.current; if (!el) return;
+      if (prevId.current !== activeId) { prevId.current = activeId; pin.current = true; anchorH.current = 0; toBottom(el); return; }
+      if (anchorH.current) { el.scrollTop = el.scrollHeight - anchorH.current; anchorH.current = 0; return; }
+      if (pin.current) toBottom(el); });
+    // Media resolves async (placeholder first, <img> swapped in later) and reflows the thread AFTER layout.
+    // A ResizeObserver on the scroll container won't catch it (its own box size never changes), and per-image
+    // listeners miss images added later — so listen for `load` in the CAPTURE phase on the container, which
+    // fires for ANY descendant image whenever it appears/loads. Keeps us glued to the newest message.
+    useEffect(() => { const el = ref.current; if (!el) return; pin.current = true; toBottom(el);
+      requestAnimationFrame(() => { if (pin.current && ref.current) toBottom(ref.current); });
+      const stick = () => { if (pin.current && ref.current) toBottom(ref.current); };
+      el.addEventListener("load", stick, true); el.addEventListener("error", stick, true);
+      return () => { el.removeEventListener("load", stick, true); el.removeEventListener("error", stick, true); };
+    }, [activeId]);
+    // Detach when the user scrolls up; re-attach ("jump to latest") once they're back near the bottom.
+    const onScroll = useCallback((e) => { const el = e.currentTarget;
+      pin.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+      if (el.scrollTop < 120 && limit < all.length) { anchorH.current = el.scrollHeight; setLimit((l) => Math.min(all.length, l + WINDOW)); } }, [limit, all.length]);
+    const start = Math.max(0, all.length - limit), shown = all.slice(start);
+    if (!all.length) return h("div", { className: "thread", ref }, h("div", { className: "empty" }, "No messages yet. Say hello 👋"));
+    const rows = [h("div", { className: "e2ewrap", key: "e2e" }, h("div", { className: "e2e" }, "🔒 Messages are end-to-end encrypted")), h("div", { className: "day", key: "day" }, "Today")];
+    if (start > 0) rows.push(h("div", { className: "more", key: "more" }, `↑ ${start.toLocaleString()} earlier — scroll up`));
+    let lastOut = null;
+    shown.forEach((m, i) => { const out = isOut(m); const hasMedia = m.media && (m.media.url || m.media.thumb || m.media.ref || m.media.lazy || m.media.kind);
+      rows.push(h("div", { key: start + i, className: "bub " + (out ? "out" : "in") + (out !== lastOut ? " grp" : ""), style: hasMedia ? { maxWidth: "min(360px,72%)" } : null },
+        hasMedia ? h(MediaView, { media: m.media, model, onMedia }) : null,
+        m.text ? h("div", { style: hasMedia ? { marginTop: "5px" } : null }, m.text) : null,
+        h("span", { className: "tt" }, (m.time || m.ts || ""), out ? h("span", { className: "rc" }, " " + rcMark(m)) : null)));
+      lastOut = out; });
+    return h("div", { className: "thread", ref, onScroll }, rows);
+  }
+
+  const Composer = memo(function Composer({ activeId, onSend, onPlus }) {
+    const [draft, setDraft] = useState("");
+    const send = () => { const t = draft.trim(); if (!t) return; onSend(activeId, t); setDraft(""); };
+    return h("div", { className: "composer" },
+      Ico(IC.plus(), onPlus, "Attach"), Ico(IC.emoji(), null, "Emoji"),
+      h("div", { className: "grow" }, h(Input, { placeholder: "Type a message", value: draft, autoFocus: true,
+        onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } },
+        style: { background: "#2a3942", border: "0", borderRadius: "10px", height: "44px", color: "#e9edef", paddingLeft: "16px" } })),
+      h("button", { className: "send", onClick: send, "aria-label": "Send" }, draft.trim() ? IC.send() : IC.mic()));
+  });
+
+  const TrayBtn = (glyph, label, onClick, disabled) => h("button", { onClick, disabled }, h("span", { style: { fontSize: "17px" } }, glyph), label);
+
+  function PaySheet({ model, activeId, conv, sheet, setSheet }) {
+    const set = (patch) => setSheet((s) => ({ ...s, ...patch, err: null }));
+    const amt = parseFloat(sheet.amount);
+    const go = async () => { set({ busy: true }); let r;
+      try { r = await model.holoPay(sheet.genesis || activeId, { kind: sheet.kind, amount: amt, memo: (sheet.memo || "").trim() }); } catch (e) { r = { ok: false, error: String(e && e.message || e) }; }
+      if (r && r.ok) setSheet(null); else setSheet((s) => ({ ...s, busy: false, err: (r && r.error) || "Couldn't create the payment" })); };
+    return h("div", { className: "paywrap", onClick: () => setSheet(null) },
+      h("div", { className: "pay", onClick: (e) => e.stopPropagation() },
+        h("h3", {}, sheet.kind === "send" ? "Send money" : "Request money"), h("div", { className: "psub" }, (sheet.kind === "send" ? "To " : "From ") + (conv.name || "this chat")),
+        h("div", { className: "seg" }, h("button", { className: sheet.kind === "send" ? "on" : "", onClick: () => set({ kind: "send" }) }, "Send"), h("button", { className: sheet.kind === "request" ? "on" : "", onClick: () => set({ kind: "request" }) }, "Request")),
+        h("input", { className: "amt", inputMode: "decimal", placeholder: "$0", value: sheet.amount, onChange: (e) => set({ amount: e.target.value.replace(/[^0-9.]/g, "") }), autoFocus: true }),
+        h("div", { className: "chips" }, [10, 20, 50, 100].map((a) => h("button", { key: a, className: amt === a ? "on" : "", onClick: () => set({ amount: String(a) }) }, "$" + a))),
+        h("input", { className: "memo", placeholder: "What's it for? (optional)", maxLength: 120, value: sheet.memo || "", onChange: (e) => set({ memo: e.target.value }) }),
+        sheet.err ? h("div", { className: "err" }, sheet.err) : null,
+        h("button", { className: "go", disabled: sheet.busy || !(amt > 0), onClick: go }, sheet.busy ? (sheet.kind === "send" ? "Confirm in your wallet…" : "Creating…") : ((sheet.kind === "send" ? "Send" : "Request") + (amt > 0 ? " $" + sheet.amount : " money"))),
+        h("button", { className: "cancel", onClick: () => setSheet(null) }, "Cancel")));
+  }
+
+  const previewOf = (model, c) => { if (c.preview) return c.preview; const t = threadOf(model, c.id); const last = t.length ? t[t.length - 1] : null; return (last && (last.text || (last.media ? "📎 media" : ""))) || ""; };
+
+  return function App({ model }) {
+    const convs = Array.isArray(model.conversations) ? model.conversations : [];
+    const [activeId, setActiveId] = useState(null);
+    const [filter, setFilter] = useState("All");
+    const [q, setQ] = useState("");
+    const [lb, setLb] = useState(null);
+    const [attachOpen, setAttachOpen] = useState(false);
+    const [paySheet, setPaySheet] = useState(null);
+    const fileRef = useRef(null);
+    const onSelect = useCallback((id) => { setActiveId(id); setAttachOpen(false); }, []);
+    const active = (activeId && convs.some((c) => c.id === activeId)) ? activeId : ((convs.find((c) => c.active) || convs[0] || {}).id || null);
+    const conv = convs.find((c) => c.id === active) || {};
+    const onSend = useCallback((id, text) => { try { model.onSend && model.onSend(id, text); } catch (e) { console.error("[shadcn-ui] onSend", e); } }, [model]);
+    const call = useCallback((video) => { try { model.startCall && model.startCall(active, { video }); } catch (e) { console.error("[shadcn-ui] startCall", e); } }, [model, active]);
+    const pickFile = (accept) => { if (fileRef.current) { fileRef.current.accept = accept; fileRef.current.click(); } setAttachOpen(false); };
+    const onFile = (e) => { const f = e.target.files && e.target.files[0]; if (f) { try { model.onAttach && model.onAttach(active, f); } catch (er) { console.error("[shadcn-ui] onAttach", er); } } e.target.value = ""; };
+    const tryM = (fn, ...a) => { setAttachOpen(false); try { const r = model[fn] && model[fn](...a); if (r && r.catch) r.catch(() => {}); } catch (e) { console.error("[shadcn-ui] " + fn, e); } };
+    const nets = Array.isArray(model.networks) && model.networks.length ? model.networks
+      : Object.values(convs.reduce((a, c) => { const id = (c.network || c.platform); if (id && !a[id]) a[id] = { id, label: id[0].toUpperCase() + id.slice(1), unread: 0 }; if (id) a[id].unread += (c.unread || 0); return a; }, {}));
+    const totalUnread = convs.reduce((n, c) => n + (c.unread || 0), 0);
+    const signalUnread = model.signalUnread != null ? model.signalUnread : convs.filter((c) => c.unread).length;
+    const qs = q.trim().toLowerCase();
+    const shown = convs.filter((c) => (filter === "All" || (c.network || c.platform) === filter) && (!qs || (c.name || "").toLowerCase().includes(qs) || (previewOf(model, c) || "").toLowerCase().includes(qs)));
+    const sub = conv.presence || (conv.isQ ? "online · on your device" : (conv.status || conv.network || conv.platform || ""));
+    const runSearch = () => { const t = q.trim(); if (!t) return; try { if (model.qCommand) model.qCommand(t); else if (model.onNewChat) model.onNewChat(t); } catch {} };
+
+    return h("div", { className: "wa" },
+      h(Rail, { nets, active: filter, totalUnread, onPick: (id) => { if (id === "+") { try { model.openNetworks && model.openNetworks(); } catch {} } else setFilter(id); } }),
+      h("div", { className: "side" },
+        h("div", { className: "stitle" }, h("span", { className: "t" }, "Messenger"),
+          Ico(IC.spark(), () => { try { (model.askQ || model.qCommand) && (model.askQ ? model.askQ() : null); } catch {} }, "Ask Q", "sk"), Ico(IC.newchat(), () => { try { model.onNewChat && model.onNewChat(""); } catch {} }, "New chat"), Ico(IC.menu(), () => {}, "Menu")),
+        h("div", { className: "search" }, h("span", { className: "si" }, IC.search()),
+          h(Input, { placeholder: "Search, ask Q, or start a chat…", value: q, onChange: (e) => setQ(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") runSearch(); },
+            style: { background: "#202c33", border: "0", borderRadius: "10px", height: "42px", color: "#e9edef", paddingLeft: "40px", fontSize: "14.5px" } })),
+        h("div", { className: "filt" }, h("button", { className: "chip on" }, "All"), h("button", { className: "caret" }, "▾")),
+        signalUnread ? h("div", { className: "triage" }, h("span", { className: "sk" }, IC.spark(18)), `${signalUnread} need you · ~${Math.max(1, Math.round(signalUnread * 0.4))} min`) : null,
+        h("div", { className: "chats" }, shown.map((c) => h(Row, { key: c.id, c, on: c.id === active, preview: previewOf(model, c), receipt: c.receipt || "", onSelect })))),
+      h("div", { className: "main" },
+        h("div", { className: "wp", style: { backgroundImage: `url(${WP})` } }),
+        h("div", { className: "mh" }, Av(conv.name, 40, conv.isQ ? "#12b886" : hue(conv.name), conv.avatar),
+          h("div", { className: "who" }, h("div", { className: "n" }, conv.name || ""), sub ? h("div", { className: "s" }, sub) : null),
+          h("div", { className: "sp" }), h("div", { className: "icons" }, Ico(IC.video(), () => call(true), "Video call"), Ico(IC.phone(), () => call(false), "Voice call"), Ico(IC.menu(), () => { try { model.onFavourite && model.onFavourite(active); } catch {} }, "Menu"))),
+        h(Thread, { model, activeId: active, onMedia: setLb }),
+        h("input", { ref: fileRef, type: "file", style: { display: "none" }, onChange: onFile }),
+        attachOpen ? h("div", { className: "tray" },
+          TrayBtn("🖼", "Photos & videos", () => pickFile("image/*,video/*")),
+          TrayBtn("📄", "Document", () => pickFile("*/*")),
+          (conv.network && !conv.isQ && model.holoPay) ? TrayBtn("💸", "Send money", () => { setAttachOpen(false); setPaySheet({ kind: "send", amount: "", memo: "", busy: false, err: null }); }) : null,
+          h("div", { className: "sep" }),
+          model.startMeet ? TrayBtn("👥", "Start a meeting", () => tryM("startMeet", active, { video: true })) : null,
+          model.startTogether ? TrayBtn("🖥", "Share my screen", () => tryM("startTogether", active, { kind: "tab", title: "" })) : null,
+          model.startTogether ? TrayBtn("📝", "Co-edit a doc", () => tryM("startTogether", active, { kind: "doc", title: "" })) : null,
+          (conv.network && !conv.isQ && model.qDraft) ? [h("div", { className: "sep", key: "s" }), TrayBtn("✨", "Draft a reply with Q", () => tryM("qDraft", active))] : null) : null,
+        h(Composer, { key: active, activeId: active, onSend, onPlus: () => setAttachOpen((v) => !v) })),
+      lb ? h("div", { className: "lb", onClick: () => setLb(null) }, h("button", { className: "x", "aria-label": "Close" }, "✕"),
+        lb.kind === "video" ? h("video", { src: lb.url, controls: true, autoPlay: true, onClick: (e) => e.stopPropagation() }) : h("img", { src: lb.url, alt: "", onClick: (e) => e.stopPropagation() })) : null,
+      paySheet ? h(PaySheet, { model, activeId: active, conv, sheet: paySheet, setSheet: setPaySheet }) : null);
+  };
+}
+
+async function mount(el, model) {
+  const d = await deps();
+  const App = buildApp(d);
+  let cur = model;
+  const root = d.createRoot(el);
+  const render = (mdl) => { cur = mdl || cur; root.render(d.React.createElement(App, { model: cur })); };
+  render(model);
+  console.log("[shadcn-ui] Holo Messenger (Pass 1) mounted from κ-components ·", (model.conversations || []).length, "chats");
+  return { update: render, unmount: () => { try { root.unmount(); } catch {} } };
+}
+
+if (WANT && typeof window !== "undefined") {
+  const prev = window.HoloMessengerUI;
+  window.HoloMessengerUI = { mount, version: ((prev && prev.version) || "m1") + "+shadcn", _chatscope: prev };
+  console.log("[shadcn-ui] streaming-κ shadcn UI ACTIVE (opt out: ?ui=chatscope)");
+}
+
+export { mount };

b/d80d218db7c66a0414c0c02204d0e0398249b2ec619f903d02d97781fef92102

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Holo Messenger</title>
+<link rel="stylesheet" href="/apps/holo-messenger/_vendor/ui/chat-ui.bundle.css?v=f1ff491ce68b">
+<style>html,body{height:100%;margin:0;background:#0b141a;color-scheme:dark}#root{height:100vh}</style>
+<link rel="preload" as="image" href="/apps/holo-messenger/_vendor/wallpaper-default.jpg" fetchpriority="high">
+</head><body>
+<div id="root"></div>
+<script type="module">
+  // ?v=N - bump on each deploy so the browser can never serve a stale cached bundle (the cause of a frozen/old build).
+  import "/apps/holo-messenger/_vendor/ui/chat-ui.bundle.js?v=e811350a91c0";   // → window.HoloMessengerUI
+  // Opt-in: render the WhatsApp UX from STREAMING shadcn κ-components instead of the chatscope bundle.
+  // Additive — only takes over window.HoloMessengerUI.mount when ?ui=shadcn (or localStorage["holo.ui.shadcn"]="1");
+  // the default boot stays the untouched chatscope UI. Runs before boot() so it is fed the same live model.
+  import "/apps/holo-messenger/messenger-shadcn-ui.mjs";
+  import { boot } from "/apps/holo-messenger/holo-messenger-app.mjs?v=076005621416";
+  boot(document.getElementById("root")).catch(e => {
+    document.body.innerHTML = "<pre style='color:#f88;padding:16px;white-space:pre-wrap'>boot error: " + (e && e.stack || e) + "</pre>";
+  });
+  // Intelligent Inbox (holo-mail) - additive, feature-flagged OFF by default. Dynamic import + catch so it
+  // can NEVER block or break the messenger boot. Enable per-operator: localStorage["holo.mail.enabled"]="1".
+  import("/apps/holo-messenger/mail/holo-mail-attach.mjs").catch(() => {});
+  // HoloChat, woven into THIS messenger — one canonical surface, no separate overlay. Cards render natively
+  // in the bubbles; the composer "+" opens the unified tray (apps · Spaces · money · identity · prove).
+  // Additive + catch-guarded so it can never block boot. Enable: localStorage["holo.chat.enabled"]="1" or ?chat=1.
+  import("/apps/holo-messenger/holo-messenger-weave.mjs").catch(() => {});
+  // Colour re-tone picker (Default · Graphite · Warm · Contrast · Light) — colours only, all features
+  // intact. Gated: shows only with ?skins=1 or localStorage["holo.skins"]="1". Additive + catch-guarded.
+  import("/apps/holo-messenger/messenger-skin.mjs").catch(() => {});
+  // Asset cache (service worker) — repeat opens serve wallpaper/logos/bundle/css/js NETWORK-FREE. Caches
+  // only own-origin static assets (stale-while-revalidate); all dynamic/API/bridge/media traffic passes
+  // through untouched. Additive + catch-guarded. Escape hatch: open with ?nosw=1 to unregister.
+  import("/apps/holo-messenger/messenger-sw-register.mjs").catch(() => {});
+</script>
+</body></html>

b/f6caa9eeead2c99deeb2cdb70b7e25bbaa2cf5c60555f5b4030ecf6b6d9efa51

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f6caa9eeead2c99deeb2cdb70b7e25bbaa2cf5c60555f5b4030ecf6b6d9efa51
+size 546613