clay-server 2.17.0-beta.1 → 2.17.0-beta.10

package/README.md

@@ -8,7 +8,7 @@
 
 [![npm version](https://img.shields.io/npm/v/clay-server)](https://www.npmjs.com/package/clay-server) [![npm downloads](https://img.shields.io/npm/dw/clay-server)](https://www.npmjs.com/package/clay-server) [![GitHub stars](https://img.shields.io/github/stars/chadbyte/clay)](https://github.com/chadbyte/clay) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/chadbyte/clay/blob/main/LICENSE)
 
-Clay gives Claude Code a browser UI that runs on any device. Use it from your phone, run it on macOS, Windows, or Linux. Invite teammates, manage multiple projects from one sidebar, and get push notifications when Claude needs you. Built on the official Claude Agent SDK, not a terminal parser. Your machine is the server. No cloud relay in between, no extra network surface.
+Clay gives Claude Code a browser UI that runs on any device. Use it from your phone, run it on macOS, Windows, or Linux. Invite teammates, manage multiple projects from one sidebar, and get push notifications when Claude needs you. HTTPS and push notifications work out of the box with zero config. Built on the official Claude Agent SDK, not a terminal parser. Your machine is the server. No cloud relay in between, no extra network surface.
 
 ---
 
@@ -98,7 +98,7 @@ Take it further with Ralph Loop, an autonomous coding loop built into Clay. The
 
 Your data flows directly from your machine to the Anthropic API, exactly as it does when you use the CLI. Clay adds a browser layer on top, not a middleman.
 
-PIN authentication, per-project/session permissions, and HTTPS are supported by default. For local network use, this is sufficient. For remote access, we recommend a VPN like Tailscale.
+HTTPS is enabled by default with a builtin certificate. PIN authentication and per-project/session permissions are built in. For local network use, this is sufficient. For remote access, we recommend a VPN like Tailscale.
 
 ---
 
@@ -166,20 +166,32 @@ Yes. Create as many as you need. A code reviewer, a writing partner, a project m
 
 ---
 
-## HTTPS for Push
+## HTTPS
 
-Everything works out of the box. Only push notifications require HTTPS.
+HTTPS is enabled by default using a builtin wildcard certificate for `*.d.clay.studio`. No setup required. Available from `v2.17.0-beta.2`. Your browser connects to a URL like:
 
-Set it up once with [mkcert](https://github.com/FiloSottile/mkcert):
+```
+https://192-168-1-50.d.clay.studio:2633
+```
+
+The domain resolves to your local IP. All traffic stays on your network. See [clay-dns](clay-dns/) for details on how this works.
+
+Push notifications require HTTPS, so they work out of the box with this setup. Install Clay as a PWA on your device to receive them.
+
+<details>
+<summary><strong>Alternative: local certificate with mkcert</strong></summary>
+
+If you prefer to use a locally generated certificate (e.g. air-gapped environments where DNS is unavailable):
 
 ```bash
 brew install mkcert
 mkcert -install
+npx clay-server --local-cert
 ```
 
-Certificates are auto-generated. The setup wizard handles the rest.
+This generates a self-signed certificate trusted by your machine. The setup wizard will guide you through installing the CA on other devices.
 
-If push registration fails: check that your browser trusts the HTTPS certificate and that your phone can reach the server address.
+</details>
 
 ---
 
@@ -192,6 +204,7 @@ npx clay-server --yes        # Skip interactive prompts (use defaults)
 npx clay-server -y --pin 123456
                               # Non-interactive + PIN (for scripts/CI)
 npx clay-server --no-https   # Disable HTTPS
+npx clay-server --local-cert # Use local certificate (mkcert) instead of builtin
 npx clay-server --no-update  # Skip update check
 npx clay-server --debug      # Enable debug panel
 npx clay-server --add .      # Add current directory to running daemon

package/bin/cli.js

@@ -53,6 +53,7 @@ var args = process.argv.slice(2);
 var port = _isDev ? 2635 : 2633;
 var useHttps = true;
 var forceMkcert = false;
+var forceBuiltin = false;
 var skipUpdate = false;
 var debugMode = false;
 var autoYes = false;
@@ -84,6 +85,8 @@ for (var i = 0; i < args.length; i++) {
     useHttps = false;
   } else if (args[i] === "--local-cert") {
     forceMkcert = true;
+  } else if (args[i] === "--builtin-cert") {
+    forceBuiltin = true;
   } else if (args[i] === "--no-update" || args[i] === "--skip-update") {
     skipUpdate = true;
   } else if (args[i] === "--dev") {
@@ -128,7 +131,8 @@ for (var i = 0; i < args.length; i++) {
     console.log("  -p, --port <port>  Port to listen on (default: 2633)");
     console.log("  --host <address>   Address to bind to (default: 0.0.0.0)");
     console.log("  --no-https         Disable HTTPS (enabled by default)");
-    console.log("  --local-cert       Use local certificate (mkcert) instead of builtin");
+    console.log("  --local-cert       Use local certificate (mkcert), suppress migration notice");
+    console.log("  --builtin-cert    Use builtin certificate even if mkcert is installed");
     console.log("  --no-update        Skip auto-update check on startup");
     console.log("  --debug            Enable debug panel in the web UI");
     console.log("  -y, --yes          Skip interactive prompts (accept defaults)");
@@ -599,10 +603,11 @@ function toClayStudioUrl(ip, port, protocol) {
 }
 
 function ensureCerts(ip) {
-  // Check builtin cert first (unless --local-cert flag is set)
-  if (!forceMkcert) {
+  // --builtin-cert: skip mkcert entirely, go straight to builtin
+  if (forceBuiltin) {
     var builtin = getBuiltinCert();
     if (builtin) return builtin;
+    return null;
   }
 
   var homeDir = os.homedir();
@@ -619,24 +624,30 @@ function ensureCerts(ip) {
     fs.copyFileSync(legacyCert, certPath);
   }
 
+  var mkcertInstalled = hasMkcert();
+
   var caRoot = null;
-  try {
-    caRoot = path.join(
-      execSync("mkcert -CAROOT", { encoding: "utf8" }).trim(),
-      "rootCA.pem"
-    );
-    if (!fs.existsSync(caRoot)) caRoot = null;
-  } catch (e) {}
+  if (mkcertInstalled) {
+    try {
+      caRoot = path.join(
+        execSync("mkcert -CAROOT", { encoding: "utf8" }).trim(),
+        "rootCA.pem"
+      );
+      if (!fs.existsSync(caRoot)) caRoot = null;
+    } catch (e) {}
+  }
 
   // Collect all IPv4 addresses (Tailscale + LAN)
   var allIPs = getAllIPs();
 
   if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
     var needRegen = false;
+    var isMkcertCert = false;
     try {
       var certText = execFileSync("openssl", ["x509", "-in", certPath, "-text", "-noout"], { encoding: "utf8" });
       // If cert is from an external CA (e.g. Tailscale/Let's Encrypt), never regenerate
       if (certText.indexOf("mkcert") === -1) return { key: keyPath, cert: certPath, caRoot: caRoot };
+      isMkcertCert = true;
       for (var i = 0; i < allIPs.length; i++) {
         if (certText.indexOf(allIPs[i]) === -1) {
           needRegen = true;
@@ -644,24 +655,41 @@ function ensureCerts(ip) {
         }
       }
     } catch (e) { needRegen = true; }
-    if (!needRegen) return { key: keyPath, cert: certPath, caRoot: caRoot };
+    // mkcert cert but mkcert uninstalled: CA is gone, cert is untrusted. Skip it.
+    if (isMkcertCert && !mkcertInstalled) needRegen = true;
+    if (!needRegen) {
+      return { key: keyPath, cert: certPath, caRoot: caRoot, mkcertDetected: mkcertInstalled && !forceMkcert };
+    }
   }
 
-  fs.mkdirSync(certDir, { recursive: true });
+  // mkcert installed: generate local cert (legacy behavior)
+  if (mkcertInstalled) {
+    fs.mkdirSync(certDir, { recursive: true });
+
+    var domains = ["localhost", "127.0.0.1", "::1"];
+    for (var i = 0; i < allIPs.length; i++) {
+      if (domains.indexOf(allIPs[i]) === -1) domains.push(allIPs[i]);
+    }
+
+    try {
+      var mkcertArgs = ["-key-file", keyPath, "-cert-file", certPath].concat(domains);
+      execFileSync("mkcert", mkcertArgs, { stdio: "pipe" });
+    } catch (err) {
+      // mkcert generation failed, fall through to builtin
+    }
 
-  var domains = ["localhost", "127.0.0.1", "::1"];
-  for (var i = 0; i < allIPs.length; i++) {
-    if (domains.indexOf(allIPs[i]) === -1) domains.push(allIPs[i]);
+    if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
+      return { key: keyPath, cert: certPath, caRoot: caRoot, mkcertDetected: !forceMkcert };
+    }
   }
 
-  try {
-    var mkcertArgs = ["-key-file", keyPath, "-cert-file", certPath].concat(domains);
-    execFileSync("mkcert", mkcertArgs, { stdio: "pipe" });
-  } catch (err) {
-    return null;
+  // Fallback: builtin cert (unless --local-cert forces mkcert-only)
+  if (!forceMkcert) {
+    var builtin = getBuiltinCert();
+    if (builtin) return builtin;
   }
 
-  return { key: keyPath, cert: certPath, caRoot: caRoot };
+  return null;
 }
 
 // --- Logo ---
@@ -1436,12 +1464,14 @@ async function forkDaemon(mode, keepAwake, extraProjects, addCwd, wantOsUsers) {
   var ip = getLocalIP();
   var hasTls = false;
   var hasBuiltinCert = false;
+  var mkcertDetected = false;
 
   if (useHttps) {
     var certPaths = ensureCerts(ip);
     if (certPaths) {
       hasTls = true;
       if (certPaths.builtin) hasBuiltinCert = true;
+      if (certPaths.mkcertDetected) mkcertDetected = true;
     } else {
       log(sym.warn + "  " + a.yellow + "HTTPS unavailable" + a.reset + a.dim + " · mkcert not installed" + a.reset);
     }
@@ -1516,6 +1546,7 @@ async function forkDaemon(mode, keepAwake, extraProjects, addCwd, wantOsUsers) {
     pinHash: mode === "multi" && cliPin ? generateAuthToken(cliPin) : null,
     tls: hasTls,
     builtinCert: hasBuiltinCert,
+    mkcertDetected: mkcertDetected,
     debug: debugMode,
     keepAwake: keepAwake,
     dangerouslySkipPermissions: dangerouslySkipPermissions,
@@ -1595,6 +1626,8 @@ async function forkDaemon(mode, keepAwake, extraProjects, addCwd, wantOsUsers) {
       : protocol + "://" + ip + ":" + config.port;
     console.log("  " + sym.done + "  Daemon started (PID " + config.pid + ")");
     console.log("  " + sym.done + "  " + url);
+    if (config.builtinCert) console.log("  " + sym.done + "  d.clay.studio provides HTTPS certificates only. Your traffic never leaves your network.");
+    if (config.mkcertDetected) console.log("  " + sym.warn + "  Clay now ships with a builtin HTTPS certificate. To use it, pass --builtin-cert or uninstall mkcert.");
     console.log("  " + sym.done + "  Headless mode — exiting CLI");
     process.exit(0);
     return;
@@ -1611,12 +1644,14 @@ async function devMode(mode, keepAwake, existingPinHash) {
   var ip = getLocalIP();
   var hasTls = false;
   var hasBuiltinCert = false;
+  var mkcertDetected = false;
 
   if (useHttps) {
     var certPaths = ensureCerts(ip);
     if (certPaths) {
       hasTls = true;
       if (certPaths.builtin) hasBuiltinCert = true;
+      if (certPaths.mkcertDetected) mkcertDetected = true;
     }
   }
 
@@ -1680,6 +1715,7 @@ async function devMode(mode, keepAwake, existingPinHash) {
     pinHash: existingPinHash || null,
     tls: hasTls,
     builtinCert: hasBuiltinCert,
+    mkcertDetected: mkcertDetected,
     debug: true,
     keepAwake: keepAwake || false,
     dangerouslySkipPermissions: dangerouslySkipPermissions,
@@ -1829,6 +1865,7 @@ async function restartDaemonWithTLS(config, callback) {
     return;
   }
   var hasBuiltinCert = !!(certPaths && certPaths.builtin);
+  var mkcertDetected = !!(certPaths && certPaths.mkcertDetected);
 
   // Shut down old daemon
   stopDaemonWatcher();
@@ -1853,6 +1890,7 @@ async function restartDaemonWithTLS(config, callback) {
     pinHash: config.pinHash || null,
     tls: true,
     builtinCert: hasBuiltinCert,
+    mkcertDetected: mkcertDetected,
     debug: config.debug || false,
     keepAwake: config.keepAwake || false,
     dangerouslySkipPermissions: config.dangerouslySkipPermissions || false,
@@ -1951,6 +1989,7 @@ function showMainMenu(config, ip) {
     function afterQr() {
       // Status line
       log("  " + a.dim + "clay" + a.reset + " " + a.dim + "v" + currentVersion + a.reset + a.dim + " — " + url + a.reset);
+      if (config.builtinCert) log("  " + a.dim + "d.clay.studio provides HTTPS certificates only. Your traffic never leaves your network." + a.reset);
       var parts = [];
       parts.push(a.bold + projs.length + a.reset + a.dim + (projs.length === 1 ? " project" : " projects"));
       parts.push(a.reset + a.bold + totalSessions + a.reset + a.dim + (totalSessions === 1 ? " session" : " sessions"));
@@ -1961,6 +2000,13 @@ function showMainMenu(config, ip) {
       log("  Press " + a.bold + "o" + a.reset + " to open in browser");
       log("");
 
+      if (config.mkcertDetected) {
+        log("  " + sym.warn + "  " + a.yellow + "Clay now ships with a builtin HTTPS certificate." + a.reset);
+        log("     " + a.dim + "No more CA setup on each device." + a.reset);
+        log("     " + a.dim + "To use it, pass --builtin-cert or uninstall mkcert." + a.reset);
+        log("");
+      }
+
       showMenuItems();
     }
 
@@ -2030,9 +2076,8 @@ function showMainMenu(config, ip) {
         }
       }, {
         hint: [
-          "claude-relay has been renamed to clay-server  ·  npx clay-server",
           "Run npx clay-server in other directories to add more projects.",
-          "★ github.com/chadbyte/claude-relay — Press s to star the repo",
+          "★ github.com/chadbyte/clay — Press s to star the repo",
         ],
         keys: [
           { key: "o", onKey: function () {
@@ -2040,7 +2085,7 @@ function showMainMenu(config, ip) {
             showMainMenu(config, ip);
           }},
           { key: "s", onKey: function () {
-            openUrl("https://github.com/chadbyte/claude-relay");
+            openUrl("https://github.com/chadbyte/clay");
             showMainMenu(config, ip);
           }},
         ],
@@ -2206,7 +2251,7 @@ function showSetupGuide(config, ip, goBack) {
     // mkcert: use HTTP onboarding server for CA install flow
     var setupUrl;
     if (config.builtinCert) {
-      setupUrl = toClayStudioUrl(setupIP, config.port, "https") + "?playbook=push-notifications";
+      setupUrl = toClayStudioUrl(setupIP, config.port, "https") + "/pwa";
     } else if (config.tls) {
       setupUrl = "http://" + setupIP + ":" + (config.port + 1) + "/setup" + setupQuery;
     } else {
@@ -2725,6 +2770,7 @@ var currentVersion = require("../package.json").version;
         : protocol + "://" + ip + ":" + config.port;
       console.log("  " + sym.done + "  Daemon already running (PID " + config.pid + ")");
       console.log("  " + sym.done + "  " + url);
+      if (config.builtinCert) console.log("  " + sym.done + "  d.clay.studio provides HTTPS certificates only. Your traffic never leaves your network.");
       process.exit(0);
       return;
     }

package/lib/daemon.js

@@ -94,7 +94,7 @@ var caRoot = null;
 try {
   var { execSync } = require("child_process");
   caRoot = path.join(
-    execSync("mkcert -CAROOT", { encoding: "utf8" }).trim(),
+    execSync("mkcert -CAROOT", { encoding: "utf8", stdio: "pipe" }).trim(),
     "rootCA.pem"
   );
   if (!fs.existsSync(caRoot)) caRoot = null;

package/lib/pages.js

@@ -48,56 +48,58 @@ function setupPageHtml(httpsUrl, httpUrl, hasCert, lanMode) {
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <title>Setup - Clay</title>
 <style>
+:root{--s-bg:#282a36;--s-text:#f8f8f2;--s-accent:#ffb86c;--s-muted:#6272a4;--s-border:#44475a;--s-dimmer:#6272a4;--s-success:#50fa7b;--s-accent-15:rgba(255,184,108,0.15);--s-success-10:rgba(80,250,123,0.1);--s-success-15:rgba(80,250,123,0.15);--s-accent-06:rgba(255,184,108,0.06);--s-muted-06:rgba(98,114,164,0.06);--s-muted-15:rgba(98,114,164,0.15)}
+@media(prefers-color-scheme:light){:root{--s-bg:#FAFAFA;--s-text:#5C6166;--s-accent:#FA8D3E;--s-muted:#A0A6AC;--s-border:#D2D4D8;--s-dimmer:#8A9199;--s-success:#6CBF49;--s-accent-15:rgba(250,141,62,0.15);--s-success-10:rgba(108,191,73,0.1);--s-success-15:rgba(108,191,73,0.15);--s-accent-06:rgba(250,141,62,0.06);--s-muted-06:rgba(160,166,172,0.06);--s-muted-15:rgba(160,166,172,0.15)}}
 *{margin:0;padding:0;box-sizing:border-box}
-body{background:#2F2E2B;color:#E8E5DE;font-family:system-ui,-apple-system,sans-serif;min-height:100dvh;display:flex;justify-content:center;padding:env(safe-area-inset-top,0) 20px 40px}
+body{background:var(--s-bg);color:var(--s-text);font-family:system-ui,-apple-system,sans-serif;min-height:100dvh;display:flex;justify-content:center;padding:env(safe-area-inset-top,0) 20px 40px}
 .c{max-width:480px;width:100%;padding-top:40px}
-h1{color:#DA7756;font-size:22px;margin:0 0 4px;text-align:center}
-.subtitle{text-align:center;color:#908B81;font-size:13px;margin-bottom:28px}
+h1{color:var(--s-accent);font-size:22px;margin:0 0 4px;text-align:center}
+.subtitle{text-align:center;color:var(--s-muted);font-size:13px;margin-bottom:28px}
 
 /* Steps indicator */
 .steps-bar{display:flex;gap:6px;margin-bottom:32px}
-.steps-bar .pip{flex:1;height:3px;border-radius:2px;background:#3E3C37;transition:background 0.3s}
-.steps-bar .pip.done{background:#57AB5A}
-.steps-bar .pip.active{background:#DA7756}
+.steps-bar .pip{flex:1;height:3px;border-radius:2px;background:var(--s-border);transition:background 0.3s}
+.steps-bar .pip.done{background:var(--s-success)}
+.steps-bar .pip.active{background:var(--s-accent)}
 
 /* Step card */
 .step-card{display:none;animation:fadeIn 0.25s ease}
 .step-card.active{display:block}
 @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 
-.step-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#DA7756;font-weight:600;margin-bottom:8px}
+.step-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--s-accent);font-weight:600;margin-bottom:8px}
 .step-title{font-size:18px;font-weight:600;margin-bottom:6px}
-.step-desc{font-size:14px;line-height:1.6;color:#908B81;margin-bottom:20px}
+.step-desc{font-size:14px;line-height:1.6;color:var(--s-muted);margin-bottom:20px}
 
 .instruction{display:flex;gap:12px;margin-bottom:16px}
-.inst-num{width:24px;height:24px;border-radius:50%;background:rgba(218,119,86,0.15);color:#DA7756;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;margin-top:1px}
+.inst-num{width:24px;height:24px;border-radius:50%;background:var(--s-accent-15);color:var(--s-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;margin-top:1px}
 .inst-text{font-size:14px;line-height:1.6}
-.inst-text .note{font-size:12px;color:#6D6860;margin-top:4px}
+.inst-text .note{font-size:12px;color:var(--s-dimmer);margin-top:4px}
 
-.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#DA7756;color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;margin:4px 0;border:none;cursor:pointer;font-family:inherit;transition:opacity 0.15s}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--s-accent);color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;margin:4px 0;border:none;cursor:pointer;font-family:inherit;transition:opacity 0.15s}
 .btn:hover{opacity:0.9}
-.btn.outline{background:transparent;border:1.5px solid #3E3C37;color:#E8E5DE}
-.btn.outline:hover{border-color:#6D6860}
-.btn.success{background:#57AB5A}
+.btn.outline{background:transparent;border:1.5px solid var(--s-border);color:var(--s-text)}
+.btn.outline:hover{border-color:var(--s-dimmer)}
+.btn.success{background:var(--s-success)}
 .btn:disabled{opacity:0.4;cursor:default}
 
 .btn-row{display:flex;gap:8px;margin-top:20px}
 .btn-row .btn{flex:1}
 
 .check-status{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;font-size:13px;margin:16px 0}
-.check-status.ok{background:rgba(87,171,90,0.1);color:#57AB5A;border:1px solid rgba(87,171,90,0.15)}
-.check-status.warn{background:rgba(218,119,86,0.06);border:1px solid rgba(218,119,86,0.15);color:#DA7756}
-.check-status.pending{background:rgba(144,139,129,0.06);border:1px solid rgba(144,139,129,0.15);color:#908B81}
+.check-status.ok{background:var(--s-success-10);color:var(--s-success);border:1px solid var(--s-success-15)}
+.check-status.warn{background:var(--s-accent-06);border:1px solid var(--s-accent-15);color:var(--s-accent)}
+.check-status.pending{background:var(--s-muted-06);border:1px solid var(--s-muted-15);color:var(--s-muted)}
 
 .platform-ios,.platform-android,.platform-desktop{display:none}
 
 .done-card{text-align:center;padding:40px 0}
 .done-icon{font-size:48px;margin-bottom:16px}
 .done-title{font-size:20px;font-weight:600;margin-bottom:8px}
-.done-desc{font-size:14px;color:#908B81;margin-bottom:24px}
+.done-desc{font-size:14px;color:var(--s-muted);margin-bottom:24px}
 
-.skip-link{display:block;text-align:center;color:#6D6860;font-size:13px;text-decoration:none;margin-top:12px;cursor:pointer;border:none;background:none;font-family:inherit}
-.skip-link:hover{color:#908B81}
+.skip-link{display:block;text-align:center;color:var(--s-dimmer);font-size:13px;text-decoration:none;margin-top:12px;cursor:pointer;border:none;background:none;font-family:inherit}
+.skip-link:hover{color:var(--s-muted)}
 </style></head><body>
 <div class="c">
 <h1>Clay</h1>

package/lib/project.js

@@ -246,6 +246,7 @@ function createProjectContext(opts) {
           username: u.username,
           avatarStyle: p.avatarStyle || "thumbs",
           avatarSeed: p.avatarSeed || u.username,
+          avatarCustom: p.avatarCustom || "",
         });
       }
       msg.users = userList;
@@ -1646,11 +1647,11 @@ function createProjectContext(opts) {
           var switchTarget = sm.sessions.get(msg.id);
           if (!usersModule.canAccessSession(ws._clayUser.id, switchTarget, { visibility: "public" })) return;
           ws._clayActiveSession = msg.id;
-          sm.switchSession(msg.id, ws);
+          sm.switchSession(msg.id, ws, hydrateImageRefs);
           broadcastPresence();
         } else {
           ws._clayActiveSession = msg.id;
-          sm.switchSession(msg.id, ws);
+          sm.switchSession(msg.id, ws, hydrateImageRefs);
         }
       }
       return;
@@ -2005,7 +2006,7 @@ function createProjectContext(opts) {
           onProcessingChanged();
 
           sm.saveSessionFile(session);
-          sm.switchSession(session.localId, ws);
+          sm.switchSession(session.localId, ws, hydrateImageRefs);
           sm.sendAndRecord(session, { type: "rewind_complete", mode: mode });
           sm.broadcastSessionList();
         } catch (err) {
@@ -2076,6 +2077,7 @@ function createProjectContext(opts) {
         displayName: p.name || u.displayName || u.username,
         avatarStyle: p.avatarStyle || "thumbs",
         avatarSeed: p.avatarSeed || u.username,
+        avatarCustom: p.avatarCustom || "",
       };
       if (msg.type === "cursor_move") {
         cursorMsg.turn = msg.turn;
@@ -3162,7 +3164,7 @@ function createProjectContext(opts) {
           judgeCraftSession.ralphCraftingMode = true;
           judgeCraftSession.loop = { active: true, iteration: 0, role: "crafting", loopId: newLoopId, name: craftName, source: recordSource, startedAt: loopState.startedAt };
           sm.saveSessionFile(judgeCraftSession);
-          sm.switchSession(judgeCraftSession.localId);
+          sm.switchSession(judgeCraftSession.localId, null, hydrateImageRefs);
           loopState.craftingSessionId = judgeCraftSession.localId;
 
           loopRegistry.updateRecord(newLoopId, { craftingSessionId: judgeCraftSession.localId });
@@ -3206,7 +3208,7 @@ function createProjectContext(opts) {
       craftingSession.ralphCraftingMode = true;
       craftingSession.loop = { active: true, iteration: 0, role: "crafting", loopId: newLoopId, name: craftName, source: recordSource, startedAt: loopState.startedAt };
       sm.saveSessionFile(craftingSession);
-      sm.switchSession(craftingSession.localId);
+      sm.switchSession(craftingSession.localId, null, hydrateImageRefs);
       loopState.craftingSessionId = craftingSession.localId;
 
       // Store crafting session ID in the registry record
@@ -3504,6 +3506,7 @@ function createProjectContext(opts) {
         username: u.username,
         avatarStyle: p.avatarStyle || "thumbs",
         avatarSeed: p.avatarSeed || u.username,
+        avatarCustom: p.avatarCustom || "",
       });
     }
     send({ type: "session_presence", presence: presence });
@@ -4124,6 +4127,7 @@ function createProjectContext(opts) {
           username: u.username,
           avatarStyle: p.avatarStyle || "thumbs",
           avatarSeed: p.avatarSeed || u.username,
+          avatarCustom: p.avatarCustom || "",
         });
       }
       status.onlineUsers = onlineUsers;