clay-server 2.9.0 → 2.9.1

package/lib/pages.js

@@ -22,11 +22,10 @@ function pinPageHtml() {
     'if(d.ok){location.reload();return}' +
     'if(d.locked){for(var i=0;i<boxes.length;i++)boxes[i].disabled=true;' +
     'err.textContent="Too many attempts. Try again in "+Math.ceil(d.retryAfter/60)+" min";' +
-    'setTimeout(function(){for(var i=0;i<boxes.length;i++){boxes[i].disabled=false;boxes[i].value="";boxes[i].classList.remove("filled")}' +
-    'document.getElementById("pin").value="";err.textContent="";boxes[0].focus()},d.retryAfter*1000);return}' +
+    'setTimeout(function(){for(var i=0;i<boxes.length;i++)boxes[i].disabled=false;' +
+    'err.textContent="";resetPinBoxes()},d.retryAfter*1000);return}' +
     'var msg="Wrong PIN";if(typeof d.attemptsLeft==="number"&&d.attemptsLeft<=3)msg+=" ("+d.attemptsLeft+" left)";' +
-    'err.textContent=msg;for(var i=0;i<boxes.length;i++){boxes[i].value="";boxes[i].classList.remove("filled")}' +
-    'document.getElementById("pin").value="";boxes[0].focus()})' +
+    'err.textContent=msg;resetPinBoxes()})' +
     '.catch(function(){err.textContent="Connection error"})}' +
     'initPinBoxes("pin-boxes","pin",submitPin);' +
     '</script></div></body></html>';
@@ -727,9 +726,9 @@ var authPageStyles =
   // PIN digit boxes
   '.pin-wrap{display:flex;gap:8px;justify-content:center}' +
   '.pin-digit{width:44px;height:56px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:8px;' +
-  'color:var(--accent);font-family:"Courier New",Courier,"Roboto Mono",monospace;font-size:28px;font-weight:700;' +
+  'color:var(--text);font-family:"Courier New",Courier,"Roboto Mono",monospace;font-size:28px;font-weight:700;' +
   'text-align:center;line-height:56px;outline:none;caret-color:transparent;' +
-  '-webkit-text-security:disc;transition:border-color 0.15s,box-shadow 0.15s}' +
+  'transition:border-color 0.15s,box-shadow 0.15s}' +
   '.pin-digit:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-20)}' +
   '.pin-digit.filled{color:var(--text)}' +
   // Legacy single-input fallback
@@ -754,28 +753,30 @@ var pinBoxScript =
   'function initPinBoxes(cId,hId,onComplete){' +
   'var wrap=document.getElementById(cId),hidden=document.getElementById(hId);' +
   'var boxes=wrap.querySelectorAll(".pin-digit");' +
+  'var digits=["","","","","",""];' +
   'boxes[0].focus();' +
+  'function setDigit(idx,v){digits[idx]=v;boxes[idx].value=v?"\\u2022":"";boxes[idx].classList.toggle("filled",v.length>0);syncHidden()}' +
   'for(var i=0;i<boxes.length;i++){(function(idx){' +
   'boxes[idx].addEventListener("input",function(e){' +
-  'var v=this.value.replace(/[^0-9]/g,"");' +
-  'if(v.length>1)v=v.charAt(v.length-1);' +
-  'this.value=v;' +
-  'this.classList.toggle("filled",v.length>0);' +
-  'syncHidden();' +
+  'var raw=this.value.replace(/[^0-9]/g,"");' +
+  'if(!raw){setDigit(idx,"");return}' +
+  'var v=raw.charAt(raw.length-1);' +
+  'setDigit(idx,v);' +
   'if(v&&idx<5)boxes[idx+1].focus();' +
   'if(hidden.value.length===6&&onComplete)onComplete()});' +
   'boxes[idx].addEventListener("keydown",function(e){' +
-  'if(e.key==="Backspace"&&!this.value&&idx>0){boxes[idx-1].focus();boxes[idx-1].value="";boxes[idx-1].classList.remove("filled");syncHidden()}' +
+  'if(e.key==="Backspace"){if(!digits[idx]&&idx>0){setDigit(idx-1,"");boxes[idx-1].focus()}else{setDigit(idx,"")}syncHidden();return}' +
   'if(e.key==="ArrowLeft"&&idx>0)boxes[idx-1].focus();' +
   'if(e.key==="ArrowRight"&&idx<5)boxes[idx+1].focus();' +
   'if(e.key==="Enter"&&hidden.value.length===6&&onComplete){e.preventDefault();onComplete()}});' +
   'boxes[idx].addEventListener("paste",function(e){' +
   'e.preventDefault();var d=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"").slice(0,6);' +
-  'for(var j=0;j<d.length&&j<6;j++){boxes[j].value=d.charAt(j);boxes[j].classList.add("filled")}' +
-  'syncHidden();if(d.length>=6){boxes[5].focus();if(onComplete)onComplete()}else if(d.length>0)boxes[d.length].focus()});' +
+  'for(var j=0;j<d.length&&j<6;j++){setDigit(j,d.charAt(j))}' +
+  'if(d.length>=6){boxes[5].focus();if(onComplete)onComplete()}else if(d.length>0)boxes[d.length].focus()});' +
   'boxes[idx].addEventListener("focus",function(){this.select()});' +
   '})(i)}' +
-  'function syncHidden(){var v="";for(var j=0;j<boxes.length;j++)v+=boxes[j].value;hidden.value=v}' +
+  'function syncHidden(){var v="";for(var j=0;j<digits.length;j++)v+=digits[j];hidden.value=v}' +
+  'window.resetPinBoxes=function(){for(var j=0;j<6;j++){digits[j]="";boxes[j].value="";boxes[j].classList.remove("filled")}hidden.value="";boxes[0].focus()}' +
   '}';
 
 // HTML fragment for 6 PIN digit boxes + hidden input
@@ -938,8 +939,8 @@ function multiUserLoginPageHtml() {
 
     'function resetPin(){' +
     'var boxes=document.querySelectorAll(".pin-digit");' +
-    'for(var i=0;i<boxes.length;i++){boxes[i].value="";boxes[i].classList.remove("filled");boxes[i].disabled=false}' +
-    'pinEl.value="";btns[1].disabled=true;if(boxes[0])boxes[0].focus()}' +
+    'for(var i=0;i<boxes.length;i++)boxes[i].disabled=false;' +
+    'if(window.resetPinBoxes)resetPinBoxes();btns[1].disabled=true}' +
 
     'function goBackToUsername(){' +
     'steps[1].classList.remove("active");dots[1].classList.remove("current");dots[1].classList.remove("done");' +

package/lib/project.js

@@ -156,6 +156,15 @@ function createProjectContext(opts) {
     }
   }
 
+  function sendToSessionOthers(sender, sessionId, obj) {
+    var data = JSON.stringify(obj);
+    for (var ws of clients) {
+      if (ws !== sender && ws.readyState === 1 && ws._clayActiveSession === sessionId) {
+        ws.send(data);
+      }
+    }
+  }
+
   // --- File watcher ---
   var fileWatcher = null;
   var watchedPath = null;
@@ -1530,7 +1539,7 @@ function createProjectContext(opts) {
     }
 
     if (msg.type === "input_sync") {
-      sendToOthers(ws, msg);
+      sendToSessionOthers(ws, ws._clayActiveSession, msg);
       return;
     }
 
@@ -2612,7 +2621,7 @@ function createProjectContext(opts) {
     }
     session.history.push(userMsg);
     sm.appendToSessionFile(session, userMsg);
-    sendToOthers(ws, userMsg);
+    sendToSessionOthers(ws, session.localId, userMsg);
 
     if (!session.title) {
       session.title = (msg.text || "Image").substring(0, 50);
@@ -2845,7 +2854,8 @@ function createProjectContext(opts) {
           return;
         }
         var spawnCwd = scope === "global" ? os.homedir() : cwd;
-        var child = spawn("npx", ["skills", "add", url, "--skill", skill], {
+        var scopeFlag = scope === "global" ? "--global" : "--project";
+        var child = spawn("npx", ["skills", "add", url, "--skill", skill, "--yes", scopeFlag], {
           cwd: spawnCwd,
           stdio: "ignore",
           detached: false,
@@ -3116,29 +3126,6 @@ function createProjectContext(opts) {
     },
     warmup: function () {
       sdk.warmup();
-      // Auto-install clay-ralph skill globally if not present
-      var clayRalphDir = path.join(os.homedir(), ".claude", "skills", "clay-ralph", "SKILL.md");
-      try {
-        fs.accessSync(clayRalphDir, fs.constants.R_OK);
-      } catch (e) {
-        console.log("[project] Auto-installing clay-ralph skill...");
-        var child = spawn("npx", ["skills", "add", "https://github.com/chadbyte/clay-ralph", "--skill", "clay-ralph"], {
-          cwd: os.homedir(),
-          stdio: "ignore",
-          detached: false,
-        });
-        child.on("close", function (code) {
-          if (code === 0) {
-            console.log("[project] clay-ralph skill installed successfully");
-            send({ type: "skill_installed", skill: "clay-ralph", scope: "global", success: true, error: null });
-          } else {
-            console.log("[project] clay-ralph skill install failed (code " + code + ")");
-          }
-        });
-        child.on("error", function (err) {
-          console.log("[project] clay-ralph skill install error: " + err.message);
-        });
-      }
     },
     destroy: destroy,
   };

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;
@@ -2667,24 +2676,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 +3795,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 +4082,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 +4424,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 +4733,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 {