clay-server 2.17.0-beta.5 → 2.17.0-beta.7

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/css/command-palette.css

@@ -320,7 +320,7 @@
     right: 0;
     transform: none;
     width: 100%;
-    max-height: 85vh;
+    max-height: 85dvh;
     border-radius: 16px 16px 0 0;
     border: none;
     border-top: 1px solid var(--border-subtle);

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/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.5",
+  "version": "2.17.0-beta.7",
   "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"
-}