synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/ui-update.js

@@ -4,30 +4,112 @@
 // and provides a 3-step modal wizard with blocking backup gate.
 // ═══════════════════════════════════════════
 
+import { showUpdateToast } from './ui-tool-updates.js';
+
 const $ = (id) => document.getElementById(id);
+const SYNABUN_GITHUB_URL = 'https://github.com/danilokhury/Synabun';
 
 let _versionData = null;
+let _btnWired = false;
+let _pollWired = false;
+
+function sourceLabel(data) {
+  const src = data?.source;
+  if (src === 'both') return 'npm + GitHub';
+  if (src === 'github') return 'GitHub';
+  if (src === 'npm') return 'npm';
+  return src || 'update';
+}
+
+function applyTopRightButton(data) {
+  const btn = $('topright-update-btn');
+  const badge = $('update-badge');
+  if (!btn) return;
+  const has = !!data?.updateAvailable;
+  btn.style.display = has ? '' : 'none';
+  if (badge) {
+    badge.classList.add('update-click-target');
+    badge.textContent = has ? '!' : '';
+    if (has) badge.setAttribute('aria-label', 'Update SynaBun');
+    else badge.removeAttribute('aria-label');
+  }
+  if (has) {
+    const srcLabel = sourceLabel(data);
+    btn.dataset.tooltip = `SynaBun update available: v${data.current} → v${data.latest} (${srcLabel})`;
+  }
+  if (!_btnWired) {
+    _btnWired = true;
+    // Whole button opens the update flow — it's a dedicated SynaBun-update
+    // button (display:none when no update available), so any click on it
+    // should prompt the wizard, not just the green badge.
+    btn.addEventListener('click', (e) => {
+      if (!_versionData?.updateAvailable) return;
+      e.stopPropagation();
+      e.preventDefault();
+      openUpdateModal();
+    });
+  }
+}
+
+function maybeShowUpdateAlert(data, { once = true } = {}) {
+  if (!data?.updateAvailable) return;
+  const key = `synabun-update-alert:${data.current}->${data.latest}:${sourceLabel(data)}`;
+  try {
+    if (once && sessionStorage.getItem(key) === '1') return;
+    sessionStorage.setItem(key, '1');
+  } catch {}
+
+  setTimeout(() => {
+    showUpdateToast({
+      updates: [{ label: `SynaBun v${data.current} → v${data.latest}`, source: sourceLabel(data) }],
+      errors: [],
+      onClick: () => openSynabunUpdateModal(),
+    });
+  }, 500);
+}
 
 export async function initUpdate() {
   try {
     const res = await fetch('/api/system/version');
     if (!res.ok) return;
     _versionData = await res.json();
+    applyTopRightButton(_versionData);
+    maybeShowUpdateAlert(_versionData);
+
+    if (!_pollWired) {
+      _pollWired = true;
+      setInterval(() => {
+        forceCheckSynabunUpdate({ alert: true }).catch(() => {});
+      }, 30 * 60 * 1000);
+    }
+  } catch { /* silent — no update UI if check fails */ }
+}
 
-    if (!_versionData.updateAvailable) return;
-
-    const btn = $('topright-update-btn');
-    if (!btn) return;
+// Force a fresh server-side check (bypasses 1h cache via ?force=1) and
+// re-applies the top-right button + badge state. Returns the latest
+// _synabunUpdateCache shape so callers can compose toasts.
+export async function forceCheckSynabunUpdate({ alert = false } = {}) {
+  try {
+    const res = await fetch('/api/system/version?force=1');
+    if (!res.ok) return null;
+    _versionData = await res.json();
+    applyTopRightButton(_versionData);
+    if (alert) maybeShowUpdateAlert(_versionData);
+    return _versionData;
+  } catch {
+    return null;
+  }
+}
 
-    btn.style.display = '';
-    const badge = $('update-badge');
-    if (badge) badge.textContent = '!';
+export function openSynabunUpdateModal() {
+  if (!_versionData?.updateAvailable) return;
+  openUpdateModal();
+}
 
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      openUpdateModal();
-    });
-  } catch { /* silent — no update UI if check fails */ }
+// Read-only accessor for the Notifications drawer to mirror SynaBun core
+// update state without re-fetching. May be null until initUpdate() resolves.
+export function getSynabunUpdateData() {
+  return _versionData;
 }
 
 // ── Modal Wizard ──
@@ -37,38 +119,170 @@ function openUpdateModal() {
 
   let step = 1;
   let backupDone = false;
+  let isAnimating = false;
 
   const overlay = document.createElement('div');
   overlay.className = 'tag-delete-overlay';
   overlay.style.zIndex = '300100';
 
-  function render() {
-    overlay.innerHTML = `
-      <div class="tag-delete-modal update-modal" style="max-width:460px;text-align:left">
-        ${renderStepDots(step)}
-        ${step === 1 ? renderStep1() : step === 2 ? renderStep2() : renderStep3()}
-      </div>`;
-    document.body.appendChild(overlay);
-    bindEvents();
+  const modal = document.createElement('div');
+  modal.className = 'tag-delete-modal update-modal';
+  modal.style.maxWidth = '460px';
+  modal.style.textAlign = 'left';
+
+  const dotsRow = document.createElement('div');
+  dotsRow.className = 'update-steps';
+  dotsRow.innerHTML = [1, 2, 3].map(() => `<span class="update-step-dot"></span>`).join('');
+
+  const stepWrap = document.createElement('div');
+  stepWrap.className = 'update-step-content';
+
+  modal.appendChild(dotsRow);
+  modal.appendChild(stepWrap);
+  overlay.appendChild(modal);
+
+  function buildStepNode(n) {
+    const node = document.createElement('div');
+    node.className = 'update-step';
+    node.dataset.step = String(n);
+    node.innerHTML = n === 1 ? renderStep1() : n === 2 ? renderStep2() : renderStep3();
+    return node;
   }
 
-  function renderStepDots(current) {
-    return `<div class="update-steps">
-      ${[1, 2, 3].map(i => `<span class="update-step-dot${i === current ? ' active' : i < current ? ' done' : ''}"></span>`).join('')}
-    </div>`;
+  function syncStepDots() {
+    const dots = dotsRow.querySelectorAll('.update-step-dot');
+    dots.forEach((dot, i) => {
+      const idx = i + 1;
+      dot.classList.toggle('active', idx === step);
+      dot.classList.toggle('done', idx < step);
+    });
+  }
+
+  function prefersReducedMotion() {
+    try { return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true; }
+    catch { return false; }
+  }
+
+  function setStep(n) {
+    if (isAnimating) return;
+    step = n;
+    syncStepDots();
+
+    const outgoing = stepWrap.firstElementChild;
+    const incoming = buildStepNode(n);
+
+    if (!outgoing) {
+      stepWrap.appendChild(incoming);
+      bindStepEvents(incoming);
+      return;
+    }
+
+    if (prefersReducedMotion()) {
+      stepWrap.replaceChild(incoming, outgoing);
+      bindStepEvents(incoming);
+      return;
+    }
+
+    isAnimating = true;
+
+    // 1. Pin BOTH wrapper height AND modal width before any positioning
+    //    changes. The modal is a flex item whose width derives from its
+    //    in-flow content; when both step nodes go absolute, the only
+    //    remaining in-flow child is the tiny .update-steps dots row,
+    //    causing the modal to shrink horizontally to its min-width during
+    //    the transition (visible as a horizontal snap).
+    const oldH = outgoing.offsetHeight;
+    const pinW = modal.offsetWidth;
+    stepWrap.style.height = oldH + 'px';
+    modal.style.width = pinW + 'px';
+
+    // 2. Stage incoming absolutely positioned, hidden, to measure its
+    //    natural height at the pinned modal width.
+    incoming.style.position = 'absolute';
+    incoming.style.left = '0';
+    incoming.style.right = '0';
+    incoming.style.top = '0';
+    incoming.style.visibility = 'hidden';
+    stepWrap.appendChild(incoming);
+    bindStepEvents(incoming);
+    const newH = incoming.offsetHeight;
+
+    // 3. Position outgoing absolutely so the height tween isn't fought.
+    outgoing.style.position = 'absolute';
+    outgoing.style.left = '0';
+    outgoing.style.right = '0';
+    outgoing.style.top = '0';
+    outgoing.classList.add('is-leaving');
+
+    // 4. Reveal incoming and trigger its enter animation.
+    incoming.style.visibility = '';
+    incoming.classList.add('is-entering');
+
+    // 5. Tween wrapper height. Next frame so the pinned values commit first.
+    requestAnimationFrame(() => {
+      stepWrap.style.height = newH + 'px';
+    });
+
+    let settled = false;
+    const finalize = () => {
+      if (settled) return;
+      settled = true;
+      incoming.removeEventListener('animationend', onIncomingEnd);
+      if (outgoing.parentNode === stepWrap) stepWrap.removeChild(outgoing);
+      incoming.classList.remove('is-entering');
+      incoming.style.position = '';
+      incoming.style.left = '';
+      incoming.style.right = '';
+      incoming.style.top = '';
+      incoming.style.visibility = '';
+      stepWrap.style.height = '';
+      modal.style.width = '';
+      isAnimating = false;
+    };
+    const onIncomingEnd = (ev) => {
+      if (ev.target === incoming && ev.animationName === 'synabunStepIn') finalize();
+    };
+    incoming.addEventListener('animationend', onIncomingEnd);
+    setTimeout(finalize, 480);
   }
 
   function renderStep1() {
+    const src = _versionData.source;
+    const channel = _versionData.installedChannel || 'stable';
+    const channelTag = channel === 'prerelease'
+      ? '<span class="update-channel-pill update-channel-pill--beta">beta</span>'
+      : '';
+
+    // The plan knows whether npm has the version shown: say what step 3 will do.
+    const plan = _versionData.installPlan || {};
+    const githubOnly = 'A new SynaBun release is tagged on GitHub. The npm publish may still be in progress.';
+    const srcCopy = plan.reason === 'not-on-npm' || plan.reason === 'npm-unreachable'
+      ? githubOnly
+      : src === 'both'
+        ? 'A new version of SynaBun is available on npm and GitHub.'
+        : src === 'github' && plan.canAutoUpdate !== true
+          ? githubOnly
+          : 'A new version of SynaBun has been published to npm.';
+
+    const npmStable = _versionData.npmLatestStable
+      ? `npm latest v${esc(_versionData.npmLatestStable)}`
+      : 'npm latest —';
+    const npmBeta = _versionData.npmLatestBeta
+      ? ` · npm beta v${esc(_versionData.npmLatestBeta)}`
+      : '';
+    const gitBit = _versionData.gitLatest
+      ? ` · GitHub v${esc(_versionData.gitLatest)}`
+      : ' · GitHub —';
+
     return `
-      <h3 class="update-modal-title">Update Available</h3>
+      <h3 class="update-modal-title">Update Available ${channelTag}</h3>
       <div class="update-version-diff">
         <span class="update-ver update-ver--old">v${esc(_versionData.current)}</span>
         <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
         <span class="update-ver update-ver--new">v${esc(_versionData.latest)}</span>
       </div>
-      <p style="font-size:12px;color:var(--t-muted);margin:12px 0 18px">
-        A new version of SynaBun is available on npm.
-      </p>
+      <p style="font-size:12px;color:var(--t-muted);margin:12px 0 6px">${srcCopy}</p>
+      <p style="font-size:11px;color:var(--t-muted);opacity:.75;margin:0 0 18px">${npmStable}${npmBeta}${gitBit}</p>
       <div class="tag-delete-modal-actions">
         <button class="action-btn action-btn--ghost" id="update-cancel">Cancel</button>
         <button class="action-btn action-btn--primary" id="update-next">Next</button>
@@ -100,56 +314,88 @@ function openUpdateModal() {
   }
 
   function renderStep3() {
+    const installPlan = _versionData.installPlan || {};
+    const canAutoUpdate = installPlan.canAutoUpdate === true;
+    const repoUrl = installPlan.openUrl || SYNABUN_GITHUB_URL;
+    const installCmd = canAutoUpdate
+      ? (installPlan.displayCommand || 'npm i -g synabun@latest')
+      : repoUrl;
+    // The server pins the command to the exact version shown in step 1. A
+    // version that is on GitHub but not on npm yet is a manual update.
+    const installIntro = canAutoUpdate
+      ? 'SynaBun will close and run this command in a new terminal window:'
+      : installPlan.reason === 'not-on-npm'
+        ? 'This version is on GitHub but not on npm yet, so SynaBun cannot install it automatically. Open the release on GitHub, or check for updates again later:'
+        : installPlan.reason === 'npm-unreachable'
+          ? 'SynaBun could not reach npm to confirm this version is published there, so it cannot install it automatically. Check for updates again, or open the release on GitHub:'
+          : 'This SynaBun install was not detected as an npm install. Open the GitHub repository to update from your checkout or installer:';
+    const title = canAutoUpdate ? 'Run the Update' : 'Update from GitHub';
+    const installSource = canAutoUpdate
+      ? 'Installing from npm.'
+      : (installPlan.manualHint || 'Open the SynaBun repository for the correct update path.');
+    const autoRestartControl = canAutoUpdate ? `
+      <p style="font-size:11px;color:var(--t-muted);opacity:.75;margin:10px 0 0">
+        SynaBun will relaunch automatically after the update finishes.
+      </p>` : '';
+    const manualButton = canAutoUpdate ? `
+        <button class="action-btn action-btn--ghost" id="update-manual" title="Run the command yourself in your own terminal">Manual</button>` : '';
+    const updateNowButton = canAutoUpdate ? `
+        <button class="action-btn action-btn--primary" id="update-run-now">
+          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:6px"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>
+          Update Now
+        </button>` : `
+        <button class="action-btn action-btn--primary" id="update-run-now" data-url="${esc(repoUrl)}">
+          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:6px"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
+          Open GitHub
+        </button>`;
+
     return `
-      <h3 class="update-modal-title">Run the Update</h3>
+      <h3 class="update-modal-title">${title}</h3>
       <p style="font-size:12px;color:var(--t-muted);margin:4px 0 12px">
-        Run this command in your terminal to update SynaBun:
+        ${esc(installIntro)}
       </p>
       <div class="update-code-block">
-        <code>npm install -g synabun@latest</code>
-        <button class="update-copy-btn" data-copy="npm install -g synabun@latest" title="Copy">
+        <code>${esc(installCmd)}</code>
+        <button class="update-copy-btn" data-copy="${esc(installCmd)}" title="Copy">
           <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
         </button>
       </div>
-      <p style="font-size:12px;color:var(--t-muted);margin:12px 0 8px">
-        Then restart the Neural Interface:
-      </p>
-      <div class="update-code-block">
-        <code>node neural-interface/server.js</code>
-        <button class="update-copy-btn" data-copy="node neural-interface/server.js" title="Copy">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-        </button>
+      <p style="font-size:11px;color:var(--t-muted);opacity:.75;margin:8px 0 0">${esc(installSource)}</p>
+      ${autoRestartControl}
+
+      <div class="update-run-status" id="update-run-status" style="display:none;margin:10px 0 0">
+        <span class="update-backup-icon" id="update-run-icon"></span>
+        <span id="update-run-text"></span>
       </div>
-      <div class="tag-delete-modal-actions" style="margin-top:18px">
+
+      <div class="tag-delete-modal-actions" style="margin-top:14px;flex-wrap:wrap;gap:8px">
         <button class="action-btn action-btn--ghost" id="update-back">Back</button>
-        <button class="action-btn action-btn--primary" id="update-done">Done</button>
-      </div>`;
-  }
+        ${manualButton}
+        ${updateNowButton}
+      </div>
 
-  function bindEvents() {
-    // Close on overlay click
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay) close();
-    });
+      <p id="update-manual-note" style="display:none;font-size:11px;color:var(--t-muted);opacity:.75;margin:10px 0 0">
+        After running the command, restart SynaBun with <code>synabun</code>.
+      </p>`;
+  }
 
+  function bindStepEvents(scope) {
     // Cancel / Done
-    overlay.querySelector('#update-cancel')?.addEventListener('click', close);
-    overlay.querySelector('#update-done')?.addEventListener('click', close);
+    scope.querySelector('#update-cancel')?.addEventListener('click', close);
+    scope.querySelector('#update-done')?.addEventListener('click', close);
 
     // Next
-    overlay.querySelector('#update-next')?.addEventListener('click', () => {
-      step++;
-      render();
+    scope.querySelector('#update-next')?.addEventListener('click', () => {
+      setStep(step + 1);
     });
 
     // Back
-    overlay.querySelector('#update-back')?.addEventListener('click', () => {
-      step--;
-      render();
+    scope.querySelector('#update-back')?.addEventListener('click', () => {
+      setStep(step - 1);
     });
 
     // Copy buttons
-    overlay.querySelectorAll('.update-copy-btn').forEach(btn => {
+    scope.querySelectorAll('.update-copy-btn').forEach(btn => {
       btn.addEventListener('click', () => {
         const text = btn.dataset.copy;
         navigator.clipboard.writeText(text).then(() => {
@@ -162,24 +408,124 @@ function openUpdateModal() {
     });
 
     // Backup download
-    overlay.querySelector('#update-backup-download')?.addEventListener('click', handleBackupDownload);
+    scope.querySelector('#update-backup-download')?.addEventListener('click', handleBackupDownload);
+
+    // Update Now — kick off click-to-update flow
+    scope.querySelector('#update-run-now')?.addEventListener('click', handleRunUpdate);
+
+    // Manual — surface the command + relaunch hint, hide auto-update controls
+    scope.querySelector('#update-manual')?.addEventListener('click', () => {
+      scope.querySelector('#update-manual-note').style.display = '';
+      const runNow = scope.querySelector('#update-run-now');
+      if (runNow) runNow.style.display = 'none';
+    });
 
     // Skip checkbox
-    const skipCb = overlay.querySelector('#update-skip-backup');
+    const skipCb = scope.querySelector('#update-skip-backup');
     if (skipCb) {
       skipCb.addEventListener('change', () => {
         backupDone = skipCb.checked;
-        const nextBtn = overlay.querySelector('#update-next');
+        const nextBtn = scope.querySelector('#update-next');
         if (nextBtn) nextBtn.disabled = !backupDone;
       });
     }
   }
 
+  async function handleRunUpdate() {
+    const installPlan = _versionData?.installPlan || {};
+    const canAutoUpdate = installPlan.canAutoUpdate === true;
+    const repoUrl = installPlan.openUrl || SYNABUN_GITHUB_URL;
+
+    // Auto-restart is always on; server forces it true regardless of payload.
+    const autoRestart = true;
+
+    const liveStep = stepWrap.querySelector('.update-step:not(.is-leaving)') || stepWrap;
+    const runBtn = liveStep.querySelector('#update-run-now');
+    const backBtn = liveStep.querySelector('#update-back');
+    const manualBtn = liveStep.querySelector('#update-manual');
+    const status = liveStep.querySelector('#update-run-status');
+    const icon = liveStep.querySelector('#update-run-icon');
+    const text = liveStep.querySelector('#update-run-text');
+
+    if (!runBtn || !backBtn || !status || !icon || !text) return;
+
+    if (!canAutoUpdate) {
+      window.open(repoUrl, '_blank', 'noopener,noreferrer');
+      status.style.display = 'flex';
+      icon.className = 'update-backup-icon';
+      icon.textContent = '↗';
+      icon.style.color = '#4fc3f7';
+      text.innerHTML = installPlan.reason === 'not-on-npm' || installPlan.reason === 'npm-unreachable'
+        ? `<strong>GitHub release opened</strong><span class="update-run-detail">Nothing was installed. Check for updates again once npm has this version.</span>`
+        : `<strong>GitHub repository opened</strong><span class="update-run-detail">Use the repository instructions to update this non-npm installation.</span>`;
+      return;
+    }
+
+    runBtn.disabled = true;
+    backBtn.disabled = true;
+    if (manualBtn) manualBtn.disabled = true;
+    runBtn.innerHTML = '<span class="update-spinner"></span> Launching updater...';
+    status.style.display = 'flex';
+    icon.className = 'update-backup-icon spin';
+    icon.textContent = '⟳';
+    icon.style.color = '';
+    text.innerHTML = '<strong>Launching updater</strong><span class="update-run-detail">Opening a terminal window for the npm update.</span>';
+
+    try {
+      const res = await fetch('/api/system/run-update', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // The server installs its own plan; naming the version on screen lets it
+        // refuse when that plan has moved on since this modal was rendered.
+        body: JSON.stringify({ autoRestart, target: installPlan.target }),
+      });
+      if (!res.ok) {
+        let msg = `Updater failed (${res.status})`;
+        let code = null;
+        try { const b = await res.json(); msg = b.error || msg; code = b.code || null; } catch {}
+        const failure = new Error(msg);
+        failure.code = code;
+        throw failure;
+      }
+      await res.json();
+
+      icon.className = 'update-backup-icon';
+      icon.textContent = '✓';
+      icon.style.color = '#34c759';
+      text.innerHTML = `<strong>Updater terminal launched</strong><span class="update-run-detail">SynaBun is shutting down so npm can replace the package. Watch the terminal for install progress; SynaBun will relaunch automatically when it finishes.</span><span class="update-run-hint">If no terminal window appears, run <code>${esc(installPlan.displayCommand || 'npm i -g synabun@latest')}</code> manually.</span>`;
+      runBtn.innerHTML = 'Updater running…';
+
+      // Server is shutting down. Optionally redirect to a friendly offline
+      // notice — for now leave the page; user already understands from copy.
+      // Re-enable Back so they can close the modal.
+      setTimeout(() => { backBtn.disabled = false; }, 2500);
+    } catch (err) {
+      icon.className = 'update-backup-icon';
+      icon.textContent = '✗';
+      icon.style.color = 'var(--accent-red)';
+      // A newer version is offered than the one on screen: load it, and keep the
+      // stale command from being run. Going back re-renders the steps with it.
+      const targetChanged = err.code === 'target-changed';
+      if (targetChanged) {
+        try {
+          const fresh = await fetch('/api/system/version');
+          if (fresh.ok) { _versionData = await fresh.json(); applyTopRightButton(_versionData); }
+        } catch {}
+      }
+      text.textContent = targetChanged ? err.message : 'Failed to launch updater: ' + err.message;
+      runBtn.disabled = targetChanged;
+      backBtn.disabled = false;
+      if (manualBtn) manualBtn.disabled = targetChanged;
+      runBtn.innerHTML = `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:6px"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg> Retry`;
+    }
+  }
+
   async function handleBackupDownload() {
-    const btn = overlay.querySelector('#update-backup-download');
-    const status = overlay.querySelector('#update-backup-status');
-    const icon = overlay.querySelector('#update-backup-icon');
-    const text = overlay.querySelector('#update-backup-text');
+    const liveStep = stepWrap.querySelector('.update-step:not(.is-leaving)') || stepWrap;
+    const btn = liveStep.querySelector('#update-backup-download');
+    const status = liveStep.querySelector('#update-backup-status');
+    const icon = liveStep.querySelector('#update-backup-icon');
+    const text = liveStep.querySelector('#update-backup-text');
     if (!btn) return;
 
     btn.disabled = true;
@@ -214,9 +560,9 @@ function openUpdateModal() {
       text.textContent = `${filename} (${(blob.size / 1024 / 1024).toFixed(1)} MB)`;
 
       backupDone = true;
-      const nextBtn = overlay.querySelector('#update-next');
+      const nextBtn = liveStep.querySelector('#update-next');
       if (nextBtn) nextBtn.disabled = false;
-      const skipCb = overlay.querySelector('#update-skip-backup');
+      const skipCb = liveStep.querySelector('#update-skip-backup');
       if (skipCb) skipCb.checked = true;
     } catch (err) {
       icon.className = 'update-backup-icon';
@@ -234,7 +580,13 @@ function openUpdateModal() {
     setTimeout(() => overlay.remove(), 150);
   }
 
-  render();
+  // Boot: attach shell once, wire overlay-click-to-close, render initial step.
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) close();
+  });
+  document.body.appendChild(overlay);
+  syncStepDots();
+  setStep(1);
 }
 
 function esc(str) {