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

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/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/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/package.json

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