synabun 2026.4.26 → 2026.4.27

package/neural-interface/public/shared/ui-tool-updates.js

@@ -174,7 +174,81 @@ export async function initToolUpdates() {
 export async function forceCheckToolUpdates() {
   try {
     const res = await fetch('/api/system/tool-versions?force=1');
-    if (!res.ok) return;
-    applyBadges(await res.json());
-  } catch { /* silent */ }
+    if (!res.ok) return null;
+    const data = await res.json();
+    applyBadges(data);
+    return data;
+  } catch { return null; }
+}
+
+// Re-export human-readable tool labels so toast/menu code can build summaries
+// without redefining the label map.
+export { TOOL_LABELS };
+
+// ── Update-check toast ──
+// Bottom-right ephemeral pill. One of three modes: updates available (with
+// list + optional click handler), all-clear, or check-failed. Auto-dismisses.
+
+function _toastEsc(s) {
+  const d = document.createElement('div');
+  d.textContent = String(s ?? '');
+  return d.innerHTML;
+}
+
+export function showUpdateToast({ updates, errors, onClick } = {}) {
+  document.querySelectorAll('.update-check-toast').forEach(el => el.remove());
+
+  const toast = document.createElement('div');
+  toast.className = 'update-check-toast';
+
+  const hasUpdates = Array.isArray(updates) && updates.length > 0;
+  const hasErrors  = Array.isArray(errors)  && errors.length  > 0;
+  const clickable  = hasUpdates && typeof onClick === 'function';
+  if (clickable) toast.classList.add('update-check-toast--clickable');
+
+  if (hasUpdates) {
+    const items = updates.map(u => {
+      const label = _toastEsc(u?.label || '');
+      const src = u?.source ? `<span class="utc-src">${_toastEsc(u.source)}</span>` : '';
+      return `<li>${label}${src}</li>`;
+    }).join('');
+    toast.innerHTML = `
+      <div class="utc-icon utc-icon--up">↑</div>
+      <div class="utc-body">
+        <div class="utc-title">Updates available</div>
+        <ul class="utc-list">${items}</ul>
+        ${clickable ? '<div class="utc-hint">Click to open update guide</div>' : ''}
+      </div>`;
+  } else if (hasErrors) {
+    toast.innerHTML = `
+      <div class="utc-icon utc-icon--err">!</div>
+      <div class="utc-body">
+        <div class="utc-title">Update check failed</div>
+        <div class="utc-sub">${_toastEsc(errors.join(' · '))}</div>
+      </div>`;
+  } else {
+    toast.innerHTML = `
+      <div class="utc-icon utc-icon--ok">✓</div>
+      <div class="utc-body">
+        <div class="utc-title">All up to date</div>
+      </div>`;
+  }
+
+  if (clickable) {
+    toast.addEventListener('click', () => {
+      try { onClick(); } catch {}
+      toast.classList.remove('show');
+      setTimeout(() => toast.remove(), 250);
+    });
+  }
+
+  document.body.appendChild(toast);
+  requestAnimationFrame(() => toast.classList.add('show'));
+
+  const ttl = hasUpdates ? 7000 : hasErrors ? 5000 : 3500;
+  setTimeout(() => {
+    if (!toast.isConnected) return;
+    toast.classList.remove('show');
+    setTimeout(() => toast.remove(), 250);
+  }, ttl);
 }

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

@@ -4,30 +4,96 @@
 // 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.textContent = has ? '!' : '';
+  if (has) {
+    const srcLabel = sourceLabel(data);
+    btn.dataset.tooltip = `Update: v${data.current} → v${data.latest} (${srcLabel})`;
+  }
+  if (!_btnWired) {
+    _btnWired = true;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      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;
-
-    btn.style.display = '';
-    const badge = $('update-badge');
-    if (badge) badge.textContent = '!';
+// 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.addEventListener('click', (e) => {
-      e.stopPropagation();
-      openUpdateModal();
-    });
-  } catch { /* silent — no update UI if check fails */ }
+export function openSynabunUpdateModal() {
+  if (!_versionData?.updateAvailable) return;
+  openUpdateModal();
 }
 
 // ── Modal Wizard ──
@@ -59,16 +125,37 @@ function openUpdateModal() {
   }
 
   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>'
+      : '';
+
+    const srcCopy = src === 'both'
+      ? 'A new version of SynaBun is available on npm and GitHub.'
+      : src === 'github'
+        ? 'A new SynaBun release is tagged on GitHub. The npm publish may still be in progress.'
+        : '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,30 +187,63 @@ 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;
+    const installIntro = canAutoUpdate
+      ? 'SynaBun will close and run this command in a new terminal window:'
+      : '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>
+
+      <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 bindEvents() {
@@ -164,6 +284,16 @@ function openUpdateModal() {
     // Backup download
     overlay.querySelector('#update-backup-download')?.addEventListener('click', handleBackupDownload);
 
+    // Update Now — kick off click-to-update flow
+    overlay.querySelector('#update-run-now')?.addEventListener('click', handleRunUpdate);
+
+    // Manual — surface the command + relaunch hint, hide auto-update controls
+    overlay.querySelector('#update-manual')?.addEventListener('click', () => {
+      overlay.querySelector('#update-manual-note').style.display = '';
+      const runNow = overlay.querySelector('#update-run-now');
+      if (runNow) runNow.style.display = 'none';
+    });
+
     // Skip checkbox
     const skipCb = overlay.querySelector('#update-skip-backup');
     if (skipCb) {
@@ -175,6 +305,78 @@ function openUpdateModal() {
     }
   }
 
+  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 runBtn = overlay.querySelector('#update-run-now');
+    const backBtn = overlay.querySelector('#update-back');
+    const manualBtn = overlay.querySelector('#update-manual');
+    const status = overlay.querySelector('#update-run-status');
+    const icon = overlay.querySelector('#update-run-icon');
+    const text = overlay.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 = `<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' },
+        body: JSON.stringify({ autoRestart }),
+      });
+      if (!res.ok) {
+        let msg = `Updater failed (${res.status})`;
+        try { const b = await res.json(); msg = b.error || msg; } catch {}
+        throw new Error(msg);
+      }
+      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)';
+      text.textContent = 'Failed to launch updater: ' + err.message;
+      runBtn.disabled = false;
+      backBtn.disabled = false;
+      if (manualBtn) manualBtn.disabled = false;
+      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');