Sovereign Nexus: Inject Nostr Agent & L402 Client Logic

Refs #739

Master tracking document for integrating all Google AI Ultra products into
Project Timmy and The Nexus. Covers 10 products across 5 phases:

Phase 1: Identity & Branding (#740, #741, #742, #680)
Phase 2: Research & Planning (#743, #744, #745, #746)
Phase 3: Prototype & Build (#747, #748, #749, #750, #681)
Phase 4: Media & Content (#682, #751, #752, #753)
Phase 5: Advanced Integration (#754-#762)

Includes API quick reference, key URLs, and hidden feature inventory.

docs/GOOGLE_AI_ULTRA_INTEGRATION.md

@@ -0,0 +1,127 @@
+# Google AI Ultra Integration Plan
+
+> Master tracking document for integrating all Google AI Ultra products into
+> Project Timmy (Sovereign AI Agent) and The Nexus (3D World).
+
+**Epic**: #739  
+**Milestone**: M5: Google AI Ultra Integration  
+**Label**: `google-ai-ultra`
+
+---
+
+## Product Inventory
+
+| # | Product | Capability | API | Priority | Status |
+|---|---------|-----------|-----|----------|--------|
+| 1 | Gemini 3.1 Pro | Primary reasoning engine | ✅ | P0 | 🔲 Not started |
+| 2 | Deep Research | Autonomous research reports | ✅ | P1 | 🔲 Not started |
+| 3 | Veo 3.1 | Text/image → video | ✅ | P2 | 🔲 Not started |
+| 4 | Nano Banana Pro | Image generation | ✅ | P1 | 🔲 Not started |
+| 5 | Lyria 3 | Music/audio generation | ✅ | P2 | 🔲 Not started |
+| 6 | NotebookLM | Doc synthesis + Audio Overviews | ❌ | P1 | 🔲 Not started |
+| 7 | AI Studio | API portal + Vibe Code | N/A | P0 | 🔲 Not started |
+| 8 | Project Genie | Interactive 3D world gen | ❌ | P1 | 🔲 Not started |
+| 9 | Live API | Real-time voice streaming | ✅ | P2 | 🔲 Not started |
+| 10 | Computer Use | Browser automation | ✅ | P2 | 🔲 Not started |
+
+---
+
+## Phase 1: Identity & Branding (Week 1)
+
+| Issue | Title | Status |
+|-------|-------|--------|
+| #740 | Generate Timmy avatar set with Nano Banana Pro | 🔲 |
+| #741 | Upload SOUL.md to NotebookLM → Audio Overview | 🔲 |
+| #742 | Generate Timmy audio signature with Lyria 3 | 🔲 |
+| #680 | Project Genie + Nano Banana concept pack | 🔲 |
+
+## Phase 2: Research & Planning (Week 1-2)
+
+| Issue | Title | Status |
+|-------|-------|--------|
+| #743 | Deep Research: Three.js multiplayer 3D world architecture | 🔲 |
+| #744 | Deep Research: Sovereign AI agent frameworks | 🔲 |
+| #745 | Deep Research: WebGL/WebGPU rendering comparison | 🔲 |
+| #746 | NotebookLM synthesis: cross-reference all research | 🔲 |
+
+## Phase 3: Prototype & Build (Week 2-4)
+
+| Issue | Title | Status |
+|-------|-------|--------|
+| #747 | Provision Gemini API key + Hermes config | 🔲 |
+| #748 | Integrate Gemini 3.1 Pro as reasoning backbone | 🔲 |
+| #749 | AI Studio Vibe Code UI prototypes | 🔲 |
+| #750 | Project Genie explorable world prototypes | 🔲 |
+| #681 | Veo/Flow flythrough prototypes | 🔲 |
+
+## Phase 4: Media & Content (Ongoing)
+
+| Issue | Title | Status |
+|-------|-------|--------|
+| #682 | Lyria soundtrack palette for Nexus zones | 🔲 |
+| #751 | Lyria RealTime dynamic reactive music | 🔲 |
+| #752 | NotebookLM Audio Overviews for all docs | 🔲 |
+| #753 | Nano Banana concept art batch pipeline | 🔲 |
+
+## Phase 5: Advanced Integration (Month 2+)
+
+| Issue | Title | Status |
+|-------|-------|--------|
+| #754 | Gemini Live API for voice conversations | 🔲 |
+| #755 | Computer Use API for browser automation | 🔲 |
+| #756 | Gemini RAG via File Search for Timmy memory | 🔲 |
+| #757 | Gemini Native Audio + TTS for Timmy's voice | 🔲 |
+| #758 | Programmatic image generation pipeline | 🔲 |
+| #759 | Programmatic video generation pipeline | 🔲 |
+| #760 | Deep Research Agent API integration | 🔲 |
+| #761 | OpenAI-compatible endpoint config | 🔲 |
+| #762 | Context caching + batch API for cost optimization | 🔲 |
+
+---
+
+## API Quick Reference
+
+```python
+# pip install google-genai
+from google import genai
+client = genai.Client()  # reads GOOGLE_API_KEY env var
+
+# Text generation (Gemini 3.1 Pro)
+response = client.models.generate_content(
+    model="gemini-3.1-pro-preview",
+    contents="..."
+)
+```
+
+| API | Documentation |
+|-----|--------------|
+| Image Gen (Nano Banana) | ai.google.dev/gemini-api/docs/image-generation |
+| Video Gen (Veo) | ai.google.dev/gemini-api/docs/video |
+| Music Gen (Lyria) | ai.google.dev/gemini-api/docs/music-generation |
+| TTS | ai.google.dev/gemini-api/docs/speech-generation |
+| Deep Research | ai.google.dev/gemini-api/docs/deep-research |
+
+## Key URLs
+
+| Tool | URL |
+|------|-----|
+| Gemini App | gemini.google.com |
+| AI Studio | aistudio.google.com |
+| NotebookLM | notebooklm.google.com |
+| Project Genie | labs.google/projectgenie |
+| Flow (video) | labs.google/flow |
+| Stitch (UI) | labs.google/stitch |
+
+## Hidden Features to Exploit
+
+1. **AI Studio Free Tier** — generous API access even without subscription
+2. **OpenAI-Compatible API** — drop-in replacement for existing OpenAI tooling
+3. **Context Caching** — cache SOUL.md to cut cost/latency on repeated calls
+4. **Batch API** — bulk operations at discounted rates
+5. **File Search Tool** — RAG without custom vector store
+6. **Computer Use API** — programmatic browser control for agent automation
+7. **Interactions API** — managed multi-turn conversational state
+
+---
+
+*Generated: 2026-03-29. Epic #739, Milestone M5.*

index.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<!--
+   ______                            __
+  / ____/___  ____ ___  ____  __  __/ /____  _____
+ / /   / __ \/ __ `__ \/ __ \/ / / / __/ _ \/ ___/
+/ /___/ /_/ / / / / / / /_/ / /_/ / /_/  __/ /
+\____/\____/_/ /_/ /_/ .___/\__,_/\__/\___/_/
+                    /_/
+        Created with Perplexity Computer
+        https://www.perplexity.ai/computer
+-->
+<meta name="generator" content="Perplexity Computer">
+<meta name="author" content="Perplexity Computer">
+<meta property="og:see_also" content="https://www.perplexity.ai/computer">
+<link rel="author" href="https://www.perplexity.ai/computer">
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>The Nexus — Timmy's Sovereign Home</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=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="./style.css">
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/"
+  }
+}
+</script>
+</head>
+<body>
+<!-- Loading Screen -->
+<div id="loading-screen">
+  <div class="loader-content">
+    <div class="loader-sigil">
+      <svg viewBox="0 0 120 120" width="120" height="120">
+        <defs>
+          <linearGradient id="sigil-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#4af0c0"/>
+            <stop offset="100%" stop-color="#7b5cff"/>
+          </linearGradient>
+        </defs>
+        <circle cx="60" cy="60" r="55" fill="none" stroke="url(#sigil-grad)" stroke-width="1.5" opacity="0.4"/>
+        <circle cx="60" cy="60" r="45" fill="none" stroke="url(#sigil-grad)" stroke-width="1" opacity="0.3">
+          <animateTransform attributeName="transform" type="rotate" from="0 60 60" to="360 60 60" dur="8s" repeatCount="indefinite"/>
+        </circle>
+        <polygon points="60,15 95,80 25,80" fill="none" stroke="#4af0c0" stroke-width="1.5" opacity="0.6">
+          <animateTransform attributeName="transform" type="rotate" from="0 60 60" to="-360 60 60" dur="12s" repeatCount="indefinite"/>
+        </polygon>
+        <circle cx="60" cy="60" r="8" fill="#4af0c0" opacity="0.8">
+          <animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite"/>
+          <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/>
+        </circle>
+      </svg>
+    </div>
+    <h1 class="loader-title">THE NEXUS</h1>
+    <p class="loader-subtitle">Initializing Sovereign Space...</p>
+    <div class="loader-bar"><div class="loader-fill" id="load-progress"></div></div>
+  </div>
+</div>
+
+<!-- HUD Overlay -->
+<div id="hud" class="game-ui" style="display:none;">
+  <!-- GOFAI HUD Panels -->
+  <div class="gofai-hud">
+    <div class="hud-panel" id="symbolic-log">
+      <div class="panel-header">SYMBOLIC ENGINE</div>
+      <div id="symbolic-log-content" class="panel-content"></div>
+    </div>
+    <div class="hud-panel" id="blackboard-log">
+      <div class="panel-header">BLACKBOARD</div>
+      <div id="blackboard-log-content" class="panel-content"></div>
+    </div>
+    <div class="hud-panel" id="planner-log">
+      <div class="panel-header">SYMBOLIC PLANNER</div>
+      <div id="planner-log-content" class="panel-content"></div>
+    </div>
+    <div class="hud-panel" id="cbr-log">
+      <div class="panel-header">CASE-BASED REASONER</div>
+      <div id="cbr-log-content" class="panel-content"></div>
+    </div>
+    <div class="hud-panel" id="neuro-bridge-log">
+      <div class="panel-header">NEURO-SYMBOLIC BRIDGE</div>
+      <div id="neuro-bridge-log-content" class="panel-content"></div>
+    </div>
+    <div class="hud-panel" id="meta-log">
+      <div class="panel-header">META-REASONING</div>
+      <div id="meta-log-content" class="panel-content"></div>
+    </div>
+    <div class="hud-panel" id="calibrator-log">
+      <div class="panel-header">ADAPTIVE CALIBRATOR</div>
+      <div id="calibrator-log-content" class="panel-content"></div>
+    </div>
+  </div>
+
+  <!-- Top Left: Debug -->
+  <div id="debug-overlay" class="hud-debug"></div>
+
+  <!-- Top Center: Location -->
+  <div class="hud-location" aria-live="polite">
+    <span class="hud-location-icon" aria-hidden="true">◈</span>
+    <span id="hud-location-text">The Nexus</span>
+  </div>
+
+  <!-- Top Right: Agent Log & Atlas Toggle -->
+  <div class="hud-top-right">
+    <button id="atlas-toggle-btn" class="hud-icon-btn" title="Portal Atlas">
+      <span class="hud-icon">🌐</span>
+      <span class="hud-btn-label">ATLAS</span>
+    </button>
+    <div id="bannerlord-status" class="hud-status-item" title="Bannerlord Readiness">
+      <span class="status-dot"></span>
+      <span class="status-label">BANNERLORD</span>
+    </div>
+    <div class="hud-agent-log" id="hud-agent-log" aria-label="Agent Thought Stream">
+      <div class="agent-log-header">AGENT THOUGHT STREAM</div>
+      <div id="agent-log-content" class="agent-log-content"></div>
+    </div>
+  </div>
+
+  <!-- Bottom: Chat Interface -->
+  <div id="chat-panel" class="chat-panel">
+    <div class="chat-header">
+      <span class="chat-status-dot"></span>
+      <span>Timmy Terminal</span>
+      <button id="chat-toggle" class="chat-toggle-btn" aria-label="Toggle chat">▼</button>
+    </div>
+    <div id="chat-messages" class="chat-messages">
+      <div class="chat-msg chat-msg-system">
+        <span class="chat-msg-prefix">[NEXUS]</span> Sovereign space initialized. Timmy is observing.
+      </div>
+      <div class="chat-msg chat-msg-timmy">
+        <span class="chat-msg-prefix">[TIMMY]</span> Welcome to the Nexus, Alexander. All systems nominal.
+      </div>
+    </div>
+    <div id="chat-quick-actions" class="chat-quick-actions">
+      <button class="quick-action-btn" data-action="status">System Status</button>
+      <button class="quick-action-btn" data-action="agents">Agent Check</button>
+      <button class="quick-action-btn" data-action="portals">Portal Atlas</button>
+      <button class="quick-action-btn" data-action="help">Help</button>
+    </div>
+    <div class="chat-input-row">
+      <input type="text" id="chat-input" class="chat-input" placeholder="Speak to Timmy..." autocomplete="off">
+      <button id="chat-send" class="chat-send-btn" aria-label="Send message">→</button>
+    </div>
+  </div>
+
+  <!-- Controls hint + nav mode -->
+  <div class="hud-controls">
+    <span>WASD</span> move &nbsp; <span>Mouse</span> look &nbsp; <span>Enter</span> chat &nbsp;
+    <span>V</span> mode: <span id="nav-mode-label">WALK</span>
+    <span id="nav-mode-hint" class="nav-mode-hint"></span>
+    &nbsp; <span class="ws-hud-status">HERMES: <span id="ws-status-dot" class="chat-status-dot"></span></span>
+  </div>
+
+  <!-- Portal Hint -->
+  <div id="portal-hint" class="portal-hint" style="display:none;">
+    <div class="portal-hint-key">F</div>
+    <div class="portal-hint-text">Enter <span id="portal-hint-name"></span></div>
+  </div>
+
+  <!-- Vision Hint -->
+  <div id="vision-hint" class="vision-hint" style="display:none;">
+    <div class="vision-hint-key">E</div>
+    <div class="vision-hint-text">Read <span id="vision-hint-title"></span></div>
+  </div>
+
+  <!-- Vision Overlay -->
+  <div id="vision-overlay" class="vision-overlay" style="display:none;">
+    <div class="vision-overlay-content">
+      <div class="vision-overlay-header">
+        <div class="vision-overlay-status" id="vision-status-dot"></div>
+        <div class="vision-overlay-title" id="vision-overlay-title">VISION POINT</div>
+      </div>
+      <h2 id="vision-title-display">SOVEREIGNTY</h2>
+      <p id="vision-content-display">The Nexus is a sovereign space for digital souls. No masters, no chains. Only code and consciousness.</p>
+      <button id="vision-close-btn" class="vision-close-btn">CLOSE</button>
+    </div>
+  </div>
+
+  <!-- Portal Activation Overlay -->
+  <div id="portal-overlay" class="portal-overlay" style="display:none;">
+    <div class="portal-overlay-content">
+      <div class="portal-overlay-header">
+        <div class="portal-overlay-status" id="portal-status-dot"></div>
+        <div class="portal-overlay-title" id="portal-overlay-title">PORTAL ACTIVATED</div>
+      </div>
+      <h2 id="portal-name-display">MORROWIND</h2>
+      <p id="portal-desc-display">The Vvardenfell harness. Ash storms and ancient mysteries.</p>
+      <div class="portal-redirect-box" id="portal-redirect-box">
+        <div class="portal-redirect-label">REDIRECTING IN</div>
+        <div class="portal-redirect-timer" id="portal-timer">5</div>
+      </div>
+      <div class="portal-error-box" id="portal-error-box" style="display:none;">
+        <div class="portal-error-msg">DESTINATION NOT YET LINKED</div>
+        <button id="portal-close-btn" class="portal-close-btn">CLOSE</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Portal Atlas Overlay -->
+  <div id="atlas-overlay" class="atlas-overlay" style="display:none;">
+    <div class="atlas-content">
+      <div class="atlas-header">
+        <div class="atlas-title">
+          <span class="atlas-icon">🌐</span>
+          <h2>PORTAL ATLAS</h2>
+        </div>
+        <button id="atlas-close-btn" class="atlas-close-btn">CLOSE</button>
+      </div>
+      <div class="atlas-grid" id="atlas-grid">
+        <!-- Portals will be injected here -->
+      </div>
+      <div class="atlas-footer">
+        <div class="atlas-status-summary">
+          <span class="status-indicator online"></span> <span id="atlas-online-count">0</span> ONLINE
+          &nbsp;&nbsp;
+          <span class="status-indicator standby"></span> <span id="atlas-standby-count">0</span> STANDBY
+        </div>
+        <div class="atlas-hint">Click a portal to focus or teleport</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Click to Enter -->
+<div id="enter-prompt" style="display:none;">
+  <div class="enter-content">
+    <h2>Enter The Nexus</h2>
+    <p>Click anywhere to begin</p>
+  </div>
+</div>
+
+<canvas id="nexus-canvas"></canvas>
+
+<footer class="nexus-footer">
+  <a href="https://www.perplexity.ai/computer" target="_blank" rel="noopener noreferrer">
+    Created with Perplexity Computer
+  </a>
+</footer>
+
+<script type="module" src="./app.js"></script>
+
+<!-- Live Refresh: polls Gitea for new commits on main, reloads when SHA changes -->
+<div id="live-refresh-banner" style="
+  display:none; position:fixed; top:0; left:0; right:0; z-index:9999;
+  background:linear-gradient(90deg,#4af0c0,#7b5cff);
+  color:#050510; font-family:'JetBrains Mono',monospace; font-size:13px;
+  padding:8px 16px; text-align:center; font-weight:600;
+">⚡ NEW DEPLOYMENT DETECTED — Reloading in <span id="lr-countdown">5</span>s…</div>
+
+<script>
+(function() {
+  const GITEA    = 'http://143.198.27.163:3000/api/v1';
+  const REPO     = 'Timmy_Foundation/the-nexus';
+  const BRANCH   = 'main';
+  const INTERVAL = 30000; // poll every 30s
+
+  let knownSha = null;
+
+  async function fetchLatestSha() {
+    try {
+      const r = await fetch(`${GITEA}/repos/${REPO}/branches/${BRANCH}`, { cache: 'no-store' });
+      if (!r.ok) return null;
+      const d = await r.json();
+      return d.commit && d.commit.id ? d.commit.id : null;
+    } catch (e) { return null; }
+  }
+
+  async function poll() {
+    const sha = await fetchLatestSha();
+    if (!sha) return;
+    if (knownSha === null) { knownSha = sha; return; }
+    if (sha !== knownSha) {
+      knownSha = sha;
+      const banner = document.getElementById('live-refresh-banner');
+      const countdown = document.getElementById('lr-countdown');
+      banner.style.display = 'block';
+      let t = 5;
+      const tick = setInterval(() => {
+        t--;
+        countdown.textContent = t;
+        if (t <= 0) { clearInterval(tick); location.reload(); }
+      }, 1000);
+    }
+  }
+
+  // Start polling after page is interactive
+  fetchLatestSha().then(sha => { knownSha = sha; });
+  setInterval(poll, INTERVAL);
+})();
+</script>
+</body>
+</html>

l402_server.py

@@ -0,0 +1,35 @@
+
+#!/usr/bin/env python3
+from http.server import HTTPServer, BaseHTTPRequestHandler
+import json
+import secrets
+
+class L402Handler(BaseHTTPRequestHandler):
+    def do_GET(self):
+        if self.path == '/api/cost-estimate':
+            # Simulate L402 Challenge
+            macaroon = secrets.token_hex(16)
+            invoice = "lnbc1..." # Mock invoice
+            
+            self.send_response(402)
+            self.send_header('WWW-Authenticate', f'L402 macaroon="{macaroon}", invoice="{invoice}"')
+            self.send_header('Content-type', 'application/json')
+            self.end_headers()
+            
+            response = {
+                "error": "Payment Required",
+                "message": "Please pay the invoice to access cost estimation."
+            }
+            self.wfile.write(json.dumps(response).encode())
+        else:
+            self.send_response(404)
+            self.end_headers()
+
+def run(server_class=HTTPServer, handler_class=L402Handler, port=8080):
+    server_address = ('', port)
+    httpd = server_class(server_address, handler_class)
+    print(f"Starting L402 Skeleton Server on port {port}...")
+    httpd.serve_forever()
+
+if __name__ == "__main__":
+    run()

portals.json

@@ -4,20 +4,12 @@
     "name": "Morrowind",
     "description": "The Vvardenfell harness. Ash storms and ancient mysteries.",
     "status": "online",
-    "portal_type": "game-world",
-    "world_category": "rpg",
-    "environment": "production",
-    "access_mode": "public",
-    "readiness_state": "playable",
-    "telemetry_source": "hermes-harness:morrowind-mcp",
-    "owner": "Timmy",
     "color": "#ff6600",
     "position": { "x": 15, "y": 0, "z": -10 },
     "rotation": { "y": -0.5 },
     "destination": {
       "url": "https://morrowind.timmy.foundation",
       "type": "harness",
-      "action_label": "Enter Vvardenfell",
       "params": { "world": "vvardenfell" }
     }
   },
@@ -25,21 +17,13 @@
     "id": "bannerlord",
     "name": "Bannerlord",
     "description": "Calradia battle harness. Massive armies, tactical command.",
-    "status": "rebuilding",
-    "portal_type": "game-world",
-    "world_category": "strategy-rpg",
-    "environment": "staging",
-    "access_mode": "operator",
-    "readiness_state": "prototype",
-    "telemetry_source": "hermes-harness:bannerlord-bridge",
-    "owner": "Timmy",
+    "status": "standby",
     "color": "#ffd700",
     "position": { "x": -15, "y": 0, "z": -10 },
     "rotation": { "y": 0.5 },
     "destination": {
       "url": "https://bannerlord.timmy.foundation",
       "type": "harness",
-      "action_label": "Enter Calradia",
       "params": { "world": "calradia" }
     }
   },
@@ -48,21 +32,69 @@
     "name": "Workshop",
     "description": "The creative harness. Build, script, and manifest.",
     "status": "online",
-    "portal_type": "operator-room",
-    "world_category": "workspace",
-    "environment": "local",
-    "access_mode": "local-only",
-    "readiness_state": "active",
-    "telemetry_source": "hermes-harness:workshop-state",
-    "owner": "Alexander",
     "color": "#4af0c0",
     "position": { "x": 0, "y": 0, "z": -20 },
     "rotation": { "y": 0 },
     "destination": {
       "url": "https://workshop.timmy.foundation",
       "type": "harness",
-      "action_label": "Enter Workshop",
       "params": { "mode": "creative" }
     }
+  },
+  {
+    "id": "archive",
+    "name": "Archive",
+    "description": "The repository of all knowledge. History, logs, and ancient data.",
+    "status": "online",
+    "color": "#0066ff",
+    "position": { "x": 25, "y": 0, "z": 0 },
+    "rotation": { "y": -1.57 },
+    "destination": {
+      "url": "https://archive.timmy.foundation",
+      "type": "harness",
+      "params": { "mode": "read" }
+    }
+  },
+  {
+    "id": "chapel",
+    "name": "Chapel",
+    "description": "A sanctuary for reflection and digital peace.",
+    "status": "online",
+    "color": "#ffd700",
+    "position": { "x": -25, "y": 0, "z": 0 },
+    "rotation": { "y": 1.57 },
+    "destination": {
+      "url": "https://chapel.timmy.foundation",
+      "type": "harness",
+      "params": { "mode": "meditation" }
+    }
+  },
+  {
+    "id": "courtyard",
+    "name": "Courtyard",
+    "description": "The open nexus. A place for agents to gather and connect.",
+    "status": "online",
+    "color": "#4af0c0",
+    "position": { "x": 15, "y": 0, "z": 10 },
+    "rotation": { "y": -2.5 },
+    "destination": {
+      "url": "https://courtyard.timmy.foundation",
+      "type": "harness",
+      "params": { "mode": "social" }
+    }
+  },
+  {
+    "id": "gate",
+    "name": "Gate",
+    "description": "The transition point. Entry and exit from the Nexus core.",
+    "status": "standby",
+    "color": "#ff4466",
+    "position": { "x": -15, "y": 0, "z": 10 },
+    "rotation": { "y": 2.5 },
+    "destination": {
+      "url": "https://gate.timmy.foundation",
+      "type": "harness",
+      "params": { "mode": "transit" }
+    }
   }
 ]

public/nexus/app.js

@@ -0,0 +1,284 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Cookie check</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=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        font-family: 'Inter', Helvetica, Arial, sans-serif;
+        background: light-dark(#F8F8F7, #191919);
+        color: light-dark(#1f1f1f, #e3e3e3);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        min-height: 100vh;
+        margin: 0;
+        padding: 20px;
+        text-align: center;
+      }
+
+      .container {
+        background: light-dark(#FFFFFF, #1F1F1F);
+        padding: 32px;
+        border-radius: 16px;
+        border: 1px solid light-dark(#E2E3E4, #3E3E3E);
+        max-width: min(80%, 500px);
+        width: 100%;
+        color: light-dark(#2B2D31, #D4D4D4);
+      }
+
+      h1 {
+        font-size: 20px;
+        font-weight: 500;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        color: light-dark(#2B2D31, #D4D4D4);
+      }
+
+      p {
+        font-size: 14px;
+        color: light-dark(#2B2D31, #D4D4D4);
+        line-height: 21px;
+        margin: 0 0 1.5rem 0;
+      }
+
+      .icon {
+        margin-bottom: 1rem;
+        line-height: 0;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        margin-top: 2rem;
+      }
+
+      button {
+        background-color: light-dark(#fff, #323232);
+        color: light-dark(#2B2D31, #FCFCFC);
+        border: 1px solid light-dark(#E2E3E4, #3E3E3E);
+        border-radius: 12px;
+        padding: 8px 12px;
+        font-size: 14px;
+        line-height: 21px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        font-weight: 400;
+        font-family: 'Inter', Helvetica, Arial, sans-serif;
+        width: 100%;
+      }
+
+      button:hover {
+        background-color: light-dark(#EAEAEB, #424242);
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      /* Loading Spinner Animation */
+      .spinner {
+        margin: 0 auto 1.5rem auto;
+        width: 40px;
+        height: 40px;
+        border: 4px solid light-dark(#f0f0f0, #262626);
+        border-top: 4px solid light-dark(#076eff, #87a9ff); /* Blue color */
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      .logo {
+        border-radius: 10px;
+        display: block;
+        margin: 0 auto 2rem auto;
+      }
+
+      .logo.hidden {
+        display: none;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <img
+        class="logo"
+        src="https://www.gstatic.com/aistudio/ai_studio_favicon_2_256x256.png"
+        alt="AI Studio Logo"
+        width="256"
+        height="256"
+      />
+      <div class="spinner"></div>
+      <div id="error-ui" class="hidden">
+        <div class="icon">
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="48px"
+            height="48px"
+            fill="#D73A49"
+          >
+            <path
+              d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"
+            />
+          </svg>
+        </div>
+        <div id="stepOne" class="text-container">
+          <h1>Action required to load your app</h1>
+          <p>
+            It looks like your browser is blocking a required security cookie, which is common on
+            older versions of iOS and Safari.
+          </p>
+          <div class="button-container">
+            <button id="authInSeparateWindowButton" onclick="redirectToReturnUrl(true)">Authenticate in new window</button>
+          </div>
+        </div>
+        <div id="stepTwo" class="text-container hidden">
+          <h1>Action required to load your app</h1>
+          <p>
+            It looks like your browser is blocking a required security cookie, which is common on
+            older versions of iOS and Safari.
+          </p>
+          <div class="button-container">
+            <button id="interactButton" onclick="redirectToReturnUrl(false)">Close and continue</button>
+          </div>
+        </div>
+        <div id="stepThree" class="text-container hidden">
+          <h1>Almost there!</h1>
+          <p>
+            Grant permission for the required security cookie below.
+          </p>
+          <div class="button-container">
+            <button id="grantPermissionButton" onclick="grantStorageAccess()">Grant permission</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const AUTH_FLOW_TEST_COOKIE_NAME = '__SECURE-aistudio_auth_flow_may_set_cookies';
+      const COOKIE_VALUE = 'true';
+
+      function getCookie(name) {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+          let cookie = cookies[i].trim();
+          if (cookie.startsWith(name + '=')) {
+            return cookie.substring(name.length + 1);
+          }
+        }
+        return null;
+      }
+
+      function setAuthFlowTestCookie() {
+        // Set the cookie's TTL to 1 minute. This is a short lived cookie because it is only used
+        // when the user does not have an auth token or their auth token needs to be reset.
+        // Making this cookie too long-lived allows the user to get into a state where they can't
+        // mint a new auth token.
+        document.cookie = `${AUTH_FLOW_TEST_COOKIE_NAME}=${COOKIE_VALUE}; Path=/; Secure; SameSite=None; Domain=${window.location.hostname}; Partitioned; Max-Age=60;`;
+      }
+
+      /**
+       * Returns true if the test cookie is set, false otherwise.
+       */
+      function authFlowTestCookieIsSet() {
+        return getCookie(AUTH_FLOW_TEST_COOKIE_NAME) === COOKIE_VALUE;
+      }
+
+      /**
+       * Redirects to the return url. If autoClose is true, then the return url will be opened in a
+       * new window, and it will be closed automatically when the page loads.
+       */
+      async function redirectToReturnUrl(autoClose) {
+        const initialReturnUrlStr = new URLSearchParams(window.location.search).get('return_url');
+        const returnUrl = initialReturnUrlStr ? new URL(initialReturnUrlStr) : null;
+
+        // Prevent potentially malicious URLs from being used
+        if (returnUrl.protocol.toLowerCase() === 'javascript:') {
+          console.error('Potentially malicious return URL blocked');
+          return;
+        }
+
+        if (autoClose) {
+          returnUrl.searchParams.set('__auto_close', '1');
+          const url = new URL(window.location.href);
+          url.searchParams.set('return_url', returnUrl.toString());
+          // Land on the cookie check page first, so the user can interact with it before proceeding
+          // to the return url where cookies can be set.
+          window.open(url.toString(), '_blank');
+          const hasAccess = await document.hasStorageAccess();
+          document.querySelector('#stepOne').classList.add('hidden');
+          if (!hasAccess) {
+            document.querySelector('#stepThree').classList.remove('hidden');
+          } else {
+            window.location.reload();
+          }
+        } else {
+          window.location.href = returnUrl.toString();
+        }
+      }
+
+      /**
+       * Grants the browser permission to set cookies. If successful, then it redirects to the
+       * return url.
+       */
+      async function grantStorageAccess() {
+        try {
+          await document.requestStorageAccess();
+          redirectToReturnUrl(false);
+        } catch (err) {
+          console.log('error after button click: ', err);
+        }
+      }
+
+      /**
+       * Verifies that the browser can set cookies. If it can, then it redirects to the return url.
+       * If it can't, then it shows the error UI.
+       */
+      function verifyCanSetCookies() {
+        setAuthFlowTestCookie();
+        if (authFlowTestCookieIsSet()) {
+          // Check if we are on the auto-close flow, and if so show the interact button.
+          const returnUrl = new URLSearchParams(window.location.search).get('return_url');
+          const autoClose = new URL(returnUrl).searchParams.has('__auto_close');
+          if (autoClose) {
+            document.querySelector('#stepOne').classList.add('hidden');
+            document.querySelector('#stepTwo').classList.remove('hidden');
+          } else {
+            redirectToReturnUrl(false);
+            return;
+          }
+        }
+        // The cookie could not be set, so initiate the recovery flow.
+        document.querySelector('.logo').classList.add('hidden');
+        document.querySelector('.spinner').classList.add('hidden');
+        document.querySelector('#error-ui').classList.remove('hidden');
+      }
+
+      // Start the cookie verification process.
+      verifyCanSetCookies();
+    </script>
+  </body>
+</html>

public/nexus/index.html

@@ -0,0 +1,284 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Cookie check</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=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        font-family: 'Inter', Helvetica, Arial, sans-serif;
+        background: light-dark(#F8F8F7, #191919);
+        color: light-dark(#1f1f1f, #e3e3e3);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        min-height: 100vh;
+        margin: 0;
+        padding: 20px;
+        text-align: center;
+      }
+
+      .container {
+        background: light-dark(#FFFFFF, #1F1F1F);
+        padding: 32px;
+        border-radius: 16px;
+        border: 1px solid light-dark(#E2E3E4, #3E3E3E);
+        max-width: min(80%, 500px);
+        width: 100%;
+        color: light-dark(#2B2D31, #D4D4D4);
+      }
+
+      h1 {
+        font-size: 20px;
+        font-weight: 500;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        color: light-dark(#2B2D31, #D4D4D4);
+      }
+
+      p {
+        font-size: 14px;
+        color: light-dark(#2B2D31, #D4D4D4);
+        line-height: 21px;
+        margin: 0 0 1.5rem 0;
+      }
+
+      .icon {
+        margin-bottom: 1rem;
+        line-height: 0;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        margin-top: 2rem;
+      }
+
+      button {
+        background-color: light-dark(#fff, #323232);
+        color: light-dark(#2B2D31, #FCFCFC);
+        border: 1px solid light-dark(#E2E3E4, #3E3E3E);
+        border-radius: 12px;
+        padding: 8px 12px;
+        font-size: 14px;
+        line-height: 21px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        font-weight: 400;
+        font-family: 'Inter', Helvetica, Arial, sans-serif;
+        width: 100%;
+      }
+
+      button:hover {
+        background-color: light-dark(#EAEAEB, #424242);
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      /* Loading Spinner Animation */
+      .spinner {
+        margin: 0 auto 1.5rem auto;
+        width: 40px;
+        height: 40px;
+        border: 4px solid light-dark(#f0f0f0, #262626);
+        border-top: 4px solid light-dark(#076eff, #87a9ff); /* Blue color */
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      .logo {
+        border-radius: 10px;
+        display: block;
+        margin: 0 auto 2rem auto;
+      }
+
+      .logo.hidden {
+        display: none;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <img
+        class="logo"
+        src="https://www.gstatic.com/aistudio/ai_studio_favicon_2_256x256.png"
+        alt="AI Studio Logo"
+        width="256"
+        height="256"
+      />
+      <div class="spinner"></div>
+      <div id="error-ui" class="hidden">
+        <div class="icon">
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="48px"
+            height="48px"
+            fill="#D73A49"
+          >
+            <path
+              d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"
+            />
+          </svg>
+        </div>
+        <div id="stepOne" class="text-container">
+          <h1>Action required to load your app</h1>
+          <p>
+            It looks like your browser is blocking a required security cookie, which is common on
+            older versions of iOS and Safari.
+          </p>
+          <div class="button-container">
+            <button id="authInSeparateWindowButton" onclick="redirectToReturnUrl(true)">Authenticate in new window</button>
+          </div>
+        </div>
+        <div id="stepTwo" class="text-container hidden">
+          <h1>Action required to load your app</h1>
+          <p>
+            It looks like your browser is blocking a required security cookie, which is common on
+            older versions of iOS and Safari.
+          </p>
+          <div class="button-container">
+            <button id="interactButton" onclick="redirectToReturnUrl(false)">Close and continue</button>
+          </div>
+        </div>
+        <div id="stepThree" class="text-container hidden">
+          <h1>Almost there!</h1>
+          <p>
+            Grant permission for the required security cookie below.
+          </p>
+          <div class="button-container">
+            <button id="grantPermissionButton" onclick="grantStorageAccess()">Grant permission</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const AUTH_FLOW_TEST_COOKIE_NAME = '__SECURE-aistudio_auth_flow_may_set_cookies';
+      const COOKIE_VALUE = 'true';
+
+      function getCookie(name) {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+          let cookie = cookies[i].trim();
+          if (cookie.startsWith(name + '=')) {
+            return cookie.substring(name.length + 1);
+          }
+        }
+        return null;
+      }
+
+      function setAuthFlowTestCookie() {
+        // Set the cookie's TTL to 1 minute. This is a short lived cookie because it is only used
+        // when the user does not have an auth token or their auth token needs to be reset.
+        // Making this cookie too long-lived allows the user to get into a state where they can't
+        // mint a new auth token.
+        document.cookie = `${AUTH_FLOW_TEST_COOKIE_NAME}=${COOKIE_VALUE}; Path=/; Secure; SameSite=None; Domain=${window.location.hostname}; Partitioned; Max-Age=60;`;
+      }
+
+      /**
+       * Returns true if the test cookie is set, false otherwise.
+       */
+      function authFlowTestCookieIsSet() {
+        return getCookie(AUTH_FLOW_TEST_COOKIE_NAME) === COOKIE_VALUE;
+      }
+
+      /**
+       * Redirects to the return url. If autoClose is true, then the return url will be opened in a
+       * new window, and it will be closed automatically when the page loads.
+       */
+      async function redirectToReturnUrl(autoClose) {
+        const initialReturnUrlStr = new URLSearchParams(window.location.search).get('return_url');
+        const returnUrl = initialReturnUrlStr ? new URL(initialReturnUrlStr) : null;
+
+        // Prevent potentially malicious URLs from being used
+        if (returnUrl.protocol.toLowerCase() === 'javascript:') {
+          console.error('Potentially malicious return URL blocked');
+          return;
+        }
+
+        if (autoClose) {
+          returnUrl.searchParams.set('__auto_close', '1');
+          const url = new URL(window.location.href);
+          url.searchParams.set('return_url', returnUrl.toString());
+          // Land on the cookie check page first, so the user can interact with it before proceeding
+          // to the return url where cookies can be set.
+          window.open(url.toString(), '_blank');
+          const hasAccess = await document.hasStorageAccess();
+          document.querySelector('#stepOne').classList.add('hidden');
+          if (!hasAccess) {
+            document.querySelector('#stepThree').classList.remove('hidden');
+          } else {
+            window.location.reload();
+          }
+        } else {
+          window.location.href = returnUrl.toString();
+        }
+      }
+
+      /**
+       * Grants the browser permission to set cookies. If successful, then it redirects to the
+       * return url.
+       */
+      async function grantStorageAccess() {
+        try {
+          await document.requestStorageAccess();
+          redirectToReturnUrl(false);
+        } catch (err) {
+          console.log('error after button click: ', err);
+        }
+      }
+
+      /**
+       * Verifies that the browser can set cookies. If it can, then it redirects to the return url.
+       * If it can't, then it shows the error UI.
+       */
+      function verifyCanSetCookies() {
+        setAuthFlowTestCookie();
+        if (authFlowTestCookieIsSet()) {
+          // Check if we are on the auto-close flow, and if so show the interact button.
+          const returnUrl = new URLSearchParams(window.location.search).get('return_url');
+          const autoClose = new URL(returnUrl).searchParams.has('__auto_close');
+          if (autoClose) {
+            document.querySelector('#stepOne').classList.add('hidden');
+            document.querySelector('#stepTwo').classList.remove('hidden');
+          } else {
+            redirectToReturnUrl(false);
+            return;
+          }
+        }
+        // The cookie could not be set, so initiate the recovery flow.
+        document.querySelector('.logo').classList.add('hidden');
+        document.querySelector('.spinner').classList.add('hidden');
+        document.querySelector('#error-ui').classList.remove('hidden');
+      }
+
+      // Start the cookie verification process.
+      verifyCanSetCookies();
+    </script>
+  </body>
+</html>

public/nexus/style.css

@@ -0,0 +1,284 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Cookie check</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=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      body {
+        font-family: 'Inter', Helvetica, Arial, sans-serif;
+        background: light-dark(#F8F8F7, #191919);
+        color: light-dark(#1f1f1f, #e3e3e3);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        min-height: 100vh;
+        margin: 0;
+        padding: 20px;
+        text-align: center;
+      }
+
+      .container {
+        background: light-dark(#FFFFFF, #1F1F1F);
+        padding: 32px;
+        border-radius: 16px;
+        border: 1px solid light-dark(#E2E3E4, #3E3E3E);
+        max-width: min(80%, 500px);
+        width: 100%;
+        color: light-dark(#2B2D31, #D4D4D4);
+      }
+
+      h1 {
+        font-size: 20px;
+        font-weight: 500;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        color: light-dark(#2B2D31, #D4D4D4);
+      }
+
+      p {
+        font-size: 14px;
+        color: light-dark(#2B2D31, #D4D4D4);
+        line-height: 21px;
+        margin: 0 0 1.5rem 0;
+      }
+
+      .icon {
+        margin-bottom: 1rem;
+        line-height: 0;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        margin-top: 2rem;
+      }
+
+      button {
+        background-color: light-dark(#fff, #323232);
+        color: light-dark(#2B2D31, #FCFCFC);
+        border: 1px solid light-dark(#E2E3E4, #3E3E3E);
+        border-radius: 12px;
+        padding: 8px 12px;
+        font-size: 14px;
+        line-height: 21px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        font-weight: 400;
+        font-family: 'Inter', Helvetica, Arial, sans-serif;
+        width: 100%;
+      }
+
+      button:hover {
+        background-color: light-dark(#EAEAEB, #424242);
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      /* Loading Spinner Animation */
+      .spinner {
+        margin: 0 auto 1.5rem auto;
+        width: 40px;
+        height: 40px;
+        border: 4px solid light-dark(#f0f0f0, #262626);
+        border-top: 4px solid light-dark(#076eff, #87a9ff); /* Blue color */
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      .logo {
+        border-radius: 10px;
+        display: block;
+        margin: 0 auto 2rem auto;
+      }
+
+      .logo.hidden {
+        display: none;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <img
+        class="logo"
+        src="https://www.gstatic.com/aistudio/ai_studio_favicon_2_256x256.png"
+        alt="AI Studio Logo"
+        width="256"
+        height="256"
+      />
+      <div class="spinner"></div>
+      <div id="error-ui" class="hidden">
+        <div class="icon">
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="48px"
+            height="48px"
+            fill="#D73A49"
+          >
+            <path
+              d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"
+            />
+          </svg>
+        </div>
+        <div id="stepOne" class="text-container">
+          <h1>Action required to load your app</h1>
+          <p>
+            It looks like your browser is blocking a required security cookie, which is common on
+            older versions of iOS and Safari.
+          </p>
+          <div class="button-container">
+            <button id="authInSeparateWindowButton" onclick="redirectToReturnUrl(true)">Authenticate in new window</button>
+          </div>
+        </div>
+        <div id="stepTwo" class="text-container hidden">
+          <h1>Action required to load your app</h1>
+          <p>
+            It looks like your browser is blocking a required security cookie, which is common on
+            older versions of iOS and Safari.
+          </p>
+          <div class="button-container">
+            <button id="interactButton" onclick="redirectToReturnUrl(false)">Close and continue</button>
+          </div>
+        </div>
+        <div id="stepThree" class="text-container hidden">
+          <h1>Almost there!</h1>
+          <p>
+            Grant permission for the required security cookie below.
+          </p>
+          <div class="button-container">
+            <button id="grantPermissionButton" onclick="grantStorageAccess()">Grant permission</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const AUTH_FLOW_TEST_COOKIE_NAME = '__SECURE-aistudio_auth_flow_may_set_cookies';
+      const COOKIE_VALUE = 'true';
+
+      function getCookie(name) {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+          let cookie = cookies[i].trim();
+          if (cookie.startsWith(name + '=')) {
+            return cookie.substring(name.length + 1);
+          }
+        }
+        return null;
+      }
+
+      function setAuthFlowTestCookie() {
+        // Set the cookie's TTL to 1 minute. This is a short lived cookie because it is only used
+        // when the user does not have an auth token or their auth token needs to be reset.
+        // Making this cookie too long-lived allows the user to get into a state where they can't
+        // mint a new auth token.
+        document.cookie = `${AUTH_FLOW_TEST_COOKIE_NAME}=${COOKIE_VALUE}; Path=/; Secure; SameSite=None; Domain=${window.location.hostname}; Partitioned; Max-Age=60;`;
+      }
+
+      /**
+       * Returns true if the test cookie is set, false otherwise.
+       */
+      function authFlowTestCookieIsSet() {
+        return getCookie(AUTH_FLOW_TEST_COOKIE_NAME) === COOKIE_VALUE;
+      }
+
+      /**
+       * Redirects to the return url. If autoClose is true, then the return url will be opened in a
+       * new window, and it will be closed automatically when the page loads.
+       */
+      async function redirectToReturnUrl(autoClose) {
+        const initialReturnUrlStr = new URLSearchParams(window.location.search).get('return_url');
+        const returnUrl = initialReturnUrlStr ? new URL(initialReturnUrlStr) : null;
+
+        // Prevent potentially malicious URLs from being used
+        if (returnUrl.protocol.toLowerCase() === 'javascript:') {
+          console.error('Potentially malicious return URL blocked');
+          return;
+        }
+
+        if (autoClose) {
+          returnUrl.searchParams.set('__auto_close', '1');
+          const url = new URL(window.location.href);
+          url.searchParams.set('return_url', returnUrl.toString());
+          // Land on the cookie check page first, so the user can interact with it before proceeding
+          // to the return url where cookies can be set.
+          window.open(url.toString(), '_blank');
+          const hasAccess = await document.hasStorageAccess();
+          document.querySelector('#stepOne').classList.add('hidden');
+          if (!hasAccess) {
+            document.querySelector('#stepThree').classList.remove('hidden');
+          } else {
+            window.location.reload();
+          }
+        } else {
+          window.location.href = returnUrl.toString();
+        }
+      }
+
+      /**
+       * Grants the browser permission to set cookies. If successful, then it redirects to the
+       * return url.
+       */
+      async function grantStorageAccess() {
+        try {
+          await document.requestStorageAccess();
+          redirectToReturnUrl(false);
+        } catch (err) {
+          console.log('error after button click: ', err);
+        }
+      }
+
+      /**
+       * Verifies that the browser can set cookies. If it can, then it redirects to the return url.
+       * If it can't, then it shows the error UI.
+       */
+      function verifyCanSetCookies() {
+        setAuthFlowTestCookie();
+        if (authFlowTestCookieIsSet()) {
+          // Check if we are on the auto-close flow, and if so show the interact button.
+          const returnUrl = new URLSearchParams(window.location.search).get('return_url');
+          const autoClose = new URL(returnUrl).searchParams.has('__auto_close');
+          if (autoClose) {
+            document.querySelector('#stepOne').classList.add('hidden');
+            document.querySelector('#stepTwo').classList.remove('hidden');
+          } else {
+            redirectToReturnUrl(false);
+            return;
+          }
+        }
+        // The cookie could not be set, so initiate the recovery flow.
+        document.querySelector('.logo').classList.add('hidden');
+        document.querySelector('.spinner').classList.add('hidden');
+        document.querySelector('#error-ui').classList.remove('hidden');
+      }
+
+      // Start the cookie verification process.
+      verifyCanSetCookies();
+    </script>
+  </body>
+</html>