feat: add authenticated realtime presence

index.html

@@ -446,6 +446,42 @@
       }
       .tier.god .who { color: var(--amber-ink); }
       .tier a { color: var(--amber-ink); text-transform: none; letter-spacing: 0.04em; }
+      #presence-host {
+        position: fixed;
+        top: calc(var(--s4) + env(safe-area-inset-top) + 2.5rem);
+        right: var(--s4);
+        z-index: 3;
+        max-width: min(15rem, 65vw);
+      }
+      #presence-host:empty { display: none; }
+      .tera-presence {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        padding: 5px var(--s2);
+        color: var(--ink-3);
+        background: rgba(8, 12, 17, 0.76);
+        border: 1px solid var(--hairline);
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow);
+        backdrop-filter: var(--blur);
+        -webkit-backdrop-filter: var(--blur);
+        font-size: 9px;
+        letter-spacing: 0.04em;
+      }
+      .tera-presence[data-presence="live"] { color: var(--ink-2); }
+      .tera-presence__retry {
+        padding: 2px 6px;
+        color: var(--amber-ink);
+        background: transparent;
+        border: 1px solid rgba(242, 177, 52, 0.3);
+        border-radius: 3px;
+        font: inherit;
+        cursor: pointer;
+      }
+      body.presence-on .corner {
+        top: calc(var(--s4) + env(safe-area-inset-top) + 4.55rem);
+      }
       .profile-trigger {
         min-height: 28px;
         padding: 4px 8px;
@@ -781,6 +817,8 @@
           right: var(--s3);
         }
         .tier { top: calc(var(--s3) + env(safe-area-inset-top)); right: var(--s3); }
+        #presence-host { top: calc(var(--s3) + env(safe-area-inset-top) + 2.5rem); right: var(--s3); }
+        body.presence-on .corner { top: calc(var(--s3) + env(safe-area-inset-top) + 4.55rem); }
         .minimap-frame { height: 10rem; }
         .rail { right: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
         .source { left: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
@@ -949,6 +987,7 @@
     </div>
 
     <p class="card tier" id="tier" hidden></p>
+    <div id="presence-host" hidden></div>
 
     <aside id="corner" class="corner" aria-label="Plan view">
       <div class="card" id="minimap">