synabun 2.1.0 → 2.2.1

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-whiteboard.js

@@ -3058,7 +3058,7 @@ function isWhiteboardActive() {
 }
 
 // A key pressed inside a side panel is the panel's: registerSidepanel marks every panel root
-// (Claude, Codex, OpenCode, Assistant) with data-sidepanel-provider.
+// (Claude, Codex, OpenCode, Antigravity, Assistant) with data-sidepanel-provider.
 export function isSidepanelKeyTarget(el) {
   return !!el?.closest?.('[data-sidepanel-provider]');
 }

package/neural-interface/public/shared/ui-worker-end.js

@@ -2,7 +2,7 @@
 // SynaBun Neural Interface — how a dispatched worker's tab ends: the page side
 // ═══════════════════════════════════════════
 //
-// What the three provider sidepanels (Claude Code, Codex, OpenCode) share for
+// What the four provider sidepanels (Claude Code, Codex, OpenCode, Antigravity) share for
 // the end of a worker the Assistant dispatched: following the run until it
 // has something to show, asking the dispatcher how it went (GET
 // /api/assistant/runs/:runId, then its `assistant:dispatch` events), the card

package/neural-interface/public/shared/whatsapp/wa-view.js

@@ -89,7 +89,7 @@ export const BRAIN_COPY = Object.freeze({
   effortDefault: 'Default effort',
   saved: 'WhatsApp model saved. It applies from your next message.',
 });
-const BRAIN_PROVIDER_LABELS = Object.freeze({ 'claude-code': 'Claude', codex: 'Codex', opencode: 'OpenCode' });
+const BRAIN_PROVIDER_LABELS = Object.freeze({ 'claude-code': 'Claude', codex: 'Codex', opencode: 'OpenCode', antigravity: 'Antigravity' });
 export function brainProviderLabel(provider) { return BRAIN_PROVIDER_LABELS[provider] || String(provider || ''); }
 /**
  * The stored choice of a status: { provider, model, effort } or null (same as
@@ -399,7 +399,7 @@ export function waView(status, { now = Date.now() } = {}) {
     }
     case 'connected': {
       const who = accountLine(s);
-      // A Codex / OpenCode brain holds the conversation at read-only whatever the level.
+      // A Codex / OpenCode / Antigravity brain holds the conversation at read-only whatever the level.
       const applies = s.brainLimit?.provider ? say('view.connected.readOnlyBrain', 'Read-only ({brain} brain)', { brain: s.brainLimit.label || s.brainLimit.provider }) : level;
       return view('ok', say('view.connected.title', 'Connected'), [mode, who, applies].filter(Boolean).join(' · '), { primary: button('open-conversation', say('button.openConversation', 'Open conversation')), secondary: button('test', say('button.test', 'Send a test message')), step: 'done', pane: 'connected', nav: 'connected' });
     }

package/neural-interface/public/shared/worker-questions.js

@@ -0,0 +1,34 @@
+// Bridge run state to each provider's existing question card. No card markup lives here.
+import { t } from './i18n.js';
+
+export function syncWorkerQuestions(holder, run, { open, close }) {
+  const previous = holder._workerQuestions || new Map();
+  const next = new Map((run.pending || []).filter((p) => p.kind === 'question' || p.protocol?.provider === 'codex').map((p) => [p.requestId, p]));
+  // Set before rendering: callbacks can synchronously read the current request.
+  holder._workerQuestions = next;
+  for (const [id, pending] of previous) if (!next.has(id)) close(id, pending);
+  for (const [id, pending] of next) if (!previous.has(id)) open(id, pending);
+}
+
+export async function answerWorkerQuestion(runId, requestId, response) {
+  const res = await fetch(`/api/assistant/runs/${encodeURIComponent(runId)}/permission`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...response, requestId, origin: 'user' }),
+  });
+  const body = await res.json().catch(() => ({}));
+  // Another surface or Stop consumed it first. This card must clear too.
+  if (res.status === 409 && ['PERMISSION_ALREADY_RESOLVED', 'NO_PENDING_REQUEST'].includes(body.code)) return { stale: true };
+  if (!res.ok || body.ok === false) throw new Error(body.error || t('workerQuestion.deliveryFailed'));
+  return body;
+}
+
+/** Claude's native card shows one tool call at a time (each call may contain several questions). */
+export function syncWorkerQuestionQueue(holder, run, hooks) {
+  syncWorkerQuestions(holder, run, { open() {}, close() {} });
+  const next = holder._workerQuestions.keys().next().value || null;
+  const previous = holder._workerQuestionActiveId || null;
+  if (next === previous) return;
+  holder._workerQuestionActiveId = next;
+  if (previous) hooks.close(previous);
+  if (next) hooks.open(next, holder._workerQuestions.get(next));
+}

package/neural-interface/public/sidepanel-session.html

@@ -10,7 +10,7 @@
     html .sp-sidepanel { position:fixed; inset:0 !important; width:100% !important; height:100% !important;
       min-width:0 !important; max-width:none !important; transform:none !important; border:0; border-radius:0; box-shadow:none; }
     .sp-window-toggle, .sp-window-move, .sp-window-resize, .sp-dock-resize { display:none !important; }
-    .cp-header-actions, .cxp-actions, .ocpv2-actions { display:none !important; }
+    .cp-header-actions, .cxp-actions, .ocpv2-actions, .agy-actions { display:none !important; }
     #term-minimized-tray { position:fixed; right:8px; top:45px; z-index:20000; }
   </style>
 </head>