synabun 1.3.0 → 2.0.0

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

@@ -0,0 +1,292 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — CLI Tool Update Badges
+// Checks /api/system/tool-versions and shows green badges
+// on toolbar buttons + Apps menu items when updates exist.
+// Only clicking the tiny green badge runs the update command; the
+// normal toolbar/menu target keeps launching the selected CLI.
+// ═══════════════════════════════════════════
+
+import { emit } from './state.js';
+
+const $ = (id) => document.getElementById(id);
+
+const TOOL_ELEMENTS = {
+  'claude-code': { toolbar: 'claude-update-badge',   menu: 'claude-menu-update-badge' },
+  'codex':       { toolbar: 'codex-update-badge',    menu: 'codex-menu-update-badge' },
+  'opencode':    { toolbar: 'opencode-update-badge', menu: 'opencode-menu-update-badge' },
+  'gemini':      { toolbar: null,                    menu: 'gemini-menu-update-badge' },
+};
+
+// Parent elements whose tooltips are updated when an update badge is visible.
+const PARENT_ELEMENTS = {
+  'claude-code': { toolbar: 'topright-claude-panel-btn', menu: 'menu-terminal-claude' },
+  'codex':       { toolbar: 'topright-codex-panel-btn',  menu: 'menu-terminal-codex' },
+  'opencode':    { toolbar: 'topright-opencode-panel-btn', menu: 'menu-terminal-opencode' },
+  'gemini':      { toolbar: null,                         menu: 'menu-terminal-gemini' },
+};
+
+const TOOL_LABELS = {
+  'claude-code': 'Claude Code',
+  'codex':       'Codex',
+  'opencode':    'OpenCode',
+  'gemini':      'Gemini CLI',
+};
+
+// Cached server response so click handlers can read per-tool updateCommand
+// without re-fetching. Refreshed on every applyBadges() call.
+let _latestData = null;
+
+// Reads better than the raw source key — "update via Homebrew", not
+// "update via brew-cask". Mirrors installSourceLabel in
+// lib/cli-update-planner.js (kept separate: that module is server-side).
+const SOURCE_LABELS = {
+  'brew-cask': 'Homebrew',
+  'brew-formula': 'Homebrew',
+  'npm': 'npm',
+  'bun': 'Bun',
+  'pnpm': 'pnpm',
+  'yarn': 'Yarn',
+  'volta': 'Volta',
+  'standalone': 'the official installer',
+  'native': 'the native installer',
+  'winget': 'winget',
+  'scoop': 'Scoop',
+  'choco': 'Chocolatey',
+};
+
+function sourceLabel(src) {
+  return SOURCE_LABELS[src] || 'your installer';
+}
+
+function runUpdate(key, badge) {
+  const info = _latestData?.tools?.[key];
+  const cmd = info?.updateCommand;
+
+  if (!cmd) {
+    // Tool installed via a source we can't safely auto-update from
+    // (winget, native installer, etc.) and has no built-in self-updater.
+    const label = TOOL_LABELS[key] || key;
+    const hint = sourceLabel(info?.installSource);
+    alert(`${label} update available (v${info?.installed} → v${info?.latest}).\n\nPlease update via ${hint}.`);
+    return;
+  }
+
+  emit('terminal:run-command', { command: cmd, label: `Update ${TOOL_LABELS[key] || key}` });
+  // Optimistically clear BOTH toolbar + menu badges and restore parent tooltips.
+  const ids = TOOL_ELEMENTS[key];
+  const parents = PARENT_ELEMENTS[key];
+  for (const which of ['toolbar', 'menu']) {
+    const b = ids?.[which] && $(ids[which]);
+    if (b) b.textContent = '';
+    const pBtn = parents?.[which] && $(parents[which]);
+    if (pBtn?.dataset.tooltipOriginal) pBtn.dataset.tooltip = pBtn.dataset.tooltipOriginal;
+  }
+  // Poll repeatedly until the server confirms the new version is installed
+  // (updateAvailable flips to false for this tool) or we hit the max window.
+  // Native installer updates can take 1–3min; npm-global 5–60s.
+  schedulePostUpdatePolling(key);
+}
+
+// Poll /api/system/tool-versions?force=1 until the specified tool reports
+// updateAvailable=false, or a max window elapses. Safe to call repeatedly —
+// latest call supersedes any prior poll loop for the same tool.
+const _pollTimers = new Map();
+function schedulePostUpdatePolling(key) {
+  const prior = _pollTimers.get(key);
+  if (prior) clearTimeout(prior);
+
+  const startedAt = Date.now();
+  const maxMs = 10 * 60 * 1000;
+  const initialDelay = 10000;
+  const interval = 10000;
+
+  const tick = async () => {
+    try {
+      const res = await fetch('/api/system/tool-versions?force=1');
+      if (res.ok) {
+        const data = await res.json();
+        applyBadges(data);
+        const info = data?.tools?.[key];
+        if (info && !info.updateAvailable) {
+          _pollTimers.delete(key);
+          return;
+        }
+      }
+    } catch { /* ignore, will retry */ }
+
+    if (Date.now() - startedAt >= maxMs) {
+      _pollTimers.delete(key);
+      return;
+    }
+    _pollTimers.set(key, setTimeout(tick, interval));
+  };
+
+  _pollTimers.set(key, setTimeout(tick, initialDelay));
+}
+
+function wireBadgeClick(badgeId, key) {
+  const badge = $(badgeId);
+  if (!badge) return;
+  badge.classList.add('update-click-target');
+  badge.addEventListener('click', (e) => {
+    if (badge.textContent) {
+      e.stopPropagation();
+      e.preventDefault();
+      runUpdate(key, badge);
+    }
+  });
+}
+
+function applyBadges(data) {
+  if (!data.tools) return;
+  _latestData = data;
+
+  for (const [key, ids] of Object.entries(TOOL_ELEMENTS)) {
+    const info = data.tools[key];
+    const has = info && info.updateAvailable;
+    const canUpdate = has && info?.canUpdate;
+    const tip = has
+      ? (canUpdate
+          ? `v${info.installed} → v${info.latest} — click to update`
+          : `v${info.installed} → v${info.latest} — update via ${sourceLabel(info.installSource)}`)
+      : '';
+    const parents = PARENT_ELEMENTS[key];
+
+    if (ids.toolbar) {
+      const badge = $(ids.toolbar);
+      if (badge) {
+        badge.textContent = has ? '↑' : '';
+        badge.title = tip;
+        if (has) badge.setAttribute('aria-label', `Update ${TOOL_LABELS[key] || key}`);
+        else badge.removeAttribute('aria-label');
+      }
+      // Update parent button tooltip when update is available
+      const parentBtn = parents?.toolbar && $(parents.toolbar);
+      if (parentBtn) {
+        if (!parentBtn.dataset.tooltipOriginal) parentBtn.dataset.tooltipOriginal = parentBtn.dataset.tooltip || '';
+        parentBtn.dataset.tooltip = has ? `${parentBtn.dataset.tooltipOriginal} · update badge available` : parentBtn.dataset.tooltipOriginal;
+      }
+    }
+    if (ids.menu) {
+      const badge = $(ids.menu);
+      if (badge) {
+        badge.textContent = has ? '↑' : '';
+        badge.title = tip;
+        if (has) badge.setAttribute('aria-label', `Update ${TOOL_LABELS[key] || key}`);
+        else badge.removeAttribute('aria-label');
+      }
+    }
+  }
+}
+
+let _wired = false;
+
+export async function initToolUpdates() {
+  try {
+    const res = await fetch('/api/system/tool-versions');
+    if (!res.ok) return;
+    applyBadges(await res.json());
+
+    if (!_wired) {
+      _wired = true;
+      for (const [key, ids] of Object.entries(TOOL_ELEMENTS)) {
+        if (ids.toolbar) wireBadgeClick(ids.toolbar, key);
+        if (ids.menu) wireBadgeClick(ids.menu, key);
+      }
+    }
+  } catch { /* silent */ }
+}
+
+export async function forceCheckToolUpdates() {
+  try {
+    const res = await fetch('/api/system/tool-versions?force=1');
+    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 };
+
+// Read-only accessor for the Notifications drawer. May be null until
+// initToolUpdates() resolves the first /api/system/tool-versions call.
+export function getToolUpdateData() {
+  return _latestData;
+}
+
+// Public wrapper around runUpdate so external surfaces (Notifications drawer)
+// can trigger the same flow used by the toolbar/menu badges.
+export function runToolUpdate(key) {
+  runUpdate(key);
+}
+
+// ── 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-tooltip.js

@@ -17,6 +17,23 @@ export function initTooltip() {
   let showTimer = null;
   let hideTimer = null;
   let currentTarget = null;
+  let repositionRunHandler = null;
+  let repositionEndHandler = null;
+  let repositionRafId = 0;
+
+  // Dropdowns that keep their open menu inside the [data-tooltip] control
+  // (the sidepanels' cp/cx/ocpv2 project-bar, model and mode controls). Hovering
+  // that menu still resolves closest() to the control, which pinned the
+  // control's tooltip over the open menu: while one is open, the control stays
+  // quiet.
+  const OPEN_MENU_INSIDE = '.cp-dropdown.open > .cp-dd-menu, .cxp-dropdown.open > .cxp-dd-menu, .ocpv2-dropdown.open > .ocpv2-dd-menu';
+  function openMenuInside(el) { return !!el.querySelector(OPEN_MENU_INSIDE); }
+
+  // Swap the placement class only: a reposition (the follow loop below) must keep .visible.
+  function setPlacement(placement) {
+    tip.classList.remove('above', 'below', 'left', 'right');
+    tip.classList.add(placement);
+  }
 
   function positionTip(el) {
     const r = el.getBoundingClientRect();
@@ -25,16 +42,29 @@ export function initTooltip() {
     const gap = 8;
     const preferred = el.getAttribute('data-tooltip-pos');
 
-    // Right-side placement (explorer sidebar, whiteboard toolbar)
+    // Left-side placement (session dropdowns in sidepanels)
+    // Anchor to the left edge of the containing sidepanel so tooltip always appears fully outside
+    if (preferred === 'left') {
+      const panel = el.closest('.claude-panel, .codex-panel, .ocp-panel, .assistant-panel, .menubar-dropdown--resume');
+      const anchorLeft = panel ? panel.getBoundingClientRect().left : r.left;
+      if (anchorLeft - gap - tw > 4) {
+        setPlacement('left');
+        tip.style.top = (r.top + r.height / 2 - th / 2) + 'px';
+        tip.style.left = (anchorLeft - gap - tw) + 'px';
+        tip.style.setProperty('--arrow-y', (th / 2) + 'px');
+        return;
+      }
+    }
+
+    // Right-side placement (explorer sidebar, whiteboard toolbar, Resume dropdown)
     const inWbToolbar = !!el.closest('#wb-toolbar');
-    if ((preferred === 'right' || inWbToolbar) && r.right + gap + tw < window.innerWidth - 4) {
-      tip.className = 'ui-tooltip right';
+    const rightAnchor = el.closest('.menubar-dropdown--resume');
+    const anchorRight = rightAnchor ? rightAnchor.getBoundingClientRect().right : r.right;
+    if ((preferred === 'right' || inWbToolbar) && anchorRight + gap + tw < window.innerWidth - 4) {
+      setPlacement('right');
       tip.style.top = (r.top + r.height / 2 - th / 2) + 'px';
-      tip.style.left = (r.right + gap) + 'px';
-      const arrow = tip.querySelector('.ui-tooltip-arrow');
-      arrow.style.left = '';
-      arrow.style.top = (th / 2) + 'px';
-      arrow.style.transform = 'translateY(-50%)';
+      tip.style.left = (anchorRight + gap) + 'px';
+      tip.style.setProperty('--arrow-y', (th / 2) + 'px');
       return;
     }
 
@@ -49,20 +79,44 @@ export function initTooltip() {
     let left = r.left + r.width / 2 - tw / 2;
     if (left < 4) left = 4;
     if (left + tw > window.innerWidth - 4) left = window.innerWidth - 4 - tw;
-    tip.className = 'ui-tooltip ' + placement;
+    setPlacement(placement);
     tip.style.top = top + 'px';
     tip.style.left = left + 'px';
     const arrowLeft = r.left + r.width / 2 - left;
-    const arrow = tip.querySelector('.ui-tooltip-arrow');
-    arrow.style.left = arrowLeft + 'px';
-    arrow.style.top = '';
-    arrow.style.transform = 'translateX(-50%)';
+    tip.style.setProperty('--arrow-x', arrowLeft + 'px');
+    tip.style.setProperty('--arrow-y', '');
+  }
+
+  function suppressTitle(el) {
+    // Remove native title from the element and its children to prevent double-tooltip
+    if (el.hasAttribute('title')) {
+      el._savedTitle = el.getAttribute('title');
+      el.removeAttribute('title');
+    }
+    el.querySelectorAll('[title]').forEach(child => {
+      child._savedTitle = child.getAttribute('title');
+      child.removeAttribute('title');
+    });
+  }
+
+  function restoreTitle(el) {
+    if (el._savedTitle !== undefined) {
+      el.setAttribute('title', el._savedTitle);
+      delete el._savedTitle;
+    }
+    el.querySelectorAll('*').forEach(child => {
+      if (child._savedTitle !== undefined) {
+        child.setAttribute('title', child._savedTitle);
+        delete child._savedTitle;
+      }
+    });
   }
 
   function show(el) {
     let text = el.getAttribute('data-tooltip');
-    if (!text) return;
+    if (!text || openMenuInside(el)) return;
     clearTimeout(hideTimer);
+    suppressTitle(el);
     const textEl = tip.querySelector('.ui-tooltip-text');
     const nlIdx = text.indexOf('\n');
     if (nlIdx !== -1) {
@@ -82,15 +136,78 @@ export function initTooltip() {
     }
     currentTarget = el;
     tip.style.display = 'block';
-    tip.offsetHeight; // force reflow
+    tip.offsetHeight; // force reflow so dimensions are measurable
     positionTip(el);
     tip.classList.add('visible');
+    // Re-position on next frame — first show after display:none can mis-measure
+    requestAnimationFrame(() => {
+      if (currentTarget === el) {
+        positionTip(el);
+        tip.classList.add('visible');
+      }
+    });
+    // Some targets resize on hover (e.g. tray pill label expands max-width
+    // 100→300px over ~300ms). Without follow-up positioning, the tooltip
+    // stays anchored to the un-expanded rect and the pill grows leftward
+    // over it. Drive a rAF loop for the duration of any size/position
+    // transition so the tooltip tracks the target.
+    const followFor = 360; // ms — upper bound, slightly longer than the longest pill transition
+    const stopAt = performance.now() + followFor;
+    // Self-terminate once the target stops moving: a static target (the vast
+    // majority of tooltips) settles in ~2 frames instead of running the full
+    // 360ms rAF/getBoundingClientRect loop, while an animating pill keeps being
+    // followed until it settles or the cap is hit.
+    let lastRectKey = '';
+    let stableTicks = 0;
+    const tick = () => {
+      repositionRafId = 0;
+      if (currentTarget !== el) return;
+      positionTip(el);
+      const r = el.getBoundingClientRect();
+      const key = r.left + ',' + r.top + ',' + r.width + ',' + r.height;
+      if (key === lastRectKey) {
+        if (++stableTicks >= 2) return; // target settled — stop early
+      } else {
+        stableTicks = 0;
+        lastRectKey = key;
+      }
+      if (performance.now() < stopAt) {
+        repositionRafId = requestAnimationFrame(tick);
+      }
+    };
+    repositionRunHandler = (event) => {
+      if (currentTarget !== el) return;
+      if (event.target !== el && !el.contains(event.target)) return;
+      if (!/width|max-width|transform|margin|padding|left|right|top|bottom/.test(event.propertyName || '')) return;
+      if (!repositionRafId) repositionRafId = requestAnimationFrame(tick);
+    };
+    repositionEndHandler = (event) => {
+      if (currentTarget !== el) return;
+      if (event.target !== el && !el.contains(event.target)) return;
+      positionTip(el);
+    };
+    el.addEventListener('transitionrun', repositionRunHandler);
+    el.addEventListener('transitionend', repositionEndHandler);
+    // Kick off one immediate rAF in case the transition already started on
+    // mouseenter before our listeners attached.
+    if (!repositionRafId) repositionRafId = requestAnimationFrame(tick);
   }
 
   function hide() {
     clearTimeout(showTimer);
     clearTimeout(hideTimer);
     showTimer = null;
+    if (repositionRafId) {
+      cancelAnimationFrame(repositionRafId);
+      repositionRafId = 0;
+    }
+    if (currentTarget) {
+      if (repositionRunHandler) currentTarget.removeEventListener('transitionrun', repositionRunHandler);
+      if (repositionEndHandler) currentTarget.removeEventListener('transitionend', repositionEndHandler);
+    }
+    repositionRunHandler = null;
+    repositionEndHandler = null;
+    if (currentTarget) restoreTitle(currentTarget);
     currentTarget = null;
     tip.classList.remove('visible');
     hideTimer = setTimeout(() => { tip.style.display = 'none'; }, 150);
@@ -99,6 +216,10 @@ export function initTooltip() {
   document.addEventListener('mouseover', (e) => {
     const el = e.target.closest('[data-tooltip]');
     if (!el) return;
+    // A dropdown whose menu is open keeps the menu as a child of the control:
+    // it (and the control) then resolve here, and the tooltip must not show —
+    // and any tooltip already up (for this control or another) goes away.
+    if (openMenuInside(el)) { if (currentTarget) hide(); return; }
     if (el === currentTarget) { clearTimeout(hideTimer); return; }
     clearTimeout(showTimer);
     clearTimeout(hideTimer);
@@ -113,6 +234,7 @@ export function initTooltip() {
   document.addEventListener('mouseout', (e) => {
     const el = e.target.closest('[data-tooltip]');
     if (!el) return;
+    if (openMenuInside(el)) { hide(); return; }
     const related = e.relatedTarget;
     if (related && el.contains(related)) return;
     hide();
@@ -120,4 +242,23 @@ export function initTooltip() {
 
   document.addEventListener('scroll', hide, true);
   document.addEventListener('pointerdown', hide, true);
+
+  // Keyboard focus shows the tooltip too, but only inside the Assistant
+  // (.asst-root, and .asst-bar: its toolbar, which the sidepanel places in its
+  // header), where glyph-only capsules have no visible label. Every other
+  // surface stays hover-only.
+  const FOCUS_SCOPE = '.asst-root, .asst-bar';
+  document.addEventListener('focusin', (e) => {
+    const el = e.target;
+    if (!el?.closest || !el.hasAttribute?.('data-tooltip') || !el.closest(FOCUS_SCOPE)) return;
+    let keyboard = false;
+    try { keyboard = el.matches(':focus-visible'); } catch { keyboard = false; }
+    if (!keyboard || el === currentTarget) return;
+    clearTimeout(showTimer);
+    if (currentTarget) hide();
+    show(el);
+  });
+  document.addEventListener('focusout', (e) => {
+    if (currentTarget && e.target === currentTarget && currentTarget.closest(FOCUS_SCOPE)) hide();
+  });
 }