feat: immersive Cesium watercolour (stamen imagery + paint post-process + chase cam), polaroid polish (tiny-mono dd/mm/yyyy, 4/5 aspect, longer caption), timeline by date, fix 2D map expand collapse, stadia key config

app.py

@@ -1259,6 +1259,10 @@ async def phoenix_proxy_post(request: Request, path: str):
 from dotenv import load_dotenv
 load_dotenv()
 CESIUM_ION_TOKEN = os.environ.get("SOZAI_CESIUM_ION_TOKEN", "")
+# Free Stadia Maps API key (https://client.stadiamaps.com) for the Stamen
+# Watercolor basemap on the Cesium globe. Optional — without it the globe keeps
+# its default imagery.
+STADIA_MAPS_KEY = os.environ.get("SOZAI_STADIA_KEY", "")
 
 
 @app.get("/api/config")
@@ -1271,6 +1275,7 @@ def client_config():
     return {
         "cesiumIonToken": CESIUM_ION_TOKEN,
         "cesiumEnabled": bool(CESIUM_ION_TOKEN),
+        "stadiaMapsKey": STADIA_MAPS_KEY,
         "nsfwEnabled": True,            # the gate always runs (open if model absent)
         "asrEnabled": True,             # the endpoint always exists (may be unavailable)
         "asrModel": ASR_MODEL_ID,

index.html

@@ -272,9 +272,9 @@
       transition: transform .2s; cursor:grab; }
     .sozai-polaroid-wrap.is-dragging .sozai-polaroid { cursor:grabbing; }
     .sozai-polaroid:hover { z-index:50; }
-    .sozai-polaroid img { display:block; width:84px; height:84px; object-fit:cover; }
-    .sozai-polaroid .cap { font-family:'Inkwell','Caveat',cursive; font-size:13px; color:var(--foreground);
-      text-align:center; padding:3px 2px 5px; max-width:84px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+    .sozai-polaroid img { display:block; width:100px; height:125px; object-fit:cover; }
+    .sozai-polaroid .cap { font-family:'Martian Mono',monospace; font-size:9px; line-height:1.25; color:var(--foreground);
+      text-align:center; padding:4px 3px 5px; max-width:100px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
     .sozai-polaroid .pdel { position:absolute; top:-8px; right:-8px; width:18px; height:18px; border-radius:50%;
       background:#fff; border:1.5px solid var(--primary,#7c3aed); color:var(--primary,#7c3aed);
       font-size:11px; line-height:1; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
@@ -1622,7 +1622,7 @@
               className={cn("relative rounded-md border-2 border-primary bg-card p-3 shadow-sm",
                 destroying ? "sozai-destroy" : (slideDir === "left" ? "sozai-slide-left" : "sozai-slide-right"))}>
               {destroying ? <span className="sozai-tear" /> : null}
-              <div className="relative aspect-[4/3] overflow-hidden rounded-sm border-2 border-primary/70">
+              <div className="relative aspect-[4/5] overflow-hidden rounded-sm border-2 border-primary/70">
                 <DraggableImage src={photo.src} alt={photo.alt}
                   focusX={photo.focusX != null ? photo.focusX : 50}
                   focusY={photo.focusY != null ? photo.focusY : 50}
@@ -2427,22 +2427,26 @@
     // components/map/timeline.tsx
     // ----------------------------------------------------------------- //
     function Timeline({ date, moments, selectedId, onSelect }) {
+      // Order chronologically by calendar DATE (photos span multiple years) and
+      // label each stop with its date — not the literal time of day.
+      const shortDate = (s) => { const d = new Date(s); return isNaN(d) ? (s || "") : d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }); };
+      const sorted = (moments || []).slice().sort((a, b) => (new Date(a.date).getTime() || 0) - (new Date(b.date).getTime() || 0));
       return (
         <div className="flex flex-col gap-4">
           <div className="flex items-center justify-between gap-4">
             <h2 className="font-serif text-sm font-semibold text-foreground">{date}</h2>
-            <span className="font-serif text-xs italic text-muted-foreground">a day to remember</span>
+            <span className="font-serif text-xs italic text-muted-foreground">your journey, in order</span>
           </div>
           <div className="relative">
             <span aria-hidden="true" className="absolute left-0 right-0 top-3 h-0.5 bg-primary/30" />
             <ol className="relative flex items-start justify-between">
-              {moments.map((m) => {
+              {sorted.map((m, i) => {
                 const isActive = m.id === selectedId;
                 return (
                   <li key={m.id} className="flex flex-1 flex-col items-center gap-2">
-                    <button type="button" onClick={() => onSelect && onSelect(m.id)} aria-current={isActive ? "true" : undefined} aria-label={`${m.title} at ${m.time}`}
-                      className={cn("z-10 flex size-6 items-center justify-center rounded-full border-2 border-primary bg-card font-mono text-xs font-bold text-primary transition-colors hover:bg-accent", isActive && "bg-primary text-primary-foreground")}>{m.id}</button>
-                    <span className="text-center font-mono text-[10px] leading-tight text-muted-foreground">{m.time}</span>
+                    <button type="button" onClick={() => onSelect && onSelect(m.id)} aria-current={isActive ? "true" : undefined} aria-label={`${m.title} on ${shortDate(m.date)}`}
+                      className={cn("z-10 flex size-6 items-center justify-center rounded-full border-2 border-primary bg-card font-mono text-xs font-bold text-primary transition-colors hover:bg-accent", isActive && "bg-primary text-primary-foreground")}>{i + 1}</button>
+                    <span className="text-center font-mono text-[10px] leading-tight text-muted-foreground">{shortDate(m.date)}</span>
                   </li>
                 );
               })}
@@ -3902,7 +3906,8 @@
           el.className = "sozai-polaroid";
           el.style.setProperty("--rot", rot + "deg");
           el.style.setProperty("--scale", scale);
-          const meta = [p.date, p.time].filter(Boolean).join(" · ");
+          const _dmy = (s) => { const d = new Date(s); if (isNaN(d)) return s; const z = (n) => String(n).padStart(2, "0"); return z(d.getDate()) + "/" + z(d.getMonth() + 1) + "/" + d.getFullYear(); };
+          const meta = p.date ? _dmy(p.date) : "";
           const objPos = (p.focusX != null ? p.focusX : 50) + "% " + (p.focusY != null ? p.focusY : 50) + "%";
           el.innerHTML =
             '<img src="' + p.src + '" alt="" style="object-position:' + objPos + '">' +
@@ -3979,8 +3984,12 @@
         }
       }, [isFullscreen]);
       useEffect(() => {
-        const t = setTimeout(() => { if (mapRef.current) mapRef.current.resize(); }, 80);
-        return () => clearTimeout(t);
+        // Resize the GL canvas several times as the expand/collapse layout
+        // settles — a single early resize() leaves the map blank/collapsed.
+        const doResize = () => { if (mapRef.current) { try { mapRef.current.resize(); } catch (e) {} } };
+        const raf = requestAnimationFrame(doResize);
+        const ts = [setTimeout(doResize, 120), setTimeout(doResize, 350)];
+        return () => { cancelAnimationFrame(raf); ts.forEach(clearTimeout); };
       }, [isFullscreen]);
       function toggleFullscreen() { setIsFullscreen((v) => !v); }
 
@@ -4284,7 +4293,7 @@
           ) : null}
 
           {/* the map itself, with the authentic watercolor paper + vignette */}
-          <div className={cn("sozai-map-dropzone relative w-full overflow-hidden rounded-lg border-2 border-primary/40", isFullscreen && "flex-1", dropArmed && "drop-armed")}
+          <div className={cn("sozai-map-dropzone relative w-full overflow-hidden rounded-lg border-2 border-primary/40", isFullscreen && "flex-1 min-h-0", dropArmed && "drop-armed")}
             onDragOver={(e) => { if (e.dataTransfer.types.includes("application/sozai-photo")) { e.preventDefault(); setDropArmed(true); } }}
             onDragLeave={(e) => { if (e.currentTarget === e.target) setDropArmed(false); }}
             onDrop={(e) => {
@@ -4574,6 +4583,37 @@
               destination: Cesium.Cartesian3.fromDegrees(-123.1207, 49.2827, 1200),
               orientation: { heading: Cesium.Math.toRadians(10), pitch: Cesium.Math.toRadians(-25) },
             });
+            // Immersive watercolour basemap: Stamen Watercolor tiles (via Stadia
+            // Maps). Needs a free Stadia API key (SOZAI_STADIA_KEY) — without it
+            // the tiles 401 on dynamic domains, so we keep the default imagery.
+            try {
+              if (cfg.stadiaMapsKey) {
+                viewer.imageryLayers.removeAll();
+                viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
+                  url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg?api_key=" + cfg.stadiaMapsKey,
+                  maximumLevel: 16, // watercolour tiles thin out past z16
+                  credit: "Map tiles by Stamen Design, hosted by Stadia Maps; data © OpenStreetMap",
+                }));
+              }
+            } catch (e) { console.warn("[cesium] watercolor imagery failed", e); }
+            // Painterly post-process: posterize into flat washes + darken edges.
+            try {
+              viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
+                fragmentShader: `
+                  uniform sampler2D colorTexture;
+                  in vec2 v_textureCoordinates;
+                  void main() {
+                    vec2 uv = v_textureCoordinates;
+                    vec3 c = texture(colorTexture, uv).rgb;
+                    c = floor(c * 6.0 + 0.5) / 6.0;            // flat washes
+                    float o = 1.0 / 1024.0;
+                    vec3 dx = texture(colorTexture, uv+vec2(o,0.)).rgb - texture(colorTexture, uv-vec2(o,0.)).rgb;
+                    vec3 dy = texture(colorTexture, uv+vec2(0.,o)).rgb - texture(colorTexture, uv-vec2(0.,o)).rgb;
+                    float edge = clamp(length(dx)+length(dy), 0.0, 1.0);
+                    out_FragColor = vec4(c * (1.0 - 0.35*edge), 1.0);
+                  }`,
+              }));
+            } catch (e) { console.warn("[cesium] watercolor post-process failed", e); }
             try {
               const tileset = await Cesium.createOsmBuildingsAsync();
               if (cancelled) { viewer.destroy(); return; }
@@ -4795,18 +4835,24 @@
         const onTick = viewer.clock.onTick.addEventListener((clock) => {
           if (token.stop) return;
           const t = Cesium.JulianDate.secondsDifference(clock.currentTime, start);
-          // chase camera just behind & above the model
+          // immersive chase camera: sit behind the moving point along the
+          // direction of travel and a little above it, looking ahead down the
+          // route (vs. a fixed south-facing top-down view).
           try {
-            const pos = sampled.getValue(clock.currentTime);
-            if (pos) {
-              const carto = Cesium.Cartographic.fromCartesian(pos);
-              viewer.scene.camera.setView({
-                destination: Cesium.Cartesian3.fromDegrees(
-                  Cesium.Math.toDegrees(carto.longitude),
-                  Cesium.Math.toDegrees(carto.latitude) - (isPlane ? 0.004 : 0.0016),
-                  (isPlane ? 1200 : 300)),
-                orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(isPlane ? -38 : -32) },
-              });
+            const lookAhead  = isPlane ? 4.0 : 2.0;     // s ahead to aim at
+            const chaseDist  = isPlane ? 1400 : 260;    // m behind the point
+            const chaseHeight = isPlane ? 700 : 140;    // m above the point
+            const now = clock.currentTime;
+            const pos = sampled.getValue(now);
+            const ahead = sampled.getValue(Cesium.JulianDate.addSeconds(now, lookAhead, new Cesium.JulianDate())) || pos;
+            if (pos && ahead) {
+              const fwd = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(ahead, pos, new Cesium.Cartesian3()), new Cesium.Cartesian3());
+              const up  = Cesium.Cartesian3.normalize(pos, new Cesium.Cartesian3()); // geocentric up
+              const cam = Cesium.Cartesian3.clone(pos);
+              Cesium.Cartesian3.add(cam, Cesium.Cartesian3.multiplyByScalar(fwd, -chaseDist, new Cesium.Cartesian3()), cam);
+              Cesium.Cartesian3.add(cam, Cesium.Cartesian3.multiplyByScalar(up, chaseHeight, new Cesium.Cartesian3()), cam);
+              const dir = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(ahead, cam, new Cesium.Cartesian3()), new Cesium.Cartesian3());
+              viewer.scene.camera.setView({ destination: cam, orientation: { direction: dir, up: up } });
             }
           } catch (e) {}
           if (nextStop < stopTimes.length && t >= stopTimes[nextStop] - 0.2) {
@@ -6544,7 +6590,7 @@
         <li className="flex w-40 flex-col items-center sm:w-44">
           <div className="relative z-10 h-4 w-3 rounded-sm bg-[oklch(0.45_0.06_60)] shadow-sm" aria-hidden="true" />
           <figure
-            className={cn("group relative -mt-1 select-none rounded-sm bg-[oklch(0.99_0.01_85)] p-2 pb-9 shadow-xl",
+            className={cn("group relative -mt-1 select-none rounded-sm bg-[oklch(0.99_0.01_85)] p-2 pb-12 shadow-xl",
               dragging ? "" : "dr-sway", revealed ? "cursor-default" : "cursor-grab active:cursor-grabbing")}
             style={{ animationDelay: swayDelay + "s",
               transform: dragging ? "rotate(" + (tilt * 0.3) + "deg) translateX(" + (tilt * 0.4) + "px)" : undefined,
@@ -6569,7 +6615,7 @@
                 </div>
               )}
             </div>
-            <figcaption className="absolute inset-x-0 bottom-2 line-clamp-2 px-2 text-center font-hand text-[12px] leading-tight text-[oklch(0.3_0.04_264)]"
+            <figcaption className="absolute inset-x-0 bottom-2 line-clamp-3 px-2 text-center font-hand text-[12px] leading-tight text-[oklch(0.3_0.04_264)]"
               style={revealed ? { animation: "dr-cap-in .6s ease-out both" } : undefined}>
               {revealed ? photo.defaultCaption : ""}
             </figcaption>