clay-server 2.17.0-beta.4 → 2.17.0-beta.6

package/bin/cli.js

@@ -2251,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 {

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

@@ -1646,11 +1646,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 +2005,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) {
@@ -3162,7 +3162,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 +3206,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

package/lib/public/app.js

@@ -6766,10 +6766,10 @@ import { initLongPress } from './modules/longpress.js';
     modal.querySelector(".pwa-modal-backdrop").addEventListener("click", closeModal);
 
     confirmBtn.addEventListener("click", function () {
-      // Builtin cert (*.d.clay.studio): open push notification guide directly
+      // Builtin cert (*.d.clay.studio): open PWA setup guide
       if (location.hostname.endsWith(".d.clay.studio")) {
         closeModal();
-        openPlaybook("push-notifications");
+        location.href = "/pwa";
         return;
       }
       // mkcert / other: redirect to onboarding setup page

package/lib/public/css/overlays.css

@@ -44,36 +44,37 @@ button.top-bar-pill.pill-success:hover { background: color-mix(in srgb, var(--su
 button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
 
 /* PWA install button — left side of top bar, icon only */
-.top-bar-install-btn {
+.top-bar-left-pills {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   position: absolute;
   left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
+  top: 0;
+  bottom: 0;
+}
+.top-bar-install-btn {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  border-radius: 6px;
+  gap: 4px;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
   color: var(--accent);
+  border: none;
+  border-radius: 10px;
+  padding: 2px 10px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
   cursor: pointer;
-  padding: 3px;
-  transition: color 0.15s, background 0.15s;
+  white-space: nowrap;
+  line-height: 1;
+  transition: background 0.15s;
 }
-.top-bar-install-btn .lucide { width: 14px; height: 14px; }
-.top-bar-install-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.top-bar-install-btn .lucide { width: 12px; height: 12px; }
+.top-bar-install-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
 .top-bar-install-btn.hidden { display: none; }
 .pwa-standalone .top-bar-install-btn { display: none !important; }
 
-@media (max-width: 768px) {
-  .top-bar-install-btn {
-    top: auto;
-    bottom: 0;
-    height: 32px;
-    transform: none;
-  }
-}
-
 /* PWA install modal */
 .pwa-modal {
   position: fixed;

package/lib/public/css/title-bar.css

@@ -15,10 +15,6 @@
 
 /* --- Update banner --- */
 .top-bar-update {
-  position: absolute;
-  left: 10px;
-  top: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
 }

package/lib/public/index.html

@@ -29,15 +29,17 @@
 <div id="layout">
   <!-- === Top Bar (full width, forms reverse-ㄱ with icon strip) === -->
   <div id="top-bar">
-    <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Install app"><i data-lucide="download"></i></button>
-    <button id="cmd-palette-btn" class="cmd-palette-searchbar" title="Command palette"><i data-lucide="search"></i><span class="cmd-palette-searchbar-text">Search sessions, projects, and commands</span><kbd class="cmd-palette-searchbar-kbd"></kbd></button>
-    <div id="update-pill-wrap" class="top-bar-update hidden">
-      <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
+    <div class="top-bar-left-pills">
+      <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Open as app"><i data-lucide="download"></i> Open as app</button>
+      <div id="update-pill-wrap" class="top-bar-update hidden">
+        <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
       <div id="update-popover" class="top-bar-popover">
         <div class="popover-row"><button id="update-now" class="popover-action popover-action-primary"><i data-lucide="download"></i> Update now</button></div>
         <div class="popover-row"><div class="popover-label">Or run manually:</div><div class="popover-cmd"><code id="update-manual-cmd">npx clay-server@latest</code><button class="popover-copy" title="Copy"><i data-lucide="copy"></i></button></div></div>
       </div>
     </div>
+    </div>
+    <button id="cmd-palette-btn" class="cmd-palette-searchbar" title="Command palette"><i data-lucide="search"></i><span class="cmd-palette-searchbar-text">Search sessions, projects, and commands</span><kbd class="cmd-palette-searchbar-kbd"></kbd></button>
     <div class="top-bar-actions">
       <!-- Pill badges -->
       <div id="skip-perms-pill" class="top-bar-pill pill-error hidden"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>

package/lib/public/modules/sidebar.js

@@ -1329,6 +1329,22 @@ function renderSheetSettings(listEl) {
   });
 
   listEl.appendChild(themeBtn);
+
+  // "Open as app" — only show if not already in PWA standalone mode
+  if (!document.documentElement.classList.contains("pwa-standalone")) {
+    var pwaBtn = document.createElement("button");
+    pwaBtn.className = "mobile-more-item";
+    pwaBtn.innerHTML = '<i data-lucide="smartphone"></i><span class="mobile-more-item-label">Open as app</span>';
+    pwaBtn.addEventListener("click", function () {
+      closeMobileSheet();
+      // Trigger the existing PWA install modal
+      var installPill = document.getElementById("pwa-install-pill");
+      if (installPill) {
+        setTimeout(function () { installPill.click(); }, 250);
+      }
+    });
+    listEl.appendChild(pwaBtn);
+  }
 }
 
 export function initSidebar(_ctx) {

package/lib/server.js

@@ -1017,6 +1017,19 @@ function createServer(opts) {
       return;
     }
 
+    // PWA install guide (builtin cert mode, no CA step needed)
+    if (fullUrl === "/pwa" && req.method === "GET") {
+      var host = req.headers.host || "localhost";
+      var hostname = host.split(":")[0];
+      var protocol = tlsOptions ? "https" : "http";
+      var pwaUrl = protocol + "://" + hostname + ":" + portNum;
+      res.writeHead(200, {
+        "Content-Type": "text/html; charset=utf-8",
+      });
+      res.end(setupPageHtml(pwaUrl, pwaUrl, false, true));
+      return;
+    }
+
     // Global push endpoints (used by setup page)
     if (req.method === "GET" && fullUrl === "/api/vapid-public-key" && pushModule) {
       res.writeHead(200, { "Content-Type": "application/json" });

package/lib/sessions.js

@@ -315,7 +315,7 @@ function createSessionManager(opts) {
     return 0;
   }
 
-  function replayHistory(session, fromIndex, targetWs) {
+  function replayHistory(session, fromIndex, targetWs, transform) {
     var _send = (targetWs && sendTo) ? function (obj) { sendTo(targetWs, obj); } : send;
     var total = session.history.length;
     if (typeof fromIndex !== "number") {
@@ -329,7 +329,7 @@ function createSessionManager(opts) {
     _send({ type: "history_meta", total: total, from: fromIndex });
 
     for (var i = fromIndex; i < total; i++) {
-      _send(session.history[i]);
+      _send(transform ? transform(session.history[i]) : session.history[i]);
     }
 
     // Find the last result message in the full history for accurate context data
@@ -351,7 +351,7 @@ function createSessionManager(opts) {
     _send({ type: "history_done", lastUsage: lastUsage, lastModelUsage: lastModelUsage, lastCost: lastCost, lastStreamInputTokens: lastStreamInputTokens });
   }
 
-  function switchSession(localId, targetWs) {
+  function switchSession(localId, targetWs, transform) {
     var session = sessions.get(localId);
     if (!session) return;
 
@@ -374,7 +374,7 @@ function createSessionManager(opts) {
 
     _send({ type: "session_switched", id: localId, cliSessionId: session.cliSessionId || null, loop: session.loop || null });
     broadcastSessionList();
-    replayHistory(session, undefined, targetWs);
+    replayHistory(session, undefined, targetWs, transform);
 
     if (session.isProcessing) {
       _send({ type: "status", status: "processing" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.17.0-beta.4",
+  "version": "2.17.0-beta.6",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",

package/lib/themes/clay-light.json

@@ -1,10 +0,0 @@
-{
-  "name": "Clay Light",
-  "author": "Clay",
-  "variant": "light",
-  "base00": "F3EBE7", "base01": "EBE1DC", "base02": "D8CCC6", "base03": "A09590",
-  "base04": "786D67", "base05": "504541", "base06": "332925", "base07": "1A1412",
-  "base08": "C83520", "base09": "F74728", "base0A": "C08520", "base0B": "008F6B",
-  "base0C": "1C8575", "base0D": "3560B0", "base0E": "8C4E8E", "base0F": "A57C45",
-  "accent2": "2A26E5"
-}

package/lib/themes/clay.json

@@ -1,10 +0,0 @@
-{
-  "name": "Clay Dark",
-  "author": "Clay",
-  "variant": "dark",
-  "base00": "1F1B1B", "base01": "2A2525", "base02": "352F2F", "base03": "7D7370",
-  "base04": "A09590", "base05": "C2BAB4", "base06": "E5DED8", "base07": "FFFFFF",
-  "base08": "F74728", "base09": "FE7150", "base0A": "E5A040", "base0B": "09E5A3",
-  "base0C": "4EC9B0", "base0D": "6BA0E5", "base0E": "D085CC", "base0F": "D09558",
-  "accent2": "5857FC"
-}