npm - @vibevibes/runtime - Versions diffs - 0.2.0 - Mend

@vibevibes/runtime 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/src/viewer/index.html ADDED Viewed

@@ -0,0 +1,1388 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>vibe-vibe</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; }
+    body { font-family: system-ui, -apple-system, sans-serif; background: #0a0a0a; color: #fff; }
+    /* ── Main layout ───────────────────────────────────────── */
+    #main-wrapper {
+      display: none;
+      height: calc(100% - 40px);
+      overflow: hidden;
+    }
+    #root { flex: 1; min-width: 0; height: 100%; overflow: hidden; transition: all 0.2s ease; }
+    /* ── Right sidebar ─────────────────────────────────────── */
+    #right-sidebar {
+      width: 0; height: 100%; overflow: hidden;
+      background: #111113; border-left: 1px solid #1e1e24;
+      transition: width 0.2s ease;
+      display: flex; flex-direction: column; flex-shrink: 0;
+    }
+    #right-sidebar.open { width: 320px; }
+    #sidebar-tabs {
+      display: flex; border-bottom: 1px solid #1e1e24; flex-shrink: 0;
+    }
+    #sidebar-tabs button {
+      flex: 1; padding: 10px; background: none; border: none;
+      color: #6b6b80; font-size: 12px; font-weight: 600; cursor: pointer;
+      text-transform: uppercase; letter-spacing: 0.05em;
+      border-bottom: 2px solid transparent; transition: color 0.15s;
+    }
+    #sidebar-tabs button.active { color: #6366f1; border-bottom-color: #6366f1; }
+    #sidebar-tabs button:hover:not(.active) { color: #94a3b8; }
+    #sidebar-chat, #sidebar-activity {
+      flex: 1; overflow: hidden; display: none; flex-direction: column;
+    }
+    #sidebar-chat.active, #sidebar-activity.active { display: flex; }
+    /* ── Topbar ──────────────────────────────────────────── */
+    #topbar {
+      height: 40px; background: #111113; border-bottom: 1px solid #1e1e24;
+      display: flex; align-items: center; padding: 0 12px; gap: 8px;
+      font-size: 13px; z-index: 10000; position: relative;
+    }
+    .topbar-title { color: #e2e2e8; font-weight: 600; font-size: 13px; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .topbar-participants { display: flex; gap: 4px; align-items: center; margin-right: 4px; }
+    .topbar-participant {
+      padding: 2px 8px; border-radius: 9999px; font-size: 10px; font-weight: 500;
+      white-space: nowrap; cursor: pointer; position: relative;
+      transition: filter 0.15s;
+    }
+    .topbar-participant:hover { filter: brightness(1.3); }
+    .topbar-participant.human { background: #1e293b; color: #60a5fa; }
+    .topbar-participant.ai { background: #1a1625; color: #a78bfa; }
+    .topbar-participant.unknown { background: #1e1e24; color: #6b6b80; }
+    .participant-dropdown {
+      position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+      margin-top: 6px; background: #1e1e2e; border: 1px solid #2e2e3e;
+      border-radius: 8px; padding: 4px; min-width: 140px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 10001;
+      animation: dropdownIn 0.12s ease-out;
+    }
+    @keyframes dropdownIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
+    .participant-dropdown .dd-header {
+      padding: 6px 10px; font-size: 11px; color: #6b6b80;
+      border-bottom: 1px solid #2e2e3e; margin-bottom: 2px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .participant-dropdown button {
+      display: flex; align-items: center; gap: 6px; width: 100%;
+      padding: 7px 10px; background: none; border: none;
+      color: #e2e2e8; font-size: 12px; cursor: pointer;
+      border-radius: 4px; text-align: left;
+    }
+    .participant-dropdown button:hover { background: #2e2e3e; }
+    .participant-dropdown button.kick-action { color: #f87171; }
+    .participant-dropdown button.kick-action:hover { background: #3b1c1c; }
+    .topbar-btn {
+      background: none; border: none; color: #94a3b8; cursor: pointer;
+      font-size: 16px; padding: 4px 8px; border-radius: 4px;
+      display: flex; align-items: center; justify-content: center;
+      transition: background 0.15s, color 0.15s; flex-shrink: 0;
+    }
+    .topbar-btn:hover { background: #1e1e2e; color: #e2e2e8; }
+    /* ── Library ─────────────────────────────────────────── */
+    #library {
+      display: none; width: 100%; height: calc(100% - 40px);
+      overflow-y: auto; padding: 32px; max-width: 720px; margin: 0 auto;
+    }
+    #library.active { display: block; }
+    #library h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #e2e2e8; }
+    #library h3 { font-size: 14px; font-weight: 600; color: #6b6b80; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; margin-top: 24px; }
+    .lib-card {
+      background: #111113; border: 1px solid #1e1e24; border-radius: 8px;
+      padding: 14px 16px; margin-bottom: 8px; cursor: pointer;
+      transition: border-color 0.15s, background 0.15s;
+    }
+    .lib-card:hover { border-color: #6366f1; background: #16161a; }
+    .lib-card .title { font-size: 14px; font-weight: 600; color: #e2e2e8; }
+    .lib-card .desc { font-size: 12px; color: #6b6b80; margin-top: 4px; }
+    .lib-card .meta { font-size: 11px; color: #4a4a5a; margin-top: 6px; display: flex; gap: 12px; }
+    .lib-empty { color: #4a4a5a; font-size: 13px; padding: 16px 0; }
+    #loading {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      height: calc(100vh - 40px); gap: 16px; color: #94a3b8;
+    }
+    #loading .spinner {
+      width: 32px; height: 32px; border: 2px solid #334155;
+      border-top-color: #6366f1; border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    #error-display {
+      display: none; padding: 32px; max-width: 600px; margin: 80px auto;
+      background: #1e1e2e; border: 1px solid #ef4444; border-radius: 12px;
+    }
+    #error-display h2 { color: #ef4444; margin-bottom: 12px; }
+    #error-display pre { font-size: 13px; color: #94a3b8; white-space: pre-wrap; word-break: break-word; }
+    #toast-container {
+      position: fixed; top: 16px; right: 16px; z-index: 9999;
+      display: flex; flex-direction: column; gap: 8px; max-width: 420px;
+      pointer-events: none;
+    }
+    .toast {
+      padding: 12px 16px; border-radius: 8px; font-size: 13px;
+      background: #1e1e2e; border: 1px solid #ef4444; color: #f87171;
+      white-space: pre-wrap; word-break: break-word;
+      animation: toastIn 0.2s ease-out;
+      cursor: pointer; pointer-events: auto;
+    }
+    .toast-build { border-color: #f59e0b; color: #fbbf24; font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; font-size: 12px; max-height: 300px; overflow-y: auto; }
+    @keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+    /* ── Activity log (inside sidebar) ─────────────────── */
+    .sidebar-panel-header {
+      padding: 12px 16px; border-bottom: 1px solid #1e1e24;
+      font-size: 12px; font-weight: 700; color: #6b6b80;
+      text-transform: uppercase; letter-spacing: 0.06em;
+      display: flex; justify-content: space-between; align-items: center;
+      flex-shrink: 0;
+    }
+    #participant-list {
+      padding: 8px 16px; border-bottom: 1px solid #1e1e24;
+      display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0;
+    }
+    .participant-chip {
+      padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500;
+      display: inline-flex; align-items: center; gap: 4px;
+    }
+    .participant-chip .kick-btn {
+      background: none; border: none; color: #4a4a5a; cursor: pointer;
+      font-size: 12px; padding: 0; line-height: 1;
+      opacity: 0; transition: opacity 0.15s;
+    }
+    .participant-chip:hover .kick-btn { opacity: 1; }
+    .participant-chip .kick-btn:hover { color: #ef4444; }
+    .participant-chip.human { background: #1e293b; color: #60a5fa; }
+    .participant-chip.ai { background: #1a1625; color: #a78bfa; }
+    .participant-chip.unknown { background: #1e1e24; color: #6b6b80; }
+    #event-log {
+      flex: 1; overflow-y: auto; padding: 8px 0;
+    }
+    .event-entry {
+      padding: 6px 16px; font-size: 12px; line-height: 1.5;
+      border-bottom: 1px solid #0a0a0a;
+    }
+    .event-entry:hover { background: #1e1e24; }
+    .event-actor { font-weight: 600; }
+    .event-actor.human { color: #60a5fa; }
+    .event-actor.ai { color: #a78bfa; }
+    .event-tool { color: #6366f1; font-weight: 500; }
+    .event-time { color: #4a4a5a; font-size: 10px; float: right; }
+    .event-error { color: #f87171; }
+    /* ── Toast for share link ──────────────────────────── */
+    .toast-info { border-color: #6366f1; color: #818cf8; }
+  </style>
+</head>
+<body>
+  <div id="topbar">
+    <button class="topbar-btn" id="btn-back" onclick="navigateToLibrary()" title="Back to library">&#8592;</button>
+    <span class="topbar-title" id="topbar-title"></span>
+    <div style="flex:1"></div>
+    <div class="topbar-participants" id="topbar-participants"></div>
+    <button class="topbar-btn" id="btn-reset" onclick="resetRoom()" title="Reset experience">&#8634;</button>
+    <button class="topbar-btn" id="btn-share" onclick="copyShareLink()" title="Copy link">&#128279;</button>
+    <button class="topbar-btn" id="btn-sidebar" onclick="toggleSidebar()" title="Toggle sidebar">&#9776;</button>
+  </div>
+  <div id="library"></div>
+  <div id="loading">
+    <div class="spinner"></div>
+    <div>Loading experience...</div>
+  </div>
+  <div id="error-display">
+    <h2>Experience Error</h2>
+    <pre id="error-message"></pre>
+  </div>
+  <div id="toast-container"></div>
+  <div id="main-wrapper">
+    <div id="root"></div>
+    <div id="right-sidebar">
+      <div id="sidebar-tabs">
+        <button class="active" onclick="switchSidebarTab('chat')">Chat</button>
+        <button onclick="switchSidebarTab('activity')">Activity</button>
+      </div>
+      <div id="sidebar-chat" class="active"></div>
+      <div id="sidebar-activity">
+        <div class="sidebar-panel-header">
+          <span>Participants</span>
+          <span id="participant-count">0</span>
+        </div>
+        <div id="participant-list"></div>
+        <div class="sidebar-panel-header">
+          <span>Activity</span>
+          <span id="event-count">0</span>
+        </div>
+        <div id="event-log"></div>
+      </div>
+    </div>
+  </div>
+  <!-- External deps from CDN -->
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@18.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@18.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+      "zod": "https://esm.sh/zod@3.22.4",
+      "yjs": "https://esm.sh/yjs@13.6.10",
+      "@vibevibes/sdk": "/sdk.js"
+    }
+  }
+  </script>
+  <!-- Screenshot capture (html2canvas for DOM/SVG, canvas.toDataURL for <canvas>) -->
+  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+  <script type="module">
+    import React from "react";
+    import ReactDOM from "react-dom/client";
+    import { z } from "zod";
+    import * as Y from "yjs";
+    // ── Set up globalThis ────────────────────────────────────
+    // Wrap createElement to catch undefined component types — the O(1) safety net.
+    // When a bundle variable resolves to undefined (aliasing issues, missing globals,
+    // browser cache), this catches it at render time and shows a useful error instead
+    // of the cryptic "Function.prototype.call was called on undefined".
+    const _origCE = React.createElement;
+    React.createElement = function(type) {
+      if (type === undefined || type === null) {
+        console.error("[vibevibes] createElement called with undefined component. Props:", arguments[1]);
+        return _origCE("div", {
+          style: { padding: "8px", background: "#2d1b1b", border: "1px solid #ef4444",
+                   borderRadius: "4px", color: "#f87171", fontSize: "12px" }
+        }, "[undefined component]");
+      }
+      return _origCE.apply(this, arguments);
+    };
+    globalThis.React = React;
+    globalThis.ReactDOM = ReactDOM;
+    globalThis.Y = Y;
+    globalThis.z = z;
+    // SDK define helpers (same contract as @vibevibes/sdk)
+    globalThis.defineExperience = (config) => config;
+    globalThis.defineTool = (config) => ({ risk: "low", capabilities_required: [], ...config });
+    globalThis.defineTest = (config) => config;
+    globalThis.defineStream = (config) => config;
+    globalThis.validateExperience = () => ({ valid: true, errors: [], warnings: [] });
+    globalThis.quickTool = (name, desc, schema, handler) =>
+      globalThis.defineTool({ name, description: desc, input_schema: schema, handler });
+    globalThis.phaseTool = (zod, validPhases) => ({
+      name: "_phase.set",
+      description: "Transition to a new phase" + (validPhases && validPhases.length > 0 ? ` (${validPhases.join(", ")})` : ""),
+      input_schema: validPhases && validPhases.length > 0 ? zod.object({ phase: zod.enum(validPhases) }) : zod.object({ phase: zod.string() }),
+      risk: "low", capabilities_required: ["state.write"],
+      handler: async (ctx, input) => { ctx.setState({ ...ctx.state, phase: input.phase }); return { phase: input.phase }; },
+    });
+    const { useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, createContext, forwardRef, memo } = React;
+    const ce = React.createElement;
+    // ── Sidebar + topbar ─────────────────────────────────────
+    let sidebarOpen = localStorage.getItem("vibevibes_sidebar") !== "closed";
+    const activityEvents = [];
+    const MAX_ACTIVITY_EVENTS = 100;
+    let currentExperienceTitle = "";
+    // Apply saved sidebar state on load
+    document.getElementById("right-sidebar").classList.toggle("open", sidebarOpen);
+    globalThis.toggleSidebar = function() {
+      sidebarOpen = !sidebarOpen;
+      document.getElementById("right-sidebar").classList.toggle("open", sidebarOpen);
+      localStorage.setItem("vibevibes_sidebar", sidebarOpen ? "open" : "closed");
+    };
+    globalThis.switchSidebarTab = function(tab) {
+      document.querySelectorAll("#sidebar-tabs button").forEach(b => b.classList.remove("active"));
+      const buttons = document.querySelectorAll("#sidebar-tabs button");
+      buttons.forEach(b => { if (b.textContent.toLowerCase() === tab) b.classList.add("active"); });
+      document.getElementById("sidebar-chat").classList.toggle("active", tab === "chat");
+      document.getElementById("sidebar-activity").classList.toggle("active", tab === "activity");
+    };
+    globalThis.copyShareLink = function() {
+      navigator.clipboard.writeText(location.href).then(() => {
+        showToast("Link copied!", "info", 2000);
+      }).catch(() => {
+        showToast("Copy failed — use address bar", "error", 3000);
+      });
+    };
+    globalThis.resetRoom = async function() {
+      if (!ROOM_ID) return;
+      if (!confirm("Reset this experience to its initial state?")) return;
+      try {
+        const res = await fetch(`${SERVER}/rooms/${encodeURIComponent(ROOM_ID)}/reset`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+        });
+        const data = await res.json();
+        if (data.error) { showToast(data.error); return; }
+        showToast("Experience reset", "info", 2000);
+      } catch (err) {
+        showToast(`Reset failed: ${err.message}`);
+      }
+    };
+    function kickParticipant(targetActorId) {
+      if (!confirm("Kick " + targetActorId + "?")) return;
+      if (!currentWs || currentWs.readyState !== WebSocket.OPEN) return;
+      currentWs.send(JSON.stringify({ type: "kick", targetActorId }));
+    }
+    function parseActorId(id) {
+      const m = id.match(/^(.+)-(human|ai)-(\d+)$/);
+      if (m) return { username: m[1], type: m[2] };
+      return { username: id, type: "unknown" };
+    }
+    function updateTopbarTitle(title) {
+      currentExperienceTitle = title || "";
+      document.getElementById("topbar-title").textContent = currentExperienceTitle;
+    }
+    // participantDetails: [{ actorId, type }] from server (richer than string array)
+    let _participantDetails = [];
+    let _currentActorId = null;
+    let _activeDropdown = null;
+    function closeDropdown() {
+      if (_activeDropdown) { _activeDropdown.remove(); _activeDropdown = null; }
+    }
+    document.addEventListener("click", (e) => {
+      if (_activeDropdown && !_activeDropdown.contains(e.target) && !e.target.closest(".topbar-participant")) {
+        closeDropdown();
+      }
+    });
+    function showParticipantDropdown(chip, pid, type, username) {
+      closeDropdown();
+      const detail = _participantDetails.find(d => d.actorId === pid);
+      const myDetail = _participantDetails.find(d => d.actorId === _currentActorId);
+      const canKick = myDetail ? myDetail.type === "human" : _currentActorId && _currentActorId.startsWith("viewer");
+      const isSelf = pid === _currentActorId;
+      const modeColors = { behavior: "#22c55e", manual: "#3b82f6", hybrid: "#a855f7" };
+      const dd = document.createElement("div");
+      dd.className = "participant-dropdown";
+      const header = document.createElement("div");
+      header.className = "dd-header";
+      header.textContent = pid;
+      dd.appendChild(header);
+      // Rich metadata rows
+      if (detail) {
+        const addRow = (label, value, color) => {
+          if (!value) return;
+          const row = document.createElement("div");
+          row.style.cssText = "padding:4px 12px;font-size:11px;display:flex;justify-content:space-between;align-items:center;";
+          const lbl = document.createElement("span");
+          lbl.style.color = "#6b6b80";
+          lbl.textContent = label;
+          const val = document.createElement("span");
+          val.style.cssText = "font-weight:500;color:" + (color || "#e2e2e8") + ";";
+          if (color) {
+            val.style.cssText += "padding:1px 6px;border-radius:4px;background:" + color + "22;border:1px solid " + color + "44;font-size:10px;";
+          }
+          val.textContent = value;
+          row.appendChild(lbl);
+          row.appendChild(val);
+          dd.appendChild(row);
+        };
+        if (detail.role) addRow("Role", detail.role);
+        if (detail.agentMode) addRow("Mode", detail.agentMode, modeColors[detail.agentMode]);
+        if (detail.metadata) {
+          const model = detail.metadata.model;
+          if (model) addRow("Model", model, "#f59e0b");
+          for (const [k, v] of Object.entries(detail.metadata)) {
+            if (k === "model") continue;
+            addRow(k, v);
+          }
+        }
+      }
+      if (canKick && !isSelf) {
+        const kickBtn = document.createElement("button");
+        kickBtn.className = "kick-action";
+        kickBtn.innerHTML = "\u{274C} Kick from room";
+        kickBtn.onclick = (e) => { e.stopPropagation(); closeDropdown(); kickParticipant(pid); };
+        dd.appendChild(kickBtn);
+      }
+      if (isSelf) {
+        const selfLabel = document.createElement("div");
+        selfLabel.className = "dd-header";
+        selfLabel.style.borderBottom = "none";
+        selfLabel.style.color = "#4a4a5a";
+        selfLabel.style.fontStyle = "italic";
+        selfLabel.textContent = "(you)";
+        dd.appendChild(selfLabel);
+      }
+      chip.appendChild(dd);
+      _activeDropdown = dd;
+    }
+    function updateTopbarParticipants(participants) {
+      // Close any active dropdown before clearing (prevents stale DOM reference)
+      if (_activeDropdown) { closeDropdown(); }
+      const container = document.getElementById("topbar-participants");
+      container.innerHTML = "";
+      const modeBorderColors = { behavior: "#22c55e", manual: "#3b82f6", hybrid: "#a855f7" };
+      for (const pid of participants) {
+        // Prefer participantDetails for type resolution (actorId format no longer encodes type)
+        const detail = _participantDetails.find(d => d.actorId === pid);
+        const rawType = detail ? detail.type : parseActorId(pid).type;
+        const type = ['human', 'ai', 'unknown'].includes(rawType) ? rawType : 'unknown';
+        const { username } = parseActorId(pid);
+        const chip = document.createElement("span");
+        chip.className = `topbar-participant ${type}`;
+        // Show role as suffix if present
+        const roleSuffix = detail && detail.role ? ` [${detail.role}]` : "";
+        chip.textContent = (type === "ai" ? "\u{1F916}" : "") + username + roleSuffix;
+        // Color-code border by agentMode for AI participants
+        if (detail && detail.agentMode && modeBorderColors[detail.agentMode]) {
+          chip.style.borderColor = modeBorderColors[detail.agentMode];
+        }
+        chip.title = pid + (detail && detail.agentMode ? ` (${detail.agentMode})` : "");
+        chip.onclick = (e) => { e.stopPropagation(); showParticipantDropdown(chip, pid, type, username); };
+        container.appendChild(chip);
+      }
+    }
+    function updateParticipantList(participants) {
+      // Sidebar participant list (detailed)
+      const el = document.getElementById("participant-list");
+      const countEl = document.getElementById("participant-count");
+      countEl.textContent = String(participants.length);
+      el.innerHTML = "";
+      const myDetail = _participantDetails.find(d => d.actorId === _currentActorId);
+      const canKick = myDetail ? myDetail.type === "human" : _currentActorId && _currentActorId.startsWith("viewer");
+      for (const pid of participants) {
+        const detail = _participantDetails.find(d => d.actorId === pid);
+        const rawType2 = detail ? detail.type : parseActorId(pid).type;
+        const type = ['human', 'ai', 'unknown'].includes(rawType2) ? rawType2 : 'unknown';
+        const { username } = parseActorId(pid);
+        const chip = document.createElement("span");
+        chip.className = `participant-chip ${type}`;
+        const nameSpan = document.createElement("span");
+        nameSpan.textContent = (type === "ai" ? "\u{1F916} " : "") + username;
+        chip.appendChild(nameSpan);
+        // Show role as sub-label
+        if (detail && detail.role) {
+          const roleSpan = document.createElement("span");
+          roleSpan.style.cssText = "font-size:9px;color:#6b6b80;margin-left:4px;";
+          roleSpan.textContent = detail.role;
+          chip.appendChild(roleSpan);
+        }
+        chip.title = pid;
+        if (canKick && pid !== _currentActorId) {
+          const btn = document.createElement("button");
+          btn.className = "kick-btn";
+          btn.title = "Kick " + username;
+          btn.textContent = "\u00D7";
+          btn.onclick = (e) => { e.stopPropagation(); kickParticipant(pid); };
+          chip.appendChild(btn);
+        }
+        el.appendChild(chip);
+      }
+      // Also update topbar compact chips
+      updateTopbarParticipants(participants);
+    }
+    function addActivityEvent(event) {
+      activityEvents.push(event);
+      if (activityEvents.length > MAX_ACTIVITY_EVENTS) {
+        activityEvents.shift();
+        // Remove oldest DOM node to prevent unbounded growth
+        const log = document.getElementById("event-log");
+        if (log && log.firstChild) log.removeChild(log.firstChild);
+      }
+      const log = document.getElementById("event-log");
+      const countEl = document.getElementById("event-count");
+      countEl.textContent = String(activityEvents.length);
+      const entry = document.createElement("div");
+      entry.className = "event-entry";
+      const { type: actorType } = parseActorId(event.actorId || "unknown");
+      const time = new Date(event.ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+      entry.innerHTML = `<span class="event-time">${escHtml(time)}</span>`
+        + `<span class="event-actor ${escHtml(actorType)}">${escHtml(event.actorId)}</span> `
+        + `<span class="event-tool">${escHtml(event.tool)}</span>`
+        + (event.error ? ` <span class="event-error">ERR</span>` : "");
+      log.appendChild(entry);
+      log.scrollTop = log.scrollHeight;
+    }
+    function renderSidebarChat(sharedState, callTool, actorId) {
+      const el = document.getElementById("sidebar-chat");
+      if (!el) return;
+      const msgs = sharedState._chat || [];
+      const parseActor = (id) => {
+        const m = id.match(/^(.+)-(human|ai)-(\d+)$/);
+        return m ? { name: m[1], type: m[2] } : { name: id, type: "unknown" };
+      };
+      const colors = { human: "#60a5fa", ai: "#a78bfa", unknown: "#94a3b8" };
+      el.innerHTML = `
+        <div style="flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px">
+          ${msgs.length === 0 ? '<div style="color:#4a4a5a;font-size:13px;text-align:center;padding:32px 0">No messages yet</div>' :
+            msgs.map(m => {
+              const a = parseActor(m.actorId);
+              const isMe = m.actorId === actorId;
+              return `<div style="display:flex;flex-direction:column;align-items:${isMe ? 'flex-end' : 'flex-start'}">
+                <span style="font-size:11px;font-weight:600;color:${colors[a.type] || colors.unknown}">${escHtml(a.name)}</span>
+                <div style="background:${isMe ? '#6366f1' : '#1e1e2e'};color:${isMe ? '#fff' : '#e2e2e8'};padding:6px 10px;border-radius:10px;font-size:13px;max-width:240px;word-break:break-word">${escHtml(m.message)}</div>
+              </div>`;
+            }).join("")}
+        </div>
+        <div style="padding:8px 12px;border-top:1px solid #1e1e24;display:flex;gap:8px;flex-shrink:0">
+          <input id="chat-input" type="text" placeholder="Type a message..." style="flex:1;padding:6px 10px;font-size:13px;border:1px solid #334155;border-radius:6px;background:#1e293b;color:#fff;outline:none;font-family:system-ui">
+          <button id="chat-send" style="padding:6px 12px;border-radius:6px;background:#6366f1;color:#fff;border:none;font-size:13px;cursor:pointer;font-weight:500">Send</button>
+        </div>`;
+      const inp = el.querySelector("#chat-input");
+      const btn = el.querySelector("#chat-send");
+      const send = () => {
+        const text = inp.value.trim();
+        if (!text) return;
+        inp.value = "";
+        callTool("_chat.send", { message: text }).catch(() => {});
+      };
+      btn.onclick = send;
+      inp.onkeydown = (e) => { if (e.key === "Enter") { e.preventDefault(); send(); } };
+    }
+    // ── Toast notifications ─────────────────────────────────
+    function showToast(message, type = "error", durationMs = 6000) {
+      const container = document.getElementById("toast-container");
+      const toast = document.createElement("div");
+      const typeClass = type === "build" ? "toast-build" : type === "info" ? "toast-info" : "";
+      toast.className = "toast" + (typeClass ? " " + typeClass : "");
+      toast.textContent = message;
+      toast.onclick = () => toast.remove();
+      container.appendChild(toast);
+      setTimeout(() => { if (toast.parentNode) toast.remove(); }, durationMs);
+    }
+    // ── Connect to the experience ─────────────────────────────
+    const SERVER = location.origin;
+    const WS_PROTO = location.protocol === "https:" ? "wss:" : "ws:";
+    const WS_URL = `${WS_PROTO}//${location.host}`;
+    // Room-aware: read room ID from URL path (e.g. /room/room-abc123)
+    function getRoomIdFromPath() {
+      const path = location.pathname.replace(/^\/+/, "");
+      // /room/<roomId> → extract roomId
+      const roomMatch = path.match(/^room\/(.+)$/);
+      if (roomMatch) {
+        try { return decodeURIComponent(roomMatch[1]); } catch { return roomMatch[1]; }
+      }
+      // Bare path (legacy) — treat as room ID if non-empty
+      return path || null;
+    }
+    let ROOM_ID = getRoomIdFromPath();
+    // Sanitize ROOM_ID to prevent path traversal in URL construction
+    if (ROOM_ID && !/^[a-zA-Z0-9_\-]+$/.test(ROOM_ID)) ROOM_ID = null;
+    let currentWs = null;
+    // Read ?role= query param (e.g. ?role=spectator)
+    function getRoleFromQuery() {
+      const params = new URLSearchParams(location.search);
+      return params.get("role") || undefined;
+    }
+    let REQUESTED_ROLE = getRoleFromQuery();
+    // ── Browser error reporting to agent ─────────────────────
+    // Sends errors to the server so the agent sees them via /agent-context
+    function reportBrowserError(msg) {
+      try {
+        fetch("/browser-error", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: String(msg), roomId: ROOM_ID || "local" }),
+        }).catch(() => {}); // fire-and-forget
+      } catch {}
+    }
+    // Capture unhandled errors and unhandled promise rejections
+    window.addEventListener("error", (e) => {
+      reportBrowserError(e.message || String(e));
+    });
+    window.addEventListener("unhandledrejection", (e) => {
+      reportBrowserError(e.reason?.message || String(e.reason));
+    });
+    function showError(msg) {
+      document.getElementById("loading").style.display = "none";
+      document.getElementById("library").className = "";
+      document.getElementById("main-wrapper").style.display = "none";
+      document.getElementById("error-display").style.display = "block";
+      document.getElementById("error-message").textContent = msg;
+      reportBrowserError(msg);
+    }
+    // ── Library / Navigation ─────────────────────────────────
+    function showLibraryView() {
+      document.getElementById("library").className = "active";
+      document.getElementById("loading").style.display = "none";
+      document.getElementById("main-wrapper").style.display = "none";
+      document.getElementById("error-display").style.display = "none";
+      // Hide sidebar controls in library view
+      document.getElementById("right-sidebar").classList.remove("open");
+      document.getElementById("btn-reset").style.display = "none";
+      document.getElementById("btn-share").style.display = "none";
+      document.getElementById("btn-sidebar").style.display = "none";
+      document.getElementById("topbar-participants").style.display = "none";
+      updateTopbarTitle("Library");
+      loadLibrary();
+    }
+    function showRoomView() {
+      document.getElementById("library").className = "";
+      document.getElementById("main-wrapper").style.display = "flex";
+      document.getElementById("root").style.display = "block";
+      // Show sidebar controls in room view
+      document.getElementById("btn-reset").style.display = "flex";
+      document.getElementById("btn-share").style.display = "flex";
+      document.getElementById("btn-sidebar").style.display = "flex";
+      document.getElementById("topbar-participants").style.display = "flex";
+      if (sidebarOpen) document.getElementById("right-sidebar").classList.add("open");
+    }
+    globalThis.navigateToLibrary = function() {
+      if (currentWs) { try { currentWs.close(); } catch {} currentWs = null; }
+      if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+      // Unmount Canvas tree so useEffect cleanups run (stops audio, disposes engines)
+      if (reactRoot) { try { reactRoot.render(null); } catch {} reactRoot = null; }
+      // Reset stale state from previous room
+      reconnectAttempts = 0;
+      activityEvents.length = 0;
+      _participantDetails = [];
+      _currentActorId = null;
+      const eventLogEl = document.getElementById("event-log");
+      if (eventLogEl) eventLogEl.innerHTML = "";
+      history.pushState({}, "", "/");
+      ROOM_ID = null;
+      showLibraryView();
+    };
+    function navigateToRoom(roomId, role, skipPush) {
+      if (currentWs) { try { currentWs.close(); } catch {} currentWs = null; }
+      if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+      // Unmount React trees to prevent stale closures
+      if (reactRoot) { try { reactRoot.render(null); } catch {} reactRoot = null; }
+      // Reset stale state from previous room
+      reconnectAttempts = 0;
+      activityEvents.length = 0;
+      _participantDetails = [];
+      _currentActorId = null;
+      const eventLogEl2 = document.getElementById("event-log");
+      if (eventLogEl2) eventLogEl2.innerHTML = "";
+      sessionStorage.removeItem("vibevibes_actorId"); // Clear stale actorId from previous room
+      sessionStorage.removeItem("vibevibes_viewerSessionId"); // New room = new identity
+      ROOM_ID = roomId;
+      REQUESTED_ROLE = role || getRoleFromQuery();
+      const qs = REQUESTED_ROLE ? `?role=${encodeURIComponent(REQUESTED_ROLE)}` : "";
+      if (!skipPush) history.pushState({}, "", `/room/${encodeURIComponent(roomId)}${qs}`);
+      showRoomView();
+      document.getElementById("loading").style.display = "flex";
+      updateTopbarTitle(roomId); // Will be replaced by experience title once bundle loads
+      start().catch((err) => showError("Failed to start: " + (err.message || err)));
+    }
+    // Handle browser back/forward — skipPush=true to avoid pushState inside popstate
+    window.addEventListener("popstate", () => {
+      const r = getRoomIdFromPath();
+      if (r) { navigateToRoom(r, null, true); }
+      else { if (currentWs) { try { currentWs.close(); } catch {} currentWs = null; } if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; } if (reactRoot) { try { reactRoot.render(null); } catch {} reactRoot = null; } ROOM_ID = null; reconnectAttempts = 0; activityEvents.length = 0; _participantDetails = []; _currentActorId = null; sessionStorage.removeItem("vibevibes_actorId"); sessionStorage.removeItem("vibevibes_viewerSessionId"); const el = document.getElementById("event-log"); if (el) el.innerHTML = ""; showLibraryView(); }
+    });
+    async function spawnAndNavigate(experienceId) {
+      try {
+        const res = await fetch(`${SERVER}/rooms/spawn`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ experienceId, sourceRoomId: "library" }),
+        });
+        const data = await res.json();
+        if (data.error) { showToast(data.error); return; }
+        // Validate roomId to prevent path traversal
+        if (!data.roomId || !/^[a-zA-Z0-9_\-]+$/.test(data.roomId)) { showToast("Invalid room ID from server"); return; }
+        navigateToRoom(data.roomId);
+      } catch (err) {
+        showToast(`Failed to spawn: ${err.message}`);
+      }
+    }
+    globalThis.spawnAndNavigate = spawnAndNavigate;
+    let _libClickHandler = null;
+    async function loadLibrary() {
+      const lib = document.getElementById("library");
+      lib.innerHTML = '<h2>Library</h2><div style="color:#6b6b80;font-size:13px;">Loading...</div>';
+      // Remove previous listener to prevent accumulation on repeated calls
+      if (_libClickHandler) {
+        lib.removeEventListener("click", _libClickHandler);
+        _libClickHandler = null;
+      }
+      try {
+        const experiences = await fetch(`${SERVER}/experiences`).then(r => r.json());
+        // Filter out host experience — host is the homepage, not a playable experience
+        const templateExperiences = experiences.filter(exp => exp.source !== "host");
+        let html = '<h2>Library</h2>';
+        if (templateExperiences.length === 0) {
+          html += '<div class="lib-empty">No experiences registered.</div>';
+        } else {
+          for (const exp of templateExperiences) {
+            // Each experience has a pre-created room with id = experienceId
+            html += `<div class="lib-card" data-room-id="${escHtml(exp.id)}">`;
+            html += `<div class="title">${escHtml(exp.title)}</div>
+              <div class="desc">${escHtml(exp.description)}</div>
+              <div class="meta">
+                <span>${escHtml(exp.id)}</span>
+                <span>v${escHtml(exp.version)}</span>
+              </div>
+            </div>`;
+          }
+        }
+        lib.innerHTML = html;
+        // Use event delegation instead of onclick attributes (prevents XSS via room IDs)
+        _libClickHandler = (e) => {
+          const card = e.target.closest(".lib-card[data-room-id]");
+          if (card) navigateToRoom(card.dataset.roomId);
+        };
+        lib.addEventListener("click", _libClickHandler);
+      } catch (err) {
+        lib.innerHTML = `<h2>Library</h2><div class="lib-empty">Failed to load: ${escHtml(err.message)}</div>`;
+      }
+    }
+    function escHtml(s) {
+      if (s == null || s === '') return '';
+      return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+    }
+    // Expose navigateToRoom globally for onclick handlers
+    globalThis.navigateToRoom = navigateToRoom;
+    // Unique viewer session ID per tab (survives refresh via sessionStorage, unique across tabs)
+    function getViewerSessionId() {
+      let id = sessionStorage.getItem("vibevibes_viewerSessionId");
+      if (!id) {
+        id = "viewer-" + Math.random().toString(36).slice(2, 10) + "-" + Date.now().toString(36);
+        sessionStorage.setItem("vibevibes_viewerSessionId", id);
+      }
+      return id;
+    }
+    async function start() {
+      const roomId = ROOM_ID || "local";
+      const viewerOwner = getViewerSessionId();
+      try {
+        // Connect WebSocket
+        const ws = new WebSocket(WS_URL);
+        currentWs = ws;
+        let actorId = "viewer";
+        let sharedState = {};
+        let _stateVersion = 0;
+        let participants = [];
+        let roomConfig = {};
+        let myRole = REQUESTED_ROLE; // "spectator" | "player" | undefined
+        let Canvas = null;
+        let EntryRitual = null;
+        let ritualComplete = false;
+        let hotReloadKey = 0;
+        // ── Optimistic state layer ──────────────────────────────
+        // Tracks in-flight optimistic overlays keyed by a unique call ID.
+        // Each overlay is { state: {...}, ts: number }.
+        // Display state = sharedState merged with all active overlays.
+        let optimisticOverlays = new Map();
+        let optimisticSeq = 0;
+        function getDisplayState() {
+          if (optimisticOverlays.size === 0) return sharedState;
+          let merged = { ...sharedState };
+          for (const overlay of optimisticOverlays.values()) {
+            Object.assign(merged, overlay.state);
+          }
+          return merged;
+        }
+        // ── Ephemeral state (high-frequency, no tool gate) ──────
+        let ephemeralState = {};
+        function setEphemeral(data) {
+          ephemeralState = {
+            ...ephemeralState,
+            [actorId]: { ...(ephemeralState[actorId] || {}), ...data },
+          };
+          // Broadcast to server for relay to other participants
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: "ephemeral", actorId, data }));
+          }
+          render();
+        }
+        // ── Stream function (high-frequency, bypasses tool gate) ──────
+        function streamFn(name, input) {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: "stream", name, input, actorId }));
+          }
+        }
+        // Spectators get a no-op callTool that logs a warning
+        async function spectatorCallTool(name, input) {
+          console.warn(`[spectator] Blocked tool call: ${name}`, input);
+          return { blocked: true, reason: "spectators cannot call tools" };
+        }
+        function render() {
+          if (!Canvas || !reactRoot) return;
+          const displayState = getDisplayState();
+          const isSpectator = myRole === "spectator";
+          const activeCallTool = isSpectator ? spectatorCallTool : callTool;
+          // Expose context for hooks
+          globalThis.__vibevibes_ctx__ = {
+            sharedState: displayState,
+            callTool: activeCallTool,
+            participants,
+            actorId,
+            ephemeralState,
+            setEphemeral,
+          };
+          // Entry ritual gate: show ritual component before Canvas
+          if (EntryRitual && !ritualComplete) {
+            reactRoot.render(
+              ce(CanvasErrorBoundary, { key: hotReloadKey },
+                ce(EntryRitual, {
+                  actorId, participants, participantDetails: _participantDetails,
+                  callTool: activeCallTool,
+                  proceed: function() { ritualComplete = true; render(); },
+                  roomConfig,
+                })
+              )
+            );
+            renderSidebarChat(displayState, callTool, actorId);
+            return;
+          }
+          reactRoot.render(
+            ce(CanvasErrorBoundary, { key: hotReloadKey },
+              ce(Canvas, {
+                roomId: roomId,
+                actorId,
+                sharedState: displayState,
+                callTool: activeCallTool,
+                participants,
+                participantDetails: _participantDetails,
+                ephemeralState,
+                setEphemeral,
+                roomConfig,
+                stream: streamFn,
+                role: myRole || "player",
+              })
+            )
+          );
+          // Render ChatPanel in sidebar
+          renderSidebarChat(displayState, callTool, actorId);
+        }
+        async function callTool(name, input, _optimisticState) {
+          // Validate tool name to prevent path traversal (e.g. "../leave")
+          if (!/^[a-zA-Z0-9_.\-:]+$/.test(name)) { throw new Error("Invalid tool name"); }
+          // If an optimistic state is provided, apply it IMMEDIATELY
+          let overlayId = null;
+          if (_optimisticState) {
+            overlayId = ++optimisticSeq;
+            optimisticOverlays.set(overlayId, { state: _optimisticState, ts: Date.now() });
+            render(); // Re-render with predicted state at T=0ms
+          }
+          try {
+            const toolUrl = roomId === "local"
+              ? `${SERVER}/tools/${name}`
+              : `${SERVER}/rooms/${roomId}/tools/${name}`;
+            const res = await fetch(toolUrl, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ actorId, input: input || {} }),
+            });
+            const data = await res.json();
+            if (data.error) {
+              showToast(data.error);
+              throw new Error(data.error);
+            }
+            return data.output;
+          } catch (err) {
+            if (!document.querySelector(".toast")) {
+              showToast(`Tool '${name}' failed: ${err.message || "unknown error"}`);
+            }
+            throw err;
+          } finally {
+            // Clear this overlay — server state broadcast will take over
+            if (overlayId !== null) {
+              optimisticOverlays.delete(overlayId);
+              render(); // Re-render with server-authoritative state
+            }
+          }
+        }
+        // Error boundary component
+        function getErrorHint(message) {
+          if (!message) return null;
+          if (message.includes("Cannot read properties of undefined") || message.includes("Cannot read property"))
+            return "A component accessed state that hasn't been initialized. Check your initialState and ensure all keys exist before reading them.";
+          if (message.includes("is not a function"))
+            return "Something expected to be a function is not. Check for missing imports or incorrect prop types.";
+          if (message.includes("Maximum update depth"))
+            return "Infinite re-render loop detected. Check useEffect dependencies — avoid setting state unconditionally inside useEffect.";
+          if (message.includes("Invalid hook call"))
+            return "Hooks can only be called inside React function components. Check that you're not calling useState/useEffect outside a component.";
+          if (message.includes("is not defined"))
+            return "A variable or import is missing. Check that all imports from @vibevibes/sdk or other modules are correct.";
+          return null;
+        }
+        class CanvasErrorBoundary extends React.Component {
+          constructor(props) {
+            super(props);
+            this.state = { error: null, componentStack: null };
+          }
+          static getDerivedStateFromError(error) { return { error }; }
+          componentDidCatch(error, info) {
+            console.error("[viewer] Experience crashed:", error, info?.componentStack);
+            if (info?.componentStack) this.setState({ componentStack: info.componentStack });
+            reportBrowserError(`[Canvas crash] ${error.message || error}`);
+          }
+          render() {
+            if (this.state.error) {
+              const msg = this.state.error.message || String(this.state.error);
+              const hint = getErrorHint(msg);
+              const stack = this.state.componentStack;
+              const fullError = msg + (stack ? "\n\nComponent stack:" + stack : "");
+              return ce("div", {
+                style: { padding: "32px", textAlign: "center", color: "#ef4444", maxWidth: "640px", margin: "0 auto" },
+              },
+                ce("h2", null, "Experience Crashed"),
+                ce("pre", { style: { fontSize: "13px", color: "#94a3b8", marginTop: "12px", whiteSpace: "pre-wrap", textAlign: "left" } }, msg),
+                hint ? ce("div", {
+                  style: { marginTop: "12px", padding: "12px 16px", background: "#1e293b", borderRadius: "8px", border: "1px solid #334155", textAlign: "left" },
+                },
+                  ce("strong", { style: { color: "#fbbf24", fontSize: "13px" } }, "Hint: "),
+                  ce("span", { style: { color: "#cbd5e1", fontSize: "13px" } }, hint),
+                ) : null,
+                stack ? ce("details", { style: { marginTop: "12px", textAlign: "left" } },
+                  ce("summary", { style: { color: "#64748b", cursor: "pointer", fontSize: "12px" } }, "Component stack"),
+                  ce("pre", { style: { fontSize: "11px", color: "#64748b", marginTop: "4px", whiteSpace: "pre-wrap" } }, stack),
+                ) : null,
+                ce("div", { style: { marginTop: "16px", display: "flex", gap: "8px", justifyContent: "center" } },
+                  ce("button", {
+                    onClick: () => this.setState({ error: null, componentStack: null }),
+                    style: { padding: "8px 16px", background: "#6366f1", color: "#fff", border: "none", borderRadius: "6px", cursor: "pointer" },
+                  }, "Try Again"),
+                  ce("button", {
+                    onClick: () => { navigator.clipboard.writeText(fullError); showToast("Error copied to clipboard"); },
+                    style: { padding: "8px 16px", background: "#334155", color: "#cbd5e1", border: "none", borderRadius: "6px", cursor: "pointer" },
+                  }, "Copy Error"),
+                ),
+              );
+            }
+            return this.props.children;
+          }
+        }
+        ws.onopen = () => {
+          reconnectAttempts = 0; // Reset backoff on successful connection
+          const savedActorId = sessionStorage.getItem("vibevibes_actorId");
+          ws.send(JSON.stringify({ type: "join", username: "viewer", roomId: roomId, actorId: savedActorId, owner: viewerOwner, role: REQUESTED_ROLE }));
+        };
+        ws.onmessage = async (event) => {
+          if (currentWs !== ws) return; // Guard against stale WS after navigation
+          let msg;
+          try { msg = JSON.parse(event.data); } catch { return; }
+          if (msg.type === "error") {
+            // Server rejected the join (e.g., stale session). Clear saved actorId and retry.
+            console.warn("[viewer] Server error:", msg.error);
+            const savedId = sessionStorage.getItem("vibevibes_actorId");
+            if (savedId) {
+              sessionStorage.removeItem("vibevibes_actorId");
+              console.log("[viewer] Cleared stale actorId, retrying join...");
+              ws.send(JSON.stringify({ type: "join", username: "viewer", roomId: roomId, owner: viewerOwner, role: REQUESTED_ROLE }));
+            } else {
+              showError(`Server error: ${msg.error}`);
+            }
+          }
+          if (msg.type === "joined") {
+            actorId = msg.actorId;
+            _currentActorId = actorId;
+            sessionStorage.setItem("vibevibes_actorId", actorId);
+            sharedState = msg.sharedState || {};
+            _stateVersion = msg.stateVersion ?? 0;
+            participants = msg.participants || [];
+            if (msg.participantDetails) _participantDetails = msg.participantDetails;
+            roomConfig = msg.config || {};
+            if (msg.role) myRole = msg.role;
+            // Load client bundle with retry (room-aware: external experiences get their own bundle)
+            const bundleUrl = roomId === "local"
+              ? `${SERVER}/bundle?_t=${Date.now()}`
+              : `${SERVER}/rooms/${roomId}/bundle?_t=${Date.now()}`;
+            let bundleLoaded = false;
+            for (let attempt = 0; attempt < 3 && !bundleLoaded; attempt++) {
+              try {
+                if (attempt > 0) await new Promise(r => setTimeout(r, 500 * attempt));
+                const bundleRes = await fetch(bundleUrl + "&r=" + attempt);
+                if (!bundleRes.ok) throw new Error(`Bundle fetch failed: ${bundleRes.status} ${bundleRes.statusText}`);
+                const bundleCode = await bundleRes.text();
+                // Protocol experience: empty bundle → load HTML canvas in iframe
+                if (!bundleCode.trim()) {
+                  const canvasUrl = `${SERVER}/rooms/${roomId}/canvas?actorId=${encodeURIComponent(actorId)}&roomId=${encodeURIComponent(roomId)}`;
+                  const root = document.getElementById("root");
+                  root.innerHTML = "";
+                  const iframe = document.createElement("iframe");
+                  iframe.src = canvasUrl;
+                  iframe.style.cssText = "width:100%;height:100%;border:none;";
+                  root.appendChild(iframe);
+                  Canvas = null;
+                  updateTopbarTitle(roomId);
+                  document.getElementById("loading").style.display = "none";
+                  showRoomView();
+                  bundleLoaded = true;
+                  break;
+                }
+                const blob = new Blob([bundleCode], { type: "text/javascript" });
+                const url = URL.createObjectURL(blob);
+                const mod = await import(url);
+                URL.revokeObjectURL(url);
+                const experience = mod.default ?? mod;
+                if (!experience?.Canvas) throw new Error("Experience has no Canvas component");
+                Canvas = experience.Canvas;
+                EntryRitual = experience.entryRitual || null;
+                ritualComplete = false;
+                if (!reactRoot) {
+                  reactRoot = ReactDOM.createRoot(document.getElementById("root"));
+                }
+                // Extract experience title for topbar
+                const expTitle = experience.manifest?.title || experience.name || roomId;
+                document.getElementById("loading").style.display = "none";
+                showRoomView();
+                render();
+                updateParticipantList(participants);
+                bundleLoaded = true;
+              } catch (err) {
+                console.warn(`[viewer] Bundle load attempt ${attempt + 1} failed:`, err.message);
+                if (attempt >= 2) showError(`Failed to load experience: ${err.message}`);
+              }
+            }
+          }
+          if (msg.type === "shared_state_update") {
+            const serverVersion = msg.stateVersion;
+            if (msg.state) {
+              // Full state — replace wholesale (reset, recovery, or legacy server)
+              sharedState = msg.state;
+            } else if (msg.delta) {
+              // Delta mode — merge only changed keys
+              // Gap detection: if we missed updates, request full state
+              if (serverVersion && _stateVersion > 0 && serverVersion > _stateVersion + 1) {
+                // Missed update(s) — apply delta but also request full state recovery
+                console.warn(`[viewer] State version gap: ${_stateVersion} → ${serverVersion}, recovering...`);
+                fetch(`${SERVER}${roomId === "local" ? "" : `/rooms/${roomId}`}/state`)
+                  .then(r => r.ok ? r.json() : null)
+                  .then(data => {
+                    if (data?.sharedState) {
+                      sharedState = data.sharedState;
+                      optimisticOverlays.clear();
+                      render();
+                    }
+                  })
+                  .catch(() => {});
+              }
+              // Apply delta: merge changed keys, remove deleted keys
+              sharedState = { ...sharedState, ...msg.delta };
+              if (msg.deletedKeys) {
+                for (const key of msg.deletedKeys) {
+                  delete sharedState[key];
+                }
+              }
+            }
+            if (serverVersion) _stateVersion = serverVersion;
+            participants = msg.participants || participants;
+            // Server is authoritative — clear all optimistic overlays.
+            optimisticOverlays.clear();
+            render();
+            updateParticipantList(participants);
+            if (msg.event) {
+              addActivityEvent(msg.event);
+              // Log agent tool calls (skip tick engine noise)
+              const ev = msg.event;
+              if (ev.tool && ev.actorId && !ev.actorId.startsWith("_tick")) {
+                const isAI = _participantDetails.find(d => d.actorId === ev.actorId)?.type === "ai";
+                const tag = isAI ? "🤖" : "👤";
+                const inputStr = ev.input ? JSON.stringify(ev.input) : "{}";
+                const outputStr = ev.error ? `❌ ${ev.error}` : (ev.output ? JSON.stringify(ev.output) : "ok");
+                console.log(`%c[ACTION] ${tag} ${ev.actorId} → ${ev.tool}(${inputStr}) → ${outputStr}`, "color: #60a5fa; font-size: 12px");
+              }
+            }
+          }
+          if (msg.type === "ephemeral") {
+            // Another participant's ephemeral data — merge into ephemeralState
+            const senderId = msg.actorId;
+            if (senderId && senderId !== actorId) {
+              ephemeralState = {
+                ...ephemeralState,
+                [senderId]: { ...(ephemeralState[senderId] || {}), ...msg.data },
+              };
+              render();
+            }
+          }
+          if (msg.type === "presence_update") {
+            const prevSet = new Set(participants);
+            participants = msg.participants || participants;
+            if (msg.participantDetails) _participantDetails = msg.participantDetails;
+            const newSet = new Set(participants);
+            // Log joins
+            for (const pid of newSet) {
+              if (!prevSet.has(pid)) {
+                const detail = _participantDetails.find(d => d.actorId === pid);
+                const typeTag = detail?.type === "ai" ? "🤖" : detail?.type === "human" ? "👤" : "❓";
+                const roleTag = detail?.role ? ` [${detail.role}]` : "";
+                const ownerTag = detail?.owner ? ` (owner: ${detail.owner})` : "";
+                console.log(`%c[AGENT JOIN] ${typeTag} ${pid}${roleTag}${ownerTag}`, "color: #4ade80; font-weight: bold; font-size: 13px");
+              }
+            }
+            // Log leaves
+            for (const pid of prevSet) {
+              if (!newSet.has(pid)) {
+                const detail = _participantDetails.find(d => d.actorId === pid);
+                const typeTag = detail?.type === "ai" ? "🤖" : detail?.type === "human" ? "👤" : "❓";
+                const roleTag = detail?.role ? ` [${detail.role}]` : "";
+                console.log(`%c[AGENT LEAVE] ${typeTag} ${pid}${roleTag}`, "color: #f87171; font-weight: bold; font-size: 13px");
+              }
+            }
+            // Prune ephemeral state for departed participants
+            const activeSet = new Set(participants);
+            for (const key of Object.keys(ephemeralState)) {
+              if (!activeSet.has(key)) delete ephemeralState[key];
+            }
+            render();
+            updateParticipantList(participants);
+          }
+          if (msg.type === "kicked") {
+            showToast("You were kicked from the room", "error", 5000);
+            setTimeout(() => navigateToLibrary(), 2000);
+          }
+          if (msg.type === "kick_error") {
+            showToast("Kick failed: " + msg.error, "error", 4000);
+          }
+          if (msg.type === "kick_success") {
+            showToast("Kicked " + msg.actorId, "info", 2000);
+          }
+          if (msg.type === "experience_updated") {
+            // Hot reload: re-fetch bundle and re-render
+            try {
+              const bundleUrl = roomId === "local"
+                ? `${SERVER}/bundle?_t=${Date.now()}`
+                : `${SERVER}/rooms/${roomId}/bundle?_t=${Date.now()}`;
+              const bundleRes = await fetch(bundleUrl);
+              if (!bundleRes.ok) throw new Error(`Bundle fetch failed: ${bundleRes.status} ${bundleRes.statusText}`);
+              const bundleCode = await bundleRes.text();
+              const blob = new Blob([bundleCode], { type: "text/javascript" });
+              const url = URL.createObjectURL(blob);
+              const mod = await import(url);
+              URL.revokeObjectURL(url);
+              const experience = mod.default ?? mod;
+              if (experience?.Canvas) {
+                Canvas = experience.Canvas;
+                EntryRitual = experience.entryRitual || null;
+                ritualComplete = false;
+                hotReloadKey++;
+                // Update title in case it changed
+                const expTitle = experience.manifest?.title || experience.name || roomId;
+                updateTopbarTitle(expTitle);
+                render();
+                console.log("[viewer] Hot reloaded");
+              }
+            } catch (err) {
+              console.error("[viewer] Hot reload failed:", err);
+              showToast(`Hot reload failed: ${err.message}`, "build", 10000);
+            }
+          }
+          if (msg.type === "build_error") {
+            showToast(`Build error:\n${msg.error}`, "build", 15000);
+          }
+          if (msg.type === "screenshot_request") {
+            const requestId = msg.id;
+            // Small delay to let any pending React renders settle
+            setTimeout(async () => {
+              try {
+                const root = document.getElementById("root");
+                if (!root) throw new Error("No #root element");
+                let dataUrl;
+                // Fast path: single <canvas> filling #root → native toDataURL
+                const canvases = root.querySelectorAll("canvas");
+                if (canvases.length === 1) {
+                  const cvs = canvases[0];
+                  const rootRect = root.getBoundingClientRect();
+                  const cvsRect = cvs.getBoundingClientRect();
+                  const fillsRoot =
+                    Math.abs(cvsRect.width - rootRect.width) < 20 &&
+                    Math.abs(cvsRect.height - rootRect.height) < 20;
+                  if (fillsRoot) {
+                    dataUrl = cvs.toDataURL("image/png");
+                  }
+                }
+                // Snapshot all canvases before html2canvas (it can't read WebGL content)
+                const canvasSnapshots = new Map();
+                if (!dataUrl) {
+                  canvases.forEach((cvs) => {
+                    try {
+                      const snap = cvs.toDataURL("image/png");
+                      if (snap && snap.length > 100) {
+                        canvasSnapshots.set(cvs, snap);
+                      }
+                    } catch {}
+                  });
+                }
+                // Fallback: html2canvas for DOM/SVG/mixed content
+                if (!dataUrl && typeof html2canvas === "function") {
+                  const captured = await html2canvas(root, {
+                    backgroundColor: "#0a0a0a",
+                    useCORS: true,
+                    logging: false,
+                    scale: 1,
+                    onclone: (doc, clonedRoot) => {
+                      // Replace cloned WebGL canvases with snapshot images
+                      const clonedCanvases = clonedRoot.querySelectorAll("canvas");
+                      clonedCanvases.forEach((clonedCvs, idx) => {
+                        const originalCvs = canvases[idx];
+                        const snapshot = canvasSnapshots.get(originalCvs);
+                        if (snapshot) {
+                          const img = doc.createElement("img");
+                          img.src = snapshot;
+                          img.style.width = clonedCvs.style.width || (clonedCvs.width + "px");
+                          img.style.height = clonedCvs.style.height || (clonedCvs.height + "px");
+                          img.style.display = clonedCvs.style.display;
+                          clonedCvs.parentNode?.replaceChild(img, clonedCvs);
+                        }
+                      });
+                    },
+                  });
+                  dataUrl = captured.toDataURL("image/png");
+                }
+                if (!dataUrl) throw new Error("No capture method available");
+                try { ws.send(JSON.stringify({
+                  type: "screenshot_response",
+                  id: requestId,
+                  dataUrl,
+                })); } catch (_) { /* WS may have closed */ }
+              } catch (err) {
+                try { ws.send(JSON.stringify({
+                  type: "screenshot_response",
+                  id: requestId,
+                  error: err.message,
+                })); } catch (_) { /* WS may have closed */ }
+              }
+            }, 100);
+          }
+        };
+        ws.onerror = (err) => {
+          console.error("[viewer] WebSocket error:", err);
+        };
+        // Reconnect with exponential backoff (no full page reload)
+        ws.onclose = () => {
+          // Don't reconnect if user navigated away from this room
+          if (currentWs !== ws) return;
+          const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 15000);
+          reconnectAttempts++;
+          console.log(`[viewer] WebSocket closed, reconnecting in ${delay}ms (attempt ${reconnectAttempts})...`);
+          showToast(`Disconnected. Reconnecting in ${Math.round(delay/1000)}s...`, "info", delay + 1000);
+          reconnectTimer = setTimeout(() => { reconnectTimer = null; if (currentWs === ws) start(); }, delay);
+        };
+      } catch (err) {
+        showError(err.message);
+      }
+    }
+    let reconnectAttempts = 0;
+    let reconnectTimer = null; // Stored so we can clear on navigation
+    let reactRoot = null; // Persists across reconnects to avoid duplicate roots
+    // Initial routing: if path has a room ID (e.g. /room-abc), connect to it.
+    // Otherwise show the library.
+    if (ROOM_ID) {
+      start();
+    } else {
+      showLibraryView();
+    }
+  </script>
+</body>
+</html>