clay-server 2.7.2 → 2.8.2

package/lib/public/modules/stt.js

@@ -0,0 +1,272 @@
+// Speech-to-Text module using Web Speech API
+// Uses browser's built-in speech recognition (Chrome/Edge/Safari → Google servers)
+
+import { iconHtml, refreshIcons } from './icons.js';
+import { autoResize } from './input.js';
+
+var ctx;
+
+// --- State ---
+var recording = false;
+var recognition = null;
+var selectedLang = null;
+var textBeforeSTT = '';
+var interimText = '';
+
+// DOM refs
+var sttBtn = null;
+var langPopover = null;
+
+// --- Language options ---
+// Web Speech API uses BCP-47 language tags
+var LANGUAGES = [
+  { code: 'en-US', name: 'English' },
+  { code: 'ko-KR', name: 'Korean' },
+  { code: 'ja-JP', name: 'Japanese' },
+  { code: 'zh-CN', name: 'Chinese' },
+  { code: 'es-ES', name: 'Spanish' },
+  { code: 'fr-FR', name: 'French' },
+  { code: 'de-DE', name: 'German' },
+];
+
+// --- Persist language choice ---
+function saveLang(code) {
+  try { localStorage.setItem('stt-lang', code); } catch (e) { /* ignore */ }
+}
+
+function loadLang() {
+  try { return localStorage.getItem('stt-lang'); } catch (e) { return null; }
+}
+
+// --- Check browser support ---
+function getSpeechRecognition() {
+  return window.SpeechRecognition || window.webkitSpeechRecognition || null;
+}
+
+// --- Init ---
+export function initSTT(_ctx) {
+  ctx = _ctx;
+
+  sttBtn = document.getElementById('stt-btn');
+  if (!sttBtn) return;
+
+  if (!getSpeechRecognition()) {
+    sttBtn.style.display = 'none';
+    console.warn('[STT] Web Speech API not supported in this browser');
+    return;
+  }
+
+  // Restore saved language
+  selectedLang = loadLang();
+
+  sttBtn.addEventListener('click', function(e) {
+    e.stopPropagation();
+
+    if (recording) {
+      stopRecording();
+      return;
+    }
+
+    if (!selectedLang) {
+      showLangPopover();
+    } else {
+      startRecording();
+    }
+  });
+
+  // Right-click to change language
+  sttBtn.addEventListener('contextmenu', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (recording) stopRecording();
+    showLangPopover();
+  });
+}
+
+// --- Language popover ---
+function showLangPopover() {
+  if (langPopover) {
+    hideLangPopover();
+    return;
+  }
+
+  langPopover = document.createElement('div');
+  langPopover.className = 'stt-lang-popover';
+
+  var html = '<div class="stt-lang-title">Voice Input Language</div>';
+  for (var i = 0; i < LANGUAGES.length; i++) {
+    var l = LANGUAGES[i];
+    var activeClass = (selectedLang === l.code) ? ' stt-lang-active' : '';
+    html += '<button class="stt-lang-option' + activeClass + '" data-lang="' + l.code + '">' +
+      '<span class="stt-lang-name">' + l.name + '</span>' +
+      '</button>';
+  }
+  langPopover.innerHTML = html;
+
+  langPopover.querySelectorAll('.stt-lang-option').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      onLangSelected(btn.dataset.lang);
+    });
+  });
+
+  var wrapper = document.getElementById('input-wrapper');
+  wrapper.appendChild(langPopover);
+
+  setTimeout(function() {
+    document.addEventListener('click', closeLangOnOutside);
+  }, 0);
+}
+
+function closeLangOnOutside(e) {
+  if (langPopover && !langPopover.contains(e.target) && e.target !== sttBtn && !sttBtn.contains(e.target)) {
+    hideLangPopover();
+  }
+}
+
+function hideLangPopover() {
+  if (langPopover) {
+    langPopover.remove();
+    langPopover = null;
+  }
+  document.removeEventListener('click', closeLangOnOutside);
+}
+
+function onLangSelected(code) {
+  selectedLang = code;
+  saveLang(code);
+  hideLangPopover();
+  startRecording();
+}
+
+// --- Recording ---
+function startRecording() {
+  if (recording) return;
+
+  var SpeechRecognition = getSpeechRecognition();
+  if (!SpeechRecognition) return;
+
+  recognition = new SpeechRecognition();
+  recognition.lang = selectedLang || 'en-US';
+  recognition.continuous = true;
+  recognition.interimResults = true;
+
+  textBeforeSTT = ctx.inputEl.value;
+  interimText = '';
+
+  recognition.onresult = function(e) {
+    var final = '';
+    var interim = '';
+
+    for (var i = 0; i < e.results.length; i++) {
+      var result = e.results[i];
+      if (result.isFinal) {
+        final += result[0].transcript;
+      } else {
+        interim += result[0].transcript;
+      }
+    }
+
+    var text = textBeforeSTT;
+    if (final) {
+      if (text && text.length > 0 && text[text.length - 1] !== ' ' && text[text.length - 1] !== '\n') {
+        text += ' ';
+      }
+      text += final;
+    }
+    if (interim) {
+      if (text && text.length > 0 && text[text.length - 1] !== ' ' && text[text.length - 1] !== '\n') {
+        text += ' ';
+      }
+      text += interim;
+    }
+
+    ctx.inputEl.value = text;
+    autoResize();
+  };
+
+  recognition.onerror = function(e) {
+    console.error('[STT] Recognition error:', e.error);
+    if (e.error === 'not-allowed') {
+      if (ctx.addSystemMessage) {
+        ctx.addSystemMessage('Microphone access denied.\n\nTo fix: click the lock icon in the address bar → Site settings → Microphone → Allow, then reload.', true);
+      }
+      stopRecording();
+    } else if (e.error === 'no-speech') {
+      // Silence — just keep listening
+    } else if (e.error === 'network') {
+      if (ctx.addSystemMessage) {
+        ctx.addSystemMessage('Speech recognition unavailable.\n\nWeb Speech API sends audio to Google servers for recognition. Some Chromium forks (Arc, Brave) block this connection.\n\nSupported: Chrome, Edge, Safari 14.1+, Samsung Internet\nNot supported: Arc, Brave, Firefox', true);
+      }
+      stopRecording();
+    }
+  };
+
+  recognition.onend = function() {
+    // Auto-restart if still recording (browser may stop after silence)
+    if (recording) {
+      // Save confirmed text so far
+      textBeforeSTT = ctx.inputEl.value;
+      try {
+        recognition.start();
+      } catch (e) {
+        // Already started or other error
+        stopRecording();
+      }
+    }
+  };
+
+  try {
+    recognition.start();
+    recording = true;
+    sttBtn.classList.add('stt-active');
+    sttBtn.innerHTML =
+      '<span class="stt-wave">' +
+        '<span class="stt-wave-bar"></span>' +
+        '<span class="stt-wave-bar"></span>' +
+        '<span class="stt-wave-bar"></span>' +
+        '<span class="stt-wave-bar"></span>' +
+        '<span class="stt-wave-bar"></span>' +
+      '</span>' +
+      '<span class="stt-stop-label">Stop</span>';
+    ctx.inputEl.setAttribute('placeholder', 'Listening...');
+  } catch (err) {
+    console.error('[STT] Failed to start:', err);
+    if (ctx.addSystemMessage) {
+      ctx.addSystemMessage('Failed to start voice input: ' + err.message, true);
+    }
+  }
+}
+
+function stopRecording() {
+  if (!recording) return;
+  recording = false;
+
+  if (recognition) {
+    try { recognition.stop(); } catch (e) { /* ignore */ }
+    recognition = null;
+  }
+
+  sttBtn.classList.remove('stt-active');
+  sttBtn.innerHTML = iconHtml('mic');
+  refreshIcons();
+  ctx.inputEl.setAttribute('placeholder', 'Message Claude Code...');
+}
+
+// --- External lang setter (used by profile module) ---
+export function setSTTLang(code) {
+  selectedLang = code;
+  saveLang(code);
+}
+
+export function getSTTLang() {
+  return selectedLang;
+}
+
+// --- Exports ---
+export function isSTTRecording() {
+  return recording;
+}
+
+export function isSTTInitializing() {
+  return false;
+}

package/lib/public/modules/terminal.js

@@ -239,6 +239,20 @@ function createXtermForTab(tab) {
     }
   });
 
+  // Ctrl+V paste for Firefox (Firefox blocks xterm.js clipboard access)
+  bodyEl.addEventListener("keydown", function (e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+      e.preventDefault();
+      if (navigator.clipboard && navigator.clipboard.readText) {
+        navigator.clipboard.readText().then(function (text) {
+          if (text && ctx.ws && ctx.connected) {
+            ctx.ws.send(JSON.stringify({ type: "term_input", id: tab.id, data: text }));
+          }
+        }).catch(function () { /* permission denied or not available */ });
+      }
+    }
+  });
+
   // Right-click context menu
   bodyEl.addEventListener("contextmenu", function (e) {
     showTermCtxMenu(e, tab);
@@ -599,6 +613,24 @@ function showTermCtxMenu(e, tab) {
   });
   menu.appendChild(copyItem);
 
+  // Paste
+  var pasteItem = document.createElement("button");
+  pasteItem.className = "term-ctx-item";
+  pasteItem.innerHTML = iconHtml("clipboard-paste") + " <span>Paste</span>";
+  pasteItem.addEventListener("click", function (ev) {
+    ev.stopPropagation();
+    closeTermCtxMenu();
+    if (!tab.xterm) return;
+    if (navigator.clipboard && navigator.clipboard.readText) {
+      navigator.clipboard.readText().then(function (text) {
+        if (text && ctx.ws && ctx.connected) {
+          ctx.ws.send(JSON.stringify({ type: "term_input", id: tab.id, data: text }));
+        }
+      }).catch(function () { /* permission denied or not available */ });
+    }
+  });
+  menu.appendChild(pasteItem);
+
   // Clear
   var clearItem = document.createElement("button");
   clearItem.className = "term-ctx-item";

package/lib/public/modules/theme.js

@@ -370,17 +370,10 @@ export function applyTheme(themeId, fromPicker) {
   }
 }
 
-// --- Mascot icon update (swap light/dark src) ---
+// --- Favicon update on theme change ---
 function updateMascotSvgs(vars, isLight) {
-  var lightSrc = "favicon.svg";
-  var darkSrc = "favicon-dark.svg";
-  var src = isLight ? lightSrc : darkSrc;
-  var mascots = document.querySelectorAll("img.footer-mascot");
-  for (var i = 0; i < mascots.length; i++) {
-    mascots[i].setAttribute("src", src);
-  }
-  var faviconEl = document.querySelector('link[rel="icon"][type="image/svg+xml"]');
-  if (faviconEl) faviconEl.setAttribute("href", src);
+  var faviconEl = document.querySelector('link[rel="icon"][type="image/png"]');
+  if (faviconEl) faviconEl.setAttribute("href", "favicon-banded.png");
 }
 
 // --- Theme loading from server ---

package/lib/public/style.css

@@ -15,3 +15,9 @@
 @import url("css/skills.css");
 @import url("css/mobile-nav.css");
 @import url("css/loop.css");
+@import url("css/scheduler.css");
+@import url("css/scheduler-modal.css");
+@import url("css/home-hub.css");
+@import url("css/playbook.css");
+@import url("css/stt.css");
+@import url("css/profile.css");

package/lib/public/sw.js

@@ -1,11 +1,88 @@
-self.addEventListener("install", function () {
-  self.skipWaiting();
+var CACHE_NAME = "clay-offline-v1";
+
+self.addEventListener("install", function (event) {
+  event.waitUntil(self.skipWaiting());
 });
 
 self.addEventListener("activate", function (event) {
-  event.waitUntil(self.clients.claim());
+  // Clean up old cache versions
+  event.waitUntil(
+    caches.keys().then(function (names) {
+      return Promise.all(
+        names.filter(function (n) { return n !== CACHE_NAME; })
+          .map(function (n) { return caches.delete(n); })
+      );
+    }).then(function () {
+      return self.clients.claim();
+    })
+  );
+});
+
+// --- Offline cache: network-first, cache-fallback ---
+
+function shouldCache(request, response) {
+  if (request.method !== "GET") return false;
+  if (!response || !response.ok) return false;
+  // Cache same-origin static assets and CDN resources (jsdelivr, fonts)
+  var url = new URL(request.url);
+  if (url.origin === self.location.origin) return true;
+  if (url.hostname === "cdn.jsdelivr.net") return true;
+  if (url.hostname === "fonts.googleapis.com") return true;
+  if (url.hostname === "fonts.gstatic.com") return true;
+  return false;
+}
+
+self.addEventListener("fetch", function (event) {
+  var request = event.request;
+
+  // Only handle GET requests
+  if (request.method !== "GET") return;
+
+  // Skip WebSocket upgrade requests and API/data endpoints
+  var url = new URL(request.url);
+  if (url.pathname.indexOf("/ws") !== -1) return;
+  if (url.pathname.indexOf("/api/") !== -1) return;
+
+  event.respondWith(
+    fetch(request).then(function (response) {
+      // Network succeeded: cache a clone for offline use
+      if (shouldCache(request, response)) {
+        var clone = response.clone();
+        caches.open(CACHE_NAME).then(function (cache) {
+          cache.put(request, clone);
+        });
+      }
+      return response;
+    }).catch(function () {
+      // Network failed: serve from cache
+      return caches.match(request).then(function (cached) {
+        if (cached) return cached;
+
+        // For navigation requests, serve cached index.html as fallback
+        // (handles /p/slug/ routes that all serve the same SPA shell)
+        if (request.mode === "navigate") {
+          return caches.match("/index.html").then(function (indexCached) {
+            // If even the index page is not cached, show a minimal offline page
+            if (indexCached) return indexCached;
+            return new Response(
+              "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Clay</title>" +
+              "<style>body{margin:0;background:#000;color:#888;display:flex;" +
+              "align-items:center;justify-content:center;height:100vh;" +
+              "font-family:monospace;font-size:1.2em}</style></head>" +
+              "<body><p>Waiting for server&hellip;</p></body></html>",
+              { headers: { "Content-Type": "text/html" } }
+            );
+          });
+        }
+        // Non-navigation request with no cache: return network error
+        return new Response("", { status: 503, statusText: "Offline" });
+      });
+    })
+  );
 });
 
+// --- Push notifications ---
+
 self.addEventListener("push", function (event) {
   var data = {};
   try { data = event.data.json(); } catch (e) { return; }
@@ -46,6 +123,8 @@ self.addEventListener("push", function (event) {
   );
 });
 
+// --- Notification click ---
+
 self.addEventListener("notificationclick", function (event) {
   var data = event.notification.data || {};
   event.notification.close();