synabun 2.0.10 → 2.2.0

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

@@ -14,7 +14,7 @@ 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' },
+  'antigravity': { toolbar: 'antigravity-update-badge', menu: 'antigravity-menu-update-badge' },
 };
 
 // Parent elements whose tooltips are updated when an update badge is visible.
@@ -22,14 +22,14 @@ 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' },
+  'antigravity': { toolbar: 'topright-antigravity-panel-btn', menu: 'menu-terminal-antigravity' },
 };
 
 const TOOL_LABELS = {
   'claude-code': 'Claude Code',
   'codex':       'Codex',
   'opencode':    'OpenCode',
-  'gemini':      'Gemini CLI',
+  'antigravity': 'Antigravity CLI',
 };
 
 // Cached server response so click handlers can read per-tool updateCommand
@@ -239,7 +239,9 @@ function _toastEsc(s) {
 }
 
 export function showUpdateToast({ updates, errors, onClick } = {}) {
-  document.querySelectorAll('.update-check-toast').forEach(el => el.remove());
+  // One update toast at a time; the notice after an automatic restart (ui-crash-notice.js) wears the same toast
+  // and stays until it is dismissed.
+  document.querySelectorAll('.update-check-toast').forEach(el => { if (!el.classList.contains('crash-notice')) el.remove(); });
 
   const toast = document.createElement('div');
   toast.className = 'update-check-toast';

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

@@ -3,15 +3,25 @@
 // Body-appended, overflow-proof tooltip for data-tooltip attributes
 // ═══════════════════════════════════════════
 
+import { boundsForPoint, frameRect } from './app-frame.js';
+import { isWindowsPlatform } from './desktop-bridge.js';
+
 /**
  * Initialize the tooltip system.
  * Creates a body-appended tooltip element and delegates
  * mouseover/mouseout on any [data-tooltip] elements.
  */
 export function initTooltip() {
+  if (document.documentElement?.classList) {
+    document.documentElement.classList.toggle('platform-win32', isWindowsPlatform(globalThis.window));
+  }
   const tip = document.createElement('div');
   tip.className = 'ui-tooltip';
-  tip.innerHTML = '<span class="ui-tooltip-arrow"></span><span class="ui-tooltip-text"></span>';
+  const arrowEl = document.createElement('span');
+  arrowEl.className = 'ui-tooltip-arrow';
+  const textEl = document.createElement('span');
+  textEl.className = 'ui-tooltip-text';
+  tip.append(arrowEl, textEl);
   document.body.appendChild(tip);
 
   let showTimer = null;
@@ -27,7 +37,12 @@ export function initTooltip() {
   // 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); }
+  function openMenuInside(el) {
+    if (el.classList?.contains('term-minimized-pill') || el.classList?.contains('term-minimized-pill-close')) return false;
+    return !!el.querySelector(OPEN_MENU_INSIDE);
+  }
+
+  const rectKey = (r) => r.left + ',' + r.top + ',' + r.width + ',' + r.height;
 
   // Swap the placement class only: a reposition (the follow loop below) must keep .visible.
   function setPlacement(placement) {
@@ -35,24 +50,27 @@ export function initTooltip() {
     tip.classList.add(placement);
   }
 
-  function positionTip(el) {
-    const r = el.getBoundingClientRect();
+  function positionTip(el, knownRect = null) {
+    const r = knownRect || el.getBoundingClientRect();
     const tw = tip.offsetWidth;
     const th = tip.offsetHeight;
     const gap = 8;
     const preferred = el.getAttribute('data-tooltip-pos');
+    // Kept inside the app frame for a control in it; one on the bar or an explorer keeps the window.
+    const b = boundsForPoint(frameRect(), r.left + r.width / 2, r.top + r.height / 2)
+      || { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
 
     // 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 panel = el.closest('.claude-panel, .codex-panel, .ocp-panel, .agy-panel, .assistant-panel, .menubar-dropdown--resume');
       const anchorLeft = panel ? panel.getBoundingClientRect().left : r.left;
-      if (anchorLeft - gap - tw > 4) {
+      if (anchorLeft - gap - tw > b.left + 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;
+        return { rect: r, width: tw };
       }
     }
 
@@ -60,31 +78,32 @@ export function initTooltip() {
     const inWbToolbar = !!el.closest('#wb-toolbar');
     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) {
+    if ((preferred === 'right' || inWbToolbar) && anchorRight + gap + tw < b.right - 4) {
       setPlacement('right');
       tip.style.top = (r.top + r.height / 2 - th / 2) + 'px';
       tip.style.left = (anchorRight + gap) + 'px';
       tip.style.setProperty('--arrow-y', (th / 2) + 'px');
-      return;
+      return { rect: r, width: tw };
     }
 
     // Elements near the top (title bar) → force below
     const forceBelow = preferred === 'below' || el.closest('#title-bar');
     let top = forceBelow ? r.bottom + gap : r.top - th - gap;
     let placement = forceBelow ? 'below' : 'above';
-    if (!forceBelow && top < 4) {
+    if (!forceBelow && top < b.top + 4) {
       top = r.bottom + gap;
       placement = 'below';
     }
     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;
+    if (left + tw > b.right - 4) left = b.right - 4 - tw;
+    if (left < b.left + 4) left = b.left + 4;
     setPlacement(placement);
     tip.style.top = top + 'px';
     tip.style.left = left + 'px';
     const arrowLeft = r.left + r.width / 2 - left;
     tip.style.setProperty('--arrow-x', arrowLeft + 'px');
     tip.style.setProperty('--arrow-y', '');
+    return { rect: r, width: tw };
   }
 
   function suppressTitle(el) {
@@ -93,10 +112,16 @@ export function initTooltip() {
       el._savedTitle = el.getAttribute('title');
       el.removeAttribute('title');
     }
-    el.querySelectorAll('[title]').forEach(child => {
-      child._savedTitle = child.getAttribute('title');
-      child.removeAttribute('title');
-    });
+    const titledChildren = [...el.querySelectorAll('[title]')];
+    if (titledChildren.length) {
+      el._savedTitleNodes = titledChildren;
+      for (const child of titledChildren) {
+        child._savedTitle = child.getAttribute('title');
+        child.removeAttribute('title');
+      }
+    } else {
+      delete el._savedTitleNodes;
+    }
   }
 
   function restoreTitle(el) {
@@ -104,12 +129,15 @@ export function initTooltip() {
       el.setAttribute('title', el._savedTitle);
       delete el._savedTitle;
     }
-    el.querySelectorAll('*').forEach(child => {
-      if (child._savedTitle !== undefined) {
-        child.setAttribute('title', child._savedTitle);
-        delete child._savedTitle;
+    if (el._savedTitleNodes) {
+      for (const child of el._savedTitleNodes) {
+        if (child._savedTitle !== undefined) {
+          child.setAttribute('title', child._savedTitle);
+          delete child._savedTitle;
+        }
       }
-    });
+      delete el._savedTitleNodes;
+    }
   }
 
   function show(el) {
@@ -117,7 +145,6 @@ export function initTooltip() {
     if (!text || openMenuInside(el)) return;
     clearTimeout(hideTimer);
     suppressTitle(el);
-    const textEl = tip.querySelector('.ui-tooltip-text');
     const nlIdx = text.indexOf('\n');
     if (nlIdx !== -1) {
       let main = text.slice(0, nlIdx);
@@ -136,37 +163,22 @@ export function initTooltip() {
     }
     currentTarget = el;
     tip.style.display = 'block';
-    tip.offsetHeight; // force reflow so dimensions are measurable
-    positionTip(el);
+    const { rect: initialRect, width: initialWidth } = 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 = '';
+
+    // Follow targets that actually animate their geometry on hover (via transitionrun),
+    // without polling static targets across multiple rAFs.
+    const followFor = 360;
+    let stopAt = 0;
+    let lastRectKey = rectKey(initialRect);
     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;
+      const { rect: r } = positionTip(el);
+      const key = rectKey(r);
       if (key === lastRectKey) {
-        if (++stableTicks >= 2) return; // target settled — stop early
+        if (++stableTicks >= 2) return;
       } else {
         stableTicks = 0;
         lastRectKey = key;
@@ -179,6 +191,8 @@ export function initTooltip() {
       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;
+      stopAt = performance.now() + followFor;
+      stableTicks = 0;
       if (!repositionRafId) repositionRafId = requestAnimationFrame(tick);
     };
     repositionEndHandler = (event) => {
@@ -188,9 +202,25 @@ export function initTooltip() {
     };
     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);
+
+    // One check on the next frame (a single rect read): metrics that settle after display:none, or a
+    // hover transition that began before the listeners above were attached (the 16-20 ms show delay).
+    if (!repositionRafId) {
+      repositionRafId = requestAnimationFrame(() => {
+        repositionRafId = 0;
+        if (currentTarget !== el) return;
+        const r = el.getBoundingClientRect();
+        const key = rectKey(r);
+        if (key !== lastRectKey || tip.offsetWidth !== initialWidth) {
+          lastRectKey = key;
+          positionTip(el, r);
+          if (key !== rectKey(initialRect)) {
+            stopAt = performance.now() + followFor;
+            repositionRafId = requestAnimationFrame(tick);
+          }
+        }
+      });
+    }
   }
 
   function hide() {
@@ -225,7 +255,7 @@ export function initTooltip() {
     clearTimeout(hideTimer);
     if (currentTarget) {
       hide();
-      show(el);
+      showTimer = setTimeout(() => show(el), 16);
     } else {
       showTimer = setTimeout(() => show(el), 20);
     }

package/neural-interface/public/shared/ui-topright-overflow.js

@@ -0,0 +1,233 @@
+// ═══════════════════════════════════════════
+// The top-right toolbar's overflow: one row, always.
+// When the row is wider than its band (#topright-controls' max-width), the lowest-priority buttons leave the row,
+// from the start of OVERFLOW_ORDER (topright-overflow-logic.js), and are listed in the ⋯ menu (#topright-overflow-btn) instead: icon, label,
+// badge and active state copied from the button each time the menu opens, a click forwarded to the button itself,
+// so every handler stays the button's own. The workspace switcher and the ⋯ never leave the row; the tools toggle
+// leaves it last of all, in a band too narrow for anything else.
+// An item that opens a dropdown of its own (bookmarks, share) is pinned back into the row before it is clicked, so
+// its dropdown hangs where it always does; the pin is let go when its dropdown closes.
+// ═══════════════════════════════════════════
+
+import { emit, on } from './state.js';
+import { t } from './i18n.js';
+import { OVERFLOW_ORDER, overflowCount, clampDropdownX } from './topright-overflow-logic.js';
+
+export { OVERFLOW_ORDER, overflowCount };
+
+// The element that leaves the row for each entry (a button inside an overlay goes with its overlay) and the button
+// the menu forwards to.
+const ROW_ITEM = { 'topright-bookmarks-btn': 'bookmarks-overlay', 'invite-overlay': 'invite-overlay' };
+const BUTTON = { 'invite-overlay': 'invite-btn' };
+const DROPDOWN = { 'topright-bookmarks-btn': 'bookmarks-dropdown', 'invite-overlay': 'invite-dropdown' };
+
+const labelOf = (btn) => btn.getAttribute('aria-label') || btn.dataset.tooltip || btn.title || btn.id;
+
+export function initToprightOverflow() {
+  const $ = (id) => document.getElementById(id);
+  const controls = $('topright-controls');
+  const inner = $('topright-inner');
+  const group = $('topright-buttons');
+  const moreBtn = $('topright-overflow-btn');
+  const menu = $('topright-overflow-menu');
+  if (!controls || !inner || !group || !moreBtn || !menu) return null;
+
+  const entries = OVERFLOW_ORDER.map((id) => ({
+    id,
+    item: $(ROW_ITEM[id] || id),
+    button: $(BUTTON[id] || id),
+    dropdown: DROPDOWN[id] ? $(DROPDOWN[id]) : null,
+  })).filter((e) => e.item && e.button);
+  let pinned = null;
+  let open = false;
+
+  const shownInRow = (el) => el.offsetParent !== null || getComputedStyle(el).display !== 'none';
+  const isOverflowed = (e) => e.item.classList.contains('tr-overflowed');
+
+  // The dividers of the dock: one with no shown tool after it (up to the next divider or the end) goes too.
+  const tidyDividers = () => {
+    for (const div of inner.querySelectorAll(':scope > .tr-divider')) {
+      let el = div.nextElementSibling;
+      let any = false;
+      while (el && !el.classList.contains('tr-divider')) {
+        if (!el.classList.contains('tr-overflowed') && el.style.display !== 'none') { any = true; break; }
+        el = el.nextElementSibling;
+      }
+      div.classList.toggle('tr-overflowed', !any);
+    }
+  };
+
+  const fit = () => {
+    for (const e of entries) e.item.classList.remove('tr-overflowed');
+    for (const div of inner.querySelectorAll(':scope > .tr-divider')) div.classList.remove('tr-overflowed');
+    const available = parseFloat(getComputedStyle(controls).maxWidth);
+    const gap = parseFloat(getComputedStyle(controls).columnGap) || 0;
+    const innerGap = parseFloat(getComputedStyle(inner).columnGap) || 0;
+    const groupGap = parseFloat(getComputedStyle(group).columnGap) || 0;
+    const dockShown = !controls.classList.contains('tools-hidden');
+    // the row as it would be with everything in it and no ⋯ (the ⋯ is left out, not hidden: hiding it here would
+    // change the bar's class and wake the observers again)
+    const moreShown = controls.classList.contains('has-overflow') ? moreBtn.getBoundingClientRect().width + groupGap : 0;
+    const total = (dockShown ? inner.getBoundingClientRect().width + gap : 0) + group.getBoundingClientRect().width - moreShown;
+    if (!Number.isFinite(available)) return;
+    const widths = entries.map((e) => {
+      if (!shownInRow(e.item) || e.item.style.display === 'none') return 0;
+      const inDock = inner.contains(e.item);
+      if (inDock && !dockShown) return 0;
+      return e.item.getBoundingClientRect().width + (inDock ? innerGap : groupGap);
+    });
+    const menuWidth = 32 + groupGap;
+    const pinnedIdx = pinned ? [entries.indexOf(pinned)] : [];
+    const { hidden } = overflowCount({ total, available, widths, menuWidth, pinned: pinnedIdx });
+    for (const i of hidden) entries[i].item.classList.add('tr-overflowed');
+    // The dock's dividers: the 2px margins and gaps they free are not counted above, so the row only gets narrower.
+    tidyDividers();
+    if (controls.classList.contains('has-overflow') !== hidden.length > 0) controls.classList.toggle('has-overflow', hidden.length > 0);
+    if (!hidden.length && open) close();
+    else if (open) render();
+  };
+
+  let frame = 0;
+  const schedule = () => {
+    if (frame) return;
+    frame = requestAnimationFrame(() => { frame = 0; fit(); });
+  };
+
+  const render = () => {
+    menu.textContent = '';
+    // in the row's own order, as they would stand in it
+    const listed = entries.filter(isOverflowed)
+      .sort((a, b) => (a.item.compareDocumentPosition(b.item) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+    for (const e of listed) {
+      const row = document.createElement('button');
+      row.type = 'button';
+      row.className = 'topright-overflow-item';
+      row.setAttribute('role', 'menuitem');
+      row.dataset.target = e.id;
+      if (e.button.classList.contains('active')) row.classList.add('active');
+      const icon = document.createElement('span');
+      icon.className = 'topright-overflow-icon';
+      const svg = e.button.querySelector('svg');
+      if (svg) icon.appendChild(svg.cloneNode(true));
+      const label = document.createElement('span');
+      label.className = 'topright-overflow-label';
+      label.textContent = labelOf(e.button);
+      row.append(icon, label);
+      const badge = e.button.querySelector('.count-badge');
+      const text = badge?.textContent.trim();
+      if (badge && text && getComputedStyle(badge).display !== 'none') {
+        const b = document.createElement('span');
+        b.className = `${badge.className} topright-overflow-badge`;
+        b.removeAttribute('id');
+        b.textContent = text;
+        row.appendChild(b);
+      }
+      row.addEventListener('click', () => activate(e));
+      menu.appendChild(row);
+    }
+  };
+
+  const items = () => [...menu.querySelectorAll('.topright-overflow-item')];
+
+  function openMenu(focusFirst) {
+    emit('panel:close-all-dropdowns');
+    render();
+    open = true;
+    menu.hidden = false;
+    moreBtn.setAttribute('aria-expanded', 'true');
+    moreBtn.classList.add('active');
+    if (focusFirst) items()[0]?.focus();
+  }
+  function close(refocus) {
+    if (!open) return;
+    open = false;
+    menu.hidden = true;
+    moreBtn.setAttribute('aria-expanded', 'false');
+    moreBtn.classList.remove('active');
+    if (refocus) moreBtn.focus();
+  }
+
+  function activate(e) {
+    close();
+    if (e.dropdown) {
+      pinned = e;
+      fit();
+      // let go of the pin once its dropdown closes
+      const watch = new MutationObserver(() => {
+        if (e.dropdown.style.display === 'none') { watch.disconnect(); if (pinned === e) { pinned = null; schedule(); } }
+      });
+      watch.observe(e.dropdown, { attributes: true, attributeFilter: ['style'] });
+      setTimeout(() => e.button.click(), 0);
+      return;
+    }
+    e.button.click();
+  }
+
+  moreBtn.addEventListener('click', (ev) => {
+    ev.stopPropagation();
+    if (open) close(); else openMenu(ev.detail === 0);
+  });
+  moreBtn.addEventListener('keydown', (ev) => {
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') { ev.preventDefault(); if (!open) openMenu(false); const list = items(); (ev.key === 'ArrowUp' ? list.at(-1) : list[0])?.focus(); }
+  });
+  menu.addEventListener('keydown', (ev) => {
+    const list = items();
+    const at = list.indexOf(document.activeElement);
+    if (ev.key === 'ArrowDown') { ev.preventDefault(); list[(at + 1) % list.length]?.focus(); }
+    else if (ev.key === 'ArrowUp') { ev.preventDefault(); list[(at - 1 + list.length) % list.length]?.focus(); }
+    else if (ev.key === 'Home') { ev.preventDefault(); list[0]?.focus(); }
+    else if (ev.key === 'End') { ev.preventDefault(); list.at(-1)?.focus(); }
+    else if (ev.key === 'Tab') close();
+  });
+  document.addEventListener('keydown', (ev) => { if (open && ev.key === 'Escape') { ev.stopPropagation(); close(true); } }, true);
+  document.addEventListener('pointerdown', (ev) => { if (open && !menu.contains(ev.target) && !moreBtn.contains(ev.target)) close(); }, true);
+  on('panel:close-all-dropdowns', () => close());
+
+  moreBtn.setAttribute('aria-label', t('toolbar.more'));
+  moreBtn.dataset.tooltip = t('toolbar.more');
+
+  // Live: the band (window, side panels, explorers, Focus Mode) and the row's own contents.
+  const ro = new ResizeObserver(schedule);
+  ro.observe(document.documentElement);
+  ro.observe(controls);
+  for (const e of entries) ro.observe(e.item);
+  ro.observe(inner.querySelector('#workspace-overlay') || inner);
+  new MutationObserver(schedule).observe(document.documentElement, { attributes: true, attributeFilter: ['style', 'class'] });
+  new MutationObserver(schedule).observe(document.body, { attributes: true, attributeFilter: ['style', 'class'] });
+  new MutationObserver(schedule).observe(controls, { attributes: true, attributeFilter: ['class'] });
+  for (const e of entries) new MutationObserver(schedule).observe(e.item, { attributes: true, attributeFilter: ['style'] });
+  const bg = $('static-bg');
+  if (bg) new MutationObserver(schedule).observe(bg, { attributes: true, attributeFilter: ['class'] });
+  // The dropdowns of the bar, kept whole on screen: right of the band's clip (sidebar, Focus Mode rail and left
+  // panels + 20px, as #topright-controls' clip-path) and left of the viewport's edge, as wide as that room at most.
+  const EDGE = 8;
+  const place = (dd) => {
+    dd.style.translate = '';
+    dd.style.maxWidth = '';
+    if (dd.style.display === 'none' || !dd.isConnected) return;
+    const sidebar = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sidebar-total-width')) || 0;
+    const minLeft = Math.max(EDGE, sidebar + 20);
+    const maxRight = document.documentElement.clientWidth - EDGE;
+    let r = dd.getBoundingClientRect();
+    const first = clampDropdownX({ left: r.left, width: r.width, minLeft, maxRight });
+    if (first.maxWidth !== null) { dd.style.maxWidth = `${first.maxWidth}px`; r = dd.getBoundingClientRect(); }
+    const { shift } = clampDropdownX({ left: r.left, width: r.width, minLeft, maxRight });
+    if (shift) dd.style.translate = `${shift}px 0`;
+  };
+  const dropdowns = ['ws-dropdown', 'bookmarks-dropdown', 'invite-dropdown'].map((id) => $(id)).filter(Boolean);
+  for (const dd of dropdowns) {
+    // its own writes change the style too: act on a change of shown / hidden only
+    let shown = dd.style.display !== 'none';
+    new MutationObserver(() => {
+      const now = dd.style.display !== 'none';
+      if (now !== shown) { shown = now; place(dd); }
+    }).observe(dd, { attributes: true, attributeFilter: ['style'] });
+  }
+  let placing = 0;
+  const placeOpen = () => { cancelAnimationFrame(placing); placing = requestAnimationFrame(() => dropdowns.forEach(place)); };
+  window.addEventListener('resize', placeOpen);
+  new ResizeObserver(placeOpen).observe(controls);
+  window.addEventListener('resize', schedule);
+  fit();
+  return { fit, close };
+}

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

@@ -9,6 +9,7 @@ import { fetchTrash, restoreFromTrash, purgeTrash, deleteMemoryPermanent } from
 import { formatTrashAge, formatMemoryContent }  from './utils.js';
 import { storage } from './storage.js';
 import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
+import { centeredInFrame, frameRect } from './app-frame.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -96,7 +97,7 @@ function openTrashPanel() {
     return;
   }
   const existing = $('trash-window');
-  if (existing) { existing.style.zIndex = '50101'; return; }
+  if (existing) { existing.style.zIndex = '49901'; return; }
 
   trashPanelOpen   = true;
   trashSelectedId  = null;
@@ -110,12 +111,13 @@ function openTrashPanel() {
   const saved = JSON.parse(storage.getItem('neural-panel-trash-window') || 'null');
   if (saved) {
     if (saved.left && saved.left !== 'auto') win.style.left = saved.left;
-    if (saved.top)    win.style.top    = Math.max(48, parseInt(saved.top)) + 'px';
+    if (saved.top)    win.style.top    = Math.max(frameRect().top, parseInt(saved.top)) + 'px';
     if (saved.width)  win.style.width  = saved.width;
     if (saved.height) win.style.height = saved.height;
   } else {
-    win.style.left = Math.max(20, (window.innerWidth  - 640) / 2) + 'px';
-    win.style.top  = Math.max(48, (window.innerHeight - 480) / 2) + 'px';
+    const at = centeredInFrame(640, 480);   // in the app frame
+    win.style.left = at.left + 'px';
+    win.style.top  = at.top + 'px';
   }
 
   win.innerHTML = `