Journal: render mandala client-side from saved symbols (recovers past entries, no cache dependency)

frontend/journal.js

@@ -93,24 +93,141 @@ function uuid() {
   return Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 9);
 }
 
-// ── Mandala helpers ─────────────────────────────────────────
-// Convert a Blob into a persistent data: URL (base64) via FileReader.
-function blobToDataURL(blob) {
-  return new Promise((resolve, reject) => {
-    const fr = new FileReader();
-    fr.onload = () => resolve(fr.result);
-    fr.onerror = () => reject(fr.error);
-    fr.readAsDataURL(blob);
-  });
+// ── Mandala (client-side render) ────────────────────────────
+// The mandala is fully deterministic from an entry's symbol NAMES, so we
+// draw it in-browser from the saved `symbols` on every reflection AND
+// restore. This removes the dependency on the server's ephemeral
+// /static/mandala/<hash>.png cache (gitignored, wiped on Space restart),
+// which 404'd for past entries reopened in a new session. The drawing is a
+// faithful port of app.py:generate_mandala (768×768). The palette RGBs
+// below are the mandala's intrinsic artwork colours — NOT the journal
+// --kg theme — so they are hardcoded verbatim to match the server.
+
+// Deterministically derive a soft color from a symbol name.
+// Port of app.py:_color_for_symbol. `h` stays < 256**3 so plain Number
+// math is exact here.
+function colorForSymbol(symbol) {
+  let h = 0;
+  for (let i = 0; i < symbol.length; i++) {
+    h = (h * 31 + symbol.charCodeAt(i)) % (256 ** 3);
+  }
+  const r = 90 + (h & 0xFF) % 120;
+  const g = 90 + ((h >> 8) & 0xFF) % 120;
+  const b = 90 + ((h >> 16) & 0xFF) % 120;
+  return `rgb(${r},${g},${b})`;
 }
-// Set the mandala <img>. Cache-bust ONLY non-data: URLs — appending a
-// query string to a data: URL corrupts it. A failed load (e.g. a legacy
-// entry whose ephemeral /static/mandala/<hash>.png is gone) hides the
-// wrap gracefully instead of showing a broken-image icon.
-function setMandalaSrc(url) {
-  if (!url) { mandalaWrap.hidden = true; return; }
+
+// Draw the symbolic mandala onto an offscreen canvas and return a PNG
+// data URL. `symbols` is the entry's saved array of {symbol, archetypes}
+// (older entries may store plain strings); only the names matter.
+function renderMandalaCanvas(symbols) {
+  const names = (symbols || [])
+    .map(s => (typeof s === "string" ? s : (s && s.symbol) || ""))
+    .filter(Boolean)
+    .slice(0, 8);
+
+  const size = 768;
+  const center = size / 2;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+
+  const bg = "rgb(250,247,240)";   // warm off-white
+  const ink = "rgb(60,55,50)";
+  const gold = "rgb(191,149,63)";  // kintsugi gold
+  const serif = '"Georgia", "Times New Roman", serif';
+
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+
+  // Background.
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, size, size);
+
+  // Concentric circles. range(80,340,52) → [80,132,184,236,288,340].
+  ctx.lineWidth = 2;
+  let ci = 0;
+  for (let radius = 80; radius < 340; radius += 52) {
+    ctx.strokeStyle = ci % 2 === 0 ? gold : "rgb(200,190,175)";
+    ctx.beginPath();
+    ctx.arc(center, center, radius, 0, 2 * Math.PI);
+    ctx.stroke();
+    ci++;
+  }
+
+  const ringRadius = 250;
+  const n = names.length;
+
+  if (n > 0) {
+    for (let idx = 0; idx < n; idx++) {
+      const symbol = names[idx];
+      const angle = (2 * Math.PI * idx / n) - (Math.PI / 2);  // start at top
+      const x = center + ringRadius * Math.cos(angle);
+      const y = center + ringRadius * Math.sin(angle);
+      const color = colorForSymbol(symbol);
+
+      // Connecting line from center to the node.
+      ctx.strokeStyle = "rgb(210,200,185)";
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(center, center);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+
+      // Symbol node: filled circle outlined in gold.
+      const nodeR = 30;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(x, y, nodeR, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.strokeStyle = gold;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      // Glyph: first letter inside the node.
+      ctx.font = `20px ${serif}`;
+      ctx.fillStyle = bg;
+      ctx.fillText(symbol[0].toUpperCase(), x, y);
+
+      // Label below the node.
+      ctx.fillStyle = ink;
+      ctx.fillText(symbol, x, y + nodeR + 14);
+    }
+  } else {
+    ctx.font = `20px ${serif}`;
+    ctx.fillStyle = "rgb(150,140,130)";
+    ctx.fillText("no symbols detected", center, center + 120);
+  }
+
+  // Center emblem.
+  ctx.fillStyle = "rgb(255,252,246)";
+  ctx.beginPath();
+  ctx.arc(center, center, 55, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.strokeStyle = gold;
+  ctx.lineWidth = 3;
+  ctx.stroke();
+  ctx.font = `20px ${serif}`;
+  ctx.fillStyle = gold;
+  ctx.fillText("Kintsugi", center, center - 12);
+  ctx.fillText("Garden", center, center + 12);
+
+  // Footer.
+  ctx.font = `16px ${serif}`;
+  ctx.fillStyle = "rgb(150,140,130)";
+  ctx.fillText("session symbolic map", center, size - 28);
+
+  return canvas.toDataURL("image/png");
+}
+
+// Display the mandala for an entry's symbols, rendered client-side.
+// Always shows (an empty symbol set renders the "no symbols detected"
+// mandala rather than hiding). The onerror handler stays as a harmless
+// graceful fallback.
+function showMandalaFor(symbols) {
   mandalaEl.onerror = () => { mandalaWrap.hidden = true; };
-  mandalaEl.src = url.startsWith("data:") ? url : url + "?t=" + Date.now();
+  mandalaEl.src = renderMandalaCanvas(symbols);
   mandalaWrap.hidden = false;
 }
 
@@ -459,7 +576,10 @@ function selectEntry(id) {
   readingChip.textContent = e.entry_type;
   readingBack.hidden = false;
   quoted.textContent = e.entry; quoted.hidden = false;
-  setMandalaSrc(e.mandala_url);
+  // Re-derive the mandala client-side from the entry's saved symbols.
+  // This recovers legacy entries whose ephemeral server PNG (mandala_url)
+  // now 404s — they still carry `symbols`, which is all the render needs.
+  showMandalaFor(e.symbols);
   for (const [heading, markdown] of Object.entries(e.sections || {})) {
     if (markdown && markdown.trim()) showSection(heading, markdown);
   }
@@ -492,6 +612,9 @@ async function streamNew(payload) {
     grounded_jungian: payload.grounded_jungian,
     include_question: payload.include_question,
     symbols: null,
+    // mandala_url is intentionally left null: the mandala is always
+    // re-derived client-side from `symbols`, so the image is never stored.
+    // Kept on the object for shape compatibility with older exports.
     mandala_url: null,
     sections: {},
   };
@@ -537,25 +660,16 @@ async function streamNew(payload) {
             errEl.hidden = false; aborted = true; break;
           case "symbols":
             draft.symbols = event.symbols;
+            // Render the mandala client-side from these symbols and show it.
+            // The mandala is fully derived from symbol names, so we never
+            // store the image — it's re-derived on every restore.
+            showMandalaFor(draft.symbols);
             break;
           case "mandala":
-            if (event.url) {
-              // Show live immediately from the (currently-present) server path.
-              setMandalaSrc(event.url);
-              // Persist the IMAGE itself as a data: URL so the mandala survives
-              // server-cache eviction / Space restarts. The /static/mandala/<hash>.png
-              // path is ephemeral (gitignored .mandala_cache, regenerated at runtime),
-              // so it 404s for past entries reopened in a new session. Fetch the bytes
-              // now (while the file exists) and store base64. A fetch/convert failure
-              // must never block persisting the reading — fall back to the live display.
-              try {
-                const blob = await (await fetch(event.url)).blob();
-                draft.mandala_url = await blobToDataURL(blob);
-              } catch (mErr) {
-                console.warn("mandala persist failed; keeping live display only", mErr);
-                draft.mandala_url = event.url;
-              }
-            }
+            // The server still emits a mandala URL, but it's an ephemeral
+            // /static/mandala/<hash>.png that 404s after a Space restart.
+            // We no longer use it: the mandala is drawn in-browser from the
+            // `symbols` event above. Intentionally a no-op.
             break;
           case "reading_section":
             draft.sections[event.heading] = event.markdown;