Persist and protect cross-browser answer viewing

plan.md

@@ -1,3 +1,3 @@
 
 ## Persistent answer room
-Submissions are written atomically to JSON at `DATA_DIR/submissions.json`, defaulting to `/data` when available and falling back to the project data directory locally. The `/owner` dashboard and `/api/owner/submissions` endpoint provide cross-device access without a login, per request. This is intentionally private-by-URL rather than authenticated: anyone who knows the owner URL can read the records. A mounted persistent volume is required for the JSON file to survive Hugging Face container replacement.
+Submissions are written atomically to JSON at `DATA_DIR/submissions.json`, defaulting to `/data` when available and falling back to the project data directory locally. The home page discovers the latest saved submission after refresh or in another browser, then asks for `OWNER_VIEW_PASSWORD` before returning the answer. The `/owner` dashboard uses the same password-protected API and keeps the key only in the current tab. A Hugging Face persistent storage volume mounted at `/data` is required for the JSON file to survive Space/container replacement; without it, answers still survive browser refreshes while the current container is running, but not a recreated container.

public/owner.html

@@ -9,7 +9,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
   <style>
-    :root{--ink:#2b1a16;--muted:#7a5b52;--paper:#f6ede6;--card:rgba(255,250,245,.72);--red:#a51f2b;--line:rgba(43,26,22,.16);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}body{margin:0;background:linear-gradient(140deg,#f2dfd2,#f0e0d4 52%,#d7b9a8);color:var(--ink);font-family:var(--sans)}main{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:34px 0 80px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:70px}.brand{font-weight:800;font-size:14px}.brand span{color:var(--red)}.back{font:10px var(--mono);text-transform:uppercase;color:var(--muted);text-decoration:none}.eyebrow,.meta{font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}h1{font:600 clamp(60px,9vw,120px)/.82 var(--serif);letter-spacing:-.06em;margin:0 0 24px}h1 em{color:var(--red);font-weight:500}.lede{max-width:510px;color:var(--muted);line-height:1.7;margin-bottom:44px}.notice{border:1px solid var(--line);background:rgba(255,250,245,.46);padding:16px 20px;max-width:700px;font-size:12px;line-height:1.6;margin-bottom:28px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:24px 0}.count{font:11px var(--mono);color:var(--muted);text-transform:uppercase}.button{border:0;border-radius:999px;background:var(--ink);color:white;padding:12px 18px;font-weight:800;cursor:pointer}.empty{padding:42px;border:1px dashed var(--line);color:var(--muted)}.grid{display:grid;gap:18px}.entry{background:var(--card);border:1px solid rgba(255,250,245,.82);box-shadow:12px 14px 0 rgba(164,91,79,.18);padding:24px;border-radius:2px 24px 2px 24px}.entry-head{display:flex;justify-content:space-between;gap:20px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:18px}.entry h2{font:600 34px/.95 var(--serif);margin:0}.entry time{font:10px var(--mono);color:var(--muted);text-align:right}.label{font:10px var(--mono);text-transform:uppercase;color:var(--red);letter-spacing:.05em;margin:18px 0 7px}.answer{white-space:pre-wrap;line-height:1.65;font-size:14px;margin:0}.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{font-size:12px;border:1px solid var(--line);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.3)}.review{border-left:3px solid var(--red);padding:13px 16px;background:rgba(165,31,43,.06);margin-top:8px}.score{font:700 22px var(--serif);color:var(--red)}.source{font:10px var(--mono);text-transform:uppercase;color:var(--muted);margin-left:8px}.status{font:10px var(--mono);text-transform:uppercase;color:var(--muted)}@media(max-width:600px){main{width:calc(100% - 28px);padding-top:20px}.top{margin-bottom:52px}.entry-head{display:block}.entry time{display:block;text-align:left;margin-top:10px}.toolbar{align-items:start;flex-direction:column}}
+    :root{--ink:#2b1a16;--muted:#7a5b52;--paper:#f6ede6;--card:rgba(255,250,245,.72);--red:#a51f2b;--line:rgba(43,26,22,.16);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}body{margin:0;background:linear-gradient(140deg,#f2dfd2,#f0e0d4 52%,#d7b9a8);color:var(--ink);font-family:var(--sans)}main{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:34px 0 80px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:70px}.brand{font-weight:800;font-size:14px}.brand span{color:var(--red)}.back{font:10px var(--mono);text-transform:uppercase;color:var(--muted);text-decoration:none}.eyebrow,.meta{font:10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}h1{font:600 clamp(60px,9vw,120px)/.82 var(--serif);letter-spacing:-.06em;margin:0 0 24px}h1 em{color:var(--red);font-weight:500}.lede{max-width:510px;color:var(--muted);line-height:1.7;margin-bottom:44px}.notice{border:1px solid var(--line);background:rgba(255,250,245,.46);padding:16px 20px;max-width:700px;font-size:12px;line-height:1.6;margin-bottom:28px}.owner-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 34px;max-width:700px}.owner-gate input{flex:1;min-width:220px;border:0;border-bottom:1px solid var(--ink);outline:0;background:transparent;color:var(--ink);padding:12px 0;font:12px var(--mono)}.gate-status{flex-basis:100%;font:10px var(--mono);text-transform:uppercase;color:var(--muted)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:24px 0}.count{font:11px var(--mono);color:var(--muted);text-transform:uppercase}.button{border:0;border-radius:999px;background:var(--ink);color:white;padding:12px 18px;font-weight:800;cursor:pointer}.empty{padding:42px;border:1px dashed var(--line);color:var(--muted)}.grid{display:grid;gap:18px}.entry{background:var(--card);border:1px solid rgba(255,250,245,.82);box-shadow:12px 14px 0 rgba(164,91,79,.18);padding:24px;border-radius:2px 24px 2px 24px}.entry-head{display:flex;justify-content:space-between;gap:20px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:18px}.entry h2{font:600 34px/.95 var(--serif);margin:0}.entry time{font:10px var(--mono);color:var(--muted);text-align:right}.label{font:10px var(--mono);text-transform:uppercase;color:var(--red);letter-spacing:.05em;margin:18px 0 7px}.answer{white-space:pre-wrap;line-height:1.65;font-size:14px;margin:0}.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{font-size:12px;border:1px solid var(--line);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.3)}.review{border-left:3px solid var(--red);padding:13px 16px;background:rgba(165,31,43,.06);margin-top:8px}.score{font:700 22px var(--serif);color:var(--red)}.source{font:10px var(--mono);text-transform:uppercase;color:var(--muted);margin-left:8px}.status{font:10px var(--mono);text-transform:uppercase;color:var(--muted)}@media(max-width:600px){main{width:calc(100% - 28px);padding-top:20px}.top{margin-bottom:52px}.entry-head{display:block}.entry time{display:block;text-align:left;margin-top:10px}.toolbar{align-items:start;flex-direction:column}.owner-gate{align-items:stretch;flex-direction:column}.owner-gate input{min-width:0;width:100%}}
   </style>
 </head>
 <body>
@@ -18,8 +18,13 @@
     <p class="eyebrow">private room / no login enabled</p>
     <h1>What she<br /><em>said.</em></h1>
     <p class="lede">Every answer submitted through the journey is collected here, so you can read it from your own device after she finishes.</p>
-    <div class="notice"><strong>Privacy note:</strong> this dashboard has no login, as requested. Anyone who knows this URL may be able to read these private answers. The JSON store is persistent only on the Space filesystem or mounted <code>/data</code> volume.</div>
-    <div class="toolbar"><span class="count" id="count">loading the room…</span><button class="button" id="refresh" type="button">refresh answers ↻</button></div>
+    <div class="notice"><strong>Private room:</strong> enter the owner key to view saved answers. They are stored in the Space’s persistent JSON store at <code>/data/submissions.json</code>.</div>
+    <form class="owner-gate" id="ownerGate">
+      <input id="ownerPassword" type="password" autocomplete="current-password" placeholder="owner key" maxlength="200" required />
+      <button class="button" type="submit">view answers →</button>
+      <span class="gate-status" id="gateStatus" role="status">the key stays in this browser tab</span>
+    </form>
+    <div class="toolbar" hidden><span class="count" id="count">loading the room…</span><button class="button" id="refresh" type="button">refresh answers ↻</button></div>
     <section class="grid" id="entries" aria-live="polite"></section>
   </main>
   <script src="/owner.js"></script>

public/owner.js

@@ -1,6 +1,11 @@
 const entries = document.querySelector('#entries');
 const count = document.querySelector('#count');
 const refresh = document.querySelector('#refresh');
+const ownerGate = document.querySelector('#ownerGate');
+const ownerPassword = document.querySelector('#ownerPassword');
+const gateStatus = document.querySelector('#gateStatus');
+const toolbar = document.querySelector('.toolbar');
+let password = '';
 
 const text = (value) => String(value ?? '');
 const formatDate = (value) => new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(value));
@@ -48,10 +53,16 @@ function renderSubmission(item) {
 }
 
 async function load() {
+  if (!password) return;
   count.textContent = 'loading the room…';
   refresh.disabled = true;
   try {
-    const response = await fetch('/api/owner/submissions', { cache: 'no-store' });
+    const response = await fetch('/api/owner/submissions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      cache: 'no-store',
+      body: JSON.stringify({ password }),
+    });
     if (!response.ok) throw new Error('Could not load the room.');
     const payload = await response.json();
     entries.replaceChildren();
@@ -69,5 +80,20 @@ async function load() {
   }
 }
 
+ownerGate.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  password = ownerPassword.value;
+  gateStatus.textContent = 'checking the key…';
+  try {
+    await load();
+    if (!entries.children.length) throw new Error('That key did not open the room.');
+    ownerGate.hidden = true;
+    toolbar.hidden = false;
+  } catch (error) {
+    password = '';
+    gateStatus.textContent = error.message;
+    ownerPassword.select();
+  }
+});
+
 refresh.addEventListener('click', load);
-load();

server.js

@@ -82,6 +82,17 @@ function findSubmission(id) {
   return submissions.find((submission) => submission.id === id);
 }
 
+function latestSubmission() {
+  return [...submissions].sort((a, b) => b.createdAt - a.createdAt)[0];
+}
+
+function passwordMatches(supplied) {
+  const expected = process.env.OWNER_VIEW_PASSWORD || '';
+  const value = cleanString(supplied, 200);
+  return Boolean(expected && value && Buffer.byteLength(expected) === Buffer.byteLength(value)
+    && crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(value)));
+}
+
 async function rateSincerity(payload) {
   const apiKey = process.env.OPENROUTER_API_KEY;
   if (!apiKey) return localReflection(payload);
@@ -124,8 +135,23 @@ async function readBody(req) {
 }
 
 async function handleApi(req, res) {
-  if (req.method === 'GET' && req.url === '/api/owner/submissions') {
-    sendJson(res, 200, { submissions: [...submissions].sort((a, b) => b.createdAt - a.createdAt) });
+  if (req.method === 'GET' && req.url === '/api/latest-submission') {
+    const latest = latestSubmission();
+    sendJson(res, 200, latest ? { available: true, submissionId: latest.id } : { available: false });
+    return true;
+  }
+  if (req.method === 'POST' && req.url === '/api/owner/submissions') {
+    try {
+      const payload = await readBody(req);
+      if (!passwordMatches(payload.password)) {
+        sendJson(res, 401, { error: 'That key does not open this room.' });
+        return true;
+      }
+      sendJson(res, 200, { submissions: [...submissions].sort((a, b) => b.createdAt - a.createdAt) });
+    } catch (error) {
+      console.error('[owner-submissions]', error.message);
+      sendJson(res, 400, { error: 'The private key could not be checked.' });
+    }
     return true;
   }
   if (req.method === 'GET' && req.url.startsWith('/api/owner/submissions/')) {
@@ -141,11 +167,8 @@ async function handleApi(req, res) {
   if (req.method === 'POST' && req.url === '/api/owner-unlock') {
     try {
       const payload = await readBody(req);
-      const expected = process.env.OWNER_VIEW_PASSWORD || '';
-      const supplied = cleanString(payload.password, 200);
-      const submission = findSubmission(cleanString(payload.submissionId, 100));
-      const matches = expected && supplied && Buffer.byteLength(expected) === Buffer.byteLength(supplied) && crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(supplied));
-      if (!matches || !submission) {
+      const submission = findSubmission(cleanString(payload.submissionId, 100)) || latestSubmission();
+      if (!passwordMatches(payload.password) || !submission) {
         sendJson(res, 401, { error: 'That key does not open this room.' });
         return true;
       }

src/main.js

@@ -222,7 +222,7 @@ function renderOwnerLock() {
   const title = document.createElement('strong');
   title.textContent = 'sealed for his eyes';
   const copy = document.createElement('p');
-  copy.textContent = 'Her exact words and the sincerity read are tucked away. Enter the owner key to open the private room.';
+  copy.textContent = 'Her exact words and the sincerity read are tucked away. Enter the owner key to view the answer.';
   const row = document.createElement('div');
   row.className = 'private-key-row';
   const input = document.createElement('input');
@@ -346,6 +346,26 @@ async function requestSincerity() {
   }
 }
 
+async function restorePersistedAnswer() {
+  try {
+    const response = await fetch('/api/latest-submission', { cache: 'no-store' });
+    if (!response.ok) return;
+    const payload = await response.json();
+    if (!payload.available || !payload.submissionId) return;
+    state.submissionId = payload.submissionId;
+    state.sincerity = { sealed: true };
+    state.sealed = true;
+    state.ownerUnlocked = false;
+    setAnswerFieldsDisabled(true);
+    $('#name').classList.add('is-sealed');
+    $('#promises').classList.add('is-sealed');
+    renderSincerity(state.sincerity);
+    updateUnlockState();
+  } catch {
+    // A temporary discovery failure should not prevent a new answer from being written.
+  }
+}
+
 function relockDecision() {
   state.unlocked = false;
   decisionStatus.textContent = 'locked until it’s honest';
@@ -436,6 +456,7 @@ sincerityResult.addEventListener('click', async (event) => {
     apologyInput.value = state.apology;
     state.sincerity = submission.reading;
     state.ownerUnlocked = true;
+    consentCheck.checked = true;
     setAnswerFieldsDisabled(true);
     renderBouquet();
     renderSincerity(state.sincerity);
@@ -533,3 +554,4 @@ const observer = new IntersectionObserver((entries) => {
 $$('.reveal').forEach((el) => observer.observe(el));
 
 renderBouquet();
+restorePersistedAnswer();