clay-server 2.7.2 → 2.8.2

package/lib/public/modules/ascii-logo.js

@@ -0,0 +1,442 @@
+// --- Animated ASCII Logo (Canvas particle system) ---
+// Midjourney-style scatter-in / color-sweep / shatter / reassemble animation
+
+var ASCII_LINES = [
+  "________/\\\\\\\\\\\\\\\\\\__/\\\\\\_________________/\\\\\\\\\\\\\\\\\\_____/\\\\\\________/\\\\\\",
+  " _____/\\\\\\////////__\\/\\\\\\_______________/\\\\\\\\\\\\\\\\\\\\\\\\\\__\\///\\\\\\____/\\\\\\/_",
+  "  ___/\\\\\\/___________\\/\\\\\\______________/\\\\\\/////////\\\\\\___\\///\\\\\\/\\\\\\/___",
+  "   __/\\\\\\_____________\\/\\\\\\_____________\\/\\\\\\_______\\/\\\\\\_____\\///\\\\\\/_____",
+  "    _\\/\\\\\\_____________\\/\\\\\\_____________\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\_______\\/\\\\\\______",
+  "     _\\//\\\\\\____________\\/\\\\\\_____________\\/\\\\\\/////////\\\\\\_______\\/\\\\\\______",
+  "      __\\///\\\\\\__________\\/\\\\\\_____________\\/\\\\\\_______\\/\\\\\\_______\\/\\\\\\______",
+  "       ____\\////\\\\\\\\\\\\\\\\\\_\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\_\\/\\\\\\_______\\/\\\\\\_______\\/\\\\\\______",
+  "        _______\\/////////__\\///////////////__\\///________\\///________\\///_______",
+];
+
+// Tri-accent gradient stops: Green → Indigo → Terracotta (matches CLI)
+var GRADIENT_STOPS = [
+  [9, 229, 163],
+  [88, 87, 252],
+  [254, 113, 80],
+];
+
+// Animation phase durations (seconds)
+var PHASE_SCATTER_IN = 1.8;
+var PHASE_COLOR_SWEEP = 0.9;
+var PHASE_HOLD = 2.5;
+var PHASE_SHATTER = 1.4;
+var PHASE_REASSEMBLE = 1.8;
+
+var canvas = null;
+var ctx = null;
+var particles = [];
+var phase = "idle";
+var phaseTime = 0;
+var animId = null;
+var lastTime = 0;
+var charWidth = 0;
+var lineHeight = 0;
+var fontSize = 0;
+var offsetX = 0;
+var offsetY = 0;
+var centerX = 0;
+var centerY = 0;
+var maxCol = 0;
+var glyphCache = {};  // key: char → offscreen canvas (white glyph)
+var running = false;
+
+function getGradientColor(row, totalRows) {
+  var t = totalRows > 1 ? row / (totalRows - 1) : 0;
+  var r, g, b;
+  if (t <= 0.5) {
+    var s = t * 2;
+    r = Math.round(GRADIENT_STOPS[0][0] + (GRADIENT_STOPS[1][0] - GRADIENT_STOPS[0][0]) * s);
+    g = Math.round(GRADIENT_STOPS[0][1] + (GRADIENT_STOPS[1][1] - GRADIENT_STOPS[0][1]) * s);
+    b = Math.round(GRADIENT_STOPS[0][2] + (GRADIENT_STOPS[1][2] - GRADIENT_STOPS[0][2]) * s);
+  } else {
+    var s = (t - 0.5) * 2;
+    r = Math.round(GRADIENT_STOPS[1][0] + (GRADIENT_STOPS[2][0] - GRADIENT_STOPS[1][0]) * s);
+    g = Math.round(GRADIENT_STOPS[1][1] + (GRADIENT_STOPS[2][1] - GRADIENT_STOPS[1][1]) * s);
+    b = Math.round(GRADIENT_STOPS[1][2] + (GRADIENT_STOPS[2][2] - GRADIENT_STOPS[1][2]) * s);
+  }
+  return [r, g, b];
+}
+
+function easeOutBack(t) {
+  var s = 1.4;
+  var t1 = t - 1;
+  return t1 * t1 * ((s + 1) * t1 + s) + 1;
+}
+
+function easeOutCubic(t) {
+  var t1 = t - 1;
+  return t1 * t1 * t1 + 1;
+}
+
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+
+function buildParticles() {
+  particles = [];
+  maxCol = 0;
+  for (var row = 0; row < ASCII_LINES.length; row++) {
+    var line = ASCII_LINES[row];
+    for (var col = 0; col < line.length; col++) {
+      var ch = line[col];
+      if (ch === " ") continue;
+      if (col > maxCol) maxCol = col;
+      var gc = getGradientColor(row, ASCII_LINES.length);
+      particles.push({
+        char: ch,
+        row: row,
+        col: col,
+        targetX: 0,
+        targetY: 0,
+        x: 0,
+        y: 0,
+        vx: 0,
+        vy: 0,
+        opacity: 0,
+        rotation: 0,
+        vr: 0,
+        finalR: gc[0],
+        finalG: gc[1],
+        finalB: gc[2],
+        r: 220,
+        g: 220,
+        b: 220,
+        scatterX: 0,
+        scatterY: 0,
+      });
+    }
+  }
+}
+
+function computeLayout() {
+  if (!canvas) return;
+  var container = canvas.parentElement;
+  var dpr = window.devicePixelRatio || 1;
+  var w = container.clientWidth;
+  var h = container.clientHeight;
+
+  canvas.style.width = w + "px";
+  canvas.style.height = h + "px";
+  canvas.width = Math.round(w * dpr);
+  canvas.height = Math.round(h * dpr);
+
+  ctx = canvas.getContext("2d");
+  ctx.scale(dpr, dpr);
+
+  // Find longest line
+  var maxLen = 0;
+  for (var i = 0; i < ASCII_LINES.length; i++) {
+    if (ASCII_LINES[i].length > maxLen) maxLen = ASCII_LINES[i].length;
+  }
+
+  // Responsive font size
+  fontSize = Math.floor(w / maxLen * 1.3);
+  fontSize = Math.max(8, Math.min(fontSize, 28));
+
+  ctx.font = "bold " + fontSize + "px 'Roboto Mono', Menlo, Monaco, Consolas, monospace";
+  charWidth = ctx.measureText("M").width;
+  lineHeight = fontSize * 1.2;
+
+  var totalW = maxLen * charWidth;
+  var totalH = ASCII_LINES.length * lineHeight;
+  offsetX = (w - totalW) / 2;
+  offsetY = (h - totalH) / 2;
+  centerX = w / 2;
+  centerY = h / 2;
+
+  // Recompute target positions
+  for (var i = 0; i < particles.length; i++) {
+    var p = particles[i];
+    p.targetX = offsetX + p.col * charWidth;
+    p.targetY = offsetY + p.row * lineHeight + lineHeight * 0.8;
+  }
+
+  // Build glyph cache — pre-render each unique char as white on offscreen canvas
+  glyphCache = {};
+  var dpr2 = window.devicePixelRatio || 1;
+  var pad = Math.ceil(fontSize * 0.3);
+  var gw = Math.ceil(charWidth * dpr2) + pad * 2;
+  var gh = Math.ceil(fontSize * 1.6 * dpr2) + pad * 2;
+  var fontStr = "bold " + fontSize + "px 'Roboto Mono', Menlo, Monaco, Consolas, monospace";
+  var chars = {};
+  for (var i = 0; i < particles.length; i++) chars[particles[i].char] = 1;
+  var keys = Object.keys(chars);
+  for (var i = 0; i < keys.length; i++) {
+    var ch = keys[i];
+    var oc = document.createElement("canvas");
+    oc.width = gw;
+    oc.height = gh;
+    var ox = oc.getContext("2d");
+    ox.scale(dpr2, dpr2);
+    ox.font = fontStr;
+    ox.textBaseline = "alphabetic";
+    ox.fillStyle = "#fff";
+    ox.fillText(ch, pad / dpr2, (gh - pad) / dpr2);
+    glyphCache[ch] = oc;
+  }
+}
+
+function randomScatter(p) {
+  var canvasW = canvas.width / (window.devicePixelRatio || 1);
+  var canvasH = canvas.height / (window.devicePixelRatio || 1);
+  p.scatterX = (Math.random() - 0.5) * canvasW * 2;
+  p.scatterY = (Math.random() - 0.5) * canvasH * 2;
+  p.x = p.scatterX;
+  p.y = p.scatterY;
+  p.opacity = 0;
+  p.rotation = (Math.random() - 0.5) * Math.PI * 4;
+  p.vx = 0;
+  p.vy = 0;
+  p.vr = 0;
+  p.r = 220;
+  p.g = 220;
+  p.b = 220;
+}
+
+function setPhase(newPhase) {
+  phase = newPhase;
+  phaseTime = 0;
+
+  if (phase === "scatter-in") {
+    for (var i = 0; i < particles.length; i++) {
+      randomScatter(particles[i]);
+    }
+  } else if (phase === "shatter") {
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      var angle = Math.atan2(p.targetY - centerY, p.targetX - centerX);
+      angle += (Math.random() - 0.5) * 0.6;
+      var speed = 250 + Math.random() * 450;
+      p.vx = Math.cos(angle) * speed;
+      p.vy = Math.sin(angle) * speed;
+      p.vr = (Math.random() - 0.5) * 8;
+    }
+  } else if (phase === "reassemble") {
+    // particles keep their current positions from shatter
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      p.scatterX = p.x;
+      p.scatterY = p.y;
+      p.vx = 0;
+      p.vy = 0;
+    }
+  }
+}
+
+function updateParticles(dt) {
+  phaseTime += dt;
+
+  if (phase === "scatter-in") {
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      // Stagger by column — delay proportional to column position
+      var delay = (p.col / (maxCol || 1)) * 0.6;
+      var localT = Math.max(0, phaseTime - delay) / (PHASE_SCATTER_IN - 0.6);
+      localT = Math.min(localT, 1);
+      var ease = easeOutBack(localT);
+
+      p.x = lerp(p.scatterX, p.targetX, ease);
+      p.y = lerp(p.scatterY, p.targetY, ease);
+      p.opacity = Math.min(1, localT * 3);
+      p.rotation = lerp(p.rotation, 0, localT);
+    }
+    if (phaseTime >= PHASE_SCATTER_IN) {
+      // Snap to targets
+      for (var i = 0; i < particles.length; i++) {
+        var p = particles[i];
+        p.x = p.targetX;
+        p.y = p.targetY;
+        p.opacity = 1;
+        p.rotation = 0;
+      }
+      setPhase("color-sweep");
+    }
+  } else if (phase === "color-sweep") {
+    var sweepProgress = phaseTime / PHASE_COLOR_SWEEP;
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      var colNorm = p.col / (maxCol || 1);
+      var localT = (sweepProgress - colNorm * 0.6) / 0.4;
+      localT = Math.max(0, Math.min(1, localT));
+      var ease = easeOutCubic(localT);
+      p.r = Math.round(lerp(220, p.finalR, ease));
+      p.g = Math.round(lerp(220, p.finalG, ease));
+      p.b = Math.round(lerp(220, p.finalB, ease));
+    }
+    if (phaseTime >= PHASE_COLOR_SWEEP) {
+      for (var i = 0; i < particles.length; i++) {
+        var p = particles[i];
+        p.r = p.finalR;
+        p.g = p.finalG;
+        p.b = p.finalB;
+      }
+      setPhase("hold");
+    }
+  } else if (phase === "hold") {
+    var breath = Math.sin(phaseTime * Math.PI * 0.8) * 0.04;
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      p.opacity = 0.96 + breath;
+      // Subtle micro-jitter
+      p.x = p.targetX + Math.sin(phaseTime * 2.3 + i * 0.7) * 0.4;
+      p.y = p.targetY + Math.cos(phaseTime * 1.9 + i * 0.5) * 0.3;
+    }
+    if (phaseTime >= PHASE_HOLD) {
+      // Reset to exact positions before shatter
+      for (var i = 0; i < particles.length; i++) {
+        var p = particles[i];
+        p.x = p.targetX;
+        p.y = p.targetY;
+        p.opacity = 1;
+      }
+      setPhase("shatter");
+    }
+  } else if (phase === "shatter") {
+    var drag = 0.97;
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      p.vx *= drag;
+      p.vy *= drag;
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      p.rotation += p.vr * dt;
+      p.vr *= drag;
+
+      // Fade out based on distance from center
+      var dx = p.x - centerX;
+      var dy = p.y - centerY;
+      var dist = Math.sqrt(dx * dx + dy * dy);
+      var maxDist = Math.max(centerX, centerY) * 0.8;
+      p.opacity = Math.max(0, 1 - dist / maxDist);
+    }
+    if (phaseTime >= PHASE_SHATTER) {
+      setPhase("reassemble");
+    }
+  } else if (phase === "reassemble") {
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      var delay = ((maxCol - p.col) / (maxCol || 1)) * 0.5;
+      var localT = Math.max(0, phaseTime - delay) / (PHASE_REASSEMBLE - 0.5);
+      localT = Math.min(localT, 1);
+      var ease = easeOutBack(localT);
+
+      p.x = lerp(p.scatterX, p.targetX, ease);
+      p.y = lerp(p.scatterY, p.targetY, ease);
+      p.opacity = Math.min(1, localT * 2.5);
+      p.rotation = lerp(p.rotation, 0, localT * localT);
+    }
+    if (phaseTime >= PHASE_REASSEMBLE) {
+      for (var i = 0; i < particles.length; i++) {
+        var p = particles[i];
+        p.x = p.targetX;
+        p.y = p.targetY;
+        p.opacity = 1;
+        p.rotation = 0;
+      }
+      setPhase("hold");
+    }
+  }
+}
+
+function drawFrame() {
+  if (!ctx) return;
+  var dpr = window.devicePixelRatio || 1;
+  var w = canvas.width / dpr;
+  var h = canvas.height / dpr;
+  ctx.clearRect(0, 0, w, h);
+
+  var pad = Math.ceil(fontSize * 0.3);
+  var drawW = (glyphCache._w || (Math.ceil(charWidth * dpr) + pad * 2)) / dpr;
+  var drawH = (glyphCache._h || (Math.ceil(fontSize * 1.6 * dpr) + pad * 2)) / dpr;
+  var padCSS = pad / dpr;
+
+  // Use globalCompositeOperation to tint white glyphs
+  // 1) Draw glyphs as white (source-over)
+  // 2) Multiply with color overlay
+  // Instead, use simpler approach: drawImage with globalAlpha, then tint via composite
+
+  for (var i = 0; i < particles.length; i++) {
+    var p = particles[i];
+    if (p.opacity <= 0.01) continue;
+
+    var gc = glyphCache[p.char];
+    if (!gc) continue;
+
+    var dx = p.x - padCSS;
+    var dy = p.y - drawH + padCSS;
+
+    ctx.globalAlpha = p.opacity;
+
+    if (Math.abs(p.rotation) > 0.01) {
+      ctx.save();
+      ctx.translate(p.x + charWidth / 2, p.y - fontSize / 3);
+      ctx.rotate(p.rotation);
+      ctx.drawImage(gc, -drawW / 2, -drawH / 2, drawW, drawH);
+      ctx.restore();
+    } else {
+      ctx.drawImage(gc, dx, dy, drawW, drawH);
+    }
+  }
+
+  // Tint pass — multiply white glyphs with particle colors
+  ctx.globalCompositeOperation = "source-atop";
+  for (var i = 0; i < particles.length; i++) {
+    var p = particles[i];
+    if (p.opacity <= 0.01) continue;
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = "rgb(" + p.r + "," + p.g + "," + p.b + ")";
+    var dx = p.x - padCSS;
+    var dy = p.y - drawH + padCSS;
+    ctx.fillRect(dx, dy, drawW, drawH);
+  }
+  ctx.globalCompositeOperation = "source-over";
+}
+
+function tick(now) {
+  if (!running) return;
+  var dt = Math.min((now - lastTime) / 1000, 0.05);
+  lastTime = now;
+  updateParticles(dt);
+  drawFrame();
+  animId = requestAnimationFrame(tick);
+}
+
+var resizeObserver = null;
+
+export function initAsciiLogo(canvasEl) {
+  canvas = canvasEl;
+  buildParticles();
+  computeLayout();
+
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(function () {
+      computeLayout();
+    });
+    resizeObserver.observe(canvas.parentElement);
+  }
+}
+
+export function startLogoAnimation() {
+  if (running) {
+    // Reset to beginning
+    cancelAnimationFrame(animId);
+  }
+  running = true;
+  computeLayout();
+  setPhase("scatter-in");
+  lastTime = performance.now();
+  animId = requestAnimationFrame(tick);
+}
+
+export function stopLogoAnimation() {
+  running = false;
+  if (animId) {
+    cancelAnimationFrame(animId);
+    animId = null;
+  }
+}

package/lib/public/modules/markdown.js

@@ -26,8 +26,26 @@ export function renderMarkdown(text) {
   return DOMPurify.sanitize(marked.parse(text));
 }
 
+/**
+ * parseEmojis — no-op stub.
+ * Emoji rendering is now handled by the Twemoji COLR font via CSS @font-face.
+ * No DOM manipulation needed — the font renders emoji glyphs directly.
+ * This stub is kept so existing callers don't break.
+ */
+export function parseEmojis() {}
+
+var langAliases = { jsonl: "json", dotenv: "bash" };
+
 export function highlightCodeBlocks(el) {
   el.querySelectorAll("pre code:not(.hljs):not(.language-mermaid)").forEach(function (block) {
+    var cls = Array.from(block.classList).find(function (c) { return c.startsWith("language-"); });
+    if (cls) {
+      var lang = cls.replace("language-", "");
+      if (langAliases[lang]) {
+        block.classList.remove(cls);
+        block.classList.add("language-" + langAliases[lang]);
+      }
+    }
     hljs.highlightElement(block);
   });
   el.querySelectorAll("pre:not(.has-copy-btn):not([data-mermaid-processed])").forEach(function (pre) {

package/lib/public/modules/notifications.js

@@ -3,7 +3,7 @@ import { iconHtml, refreshIcons } from './icons.js';
 
 var ctx;
 var basePath = "/";
-var onboardingBanner, onboardingText, onboardingClose, onboardingDismissed;
+var onboardingPill, onboardingText, onboardingClose, onboardingDismissed;
 var notifAlertEnabled, notifSoundEnabled, notifPermission;
 var audioCtx = null;
 
@@ -13,12 +13,12 @@ export function getNotifPermission() { return notifPermission; }
 
 export function showOnboarding(html) {
   onboardingText.innerHTML = html;
-  onboardingBanner.classList.remove("hidden");
+  onboardingPill.classList.remove("hidden");
   refreshIcons();
 }
 
 export function hideOnboarding() {
-  onboardingBanner.classList.add("hidden");
+  onboardingPill.classList.add("hidden");
 }
 
 export function playDoneSound() {
@@ -80,69 +80,57 @@ export function initNotifications(_ctx) {
     window.visualViewport.addEventListener("scroll", onViewportChange);
   }
 
-  // --- Update banner ---
+  // --- Update pill badge ---
   (function () {
-    var banner = $("update-banner");
-    var closeBtn = $("update-banner-close");
-    var howBtn = $("update-how");
+    var pillWrap = $("update-pill-wrap");
+    var pillBtn = $("update-pill");
+    var popover = $("update-popover");
     var updateNowBtn = $("update-now");
-    if (!banner) return;
-
-    // Build popover (manual update instructions)
-    var popover = document.createElement("div");
-    popover.id = "update-popover";
-    popover.innerHTML =
-      '<div class="popover-label">Run in your terminal:</div>' +
-      '<div class="popover-cmd">' +
-      '<code>npx clay-server@latest</code>' +
-      '<button class="popover-copy" title="Copy">' + iconHtml("copy") + '</button>' +
-      '</div>';
-    banner.appendChild(popover);
-    refreshIcons();
+    if (!pillWrap) return;
 
     var copyBtn = popover.querySelector(".popover-copy");
-    copyBtn.addEventListener("click", function () {
-      copyToClipboard("npx clay-server@latest").then(function () {
-        copyBtn.classList.add("copied");
-        copyBtn.innerHTML = iconHtml("check");
-        refreshIcons();
-        setTimeout(function () {
-          copyBtn.classList.remove("copied");
-          copyBtn.innerHTML = iconHtml("copy");
+    if (copyBtn) {
+      copyBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        copyToClipboard("npx clay-server@latest").then(function () {
+          copyBtn.classList.add("copied");
+          copyBtn.innerHTML = iconHtml("check");
           refreshIcons();
-        }, 1500);
+          setTimeout(function () {
+            copyBtn.classList.remove("copied");
+            copyBtn.innerHTML = iconHtml("copy");
+            refreshIcons();
+          }, 1500);
+        });
       });
-    });
+    }
 
     // "Update now" button — trigger server-side update + restart
     if (updateNowBtn) {
-      updateNowBtn.addEventListener("click", function () {
+      updateNowBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
         if (ctx.ws && ctx.connected) {
           ctx.ws.send(JSON.stringify({ type: "update_now" }));
-          updateNowBtn.textContent = "Updating...";
+          var textNode = updateNowBtn.lastChild;
+          if (textNode) textNode.textContent = " Updating...";
           updateNowBtn.disabled = true;
         }
       });
     }
 
-    // "?" button — toggle manual instructions popover
-    howBtn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      popover.classList.toggle("visible");
-    });
+    // Toggle popover on pill click
+    if (pillBtn) {
+      pillBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        popover.classList.toggle("visible");
+      });
+    }
 
     document.addEventListener("click", function (e) {
-      if (!popover.contains(e.target) && e.target !== howBtn) {
+      if (!popover.contains(e.target) && e.target !== pillBtn && !pillBtn.contains(e.target)) {
         popover.classList.remove("visible");
       }
     });
-
-    if (closeBtn) {
-      closeBtn.addEventListener("click", function () {
-        banner.classList.add("hidden");
-        popover.classList.remove("visible");
-      });
-    }
   })();
 
   // --- Settings: Check for updates ---
@@ -199,10 +187,10 @@ export function initNotifications(_ctx) {
     }
   })();
 
-  // --- Onboarding banner (HTTPS / Push) ---
-  onboardingBanner = $("onboarding-banner");
-  onboardingText = $("onboarding-banner-text");
-  onboardingClose = $("onboarding-banner-close");
+  // --- Onboarding pill badge (HTTPS / Push) ---
+  onboardingPill = $("onboarding-pill");
+  onboardingText = $("onboarding-pill-text");
+  onboardingClose = $("onboarding-pill-close");
   onboardingDismissed = localStorage.getItem("onboarding-dismissed");
 
   if (onboardingClose) {
@@ -218,7 +206,7 @@ export function initNotifications(_ctx) {
     if (!onboardingDismissed) {
       showOnboarding(
         iconHtml("bell-ring") +
-        ' Get alerts on your phone when Claude is done. <a href="/setup">Set up HTTPS</a>'
+        ' <a href="/setup">Set up HTTPS</a>'
       );
     }
   }
@@ -563,8 +551,7 @@ export function initNotifications(_ctx) {
             if (!onboardingDismissed) {
               showOnboarding(
                 iconHtml("bell-ring") +
-                ' Get notified when Claude responds. ' +
-                '<button class="onboarding-cta" id="onboarding-enable-push">Enable push notifications</button>'
+                ' <button class="onboarding-cta" id="onboarding-enable-push">Enable push</button>'
               );
               var enableBtn = $("onboarding-enable-push");
               if (enableBtn) {
@@ -596,13 +583,13 @@ export function initNotifications(_ctx) {
       var open = debugMenu.classList.toggle("hidden");
       debugBtn.classList.toggle("active", !open);
 
-      // Sync toggle states with current banner visibility
-      var updateBanner = $("update-banner");
-      if (debugToggleUpdate && updateBanner) {
-        debugToggleUpdate.checked = !updateBanner.classList.contains("hidden");
+      // Sync toggle states with current pill visibility
+      var updatePillWrap = $("update-pill-wrap");
+      if (debugToggleUpdate && updatePillWrap) {
+        debugToggleUpdate.checked = !updatePillWrap.classList.contains("hidden");
       }
-      if (debugToggleOnboarding && onboardingBanner) {
-        debugToggleOnboarding.checked = !onboardingBanner.classList.contains("hidden");
+      if (debugToggleOnboarding && onboardingPill) {
+        debugToggleOnboarding.checked = !onboardingPill.classList.contains("hidden");
       }
     });
 
@@ -615,15 +602,15 @@ export function initNotifications(_ctx) {
 
     if (debugToggleUpdate) {
       debugToggleUpdate.addEventListener("change", function () {
-        var banner = $("update-banner");
-        if (!banner) return;
+        var pillWrap = $("update-pill-wrap");
+        if (!pillWrap) return;
         if (debugToggleUpdate.checked) {
           // Trigger real update check from server (debug mode uses v0.0.9)
           if (ctx.ws && ctx.connected) {
             ctx.ws.send(JSON.stringify({ type: "check_update" }));
           }
         } else {
-          banner.classList.add("hidden");
+          pillWrap.classList.add("hidden");
         }
         refreshIcons();
       });
@@ -635,10 +622,10 @@ export function initNotifications(_ctx) {
           if (!onboardingText.innerHTML.trim()) {
             showOnboarding(
               iconHtml("bell-ring") +
-              ' Get alerts on your phone when Claude is done. <a href="/setup">Set up HTTPS</a>'
+              ' <a href="/setup">Set up HTTPS</a>'
             );
           } else {
-            onboardingBanner.classList.remove("hidden");
+            onboardingPill.classList.remove("hidden");
           }
         } else {
           hideOnboarding();