Deploy Aether Garden application

.pytest_cache/v/cache/lastfailed

@@ -0,0 +1,3 @@
+{
+  "tests/test_diorama_scene.py": true
+}

app.py

@@ -14,7 +14,13 @@ load_dotenv()
 
 from world.database import get_world_state, init_database
 from world.quests import assign_quest, get_entity_quest, get_active_quests
-from world.presence import heartbeat as presence_heartbeat, get_active_count, get_recent_arrivals
+from world.presence import (
+    cleanup_stale_sessions,
+    heartbeat as presence_heartbeat,
+    get_active_count,
+    get_active_visitors,
+    get_recent_arrivals,
+)
 from world.entities import (
     check_rate_limit,
     get_all_entities,
@@ -337,6 +343,37 @@ def get_live_presence(session_id: str) -> str:
         return ""
 
 
+def diorama_presence_api(location_id, visitor_id: str, x, z, yaw) -> dict:
+    """Store a visitor's in-scene position and return nearby visitors."""
+    try:
+        loc_id = int(float(location_id))
+        visitor = (visitor_id or "").strip()[:80]
+        if not visitor:
+            return {"visitors": []}
+        px = max(-24.0, min(24.0, float(x or 0)))
+        pz = max(-24.0, min(24.0, float(z or 0)))
+        pyaw = float(yaw or 0)
+        short = visitor.replace("aether-", "").replace("_", "-")[-4:].upper()
+        presence_heartbeat(
+            visitor,
+            loc_id,
+            x=px,
+            z=pz,
+            yaw=pyaw,
+            display_name=f"Visitor {short}",
+        )
+        cleanup_stale_sessions(max_age_seconds=300)
+        return {
+            "visitors": get_active_visitors(
+                loc_id,
+                exclude_session_id=visitor,
+                window_seconds=22,
+            )
+        }
+    except Exception:
+        return {"visitors": []}
+
+
 def trigger_live_tick() -> str:
     """Run one simulation tick on demand and return a summary."""
     try:
@@ -511,6 +548,7 @@ def build_app() -> gr.Blocks:
                     '<h2 class="section-title">Walk the Eight Sacred Places</h2>'
                     '<p class="section-desc">Pick a place below — then <strong>WASD to walk</strong>, '
                     '<strong>drag to look</strong>, <strong>E to talk</strong> to any soul you find. '
+                    'Other live visitors appear as golden wisps when they step into the same place. '
                     'Or press ✦ to wander somewhere at random.</p>'
                     '</div>'
                 )
@@ -748,6 +786,26 @@ def build_app() -> gr.Blocks:
             api_name="assign_quest",
         )
 
+        # ── Diorama multiplayer presence API ──
+        presence_loc_comp = gr.Textbox(visible=False, elem_id="presence_location_input")
+        presence_visitor_comp = gr.Textbox(visible=False, elem_id="presence_visitor_input")
+        presence_x_comp = gr.Textbox(visible=False, elem_id="presence_x_input")
+        presence_z_comp = gr.Textbox(visible=False, elem_id="presence_z_input")
+        presence_yaw_comp = gr.Textbox(visible=False, elem_id="presence_yaw_input")
+        presence_json_comp = gr.JSON(visible=False, elem_id="presence_json_output")
+        presence_yaw_comp.change(
+            fn=diorama_presence_api,
+            inputs=[
+                presence_loc_comp,
+                presence_visitor_comp,
+                presence_x_comp,
+                presence_z_comp,
+                presence_yaw_comp,
+            ],
+            outputs=[presence_json_comp],
+            api_name="diorama_presence",
+        )
+
         # ── Presence heartbeat (every 10s) ──
         presence_timer = gr.Timer(10)
         presence_timer.tick(
@@ -796,29 +854,28 @@ def build_app() -> gr.Blocks:
           new MutationObserver(bind).observe(document.body, { childList: true, subtree: true });
 
           window._aetherHoverDiorama = false;
+          window._aetherDioramaActive = false;
           window._aetherActiveFrame = null;
           const GAME_KEYS = new Set([
             'KeyW','KeyA','KeyS','KeyD',
             'ArrowUp','ArrowDown','ArrowLeft','ArrowRight',
-            'KeyE','ShiftLeft','ShiftRight','Escape'
+            'KeyE','KeyQ','ShiftLeft','ShiftRight','Escape'
           ]);
 
           const sendKeyToFrame = (frame, code, action) => {
             if (!frame) return;
+            try {
+              frame.contentWindow?.postMessage({ type: 'aether_key', code, action }, '*');
+            } catch (_) {}
             const evtType = action === 'down' ? 'keydown' : 'keyup';
             try {
               const doc = frame.contentDocument;
               if (doc) {
                 doc.dispatchEvent(new KeyboardEvent(evtType, {
-                  code, key: code.replace('Key', '').toLowerCase(),
-                  bubbles: true, cancelable: true,
+                  code, bubbles: true, cancelable: true,
                 }));
-                return;
               }
             } catch (_) {}
-            try {
-              frame.contentWindow?.postMessage({ type: 'aether_key', code, action }, '*');
-            } catch (_) {}
           };
 
           const wireDioramaFrames = () => {
@@ -840,18 +897,22 @@ def build_app() -> gr.Blocks:
                 window._aetherActiveFrame = frame || window._aetherActiveFrame;
               });
               wrap.addEventListener('mouseleave', () => {
-                window._aetherHoverDiorama = false;
+                if (!window._aetherDioramaActive) window._aetherHoverDiorama = false;
               });
               wrap.addEventListener('mousedown', activate);
+              wrap.addEventListener('click', activate);
             });
 
             document.querySelectorAll('iframe.diorama-frame').forEach((frame) => {
               if (frame.dataset.dioramaBound) return;
               frame.dataset.dioramaBound = '1';
               frame.setAttribute('tabindex', '0');
+              window._aetherActiveFrame = frame;
               frame.addEventListener('load', () => {
+                window._aetherActiveFrame = frame;
                 setTimeout(() => { try { frame.contentWindow?.postMessage('diorama-resize', '*'); } catch (_) {} }, 120);
                 setTimeout(() => { try { frame.contentWindow?.postMessage('diorama-resize', '*'); } catch (_) {} }, 600);
+                setTimeout(() => { try { frame.contentWindow?.postMessage({ type: 'aether_activate' }, '*'); } catch (_) {} }, 200);
               });
             });
           };
@@ -868,17 +929,15 @@ def build_app() -> gr.Blocks:
               if (el.isContentEditable) return true;
               return !!el.closest?.('textarea, input, [contenteditable="true"]');
             };
+            const getActiveFrame = () =>
+              window._aetherActiveFrame
+              || document.querySelector('.diorama-wrap iframe.diorama-frame')
+              || document.querySelector('iframe.diorama-frame');
             const forwardKey = (e, action) => {
               if (!GAME_KEYS.has(e.code)) return;
               if (typingInForm()) return;
-              const frame = window._aetherActiveFrame
-                || document.querySelector('.diorama-wrap:hover iframe.diorama-frame')
-                || document.querySelector('iframe.diorama-frame');
+              const frame = getActiveFrame();
               if (!frame) return;
-              if (!window._aetherHoverDiorama && action === 'down') {
-                const wrap = frame.closest('.diorama-wrap');
-                if (!wrap?.matches(':hover')) return;
-              }
               e.preventDefault();
               e.stopImmediatePropagation();
               sendKeyToFrame(frame, e.code, action);
@@ -887,10 +946,37 @@ def build_app() -> gr.Blocks:
             window.addEventListener('keyup', (e) => forwardKey(e, 'up'), true);
           }
 
+          if (!window._aetherFocusRecheckBound) {
+            window._aetherFocusRecheckBound = true;
+            setInterval(() => {
+              if (!window._aetherDioramaActive) return;
+              const el = document.activeElement;
+              const typing = el && (
+                el.tagName === 'INPUT' || el.tagName === 'TEXTAREA'
+                || el.tagName === 'SELECT' || el.isContentEditable
+              );
+              if (typing) return;
+              const frame = window._aetherActiveFrame
+                || document.querySelector('iframe.diorama-frame');
+              if (!frame) return;
+              try { frame.contentWindow?.postMessage({ type: 'aether_activate' }, '*'); } catch (_) {}
+            }, 2500);
+          }
+
           // Portal navigation from diorama iframe
           if (!window._aetherPortalListenerBound) {
             window._aetherPortalListenerBound = true;
             window.addEventListener('message', (e) => {
+              if (e.data && e.data.type === 'aether_diorama_active') {
+                const frames = Array.from(document.querySelectorAll('iframe.diorama-frame'));
+                const active = frames.find((frame) => frame.contentWindow === e.source);
+                if (active) {
+                  window._aetherActiveFrame = active;
+                  window._aetherHoverDiorama = true;
+                  window._aetherDioramaActive = true;
+                }
+                return;
+              }
               if (!e.data || e.data.type !== 'aether_portal') return;
               const id = String(e.data.locationId || '');
               if (!id) return;

assets/diorama.html

@@ -10,13 +10,39 @@
     #canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; outline: none; }
 
     #focus-gate {
-      position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%);
-      z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
-      padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; text-align: center;
-      background: rgba(8,12,10,0.82); border: 1px solid rgba(212,168,75,0.38);
+      position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
+      z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
+      padding: 1.1rem 1.6rem; border-radius: 16px; cursor: pointer; text-align: center;
+      background: rgba(8,12,10,0.88); border: 2px solid rgba(212,168,75,0.55);
       color: #f0d9a0; outline: none; pointer-events: auto;
-      box-shadow: 0 8px 28px rgba(0,0,0,0.45);
+      box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 40px rgba(212,168,75,0.15);
       animation: gatePulse 2.4s ease-in-out infinite;
+      backdrop-filter: blur(8px);
+    }
+    #focus-gate::before {
+      content: '⬡'; font-size: 1.4rem; color: #d4a84b; opacity: 0.7;
+      animation: gateSpin 6s linear infinite;
+    }
+    @keyframes gateSpin { to { transform: rotate(360deg); } }
+    #walk-hint {
+      position: fixed; left: 50%; bottom: 14%; transform: translateX(-50%);
+      z-index: 24; pointer-events: none; opacity: 0; transition: opacity 0.4s;
+      padding: 0.5rem 1.2rem; border-radius: 999px;
+      background: rgba(8,12,10,0.78); border: 1px solid rgba(212,168,75,0.35);
+      color: #d4a84b; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
+      backdrop-filter: blur(6px);
+      animation: walkHintBob 2s ease-in-out infinite;
+    }
+    #walk-hint.show { opacity: 1; }
+    @keyframes walkHintBob {
+      0%,100% { transform: translateX(-50%) translateY(0); }
+      50% { transform: translateX(-50%) translateY(-4px); }
+    }
+    @keyframes waveFade {
+      0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
+      15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
+      80% { opacity: 1; }
+      100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.95); }
     }
     #focus-gate.hidden { display: none; }
     #focus-gate p {
@@ -25,8 +51,8 @@
     }
     #focus-gate span { font-size: 0.72rem; color: #b8b090; font-style: italic; }
     @keyframes gatePulse {
-      0%,100% { opacity: 0.88; transform: translateX(-50%) scale(1); }
-      50% { opacity: 1; transform: translateX(-50%) scale(1.02); }
+      0%,100% { opacity: 0.88; transform: translate(-50%, -50%) scale(1); }
+      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
     }
 
     #loading {
@@ -113,6 +139,17 @@
     }
     #ctrl-tip.show { opacity: 1; }
 
+    #multiplayer-hud {
+      position: fixed; left: 0.85rem; top: 0.75rem; z-index: 8;
+      pointer-events: none; max-width: min(300px, 70vw);
+      color: #d7c99d; font-size: 0.68rem; letter-spacing: 0.08em;
+      text-transform: uppercase; opacity: 0; transition: opacity 0.35s;
+      background: rgba(8,12,10,0.62); border: 1px solid rgba(212,168,75,0.22);
+      border-radius: 999px; padding: 0.34rem 0.75rem; backdrop-filter: blur(5px);
+    }
+    #multiplayer-hud.show { opacity: 1; }
+    #multiplayer-hud b { color: #f0d9a0; font-weight: 600; }
+
 
     /* ── Top-right buttons ── */
     #top-right {
@@ -233,9 +270,10 @@
   </div>
 
   <div id="focus-gate" tabindex="0">
-    <p>Click to walk</p>
-    <span>use WASD keys or the pad at bottom-left · drag to look</span>
+    <p>Click to Enter</p>
+    <span>WASD to walk · drag to look · E to talk · Q to wave</span>
   </div>
+  <div id="walk-hint">Press WASD to begin walking</div>
   <div id="move-pad" aria-label="Movement controls">
     <span class="mv-spacer"></span>
     <button type="button" class="mv-btn" data-key="KeyW">W</button>
@@ -253,6 +291,7 @@
     <div class="hud-name"  id="hud-name"></div>
     <div class="hud-ambience" id="hud-ambience"></div>
   </div>
+  <div id="multiplayer-hud"></div>
   <div id="ctrl-tip">WASD · Move &nbsp;|&nbsp; Drag · Look &nbsp;|&nbsp; E · Talk &nbsp;|&nbsp; Shift · Sprint</div>
   <div id="top-right">
     <button class="btn-hud" id="audio-btn" title="Toggle ambience">🔇</button>
@@ -372,8 +411,16 @@
     const SENS = 0.0028;
 
     const focusGate = document.getElementById('focus-gate');
+    const walkHint = document.getElementById('walk-hint');
+    let controlsActivated = false;
+    let hasMoved = false;
+
     focusGate.addEventListener('click', activateControls);
     focusGate.addEventListener('keydown', e => { if (e.code === 'Enter' || e.code === 'Space') activateControls(); });
+    ['pointerdown', 'touchstart'].forEach(evt => {
+      focusGate.addEventListener(evt, activateControls, { passive: true });
+      canvas.addEventListener(evt, () => { if (!controlsActivated) activateControls(); }, { passive: true });
+    });
     canvas.addEventListener('click', () => { activateControls(); });
     canvas.addEventListener('mousedown', e => {
       if (e.button !== 0) return;
@@ -458,10 +505,13 @@
       if (gate) gate.classList.add('hidden');
       canvas.focus({ preventScroll: true });
       try { window.focus(); } catch (_) {}
+      try { document.body.focus(); } catch (_) {}
       try { window.parent?.postMessage({ type: 'aether_diorama_active' }, '*'); } catch (_) {}
+      if (controlsActivated && !hasMoved && walkHint) walkHint.classList.add('show');
     }
 
     function activateControls() {
+      controlsActivated = true;
       grabFocus();
       enterFPS();
     }
@@ -471,13 +521,22 @@
     // ═══════════════════════════════════════════
     const keys = new Set();
     const MOVE_KEYS = new Set(['KeyW','KeyA','KeyS','KeyD','ArrowUp','ArrowDown','ArrowLeft','ArrowRight']);
-    const GAME_KEYS = new Set([...MOVE_KEYS, 'KeyE', 'ShiftLeft', 'ShiftRight', 'Escape']);
+    const GAME_KEYS = new Set([...MOVE_KEYS, 'KeyE', 'KeyQ', 'ShiftLeft', 'ShiftRight', 'Escape']);
 
     function pressKey(code) {
+      if (GAME_KEYS.has(code)) grabFocus();
       keys.add(code);
       autoOrbit = false;
-      if (MOVE_KEYS.has(code)) enterFPS();
+      if (MOVE_KEYS.has(code)) {
+        enterFPS();
+        if (!hasMoved) {
+          hasMoved = true;
+          if (walkHint) walkHint.classList.remove('show');
+          if (focusGate) focusGate.classList.add('hidden');
+        }
+      }
       if (code === 'KeyE') tryInteract();
+      if (code === 'KeyQ') tryWave();
     }
     function releaseKey(code) { keys.delete(code); }
 
@@ -985,6 +1044,188 @@
     }
     buildPortals();
 
+    // ═══════════════════════════════════════════
+    // MULTIPLAYER PRESENCE — Gradio-compatible polling
+    // ═══════════════════════════════════════════
+    const multiplayerHud = document.getElementById('multiplayer-hud');
+    const visitorId = (() => {
+      try {
+        let id = localStorage.getItem('aether_visitor_id');
+        if (!id) {
+          id = 'aether-' + (crypto.randomUUID ? crypto.randomUUID() : String(Date.now()) + Math.random().toString(16).slice(2));
+          localStorage.setItem('aether_visitor_id', id);
+        }
+        return id;
+      } catch (_) {
+        return 'aether-' + String(Date.now()) + Math.random().toString(16).slice(2);
+      }
+    })();
+    const remoteVisitors = new Map();
+    const remoteMat = new THREE.MeshBasicMaterial({
+      color: glow,
+      transparent: true,
+      opacity: 0.68,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+    });
+
+    function makeNameTexture(name) {
+      const c = document.createElement('canvas');
+      c.width = 256; c.height = 64;
+      const ctx = c.getContext('2d');
+      ctx.clearRect(0, 0, c.width, c.height);
+      ctx.fillStyle = 'rgba(8,12,10,0.72)';
+      roundRect(ctx, 18, 12, 220, 34, 17);
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(212,168,75,0.45)';
+      ctx.stroke();
+      ctx.font = '600 18px Georgia, serif';
+      ctx.fillStyle = '#f0d9a0';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(name || 'Visitor', 128, 29, 190);
+      const tex = new THREE.CanvasTexture(c);
+      tex.colorSpace = THREE.SRGBColorSpace;
+      return tex;
+    }
+    function roundRect(ctx, x, y, w, h, r) {
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+    }
+    function createRemoteVisitor(v) {
+      const group = new THREE.Group();
+      const body = new THREE.Mesh(
+        new THREE.SphereGeometry(0.42, 20, 12),
+        remoteMat.clone()
+      );
+      body.position.y = 1.3;
+      const aura = new THREE.Mesh(
+        new THREE.RingGeometry(0.52, 0.82, 32),
+        new THREE.MeshBasicMaterial({
+          color: glow,
+          transparent: true,
+          opacity: 0.45,
+          side: THREE.DoubleSide,
+          blending: THREE.AdditiveBlending,
+          depthWrite: false,
+        })
+      );
+      aura.rotation.x = -Math.PI / 2;
+      aura.position.y = 0.04;
+      const label = new THREE.Mesh(
+        new THREE.PlaneGeometry(2.5, 0.62),
+        new THREE.MeshBasicMaterial({
+          map: makeNameTexture(v.display_name),
+          transparent: true,
+          depthWrite: false,
+        })
+      );
+      label.position.y = 2.22;
+      group.add(aura, body, label);
+      group.position.set(Number(v.x) || 0, 0, Number(v.z) || 0);
+      group.userData = {
+        targetX: group.position.x,
+        targetZ: group.position.z,
+        seenAt: performance.now(),
+        body,
+        aura,
+        label,
+      };
+      scene.add(group);
+      return group;
+    }
+    function updateRemoteVisitors(list) {
+      const now = performance.now();
+      const seen = new Set();
+      for (const v of list || []) {
+        if (!v.session_id || v.session_id === visitorId) continue;
+        seen.add(v.session_id);
+        let group = remoteVisitors.get(v.session_id);
+        if (!group) {
+          group = createRemoteVisitor(v);
+          remoteVisitors.set(v.session_id, group);
+        }
+        group.userData.targetX = Number(v.x) || 0;
+        group.userData.targetZ = Number(v.z) || 0;
+        group.userData.seenAt = now;
+      }
+      for (const [id, group] of remoteVisitors) {
+        if (!seen.has(id) && now - group.userData.seenAt > 26000) {
+          scene.remove(group);
+          remoteVisitors.delete(id);
+        }
+      }
+      const count = remoteVisitors.size;
+      if (count) {
+        multiplayerHud.innerHTML = `<b>${count}</b> other visitor${count === 1 ? '' : 's'} walking here`;
+        multiplayerHud.classList.add('show');
+      } else {
+        multiplayerHud.classList.remove('show');
+      }
+    }
+    function gradioApiUrl(apiName) {
+      const root = (() => {
+        const p = location.pathname || '/';
+        const fileIdx = p.indexOf('/gradio_api/file=');
+        if (fileIdx >= 0) return p.slice(0, fileIdx) || '/';
+        try {
+          const pp = window.parent?.location?.pathname || '/';
+          const fi = pp.indexOf('/gradio_api/file=');
+          if (fi >= 0) return pp.slice(0, fi) || '/';
+          return pp.endsWith('/') ? pp : pp + '/';
+        } catch (_) { return '/'; }
+      })();
+      return `${root}gradio_api/run/${apiName}`;
+    }
+
+    const waveEmotes = [];
+    function tryWave() {
+      let nearVisitor = false;
+      for (const group of remoteVisitors.values()) {
+        const dx = group.position.x - camera.position.x;
+        const dz = group.position.z - camera.position.z;
+        if (Math.hypot(dx, dz) < 6) nearVisitor = true;
+      }
+      const el = document.createElement('div');
+      el.textContent = nearVisitor ? '👋 Hello, fellow walker!' : '👋';
+      el.style.cssText = 'position:fixed;left:50%;top:42%;transform:translateX(-50%);z-index:12;pointer-events:none;'
+        + 'padding:0.4rem 0.9rem;border-radius:999px;font-size:0.82rem;color:#f0d9a0;'
+        + 'background:rgba(8,12,10,0.82);border:1px solid rgba(212,168,75,0.4);'
+        + 'animation:waveFade 1.8s ease forwards;font-family:Georgia,serif;';
+      document.body.appendChild(el);
+      setTimeout(() => el.remove(), 1900);
+      waveEmotes.push({ t: performance.now(), near: nearVisitor });
+    }
+
+    async function syncPresence() {
+      try {
+        const res = await fetch(gradioApiUrl('diorama_presence'), {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({
+            data: [
+              String(loc.id || ''),
+              visitorId,
+              camera.position.x.toFixed(2),
+              camera.position.z.toFixed(2),
+              yaw.toFixed(4),
+            ]
+          })
+        });
+        if (!res.ok) return;
+        const json = await res.json();
+        const payload = json.data && json.data[0];
+        updateRemoteVisitors(payload && payload.visitors ? payload.visitors : []);
+      } catch (_) {}
+    }
+    setInterval(syncPresence, 800);
+    setTimeout(syncPresence, 400);
+
     // ═══════════════════════════════════════════
     // AUDIO  — per-location pad synthesizer
     // ═══════════════════════════════════════════
@@ -1204,7 +1445,7 @@
     // ── Soul chat via Gradio API ──
     async function askSoul(soulId, message) {
       try {
-        const res = await fetch('/gradio_api/run/chat_with_soul', {
+        const res = await fetch(gradioApiUrl('chat_with_soul'), {
           method: 'POST',
           headers: {'Content-Type':'application/json'},
           body: JSON.stringify({ data: [soulId, message] })
@@ -1308,7 +1549,7 @@
           chatHistory.appendChild(vMsg);
           // Call quest API
           try {
-            const res=await fetch('/gradio_api/run/assign_quest',{
+            const res=await fetch(gradioApiUrl('assign_quest'),{
               method:'POST', headers:{'Content-Type':'application/json'},
               body:JSON.stringify({data:[soulId, questTitle]})
             });
@@ -1597,6 +1838,18 @@
         else if(ea.type==='portalLight'){ea.light.intensity=0.7+Math.sin(t*2.2+ea.phase)*0.3;}
       }
 
+      for (const group of remoteVisitors.values()) {
+        const u = group.userData;
+        const lerp = Math.min(1, dt * 8);
+        group.position.x += (u.targetX - group.position.x) * lerp;
+        group.position.z += (u.targetZ - group.position.z) * lerp;
+        const pulse = 0.9 + Math.sin(t * 3.2 + group.position.x) * 0.12;
+        u.body.scale.setScalar(pulse);
+        u.aura.rotation.z += dt * 0.9;
+        u.aura.material.opacity = 0.3 + Math.sin(t * 2.1) * 0.1;
+        u.label.lookAt(camera.position.x, u.label.position.y + group.position.y, camera.position.z);
+      }
+
       // Particles
       const mp=motes.geometry.attributes.position;
       for(let i=0;i<moteN;i++){
@@ -1622,10 +1875,20 @@
     window.addEventListener('message', e => {
       if (e.data === 'diorama-resize') resizeRenderer();
       if (e.data?.type === 'aether_key') {
-        if (e.data.action === 'down') pressKey(e.data.code);
-        else releaseKey(e.data.code);
+        const code = e.data.code;
+        if (!code) return;
+        if (e.data.action === 'down') {
+          activateControls();
+          pressKey(code);
+        } else {
+          releaseKey(code);
+        }
+      }
+      if (e.data?.type === 'aether_activate') {
+        activateControls();
+        grabFocus();
+        enterFPS();
       }
-      if (e.data?.type === 'aether_activate') activateControls();
     });
   </script>
 </body>

ui/hero.py

@@ -13,9 +13,19 @@ def render_hero_banner() -> str:
     events = state.get("total_events", 0)
     interactions = state.get("total_interactions", 0)
 
+    particles = "".join(
+        f'<span class="hero-particle" style="left:{(i * 17 + 7) % 96}%;'
+        f'animation-delay:{(i * 0.37) % 5:.2f}s;'
+        f'animation-duration:{3.5 + (i % 4) * 0.8:.1f}s"></span>'
+        for i in range(18)
+    )
     return f"""
     <div class="hero-banner">
-      <img src="{assets.banner_url()}" alt="Aether Garden — The World That Remembers" class="hero-image"/>
+      <div class="hero-image-wrap">
+        <img src="{assets.banner_url()}" alt="Aether Garden — The World That Remembers" class="hero-image"/>
+        <div class="hero-particles" aria-hidden="true">{particles}</div>
+        <div class="hero-shimmer" aria-hidden="true"></div>
+      </div>
       <div class="hero-statusbar">
         <span class="hero-status-live"><span class="live-dot"></span> The world is awake</span>
         <span class="hero-stat"><b>Day {day}</b></span>

ui/map.py

@@ -106,10 +106,12 @@ def render_world_map(selected_location_id: int | None = None) -> str:
             f'<ellipse cx="{cx}" cy="{cy}" rx="{rx}" ry="{ry}" fill="{color}"/>'
         )
 
-    for path in LOCATION_PATHS:
+    for i, path in enumerate(LOCATION_PATHS):
         svg_parts.append(
-            f'<path d="{path}" fill="none" stroke="rgba(212,168,75,0.12)" '
-            f'stroke-width="2" stroke-dasharray="6,8" stroke-linecap="round"/>'
+            f'<path class="realm-path" d="{path}" fill="none" '
+            f'stroke="rgba(212,168,75,0.22)" stroke-width="2.5" '
+            f'stroke-dasharray="8,10" stroke-linecap="round" '
+            f'style="animation-delay:{i * 0.4:.1f}s"/>'
         )
 
     for loc in locations:
@@ -117,7 +119,7 @@ def render_world_map(selected_location_id: int | None = None) -> str:
         y = loc["map_y"] / 100 * 600
         is_affected = loc["slug"] in affected_slugs
         is_selected = selected_location_id == loc["id"]
-        pulse_class = " location-pulse" if is_affected else ""
+        pulse_class = " location-pulse" if is_affected else " location-glow"
         selected_class = " location-selected" if is_selected else ""
 
         entities = get_entities_by_location(loc["id"], limit=8)
@@ -131,11 +133,11 @@ def render_world_map(selected_location_id: int | None = None) -> str:
 
         filter_id = "pulse-glow" if is_affected else "glow"
         svg_parts.append(
-            f'<circle r="40" fill="{loc["glow_color"]}" opacity="0.08" '
-            f'filter="url(#{filter_id})"/>'
+            f'<circle r="44" fill="{loc["glow_color"]}" opacity="0.1" '
+            f'class="location-aura" filter="url(#{filter_id})"/>'
         )
         svg_parts.append(
-            f'<circle r="34" fill="{loc["glow_color"]}" opacity="0.18" '
+            f'<circle r="36" fill="{loc["glow_color"]}" opacity="0.2" '
             f'stroke="{loc["glow_color"]}" stroke-width="2" class="location-circle"/>'
         )
         svg_parts.append(

ui/styles.css

@@ -13,6 +13,11 @@
     --realm-forest: #2a4a3a;
     --realm-border: rgba(212, 168, 75, 0.18);
     --realm-border-strong: rgba(212, 168, 75, 0.4);
+    --realm-glass: rgba(12, 20, 16, 0.72);
+    --realm-glass-border: rgba(212, 168, 75, 0.22);
+    --realm-glass-glow: rgba(212, 168, 75, 0.08);
+    --realm-line-height: 1.65;
+    --realm-letter-spacing: 0.02em;
 }
 
 /* Gradio overrides */
@@ -39,11 +44,66 @@ footer { display: none !important; }
     box-shadow: 0 10px 50px rgba(0,0,0,0.55), 0 0 70px rgba(212,168,75,0.07);
 }
 
+.hero-image-wrap {
+    position: relative;
+    overflow: hidden;
+}
+
 .hero-image {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
+    animation: heroParallax 18s ease-in-out infinite alternate;
+}
+
+@keyframes heroParallax {
+    from { transform: scale(1) translateY(0); }
+    to { transform: scale(1.04) translateY(-1%); }
+}
+
+.hero-particles {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.hero-particle {
+    position: absolute;
+    bottom: -4px;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background: rgba(212, 168, 75, 0.55);
+    box-shadow: 0 0 8px rgba(212, 168, 75, 0.4);
+    animation: heroParticleRise linear infinite;
+}
+
+@keyframes heroParticleRise {
+    0% { transform: translateY(0) scale(0.6); opacity: 0; }
+    10% { opacity: 0.8; }
+    90% { opacity: 0.5; }
+    100% { transform: translateY(-320px) scale(1.2); opacity: 0; }
+}
+
+.hero-shimmer {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        105deg,
+        transparent 40%,
+        rgba(212, 168, 75, 0.06) 50%,
+        transparent 60%
+    );
+    background-size: 200% 100%;
+    animation: heroShimmer 8s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes heroShimmer {
+    0%, 100% { background-position: 200% 0; }
+    50% { background-position: -200% 0; }
 }
 
 .hero-statusbar {
@@ -362,10 +422,29 @@ footer { display: none !important; }
     transform: scale(1.08);
 }
 
-.location-pulse .location-circle {
+.location-pulse .location-circle,
+.location-glow .location-circle {
     animation: pulse-glow 2.5s ease-in-out infinite;
 }
 
+.location-glow .location-aura {
+    animation: aura-breathe 4s ease-in-out infinite;
+}
+
+.realm-path {
+    animation: path-shimmer 6s ease-in-out infinite;
+}
+
+@keyframes aura-breathe {
+    0%, 100% { opacity: 0.08; r: 44; }
+    50% { opacity: 0.16; }
+}
+
+@keyframes path-shimmer {
+    0%, 100% { stroke-opacity: 0.18; }
+    50% { stroke-opacity: 0.38; }
+}
+
 .location-selected .location-circle {
     stroke-width: 3 !important;
     opacity: 0.6 !important;
@@ -1269,14 +1348,33 @@ footer { display: none !important; }
 
 /* 3D diorama iframe */
 .diorama-wrap {
+    position: relative;
     margin: 1.25rem 0;
-    border: 1px solid var(--realm-border-strong);
-    border-radius: 14px;
+    border: 2px solid var(--realm-border-strong);
+    border-radius: 16px;
     overflow: hidden;
     background: var(--realm-bg-secondary);
-    box-shadow: 0 14px 48px rgba(0,0,0,0.55);
+    box-shadow:
+        0 14px 48px rgba(0,0,0,0.55),
+        0 0 60px var(--realm-glass-glow),
+        inset 0 0 0 1px rgba(255,255,255,0.04);
+    padding: 6px;
 }
 
+.diorama-wrap::before,
+.diorama-wrap::after {
+    content: '◆';
+    position: absolute;
+    z-index: 2;
+    color: var(--realm-accent-gold);
+    font-size: 0.65rem;
+    opacity: 0.45;
+    pointer-events: none;
+}
+
+.diorama-wrap::before { top: 10px; left: 14px; }
+.diorama-wrap::after { top: 10px; right: 14px; }
+
 .diorama-header {
     padding: 1rem 1.25rem;
     border-bottom: 1px solid var(--realm-border);
@@ -1658,3 +1756,336 @@ footer { display: none !important; }
 }
 .presence-count   { color: var(--realm-accent-gold); }
 .presence-arrivals{ color: var(--realm-text-secondary); }
+
+/* 2026 game-shell refresh */
+:root {
+    --realm-bg-primary: #070908;
+    --realm-bg-secondary: #101714;
+    --realm-bg-tertiary: #17231d;
+    --realm-surface: rgba(18, 24, 22, 0.82);
+    --realm-surface-strong: rgba(24, 33, 29, 0.94);
+    --realm-text-primary: #f5efe1;
+    --realm-text-secondary: #c7beaa;
+    --realm-text-tertiary: #899284;
+    --realm-accent-gold: #e3b85d;
+    --realm-accent-violet: #a98add;
+    --realm-accent-ember: #ef835d;
+    --realm-accent-teal: #6ec9bc;
+    --realm-border: rgba(227, 184, 93, 0.16);
+    --realm-border-strong: rgba(227, 184, 93, 0.38);
+}
+
+body,
+.gradio-container {
+    background:
+        radial-gradient(circle at 12% 0%, rgba(110, 201, 188, 0.08), transparent 28rem),
+        radial-gradient(circle at 88% 8%, rgba(169, 138, 221, 0.09), transparent 32rem),
+        linear-gradient(180deg, #070908 0%, #0d1110 46%, #070908 100%) !important;
+    color: var(--realm-text-primary) !important;
+}
+
+.gradio-container {
+    max-width: 1480px !important;
+    padding: 1rem 1.25rem 2rem !important;
+}
+
+.gradio-container button,
+.gradio-container .gr-button {
+    border-radius: 8px !important;
+    border: 1px solid var(--realm-border-strong) !important;
+    background: linear-gradient(180deg, rgba(227,184,93,0.18), rgba(227,184,93,0.08)) !important;
+    color: var(--realm-text-primary) !important;
+    box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;
+    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
+}
+
+.gradio-container button:hover,
+.gradio-container .gr-button:hover {
+    transform: translateY(-1px);
+    border-color: rgba(227,184,93,0.64) !important;
+    background: linear-gradient(180deg, rgba(227,184,93,0.28), rgba(239,131,93,0.12)) !important;
+}
+
+.gradio-container textarea,
+.gradio-container input,
+.gradio-container select {
+    border-radius: 8px !important;
+    border-color: rgba(227,184,93,0.22) !important;
+    background: rgba(7,9,8,0.72) !important;
+    color: var(--realm-text-primary) !important;
+}
+
+.gradio-container textarea:focus,
+.gradio-container input:focus {
+    border-color: rgba(110,201,188,0.66) !important;
+    box-shadow: 0 0 0 2px rgba(110,201,188,0.16) !important;
+}
+
+.realm-header-wrap {
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.hero-banner {
+    border-radius: 8px;
+    border-color: rgba(227,184,93,0.28);
+    box-shadow:
+        0 22px 70px rgba(0,0,0,0.52),
+        0 0 0 1px rgba(255,255,255,0.03) inset;
+}
+
+.hero-statusbar,
+.diorama-header,
+.realm-pulse,
+.current-event,
+.location-panel,
+.book-container,
+.entity-card,
+.room-view,
+.summon-section,
+.world-vignette,
+.featured-card,
+.entity-grid-card,
+.pulse-card {
+    background:
+        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)),
+        var(--realm-surface) !important;
+    border-color: var(--realm-border) !important;
+    border-radius: 8px !important;
+    box-shadow: 0 12px 36px rgba(0,0,0,0.28);
+}
+
+.realm-tabs {
+    position: sticky;
+    top: 0;
+    z-index: 15;
+    background: rgba(7,9,8,0.84);
+    backdrop-filter: blur(14px);
+    border: 1px solid rgba(227,184,93,0.10) !important;
+    border-radius: 8px;
+    padding: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+.realm-tabs button {
+    border-radius: 6px !important;
+    min-height: 2.35rem !important;
+    letter-spacing: 0.08em !important;
+}
+
+.realm-tabs button.selected {
+    background: rgba(227,184,93,0.14) !important;
+    border-bottom: none !important;
+    box-shadow: inset 0 0 0 1px rgba(227,184,93,0.22) !important;
+}
+
+.presence-bar {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    justify-content: center;
+    border: 1px solid rgba(110,201,188,0.18);
+    border-radius: 999px;
+    margin: 0.2rem auto 0.75rem;
+    max-width: 820px;
+    background: rgba(7,9,8,0.74);
+    backdrop-filter: blur(12px);
+}
+
+.realm-map {
+    border-radius: 8px;
+    border-color: rgba(227,184,93,0.34);
+    box-shadow:
+        0 24px 80px rgba(0,0,0,0.34),
+        inset 0 0 70px rgba(110,201,188,0.08);
+}
+
+.location-node {
+    filter: drop-shadow(0 7px 12px rgba(0,0,0,0.36));
+}
+
+.location-selected .location-circle {
+    stroke: var(--realm-accent-teal) !important;
+}
+
+.diorama-wrap {
+    border-radius: 8px;
+    border-color: rgba(110,201,188,0.24);
+    box-shadow:
+        0 24px 76px rgba(0,0,0,0.48),
+        0 0 0 1px rgba(255,255,255,0.025) inset;
+}
+
+.diorama-frame {
+    height: min(82vh, 760px);
+    min-height: 620px;
+}
+
+.diorama-label,
+.section-title,
+.summon-title,
+.event-label,
+.pulse-title,
+.book-title,
+.location-panel-special {
+    color: var(--realm-accent-gold) !important;
+}
+
+.section-desc,
+.diorama-hint,
+.summon-hint {
+    color: var(--realm-text-tertiary) !important;
+}
+
+.featured-card:hover,
+.entity-grid-card:hover,
+.loc-card:hover {
+    border-color: rgba(110,201,188,0.42) !important;
+    box-shadow: 0 18px 48px rgba(0,0,0,0.46), 0 0 28px rgba(110,201,188,0.10);
+}
+
+.loc-card,
+.places-gallery button.thumbnail-item img,
+.souls-gallery button.thumbnail-item img {
+    border-radius: 8px;
+}
+
+.oracle-summoning {
+    border-radius: 8px;
+    background:
+        radial-gradient(circle at 50% 0%, rgba(110,201,188,0.14), transparent 42%),
+        radial-gradient(circle at 70% 20%, rgba(169,138,221,0.12), transparent 36%),
+        rgba(12,18,16,0.88);
+}
+
+.tick-result {
+    border-radius: 8px;
+    background:
+        linear-gradient(135deg, rgba(110,201,188,0.12), rgba(227,184,93,0.07)),
+        rgba(12,18,16,0.9);
+}
+
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 0.75rem !important;
+    }
+    .realm-tabs {
+        position: relative;
+    }
+    .presence-bar {
+        position: relative;
+        border-radius: 8px;
+    }
+    .diorama-frame {
+        height: min(64vh, 520px);
+        min-height: 390px;
+    }
+    .diorama-wrap::before,
+    .diorama-wrap::after {
+        display: none;
+    }
+}
+
+/* ── Premium glassmorphism & polish ── */
+.entity-card,
+.current-event,
+.book-container,
+.location-panel,
+.realm-pulse,
+.world-vignette,
+.featured-card {
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow:
+        0 12px 40px rgba(0,0,0,0.35),
+        inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+.section-title,
+.book-title,
+.pulse-title,
+.event-label,
+.summon-title {
+    background: linear-gradient(90deg, #d4a84b, #f0d9a0, #d4a84b);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: titleShimmer 6s linear infinite;
+}
+
+@keyframes titleShimmer {
+    to { background-position: 200% center; }
+}
+
+.entity-card,
+.pulse-card,
+.featured-card {
+    animation: cardEntrance 0.55s ease-out both;
+}
+
+@keyframes cardEntrance {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.gradio-container button.primary,
+.gradio-container button[class*="primary"],
+.gradio-container .primary {
+    background: linear-gradient(135deg, rgba(212,168,75,0.25), rgba(212,168,75,0.12)) !important;
+    border: 1px solid rgba(212,168,75,0.45) !important;
+    color: #f0d9a0 !important;
+    transition: box-shadow 0.25s, transform 0.2s, background 0.25s !important;
+}
+
+.gradio-container button.primary:hover,
+.gradio-container button[class*="primary"]:hover {
+    box-shadow: 0 0 24px rgba(212,168,75,0.28) !important;
+    transform: translateY(-1px);
+}
+
+.gradio-container button,
+.gradio-container .tab-nav button {
+    transition: box-shadow 0.2s, border-color 0.2s !important;
+}
+
+.gradio-container button:hover {
+    border-color: rgba(212,168,75,0.35) !important;
+}
+
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+    background: rgba(12,20,16,0.85) !important;
+    border-color: var(--realm-glass-border) !important;
+    line-height: var(--realm-line-height) !important;
+}
+
+.book-container,
+.entity-detail-wrap {
+    scroll-behavior: smooth;
+}
+
+.skeleton-pulse {
+    background: linear-gradient(90deg, rgba(42,74,58,0.3) 25%, rgba(58,90,68,0.45) 50%, rgba(42,74,58,0.3) 75%);
+    background-size: 200% 100%;
+    animation: skeletonShimmer 1.5s ease-in-out infinite;
+    border-radius: 8px;
+    min-height: 1.2rem;
+}
+
+@keyframes skeletonShimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+body, .gradio-container {
+    line-height: var(--realm-line-height);
+    letter-spacing: var(--realm-letter-spacing);
+}
+
+.section-divider {
+    height: 1px;
+    margin: 2rem 0;
+    background: linear-gradient(90deg, transparent, var(--realm-border-strong), transparent);
+}

world/presence.py

@@ -11,21 +11,47 @@ def init_presence_table() -> None:
             CREATE TABLE IF NOT EXISTS presence (
                 session_id   TEXT NOT NULL PRIMARY KEY,
                 last_seen    TEXT NOT NULL DEFAULT (datetime('now')),
-                location_id  INTEGER
+                location_id  INTEGER,
+                x            REAL NOT NULL DEFAULT 0,
+                z            REAL NOT NULL DEFAULT 0,
+                yaw          REAL NOT NULL DEFAULT 0,
+                display_name TEXT NOT NULL DEFAULT 'Visitor'
             )
         """)
+        for sql in [
+            "ALTER TABLE presence ADD COLUMN x REAL NOT NULL DEFAULT 0",
+            "ALTER TABLE presence ADD COLUMN z REAL NOT NULL DEFAULT 0",
+            "ALTER TABLE presence ADD COLUMN yaw REAL NOT NULL DEFAULT 0",
+            "ALTER TABLE presence ADD COLUMN display_name TEXT NOT NULL DEFAULT 'Visitor'",
+        ]:
+            try:
+                conn.execute(sql)
+            except Exception:
+                pass
 
 
-def heartbeat(session_id: str, location_id: int | None = None) -> None:
+def heartbeat(
+    session_id: str,
+    location_id: int | None = None,
+    x: float = 0,
+    z: float = 0,
+    yaw: float = 0,
+    display_name: str | None = None,
+) -> None:
     """Update last_seen for a session (upsert)."""
+    name = (display_name or "Visitor").strip()[:32] or "Visitor"
     with db_session() as conn:
         conn.execute("""
-            INSERT INTO presence (session_id, last_seen, location_id)
-            VALUES (?, datetime('now'), ?)
+            INSERT INTO presence (session_id, last_seen, location_id, x, z, yaw, display_name)
+            VALUES (?, datetime('now'), ?, ?, ?, ?, ?)
             ON CONFLICT(session_id) DO UPDATE SET
                 last_seen   = datetime('now'),
-                location_id = excluded.location_id
-        """, (session_id, location_id))
+                location_id = excluded.location_id,
+                x           = excluded.x,
+                z           = excluded.z,
+                yaw         = excluded.yaw,
+                display_name = excluded.display_name
+        """, (session_id, location_id, x, z, yaw, name))
 
 
 def get_active_count(window_seconds: int = 120) -> int:
@@ -38,6 +64,42 @@ def get_active_count(window_seconds: int = 120) -> int:
         return row["n"] if row else 0
 
 
+def get_active_visitors(
+    location_id: int,
+    exclude_session_id: str | None = None,
+    window_seconds: int = 20,
+) -> list[dict]:
+    """Return live visitors currently walking inside a location."""
+    params: list = [location_id, f"-{window_seconds}"]
+    query = """
+        SELECT session_id, display_name, x, z, yaw, last_seen
+        FROM presence
+        WHERE location_id = ?
+          AND last_seen >= datetime('now', ? || ' seconds')
+    """
+    if exclude_session_id:
+        query += " AND session_id != ?"
+        params.append(exclude_session_id)
+    query += " ORDER BY last_seen DESC LIMIT 16"
+
+    with db_session() as conn:
+        rows = conn.execute(query, params).fetchall()
+        return [dict(r) for r in rows]
+
+
+def cleanup_stale_sessions(max_age_seconds: int = 300) -> int:
+    """Remove presence rows older than max_age_seconds."""
+    with db_session() as conn:
+        cur = conn.execute(
+            """
+            DELETE FROM presence
+            WHERE last_seen < datetime('now', ? || ' seconds')
+            """,
+            (f"-{max_age_seconds}",),
+        )
+        return cur.rowcount
+
+
 def get_recent_arrivals(since_seconds: int = 60) -> list[dict]:
     """Return entities created in the last N seconds by any session."""
     with db_session() as conn: