Persist submissions in JSON and add owner room

.dockerignore

@@ -1,6 +1,8 @@
 node_modules
 .git
 dist
+data
+submissions.json
 .env
 .env.*
 !.env.example

Dockerfile

@@ -10,6 +10,8 @@ RUN npm run build
 
 ENV NODE_ENV=production
 ENV PORT=7860
+ENV DATA_DIR=/data
+RUN mkdir -p /data
 EXPOSE 7860
 
 CMD ["node", "server.js"]

plan.md

@@ -1,40 +1,3 @@
-# Second Chance — implementation plan
 
-## Product scope
-Build a responsive, emotionally warm interactive reconciliation journey inspired by the supplied dating-app landing-page reference without copying it. The page guides a woman through a heartfelt apology, personal promises, name entry, and explicit consent before presenting the man with a clear, pressure-free final decision.
-
-## Design direction
-- **Design movement:** editorial glassmorphism with soft 3D object art and “digital keepsake” romance.
-- **Core principles:** emotional honesty over persuasion; layered depth; playful but grown-up microcopy; consent is visible and never implied.
-- **Color philosophy:** parchment, cocoa, clay, and rosewood create a warmer, more intimate atmosphere; espresso typography keeps the page grounded; deep red is reserved for heart/affirmation moments and muted brass marks repair rather than perfection.
-- **Layout paradigm:** an unfolding vertical story rather than a centered marketing grid. Oversized type, offset cards, sticky story markers, and wide breathing room create a scroll-led narrative.
-- **Signature elements:** repaired floating heart, handwritten-style promise notes, thin chapter rail / progress marker.
-- **Interaction philosophy:** each action should feel like a small act of sincerity: choose a promise, write a name, opt in explicitly, then let the other person decide.
-- **Animation:** restrained parallax on background ribbons and heart, springy chips, soft card reveals, reduced-motion fallback, no confetti until acceptance.
-- **Typography:** use a high-contrast serif display face for emotional headlines and a clean grotesk sans for UI/body. Use `Cormorant Garamond` + `Manrope` from Google Fonts.
-- **Brand essence:** a private second-chance ritual for two people who want to try again honestly — tender, lucid, a little cheeky.
-- **Brand voice:** intimate, direct, self-aware. Example lines: “A heart can open without forgetting.” / “No grand gesture. Just a clear yes, if it’s really a yes.”
-- **Wordmark & logo:** `SC` monogram inside a small broken-and-rejoined ring, paired with the lowercase wordmark `second/chance`.
-- **Signature brand color:** `#A51F2B` rosewood red.
-
-## Implementation approach
-- Vite + vanilla JavaScript for a small, dependency-light interactive page.
-- `index.html` contains semantic sections and a single app shell.
-- `src/main.js` owns step state, promise selection, name entry, consent gating, final decision, parallax listeners, and reduced-motion behavior.
-- `src/styles.css` owns responsive editorial layout, glass effects, typography, responsive breakpoints, and animation.
-- `public/manus-routes.json` declares the root route for Preview/publishing tooling.
-- `public/second-chance-hero.png` will hold the generated 3D hero illustration.
-
-## Project structure
-- `index.html` — document shell, metadata, app mount.
-- `src/main.js` — stateful interaction flow and progressive rendering.
-- `src/styles.css` — all visual design and responsive behavior.
-- `public/manus-routes.json` — route manifest.
-- `app.config.ts` — project logo metadata.
-- `TODO.md` — outcome clauses tracked for implementation.
-
-## Reconnection journey update
-The page is organized as four active chapters — notice the gap, rebuild the bridge, make it real, and leave room — with a sticky progress navigator, animated bridge dividers, scroll-aware active states, pointer-reactive hero art, and reduced-motion-aware transitions. Completing the third promise gently advances the user into the named apology chapter instead of leaving the form as a static page.
-
-## Sincerity and privacy extension
-The journey now collects a short accountable apology in addition to the promise bouquet. After consent, the server posts the bounded answer payload to OpenRouter using `cohere/north-mini-code:free` and asks for a nuanced, non-certainty-based sincerity impression. The UI labels it as an impression rather than a lie detector and shows a visibly rough editorial result card. If the provider rejects the configured credential or is unavailable, the endpoint returns a clearly labeled offline reflection instead of pretending a model ran. The exact answers and reading are sealed after submission and only revealed after the server checks the owner-only `OWNER_VIEW_PASSWORD` secret; neither secret is shipped to frontend code.
+## 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.

public/manus-routes.json

@@ -1 +1 @@
-{"routes":[{"path":"/","title":"Second Chance"}]}
+{"routes":[{"path":"/","title":"Second Chance"},{"path":"/owner","title":"Private Room"}]}

public/owner.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#f6ede6" />
+  <title>second/chance — private room</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <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}}
+  </style>
+</head>
+<body>
+  <main>
+    <div class="top"><div class="brand">second<span>/</span>chance</div><a class="back" href="/">← back to the room</a></div>
+    <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>
+    <section class="grid" id="entries" aria-live="polite"></section>
+  </main>
+  <script src="/owner.js"></script>
+</body>
+</html>

public/owner.js

@@ -0,0 +1,73 @@
+const entries = document.querySelector('#entries');
+const count = document.querySelector('#count');
+const refresh = document.querySelector('#refresh');
+
+const text = (value) => String(value ?? '');
+const formatDate = (value) => new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(value));
+
+function addText(parent, tag, className, value) {
+  const node = document.createElement(tag);
+  node.className = className;
+  node.textContent = text(value);
+  parent.appendChild(node);
+  return node;
+}
+
+function renderSubmission(item) {
+  const article = document.createElement('article');
+  article.className = 'entry';
+  const head = document.createElement('div');
+  head.className = 'entry-head';
+  addText(head, 'h2', '', item.name || 'Unnamed answer');
+  addText(head, 'time', '', formatDate(item.createdAt));
+  article.appendChild(head);
+  addText(article, 'div', 'label', 'the hard part');
+  addText(article, 'p', 'answer', item.apology);
+  addText(article, 'div', 'label', 'promises');
+  const pills = document.createElement('div');
+  pills.className = 'pills';
+  (Array.isArray(item.promises) ? item.promises : []).forEach((promise) => addText(pills, 'span', 'pill', promise));
+  article.appendChild(pills);
+  addText(article, 'div', 'label', 'consent');
+  addText(article, 'p', 'status', item.consent ? 'given — she said she means it and respects your choice' : 'not given');
+  const review = document.createElement('div');
+  review.className = 'review';
+  addText(review, 'div', 'label', 'imperfect AI reflection');
+  const score = document.createElement('div');
+  score.className = 'score';
+  score.textContent = `${item.reading?.score ?? '—'} / 100`;
+  const source = document.createElement('span');
+  source.className = 'source';
+  source.textContent = item.reading?.source === 'model' ? 'model-backed' : 'offline reflection';
+  score.appendChild(source);
+  review.appendChild(score);
+  addText(review, 'p', 'answer', item.reading?.read || 'No reading saved.');
+  addText(review, 'p', 'status', `${item.reading?.label || 'unlabeled'} · care signal: ${item.reading?.careSignal || 'not recorded'}`);
+  article.appendChild(review);
+  return article;
+}
+
+async function load() {
+  count.textContent = 'loading the room…';
+  refresh.disabled = true;
+  try {
+    const response = await fetch('/api/owner/submissions', { cache: 'no-store' });
+    if (!response.ok) throw new Error('Could not load the room.');
+    const payload = await response.json();
+    entries.replaceChildren();
+    const list = Array.isArray(payload.submissions) ? payload.submissions : [];
+    count.textContent = `${list.length} sealed answer${list.length === 1 ? '' : 's'} · newest first`;
+    if (!list.length) {
+      addText(entries, 'div', 'empty', 'No one has answered yet. When she finishes the room, her words will appear here.');
+    } else {
+      list.forEach((item) => entries.appendChild(renderSubmission(item)));
+    }
+  } catch (error) {
+    count.textContent = error.message;
+  } finally {
+    refresh.disabled = false;
+  }
+}
+
+refresh.addEventListener('click', load);
+load();

server.js

@@ -9,7 +9,26 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const port = Number(process.env.PORT || 3000);
 const isProduction = process.env.NODE_ENV === 'production';
 const model = 'cohere/north-mini-code:free';
-const submissions = new Map();
+const storageDir = process.env.DATA_DIR || (fs.existsSync('/data') ? '/data' : path.join(__dirname, 'data'));
+const submissionsFile = path.join(storageDir, 'submissions.json');
+
+function loadSubmissions() {
+  try {
+    const parsed = JSON.parse(fs.readFileSync(submissionsFile, 'utf8'));
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+let submissions = loadSubmissions();
+
+function persistSubmissions() {
+  fs.mkdirSync(storageDir, { recursive: true });
+  const tempFile = `${submissionsFile}.tmp`;
+  fs.writeFileSync(tempFile, JSON.stringify(submissions, null, 2));
+  fs.renameSync(tempFile, submissionsFile);
+}
 
 const fallbackReading = {
   score: 58,
@@ -59,12 +78,8 @@ function localReflection(payload) {
   return { ...fallbackReading, score: Math.max(35, Math.min(74, score)) };
 }
 
-function pruneSubmissions() {
-  const expiry = Date.now() - 24 * 60 * 60 * 1000;
-  for (const [id, submission] of submissions) {
-    if (submission.createdAt < expiry) submissions.delete(id);
-  }
-  while (submissions.size > 200) submissions.delete(submissions.keys().next().value);
+function findSubmission(id) {
+  return submissions.find((submission) => submission.id === id);
 }
 
 async function rateSincerity(payload) {
@@ -109,12 +124,26 @@ 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) });
+    return true;
+  }
+  if (req.method === 'GET' && req.url.startsWith('/api/owner/submissions/')) {
+    const id = cleanString(req.url.split('/').pop(), 100);
+    const submission = findSubmission(id);
+    if (!submission) {
+      sendJson(res, 404, { error: 'Submission not found.' });
+      return true;
+    }
+    sendJson(res, 200, { submission });
+    return true;
+  }
   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 = submissions.get(cleanString(payload.submissionId, 100));
+      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) {
         sendJson(res, 401, { error: 'That key does not open this room.' });
@@ -157,8 +186,16 @@ async function handleApi(req, res) {
       reading = localReflection(normalizedPayload);
     }
     const submissionId = crypto.randomUUID();
-    submissions.set(submissionId, { ...normalizedPayload, reading, createdAt: Date.now() });
-    pruneSubmissions();
+    submissions.push({
+      id: submissionId,
+      ...normalizedPayload,
+      reading,
+      createdAt: Date.now(),
+      viewed: false,
+      decision: 'pending',
+      updatedAt: Date.now(),
+    });
+    persistSubmissions();
     sendJson(res, 200, { sealed: true, submissionId });
   } catch (error) {
     console.error('[sincerity]', error.message);
@@ -169,7 +206,7 @@ async function handleApi(req, res) {
 
 function serveStatic(req, res) {
   const requestPath = new URL(req.url, 'http://localhost').pathname;
-  const relative = requestPath === '/' ? 'index.html' : requestPath.replace(/^\//, '');
+  const relative = requestPath === '/' ? 'index.html' : requestPath === '/owner' ? 'owner.html' : requestPath.replace(/^\//, '');
   const filePath = path.resolve(__dirname, isProduction ? 'dist' : 'public', relative);
   const basePath = path.resolve(__dirname, isProduction ? 'dist' : 'public');
   if (!filePath.startsWith(basePath)) {
@@ -177,7 +214,7 @@ function serveStatic(req, res) {
   }
   if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
     const ext = path.extname(filePath);
-    const types = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.png': 'image/png', '.json': 'application/json' };
+    const types = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.png': 'image/png', '.json': 'application/json', '.mp3': 'audio/mpeg' };
     res.writeHead(200, { 'Content-Type': types[ext] || 'application/octet-stream' });
     fs.createReadStream(filePath).pipe(res);
   } else {