// discreet.jsx — Ryoko · "Browse off-book" mode (anonymous / discretionary) // // Exposes: // window.RyokoDiscreet.toggle() — flip on/off (4-hour session) // window.RyokoDiscreet.activate(h?) — turn on for h hours (default 4) // window.RyokoDiscreet.deactivate() — turn off // window.RyokoDiscreet.isOn() — boolean // window.RyokoDiscreet.subscribe(fn) — change listener; returns unsubscribe // // Behaviour: // - Adds class `rk-discreet` to when active. // - Self-mounts a floating pill (top-right, below topbar) showing time left. // - Self-mounts a one-time onboarding sheet the first time it's activated. // - Persists across pages via sessionStorage (key: rk.discreet.until). // - Auto-expires when the timer runs out; re-checks on every page load. // // Trust-builder: this is a UX statement, not encryption. Saves & views during // a discreet session are visually separated and not added to the avatar // menu's "Today, at a glance" stats. The on-screen pill makes the mode // unambiguous so principals never accidentally browse off-book. (function () { const { useState, useEffect, useRef } = React; const KEY = "rk.discreet.until"; const ONBOARDED = "rk.discreet.onboarded"; let listeners = new Set(); function readUntil() { try { const raw = sessionStorage.getItem(KEY); if (!raw) return 0; const n = parseInt(raw, 10); if (!Number.isFinite(n)) return 0; return n > Date.now() ? n : 0; } catch (e) { return 0; } } function writeUntil(ts) { try { if (ts > 0) sessionStorage.setItem(KEY, String(ts)); else sessionStorage.removeItem(KEY); } catch (e) {} } function applyClass(on) { if (typeof document === "undefined") return; const b = document.body; if (!b) return; if (on) b.classList.add("rk-discreet"); else b.classList.remove("rk-discreet"); } function emit() { listeners.forEach((fn) => { try { fn(isOn()); } catch (e) {} }); } function isOn() { return readUntil() > 0; } function untilTs() { return readUntil(); } function activate(hours) { const h = Number.isFinite(hours) && hours > 0 ? hours : 4; const ts = Date.now() + h * 3600 * 1000; writeUntil(ts); applyClass(true); emit(); if (!sessionStorage.getItem(ONBOARDED)) { try { sessionStorage.setItem(ONBOARDED, "1"); } catch (e) {} // Onboarding sheet is rendered by the Host once isOn flips } } function deactivate() { writeUntil(0); applyClass(false); emit(); } function toggle() { isOn() ? deactivate() : activate(); } function subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); } // Off-book ledger — purely illustrative for the prototype. Returns the // fake activity log for the current/most recent off-book session, so the // avatar menu can show the principal exactly what was logged where. function getLedger() { if (!sessionStorage.getItem(ONBOARDED)) return []; return [ { when: "now", what: "viewed: Aman Venice · Carnival week", surface: "Discover" }, { when: "12 min ago", what: "saved: Asador Etxebarri", surface: "Discover" }, { when: "28 min ago", what: "opened: trace · Annabel's", surface: "Discover" }, { when: "1 h ago", what: "session opened", surface: "Avatar menu" }, ]; } function fmtRemaining(ms) { if (ms <= 0) return "expired"; const total = Math.floor(ms / 1000); const h = Math.floor(total / 3600); const m = Math.floor((total % 3600) / 60); if (h > 0) return `${h}h ${String(m).padStart(2, "0")}m`; const s = total % 60; return `${m}m ${String(s).padStart(2, "0")}s`; } // ── Floating pill ──────────────────────────────────────────────────────── // Detect topbar height once at mount so the pill can offset reliably // without depending on :has() CSS support. function getTopbarOffset() { if (typeof document === "undefined") return 14; const tb = document.querySelector(".rk-topbar"); if (!tb) return 14; const r = tb.getBoundingClientRect(); return Math.max(14, Math.round(r.bottom + 8)); } function DiscreetPill({ onShare }) { const [until, setUntil] = useState(untilTs()); const [now, setNow] = useState(Date.now()); const [topOffset, setTopOffset] = useState(14); useEffect(() => subscribe(() => setUntil(untilTs())), []); useEffect(() => { if (!until) return; const t = setInterval(() => { const n = Date.now(); setNow(n); if (n >= until) deactivate(); }, 1000); return () => clearInterval(t); }, [until]); useEffect(() => { if (!until) return; // Re-measure after a tick (topbar may render slightly after). const measure = () => setTopOffset(getTopbarOffset()); measure(); const t = setTimeout(measure, 250); window.addEventListener("resize", measure); return () => { clearTimeout(t); window.removeEventListener("resize", measure); }; }, [until]); if (!until) return null; const remaining = until - now; return (
Off-book · {fmtRemaining(remaining)} left
); } // ── Send-to-concierge expiring-link sheet ──────────────────────────────── function ShareSheet({ open, onClose }) { const [copied, setCopied] = useState(false); if (!open) return null; // Synthesised expiring link · purely illustrative for the prototype. const link = `https://ryoko.travel/co/x/${Math.random().toString(36).slice(2, 9)}/${Math.random().toString(36).slice(2, 7)}`; const expires = new Date(Date.now() + 4 * 3600 * 1000); const expiresLabel = expires.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }); const onCopy = () => { navigator.clipboard && navigator.clipboard.writeText(link).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1600); }); }; return (
e.target === e.currentTarget && onClose()}>
Off-book · send in confidence

A link your concierge can open. Once.

One-use link to your current view, addressed to Camille at the desk. It carries no header, no avatar, no member number. It expires at {expiresLabel} and self-destructs after first open.

); } // ── Onboarding sheet · shown once per session when first activated ─────── function DiscreetOnboard() { const [open, setOpen] = useState(false); const seenRef = useRef(false); useEffect(() => { const onChange = (on) => { if (on && !seenRef.current && !sessionStorage.getItem(ONBOARDED + ".shown")) { seenRef.current = true; try { sessionStorage.setItem(ONBOARDED + ".shown", "1"); } catch (e) {} setOpen(true); } }; const unsub = subscribe(onChange); // Catch the initial activation too if (isOn() && !sessionStorage.getItem(ONBOARDED + ".shown")) { try { sessionStorage.setItem(ONBOARDED + ".shown", "1"); } catch (e) {} setOpen(true); } return unsub; }, []); if (!open) return null; return (
e.target === e.currentTarget && setOpen(false)}>
Off-book · what changes

You are now browsing in confidence.

For the next four hours, this session is held separately from your file. Saves, views, and notes do not appear in your principal's activity. Your architect is not paged. Nothing surfaces in the household feed.

This is a UX statement, not encryption. The mode exists because some scouting should not become household record. If you need a one-way handoff to your concierge, ask via the Send-in-confidence link in the avatar menu.

); } function Host() { const [shareOpen, setShareOpen] = useState(false); return ( <> setShareOpen(true)} /> setShareOpen(false)} /> ); } // Initial sync on load function syncOnLoad() { applyClass(isOn()); } function mount() { if (document.getElementById("ryoko-discreet-host")) return; const div = document.createElement("div"); div.id = "ryoko-discreet-host"; document.body.appendChild(div); syncOnLoad(); ReactDOM.createRoot(div).render(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", mount); } else { mount(); } window.RyokoDiscreet = { toggle, activate, deactivate, isOn, untilTs, subscribe, fmtRemaining, getLedger, }; })();