claude-simple 0.2.3 → 0.2.5

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "claude-simple",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",
-    "claude-simple-client": "client.js"
+    "claude-simple-client": "client.js",
+    "claude-simple-edge": "bin/edge-ctl.js",
+    "claude-edge": "bin/edge-ctl.js",
+    "edge-daemon": "bin/edge-ctl.js"
   },
   "files": [
     "server.js",
     "client.js",
     "gateway.js",
+    "bin",
     "src",
     "dist",
     "public"

package/public/app.js

@@ -11,6 +11,7 @@ import { initImagePaste } from './chat.js';
 import { initMetaAgent } from './agent-panel.js';
 import { initRouter, applyInitialRoute, parseHashPath } from './router.js';
 import { initPwa } from './pwa.js';
+import { initMobileChrome } from './mobile.js';
 
 function markBootReady() {
   const root = document.documentElement;
@@ -28,6 +29,7 @@ const restoreSession = shouldRestoreSessionOnBoot() || !!(ctx.token && deepLink?
 
 // 1. Build DOM (welcome already suppressed via html.boot-restore CSS when restoring)
 initShell({ restoreSession });
+initMobileChrome();
 
 // 2. Feature panels
 initChat();
@@ -85,8 +87,16 @@ initRouter(resumeSession, switchTab);
     }
   } else {
     clearBootRestore();
-    await initAuth();
-    markBootReady();
+    try {
+      await initAuth();
+    } catch (e) {
+      // A failed status probe must never leave the installed app with its
+      // whole UI hidden behind boot-pending. initAuth normally handles
+      // connection failures itself; this is the last-resort guard.
+      console.error('[boot auth]', e);
+    } finally {
+      markBootReady();
+    }
   }
 })();
 

package/public/chat.js

@@ -3,7 +3,7 @@ import { watch, delegate, esc, $ } from './lib.js';
 import { ctx, isProcessing, currentProject, currentTab, currentModel, currentEffort, currentPermission,
          currentAgent, setAgent, AGENT_LABELS, getDefaultModel, getModelsForAgent, getEffortsForModel,
          addCustomModel, chatDensity, wsStatus } from './state.js';
-import { sendWs, api, flushWsQueue, clearWsQueue } from './api.js';
+import { sendWs, api, authHeaders, flushWsQueue, clearWsQueue } from './api.js';
 import { initWakeLock, setWakeLockDesired } from './wake-lock.js';
 
 function assistantLabel() {
@@ -706,6 +706,7 @@ export function sendMessage() {
     input.value = '';
     autoResize(input);
     updateInputMode('');
+    clearPendingAttachments();
     appendSystemMsg(`已排队下一条，当前回复结束后发送：${text.length > 80 ? text.slice(0, 80) + '…' : text}`);
     return;
   }
@@ -713,6 +714,7 @@ export function sendMessage() {
   input.value = '';
   autoResize(input);
   updateInputMode('');
+  clearPendingAttachments();
 
   if (text.startsWith('/')) {
     if (handleSlashCommand(text)) {
@@ -723,7 +725,7 @@ export function sendMessage() {
   isProcessing.value = true;
   syncWakeLock();
   const now = Date.now();
-  if (text.startsWith('!')) {
+  if (isShellInput(text)) {
     appendMsg('shell', '$ Shell', text.slice(1).trim(), { ts: now });
     // Typed control plane (legacy shell-command still accepted server-side)
     const ok = sendWs({
@@ -776,7 +778,7 @@ export function newSession() {
 
 // ── Input helpers ─────────────────────────────────────────────────────────────
 function updateInputMode(value) {
-  const isShell = value.startsWith('!');
+  const isShell = isShellInput(value);
   const input = $('chat-input'), btn = $('send-btn');
   if (!input || !btn) return;
   input.classList.toggle('textarea-warning', isShell);
@@ -785,15 +787,26 @@ function updateInputMode(value) {
   btn.classList.toggle('btn-primary', !isShell);
   btn.textContent = isShell ? 'Run' : 'Send';
   const label = AGENT_LABELS[currentAgent.peek()] || 'agent';
-  input.placeholder = isShell ? 'Shell command (without !)…' : `Ask ${label}… or !cmd for shell`;
+  const compact = typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches;
+  if (isShell) {
+    input.placeholder = compact ? 'Shell 命令…' : 'Shell command (without !)…';
+  } else {
+    input.placeholder = compact ? `问 ${label}…` : `Ask ${label}… or !cmd for shell`;
+  }
+}
+
+/** `![img](path)` is an attachment reference, not a shell command. */
+function isShellInput(value) {
+  const text = String(value || '').trimStart();
+  return text.startsWith('!') && !/^!\[[^\]]*\]\([^)]+\)/.test(text);
 }
 
 function chatInputMaxHeight() {
   // Keep in sync with #chat-input max-height in style.css (mobile vs desktop).
   if (typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches) {
-    return 96;
+    return 72;
   }
-  return 140;
+  return 72;
 }
 
 function autoResize(el) {
@@ -899,74 +912,237 @@ export function appendMsg(role, _label, text, opts = {}) {
 
 export function appendSystemMsg(text) { appendMsg('system', '', text); }
 
-async function uploadImageBlob(blob, filename) {
+/** Pending chat attachments shown above the input (paths also inserted into text). */
+const pendingAttachments = [];
+let attachSeq = 0;
+let chatDropBound = false;
+
+async function uploadChatBlob(blob, filename) {
+  const name = filename || `upload-${Date.now()}`;
+  const uploadBlob = await normalizeImageBlob(blob, name);
+  const headers = authHeaders({ 'x-filename': name });
+  delete headers['Content-Type'];
+  // Prefer file MIME so hub base64-encodes binary uploads correctly.
+  if (uploadBlob?.type && !headers['Content-Type'] && !headers['content-type']) {
+    headers['Content-Type'] = uploadBlob.type;
+  }
   const res = await fetch('/api/upload-image', {
     method: 'POST',
-    headers: { Authorization: `Bearer ${ctx.token}`, 'x-filename': filename },
-    body: blob,
+    headers,
+    body: uploadBlob,
   });
-  if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
-  return (await res.json()).path;
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error || `Upload failed: ${res.status}`);
+  }
+  const data = await res.json();
+  if (!data?.path) throw new Error('upload returned no path');
+  return data.path;
+}
+
+function imageMimeFromBytes(bytes, fallback) {
+  if (bytes.length >= 8 && bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) return 'image/png';
+  if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) return 'image/jpeg';
+  if (bytes.length >= 6 && String.fromCharCode(...bytes.slice(0, 6)) === 'GIF87a') return 'image/gif';
+  if (bytes.length >= 12 && String.fromCharCode(...bytes.slice(8, 12)) === 'WEBP') return 'image/webp';
+  return fallback || 'image/png';
+}
+
+/** Some iOS share sheets provide a .png whose bytes are Base64 text. Decode it once
+ * before both upload and preview, while leaving ordinary image files untouched. */
+async function normalizeImageBlob(blob, filename) {
+  if (!blob || !isImageFile({ type: blob.type, name: filename })) return blob;
+  let head;
+  try { head = (await blob.slice(0, 80).text()).trim(); } catch { return blob; }
+  // Avoid reading an entire multi-megabyte ordinary photo into a JS string.
+  if (!/^(?:data:image\/[a-z0-9.+-]+;base64,|iVBORw0KGgo|\/9j\/|R0lGOD|UklGR)/i.test(head)) return blob;
+  let text;
+  try { text = (await blob.text()).trim(); } catch { return blob; }
+  const dataUrl = /^data:image\/[a-z0-9.+-]+;base64,([a-z0-9+/=\s]+)$/i.exec(text);
+  const payload = dataUrl?.[1] || text;
+  if (!payload || !/^[a-z0-9+/=\s]+$/i.test(payload) || payload.length % 4 === 1) return blob;
+  try {
+    const binary = atob(payload.replace(/\s/g, ''));
+    const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
+    const mime = imageMimeFromBytes(bytes, blob.type);
+    // A valid Base64 string alone is not enough: only replace it when it decodes
+    // to an actual image signature.
+    if (mime === (blob.type || 'image/png') && !/^(image\/png|image\/jpeg|image\/gif|image\/webp)$/.test(mime)) return blob;
+    const isImage = bytes.length >= 3 && (
+      (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e)
+      || (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff)
+      || String.fromCharCode(...bytes.slice(0, 6)) === 'GIF87a'
+      || String.fromCharCode(...bytes.slice(8, 12)) === 'WEBP'
+    );
+    return isImage ? new Blob([bytes], { type: mime }) : blob;
+  } catch {
+    return blob;
+  }
 }
 
 function insertAtCursor(ta, text) {
-  const s = ta.selectionStart, e = ta.selectionEnd;
-  ta.value = ta.value.slice(0, s) + text + ta.value.slice(e);
-  ta.selectionStart = ta.selectionEnd = s + text.length;
+  if (!ta) return;
+  const s = ta.selectionStart ?? ta.value.length;
+  const e = ta.selectionEnd ?? ta.value.length;
+  const padBefore = s > 0 && ta.value[s - 1] !== '\n' ? '\n' : '';
+  const insert = padBefore + text + '\n';
+  ta.value = ta.value.slice(0, s) + insert + ta.value.slice(e);
+  ta.selectionStart = ta.selectionEnd = s + insert.length;
   ta.dispatchEvent(new Event('input'));
 }
 
+function isImageFile(file) {
+  if (!file) return false;
+  if (file.type && file.type.startsWith('image/')) return true;
+  return /\.(png|jpe?g|gif|webp|bmp|svg|heic|heif|avif)$/i.test(file.name || '');
+}
+
+function makeAttachRef(file, path) {
+  const name = file?.name || path.split('/').pop() || 'file';
+  if (isImageFile(file)) {
+    attachSeq += 1;
+    const label = `img${attachSeq}`;
+    return { ref: `![${label}](${path})`, label, kind: 'image' };
+  }
+  attachSeq += 1;
+  const label = `file${attachSeq}`;
+  return { ref: `[${label}](${path})`, label, kind: 'file' };
+}
+
+function clearPendingAttachments() {
+  for (const item of pendingAttachments) {
+    if (item.previewUrl) {
+      try { URL.revokeObjectURL(item.previewUrl); } catch { /* ignore */ }
+    }
+  }
+  pendingAttachments.length = 0;
+  renderAttachBar();
+}
+
+function renderAttachBar() {
+  const bar = $('chat-attach-bar');
+  if (!bar) return;
+  if (!pendingAttachments.length) {
+    bar.classList.add('hidden');
+    bar.innerHTML = '';
+    return;
+  }
+  bar.classList.remove('hidden');
+  bar.innerHTML = pendingAttachments.map((item, i) => `
+    <div class="chat-thumb relative" title="${esc(item.ref || item.path)}">
+      ${item.previewUrl
+        ? `<img src="${item.previewUrl}" alt="${esc(item.label || 'img')}">`
+        : `<span class="chat-thumb-path">${esc(item.label || item.name || 'file')}</span>`}
+      <span class="chat-thumb-label">${esc(item.label || item.kind || '')}</span>
+      <button type="button" class="chat-thumb-x" data-rm-attach="${i}" aria-label="remove">✕</button>
+    </div>`).join('');
+}
+
+async function addChatAttachment(file) {
+  if (!file) return;
+  const name = file.name || `upload-${Date.now()}`;
+  const normalized = await normalizeImageBlob(file, name);
+  const path = await uploadChatBlob(normalized, name);
+  const { ref, label, kind } = makeAttachRef(file, path);
+  let previewUrl = '';
+  if (kind === 'image') {
+    try { previewUrl = URL.createObjectURL(normalized); } catch { /* ignore */ }
+  }
+  pendingAttachments.push({ path, ref, label, kind, name, previewUrl });
+  renderAttachBar();
+  insertAtCursor($('chat-input'), ref);
+  return path;
+}
+
+async function uploadFilesList(fileList) {
+  const files = [...(fileList || [])].filter(Boolean);
+  if (!files.length) return;
+  const ta = $('chat-input');
+  if (ta) ta.disabled = true;
+  try {
+    for (const file of files) {
+      try {
+        await addChatAttachment(file);
+      } catch (err) {
+        appendSystemMsg(`上传失败 ${file.name || 'file'}: ${err.message}`);
+      }
+    }
+  } finally {
+    if (ta) {
+      ta.disabled = false;
+      ta.focus();
+    }
+  }
+}
+
+/** Open file picker (images + any files). */
+export function attachImage() {
+  const input = $('chat-file-input');
+  if (input) {
+    input.value = '';
+    input.click();
+    return;
+  }
+  const fallback = document.createElement('input');
+  fallback.type = 'file';
+  fallback.accept = 'image/*,*/*';
+  fallback.multiple = true;
+  fallback.addEventListener('change', () => uploadFilesList(fallback.files));
+  fallback.click();
+}
+
 export function initImagePaste() {
   document.addEventListener('paste', async e => {
     const ta = $('chat-input');
-    if (!ta || document.activeElement !== ta) return;
+    if (!ta) return;
+    // Accept paste when focusing input, or when composer is active
+    const composer = $('chat-composer');
+    const inComposer = composer && (composer.contains(document.activeElement) || document.activeElement === ta);
+    if (!inComposer && document.activeElement !== ta) return;
+
     const items = [...(e.clipboardData?.items || [])];
-    const imageItem = items.find(i => i.type.startsWith('image/'));
-    if (!imageItem) return;
-    e.preventDefault();
-    const blob = imageItem.getAsFile();
-    const ext  = imageItem.type.split('/')[1] || 'png';
-    const name = `paste-${Date.now()}.${ext}`;
-    ta.disabled = true;
-    try {
-      const path = await uploadImageBlob(blob, name);
-      insertAtCursor(ta, `![${name}](${path})`);
-    } catch (err) {
-      appendSystemMsg(`Image paste failed: ${err.message}`);
-    } finally {
-      ta.disabled = false;
-      ta.focus();
+    const files = [];
+    for (const it of items) {
+      if (it.kind === 'file') {
+        const f = it.getAsFile();
+        if (f) files.push(f);
+      }
     }
+    // Prefer image paste; also allow non-image files from clipboard when present
+    const imageFiles = files.filter(f => isImageFile(f));
+    const pick = imageFiles.length ? imageFiles : files;
+    if (!pick.length) return;
+    e.preventDefault();
+    await uploadFilesList(pick);
   });
-}
 
-export function attachImage() {
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = 'image/*';
-  input.multiple = true;
-  input.addEventListener('change', async () => {
-    for (const file of input.files) {
-      appendSystemMsg(`Uploading ${file.name}…`);
-      try {
-        const res = await fetch('/api/upload-image', {
-          method: 'POST',
-          headers: { Authorization: `Bearer ${ctx.token}`, 'x-filename': file.name },
-          body: file,
-        });
-        const { path } = await res.json();
-        // Insert path reference into chat input
-        const ta = $('chat-input');
-        if (ta) {
-          ta.value += (ta.value ? '\n' : '') + path;
-          ta.dispatchEvent(new Event('input'));
-          ta.focus();
-        }
-        appendSystemMsg(`📎 ${path}`);
-      } catch (e) { appendSystemMsg(`Upload failed: ${e.message}`); }
+  if (chatDropBound) return;
+  chatDropBound = true;
+  document.addEventListener('dragover', e => {
+    const composer = $('chat-composer');
+    if (!composer || !e.dataTransfer?.types?.includes('Files')) return;
+    if (!composer.contains(e.target) && e.target !== composer) return;
+    e.preventDefault();
+    composer.classList.add('chat-drop-active');
+  });
+  document.addEventListener('dragleave', e => {
+    const composer = $('chat-composer');
+    if (!composer) return;
+    if (e.target === composer || composer.contains(e.target)) {
+      // leaving to outside
+      if (!composer.contains(e.relatedTarget)) composer.classList.remove('chat-drop-active');
     }
   });
-  input.click();
+  document.addEventListener('drop', async e => {
+    const composer = $('chat-composer');
+    if (!composer) return;
+    composer.classList.remove('chat-drop-active');
+    if (!composer.contains(e.target) && e.target !== composer) return;
+    const files = [...(e.dataTransfer?.files || [])];
+    if (!files.length) return;
+    e.preventDefault();
+    await uploadFilesList(files);
+  });
 }
 
 function fmtNum(n) { return n >= 1000 ? `${(n/1000).toFixed(1)}k` : String(n); }
@@ -975,8 +1151,8 @@ function appendTokenBar(text) {
   const msgs = $('messages');
   if (!msgs) return;
   msgs.insertAdjacentHTML('beforeend',
-    `<div class="flex items-center gap-1.5 px-1 py-0.5 text-[10px] font-mono text-base-content/30 select-none">
-       <span class="text-base-content/20">◈</span>${esc(text)}
+    `<div class="token-bar select-none">
+       <span class="token-bar-mark">◈</span><span class="token-bar-text">${esc(text)}</span>
      </div>`);
   stickBottom(msgs);
 }
@@ -1308,13 +1484,47 @@ export function initChat() {
 
   watch(chatDensity, () => applyChatDensity());
 
-  // Chat input: Enter = send, auto-resize, shell mode styling
+  // Chat input: ⌘/Ctrl+Enter = send. On phones, Enter sends (Shift+Enter newline).
   delegate.on('keydown', '#chat-input', e => {
-    const send = e.key === 'Enter' && (e.metaKey || e.ctrlKey);
-    if (send) { e.preventDefault(); sendMessage(); }
+    if (e.key !== 'Enter') return;
+    const combo = e.metaKey || e.ctrlKey;
+    const phone = window.matchMedia('(max-width: 640px)').matches && !e.shiftKey && !combo;
+    if (combo || phone) { e.preventDefault(); sendMessage(); }
+  });
+  delegate.on('submit', '#chat-form', e => {
+    e.preventDefault();
+    sendMessage();
   });
   delegate.on('input',   '#chat-input', (e, el) => { autoResize(el); updateInputMode(el.value); });
 
+  // Attach images / files
+  delegate.on('click', '#btn-attach', e => {
+    e.preventDefault();
+    attachImage();
+  });
+  delegate.on('change', '#chat-file-input', (e, el) => {
+    const files = el?.files;
+    if (files?.length) uploadFilesList(files);
+    if (el) el.value = '';
+  });
+  delegate.on('click', '[data-rm-attach]', (e, el) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const i = parseInt(el.dataset.rmAttach, 10);
+    if (Number.isNaN(i) || i < 0 || i >= pendingAttachments.length) return;
+    const item = pendingAttachments[i];
+    if (item?.previewUrl) {
+      try { URL.revokeObjectURL(item.previewUrl); } catch { /* ignore */ }
+    }
+    const ta = $('chat-input');
+    if (ta && item?.ref) {
+      ta.value = ta.value.split(item.ref).join('').replace(/\n{3,}/g, '\n\n');
+      ta.dispatchEvent(new Event('input'));
+    }
+    pendingAttachments.splice(i, 1);
+    renderAttachBar();
+  });
+
   // Permission buttons → approval.respond (typed control plane)
   delegate.on('click', '[data-perm-id]', (e, el) => {
     sendWs({

package/public/index.html

@@ -27,6 +27,24 @@
     html.boot-ready #root {
       visibility: visible !important;
     }
+    /* If a cached/incomplete module cannot start, do not leave a standalone
+       iOS/Android window as a featureless dark screen. */
+    #boot-fallback {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1.5rem;
+      background: #0f172a;
+      color: #e2e8f0;
+      font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      text-align: center;
+    }
+    #boot-fallback-error { display: none; }
+    html.boot-ready #boot-fallback { display: none; }
+    html.boot-timeout #boot-fallback-loading { display: none; }
+    html.boot-timeout #boot-fallback-error { display: block; }
     /* Session deep-link: never show welcome calendar during boot */
     html.boot-restore #welcome {
       display: none !important;
@@ -45,7 +63,7 @@
       display: none !important;
     }
   </style>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
   <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
   <meta name="theme-color" content="#0f172a">
   <meta name="color-scheme" content="dark light">
@@ -65,10 +83,22 @@
   <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
   <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
-  <link rel="stylesheet" href="style.css?v=ui-9">
+  <link rel="stylesheet" href="style.css?v=ui-10">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
   <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>
-  <script type="module" src="app.js?v=ui-9"></script>
+  <div id="boot-fallback" role="status" aria-live="polite">
+    <div id="boot-fallback-loading">正在打开 Agent UI…</div>
+    <div id="boot-fallback-error">应用未能完成加载。请确认网络和服务可用，然后刷新或从主屏幕重新打开。</div>
+  </div>
+  <script>
+    setTimeout(function () {
+      if (document.documentElement.classList.contains('boot-pending')
+        && !document.documentElement.classList.contains('boot-ready')) {
+        document.documentElement.classList.add('boot-timeout');
+      }
+    }, 10000);
+  </script>
+  <script type="module" src="app.js?v=ui-10"></script>
 </body>
 </html>

package/public/mobile.js

@@ -0,0 +1,72 @@
+// mobile.js — visual viewport (iOS keyboard) + isolate hidden form fields
+// Safari's accessory bar / "Not Secure" chrome cannot be painted over from the page.
+
+function setInert(el, on) {
+  if (!el) return;
+  if (on) el.setAttribute('inert', '');
+  else el.removeAttribute('inert');
+}
+
+function isHidden(el) {
+  if (!el) return true;
+  if (el.classList.contains('hidden')) return true;
+  const d = el.style.display;
+  return d === 'none';
+}
+
+/** Keep iOS form-assistant from tabbing through off-screen / hidden inputs. */
+export function syncFocusScope() {
+  const mobile = typeof window !== 'undefined'
+    && window.matchMedia('(max-width: 640px)').matches;
+
+  const sidebar = document.getElementById('sidebar');
+  if (sidebar) {
+    const open = !mobile || sidebar.classList.contains('open');
+    setInert(sidebar, !open);
+  }
+
+  setInert(document.getElementById('welcome'), isHidden(document.getElementById('welcome')));
+  setInert(document.getElementById('auth-screen'), isHidden(document.getElementById('auth-screen')));
+  setInert(document.getElementById('chat-opts'), isHidden(document.getElementById('chat-opts')));
+  setInert(document.getElementById('machine-picker'), isHidden(document.getElementById('machine-picker')));
+
+  for (const id of ['files', 'git', 'shell', 'memory']) {
+    const el = document.getElementById(`tab-${id}`);
+    setInert(el, isHidden(el));
+  }
+
+  const chat = document.getElementById('tab-chat');
+  if (chat) setInert(chat, isHidden(chat));
+}
+
+function applyVisualViewport() {
+  const vv = window.visualViewport;
+  const root = document.documentElement;
+  if (!vv) return;
+
+  const keyboardish = vv.height < window.innerHeight - 80;
+  root.classList.toggle('vv-keyboard', keyboardish);
+  root.style.setProperty('--vvh', `${Math.round(vv.height)}px`);
+  root.style.setProperty('--vv-top', `${Math.round(vv.offsetTop)}px`);
+}
+
+export function initMobileChrome() {
+  syncFocusScope();
+  applyVisualViewport();
+
+  const vv = window.visualViewport;
+  if (vv) {
+    vv.addEventListener('resize', applyVisualViewport);
+    vv.addEventListener('scroll', applyVisualViewport);
+  }
+  window.addEventListener('resize', () => {
+    applyVisualViewport();
+    syncFocusScope();
+  });
+  window.addEventListener('orientationchange', () => {
+    setTimeout(() => {
+      applyVisualViewport();
+      syncFocusScope();
+    }, 250);
+  });
+}

package/public/pwa.js

@@ -11,6 +11,24 @@ function isStandalone() {
   );
 }
 
+function isIpHost(host) {
+  const h = String(host || '').replace(/^\[|\]$/g, '');
+  if (/^\d{1,3}(\.\d{1,3}){3}$/.test(h)) return true;
+  // Bare IPv6 (no zone id)
+  if (h.includes(':') && /^[0-9a-f:]+$/i.test(h)) return true;
+  return false;
+}
+
+/** SW requires a trusted TLS cert. IP + self-signed HTTPS always fails fetch(sw.js). */
+function canRegisterSw() {
+  if (!('serviceWorker' in navigator)) return false;
+  if (!window.isSecureContext) return false;
+  const host = location.hostname;
+  if (host === 'localhost' || host === '127.0.0.1' || host === '::1') return true;
+  if (isIpHost(host)) return false;
+  return location.protocol === 'https:';
+}
+
 function showInstallButton() {
   document.getElementById('btn-pwa-install')?.classList.remove('hidden');
 }
@@ -40,7 +58,14 @@ export function initPwa() {
     requestAnimationFrame(() => showInstallButton());
   }
 
-  if (!('serviceWorker' in navigator)) return;
+  if (!canRegisterSw()) {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.getRegistrations()
+        .then((regs) => regs.forEach((r) => r.unregister()))
+        .catch(() => {});
+    }
+    return;
+  }
 
   // Register after first paint so install doesn't compete with boot.
   const register = () => {
@@ -56,7 +81,12 @@ export function initPwa() {
           });
         });
       })
-      .catch((err) => console.warn('[pwa] SW register failed', err));
+      .catch(() => {
+        // Typical on self-signed / corporate MITM certs. App works without SW.
+        navigator.serviceWorker.getRegistrations()
+          .then((regs) => regs.forEach((r) => r.unregister()))
+          .catch(() => {});
+      });
   };
 
   if (document.readyState === 'complete') setTimeout(register, 0);