clay-server 2.9.0 → 2.9.2

package/lib/public/app.js

@@ -542,7 +542,11 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     }
     renderHomeHub(cachedProjects);
     startTipRotation();
-    history.pushState(null, "", "/");
+    if (document.documentElement.classList.contains("pwa-standalone")) {
+      history.replaceState(null, "", "/");
+    } else {
+      history.pushState(null, "", "/");
+    }
     // Update icon strip active state
     var homeIcon = document.querySelector(".icon-strip-home");
     if (homeIcon) homeIcon.classList.add("active");
@@ -557,7 +561,11 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     hubCloseBtn.addEventListener("click", function () {
       hideHomeHub();
       if (currentSlug) {
-        history.pushState(null, "", "/p/" + currentSlug + "/");
+        if (document.documentElement.classList.contains("pwa-standalone")) {
+          history.replaceState(null, "", "/p/" + currentSlug + "/");
+        } else {
+          history.pushState(null, "", "/p/" + currentSlug + "/");
+        }
         // Restore icon strip active state
         var homeIcon = document.querySelector(".icon-strip-home");
         if (homeIcon) homeIcon.classList.remove("active");
@@ -1830,6 +1838,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
 
   // --- DOM: Messages ---
   function addUserMessage(text, images, pastes) {
+    if (!text && (!images || images.length === 0) && (!pastes || pastes.length === 0)) return;
     var div = document.createElement("div");
     div.className = "msg-user";
     div.dataset.turn = ++turnCounter;
@@ -2360,7 +2369,11 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     currentSlug = slug;
     basePath = "/p/" + slug + "/";
     wsPath = "/p/" + slug + "/ws";
-    history.pushState(null, "", basePath);
+    if (document.documentElement.classList.contains("pwa-standalone")) {
+      history.replaceState(null, "", basePath);
+    } else {
+      history.pushState(null, "", basePath);
+    }
     resetClientState();
     connect();
   }
@@ -2555,10 +2568,6 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
             var vEl = $("footer-version");
             if (vEl) vEl.textContent = "v" + msg.version;
           }
-          if (msg.debug) {
-            var debugWrap = $("debug-menu-wrap");
-            if (debugWrap) debugWrap.classList.remove("hidden");
-          }
           if (msg.lanHost) window.__lanHost = msg.lanHost;
           if (msg.dangerouslySkipPermissions) {
             skipPermsEnabled = true;
@@ -2650,9 +2659,10 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
           // Non-multi-user mode: simple count in topbar
           if (!msg.users) {
             var countEl = document.getElementById("client-count");
-            if (countEl) {
+            var countTextEl = document.getElementById("client-count-text");
+            if (countEl && countTextEl) {
               if (msg.count > 1) {
-                countEl.textContent = msg.count;
+                countTextEl.textContent = msg.count + " connected";
                 countEl.classList.remove("hidden");
               } else {
                 countEl.classList.add("hidden");
@@ -2667,24 +2677,13 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
 
         case "skill_installed":
           handleSkillInstalled(msg);
-          // Advance ralph wizard if we were installing clay-ralph
-          if (msg.skill === "clay-ralph" && ralphSkillInstalling) {
-            ralphSkillInstalling = false;
-            ralphSkillInstalled = true;
-            if (msg.success) {
-              wizardStep = 2;
-              updateWizardStep();
-            } else {
-              var rNextBtn = document.getElementById("ralph-wizard-next");
-              if (rNextBtn) { rNextBtn.disabled = false; rNextBtn.textContent = "Get Started"; }
-              var rStatusEl = document.getElementById("ralph-install-status");
-              if (rStatusEl) { rStatusEl.innerHTML = "Failed to install skill. Try again."; }
-            }
-          }
+          if (msg.success) knownInstalledSkills[msg.skill] = true;
+          handleSkillInstallWs(msg);
           break;
 
         case "skill_uninstalled":
           handleSkillUninstalled(msg);
+          if (msg.success) delete knownInstalledSkills[msg.skill];
           break;
 
         case "loop_registry_updated":
@@ -3797,35 +3796,191 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     }
   }
 
-  // --- Ralph Wizard ---
-  var ralphSkillInstalled = false;
-  var ralphSkillInstalling = false;
+  // --- Skill install dialog (generic) ---
+  var skillInstallModal = document.getElementById("skill-install-modal");
+  var skillInstallTitle = document.getElementById("skill-install-title");
+  var skillInstallReason = document.getElementById("skill-install-reason");
+  var skillInstallList = document.getElementById("skill-install-list");
+  var skillInstallOk = document.getElementById("skill-install-ok");
+  var skillInstallCancel = document.getElementById("skill-install-cancel");
+  var skillInstallStatus = document.getElementById("skill-install-status");
+
+  var pendingSkillInstalls = []; // [{ name, url, scope, installed }]
+  var skillInstallCallback = null;
+  var skillInstalling = false;
+  var knownInstalledSkills = {}; // client-side cache of installed skills
+
+  function renderSkillInstallDialog(opts, missing) {
+    skillInstallTitle.textContent = opts.title || "Skill Installation Required";
+    skillInstallReason.textContent = opts.reason || "";
+    skillInstallList.innerHTML = "";
+    for (var i = 0; i < missing.length; i++) {
+      var s = missing[i];
+      var item = document.createElement("div");
+      item.className = "skill-install-item";
+      item.setAttribute("data-skill", s.name);
+      item.innerHTML = '<span class="skill-icon">&#x1f9e9;</span>' +
+        '<div class="skill-info">' +
+          '<span class="skill-name">' + escapeHtml(s.name) + '</span>' +
+          '<span class="skill-scope">' + escapeHtml(s.scope || "global") + '</span>' +
+        '</div>' +
+        '<span class="skill-status"></span>';
+      skillInstallList.appendChild(item);
+    }
+    skillInstallStatus.classList.add("hidden");
+    skillInstallStatus.innerHTML = "";
+    skillInstallOk.disabled = false;
+    skillInstallOk.textContent = "Install";
+    skillInstallOk.className = "confirm-btn confirm-delete";
+    skillInstallModal.classList.remove("hidden");
+  }
+
+  function hideSkillInstallModal() {
+    skillInstallModal.classList.add("hidden");
+    skillInstallCallback = null;
+    pendingSkillInstalls = [];
+    skillInstalling = false;
+    skillInstallDone = false;
+  }
+
+  skillInstallCancel.addEventListener("click", hideSkillInstallModal);
+  skillInstallModal.querySelector(".confirm-backdrop").addEventListener("click", hideSkillInstallModal);
+
+  var skillInstallDone = false;
+
+  skillInstallOk.addEventListener("click", function () {
+    // "Proceed" state — all done, close and invoke callback
+    if (skillInstallDone) {
+      var proceedCb = skillInstallCallback;
+      skillInstallCallback = null;
+      hideSkillInstallModal();
+      if (proceedCb) proceedCb();
+      return;
+    }
+    if (skillInstalling) return;
+    skillInstalling = true;
+    skillInstallOk.disabled = true;
+    skillInstallOk.textContent = "Installing...";
+
+    var total = 0;
+    for (var i = 0; i < pendingSkillInstalls.length; i++) {
+      if (!pendingSkillInstalls[i].installed) total++;
+    }
+    skillInstallStatus.classList.remove("hidden");
+    updateSkillInstallProgress(0, total);
+
+    for (var j = 0; j < pendingSkillInstalls.length; j++) {
+      var s = pendingSkillInstalls[j];
+      if (s.installed) continue;
+      fetch(basePath + "api/install-skill", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: s.url, skill: s.name, scope: s.scope || "global" }),
+      }).catch(function () {});
+    }
+  });
+
+  function updateSkillInstallProgress(done, total) {
+    skillInstallStatus.innerHTML = '<div class="skills-spinner small"></div> Installing skills... (' + done + '/' + total + ')';
+  }
+
+  function updateSkillListItems() {
+    var items = skillInstallList.querySelectorAll(".skill-install-item");
+    for (var i = 0; i < items.length; i++) {
+      var name = items[i].getAttribute("data-skill");
+      for (var j = 0; j < pendingSkillInstalls.length; j++) {
+        if (pendingSkillInstalls[j].name === name) {
+          var statusEl = items[i].querySelector(".skill-status");
+          if (pendingSkillInstalls[j].installed) {
+            if (statusEl) {
+              statusEl.innerHTML = '<span class="skill-status-ok">' + iconHtml("circle-check") + '</span>';
+              refreshIcons();
+            }
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  function handleSkillInstallWs(msg) {
+    if (!skillInstalling || pendingSkillInstalls.length === 0) return;
+    for (var i = 0; i < pendingSkillInstalls.length; i++) {
+      if (pendingSkillInstalls[i].name === msg.skill) {
+        if (msg.success) {
+          pendingSkillInstalls[i].installed = true;
+          knownInstalledSkills[msg.skill] = true;
+        } else {
+          skillInstalling = false;
+          skillInstallOk.disabled = false;
+          skillInstallOk.textContent = "Install";
+          skillInstallStatus.innerHTML = "Failed to install " + escapeHtml(msg.skill) + ". Try again.";
+          updateSkillListItems();
+          return;
+        }
+      }
+    }
+
+    var doneCount = 0;
+    var totalCount = pendingSkillInstalls.length;
+    for (var k = 0; k < pendingSkillInstalls.length; k++) {
+      if (pendingSkillInstalls[k].installed) doneCount++;
+    }
+    updateSkillListItems();
+    updateSkillInstallProgress(doneCount, totalCount);
+
+    if (doneCount === totalCount) {
+      skillInstallDone = true;
+      skillInstallStatus.innerHTML = '<span class="skill-status-ok">' + iconHtml("circle-check") + '</span> All skills installed successfully.';
+      refreshIcons();
+      skillInstallOk.disabled = false;
+      skillInstallOk.textContent = "Proceed";
+      skillInstallOk.className = "confirm-btn confirm-proceed";
+    }
+  }
 
-  function checkRalphSkillInstalled(cb) {
+  function requireSkills(opts, cb) {
     fetch(basePath + "api/installed-skills")
       .then(function (res) { return res.json(); })
       .then(function (data) {
         var installed = data.installed || {};
-        ralphSkillInstalled = !!installed["clay-ralph"];
-        cb(ralphSkillInstalled);
+        var missing = [];
+        for (var i = 0; i < opts.skills.length; i++) {
+          var sName = opts.skills[i].name;
+          if (!installed[sName] && !knownInstalledSkills[sName]) {
+            missing.push({ name: sName, url: opts.skills[i].url, scope: opts.skills[i].scope || "global", installed: false });
+          }
+        }
+        if (missing.length === 0) { cb(); return; }
+        pendingSkillInstalls = missing;
+        skillInstallCallback = cb;
+        renderSkillInstallDialog(opts, missing);
       })
-      .catch(function () { cb(false); });
+      .catch(function () { cb(); });
   }
 
+  function requireClayRalph(cb) {
+    requireSkills({
+      title: "Skill Installation Required",
+      reason: "This feature requires the following skill to be installed.",
+      skills: [{ name: "clay-ralph", url: "https://github.com/chadbyte/clay-ralph", scope: "global" }]
+    }, cb);
+  }
+
+  // --- Ralph Wizard ---
+
   function openRalphWizard() {
-    wizardData = { name: "", task: "", maxIterations: 3 };
-    ralphSkillInstalling = false;
-    var el = document.getElementById("ralph-wizard");
-    if (!el) return;
+    requireClayRalph(function () {
+      wizardData = { name: "", task: "", maxIterations: 3 };
+      var el = document.getElementById("ralph-wizard");
+      if (!el) return;
 
-    var taskEl = document.getElementById("ralph-task");
-    if (taskEl) taskEl.value = "";
-    var iterEl = document.getElementById("ralph-max-iterations");
-    if (iterEl) iterEl.value = "25";
+      var taskEl = document.getElementById("ralph-task");
+      if (taskEl) taskEl.value = "";
+      var iterEl = document.getElementById("ralph-max-iterations");
+      if (iterEl) iterEl.value = "25";
 
-    // Check if clay-ralph skill is installed — skip onboarding if so
-    checkRalphSkillInstalled(function (installed) {
-      wizardStep = installed ? 2 : 1;
+      wizardStep = 1;
       el.classList.remove("hidden");
       var statusEl = document.getElementById("ralph-install-status");
       if (statusEl) { statusEl.classList.add("hidden"); statusEl.innerHTML = ""; }
@@ -3928,38 +4083,9 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
   function wizardNext() {
     collectWizardData();
 
-    // Step 1: install clay-ralph skill if needed, otherwise just advance
     if (wizardStep === 1) {
-      if (ralphSkillInstalled) {
-        wizardStep++;
-        updateWizardStep();
-        return;
-      }
-      if (ralphSkillInstalling) return;
-      ralphSkillInstalling = true;
-      var nextBtn = document.getElementById("ralph-wizard-next");
-      if (nextBtn) {
-        nextBtn.disabled = true;
-        nextBtn.textContent = "Installing...";
-      }
-      var statusEl = document.getElementById("ralph-install-status");
-      if (statusEl) {
-        statusEl.classList.remove("hidden");
-        statusEl.innerHTML = '<div class="skills-spinner small"></div> Installing clay-ralph skill...';
-      }
-      fetch(basePath + "api/install-skill", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ url: "https://github.com/chadbyte/clay-ralph", skill: "clay-ralph", scope: "global" }),
-      })
-        .then(function () {
-          // Wait for skill_installed websocket message to advance
-        })
-        .catch(function () {
-          ralphSkillInstalling = false;
-          if (nextBtn) { nextBtn.disabled = false; nextBtn.textContent = "Get Started"; }
-          if (statusEl) { statusEl.innerHTML = "Failed to install skill. Try again."; }
-        });
+      wizardStep++;
+      updateWizardStep();
       return;
     }
 
@@ -4299,6 +4425,7 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     basePath: basePath,
     currentSlug: currentSlug,
     openRalphWizard: function () { openRalphWizard(); },
+    requireClayRalph: function (cb) { requireClayRalph(cb); },
     getProjects: function () { return cachedProjects; },
   });
 
@@ -4607,6 +4734,57 @@ import { initAdmin, checkAdminAccess } from './modules/admin.js';
     closeAddProjectModal();
   });
 
+  // --- PWA install prompt ---
+  (function () {
+    var installPill = document.getElementById("pwa-install-pill");
+    var modal = document.getElementById("pwa-install-modal");
+    var confirmBtn = document.getElementById("pwa-modal-confirm");
+    var cancelBtn = document.getElementById("pwa-modal-cancel");
+    if (!installPill || !modal) return;
+
+    // Already standalone — never show
+    if (document.documentElement.classList.contains("pwa-standalone")) return;
+
+    // Show pill on mobile browsers (the primary target for PWA install)
+    var isMobile = /Mobi|Android|iPad|iPhone|iPod/.test(navigator.userAgent) ||
+      (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+    if (isMobile) {
+      installPill.classList.remove("hidden");
+    }
+
+    // Also show on desktop if beforeinstallprompt fires
+    window.addEventListener("beforeinstallprompt", function (e) {
+      e.preventDefault();
+      installPill.classList.remove("hidden");
+    });
+
+    function openModal() {
+      modal.classList.remove("hidden");
+      lucide.createIcons({ nodes: [modal] });
+    }
+
+    function closeModal() {
+      modal.classList.add("hidden");
+    }
+
+    installPill.addEventListener("click", openModal);
+    cancelBtn.addEventListener("click", closeModal);
+    modal.querySelector(".pwa-modal-backdrop").addEventListener("click", closeModal);
+
+    confirmBtn.addEventListener("click", function () {
+      // Redirect to HTTP setup page (port + 1)
+      var port = parseInt(location.port, 10) || (location.protocol === "https:" ? 443 : 80);
+      var setupUrl = "http://" + location.hostname + ":" + (port + 1) + "/setup";
+      location.href = setupUrl;
+    });
+
+    // Hide after install
+    window.addEventListener("appinstalled", function () {
+      installPill.classList.add("hidden");
+      closeModal();
+    });
+  })();
+
   // --- Init ---
   lucide.createIcons();
   connect();

package/lib/public/css/base.css

@@ -158,6 +158,8 @@ img.emoji {
   --content-width: 760px;
 }
 
+/* PWA standalone: home indicator safe area still applies on notched devices */
+
 ::selection {
   background: rgba(80, 250, 123, 0.25);
 }
@@ -170,6 +172,7 @@ html, body {
   font-size: 15px;
   line-height: 1.6;
   overflow: hidden;
+  overscroll-behavior: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/lib/public/css/filebrowser.css

@@ -677,6 +677,7 @@
   color: var(--text);
   white-space: pre-wrap;
   word-break: break-word;
+  tab-size: 2;
 }
 
 .file-viewer-body pre code {
@@ -700,6 +701,7 @@
   line-height: 1.55;
   white-space: pre;
   word-break: normal;
+  tab-size: 2;
 }
 
 .file-viewer-gutter {
@@ -890,7 +892,12 @@
 @media (max-width: 1023px) {
   #terminal-container {
     position: fixed;
-    inset: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-top: var(--safe-top);
+    padding-bottom: var(--safe-bottom);
     background: var(--bg);
     z-index: 300;
     display: flex;

package/lib/public/css/home-hub.css

@@ -431,7 +431,7 @@
 /* --- Mobile --- */
 @media (max-width: 768px) {
   #home-hub {
-    padding: 32px 16px 32px;
+    padding: 32px 16px calc(80px + var(--safe-bottom, 0px));
   }
   .hub-greeting h1 {
     font-size: 22px;

package/lib/public/css/input.css

@@ -559,6 +559,10 @@
    ========================================================================== */
 
 @media (max-width: 768px) {
+  #layout-body {
+    background: var(--bg);
+  }
+
   #main-area {
     overflow: visible;
     border-radius: 0;

package/lib/public/css/menus.css

@@ -142,46 +142,6 @@
   flex-shrink: 0;
 }
 
-/* --- Debug menu --- */
-#debug-menu-wrap {
-  position: relative;
-}
-
-#debug-menu-wrap.hidden { display: none; }
-
-#debug-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: var(--error);
-  cursor: pointer;
-  padding: 4px;
-  opacity: 0.6;
-  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
-}
-
-#debug-btn .lucide { width: 15px; height: 15px; }
-#debug-btn:hover { opacity: 1; background: var(--error-8); border-color: var(--error-25); }
-#debug-btn.active { opacity: 1; background: var(--error-12); border-color: var(--error-25); }
-
-#debug-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  background: var(--bg-alt);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 8px 0;
-  min-width: 200px;
-  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
-  z-index: 200;
-}
-
-#debug-menu.hidden { display: none; }
-
 /* --- Terminal toggle button (mobile only) --- */
 #footer-status,
 #terminal-toggle-btn {
@@ -447,13 +407,10 @@
 .notif-action.copied { color: var(--success); }
 
 #client-count {
-  display: inline-flex;
-  align-items: center;
   cursor: default;
+  font-size: 11px;
 }
 
-#client-count.hidden { display: none; }
-
 .client-avatar {
   width: 22px;
   height: 22px;

package/lib/public/css/messages.css

@@ -6,6 +6,7 @@
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
   padding: 20px 0 12px;
 }
 

package/lib/public/css/mobile-nav.css

@@ -22,7 +22,7 @@
     background: var(--bg);
     border-top: 1px solid var(--border);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-around;
     z-index: 200;
   }
@@ -35,7 +35,7 @@
     align-items: center;
     justify-content: center;
     gap: 2px;
-    height: 100%;
+    height: 56px;
     background: none;
     border: none;
     color: var(--text-dimmer);