synabun 2.0.10 → 2.2.0

package/neural-interface/public/shared/ui-cost-widget.js

@@ -9,6 +9,7 @@
 import { on, emit } from './state.js';
 import { KEYS } from './constants.js';
 import { storage } from './storage.js';
+import { clampToFrame } from './app-frame.js';
 
 // ── State ──
 
@@ -39,10 +40,10 @@ export function initCostWidget() {
   if (!_docked) {
     const savedPos = _loadPos();
     if (savedPos) {
-      const maxLeft = window.innerWidth - 270;
-      const maxTop = window.innerHeight - 60;
-      _widget.style.left = Math.max(0, Math.min(savedPos.left, maxLeft)) + 'px';
-      _widget.style.top = Math.max(0, Math.min(savedPos.top, maxTop)) + 'px';
+      // Inside the app frame (about 270 × 60 of it on screen)
+      const at = clampToFrame(savedPos.left, savedPos.top, 270, 60);
+      _widget.style.left = at.x + 'px';
+      _widget.style.top = at.y + 'px';
     } else {
       _widget.style.right = '24px';
       _widget.style.bottom = '24px';
@@ -531,47 +532,47 @@ function _toggleCollapse() {
 
 // ── Drag ──
 
-function _makeDraggable(header) {
-  header.style.cursor = 'grab';
-
-  header.addEventListener('mousedown', (e) => {
+function _makeDraggable(header) {
+  header.style.cursor = 'move';
+
+  header.addEventListener('mousedown', (e) => {
     if (e.target.closest('.cw-collapse') || e.target.closest('.cw-scan')) return;
     e.preventDefault();
 
     // If docked, undock on drag
     if (_docked) _undock();
-
-    const rect = _widget.getBoundingClientRect();
-    _drag = {
-      startX: e.clientX,
-      startY: e.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      width: rect.width,
-      height: rect.height,
-    };
-    let dragRaf = 0;
-    let pendingPos = null;
-    const applyDrag = () => {
-      dragRaf = 0;
-      if (!_widget || !pendingPos) return;
-      _widget.style.left = pendingPos.left + 'px';
-      _widget.style.top = pendingPos.top + 'px';
-    };
-    const scheduleDrag = (left, top) => {
-      pendingPos = { left, top };
-      if (!dragRaf) dragRaf = requestAnimationFrame(applyDrag);
-    };
-    const flushDrag = () => {
-      if (dragRaf) {
-        cancelAnimationFrame(dragRaf);
-        dragRaf = 0;
-      }
-      applyDrag();
-    };
-    header.style.cursor = 'grabbing';
-
-    // Reset right/bottom positioning and switch to left/top
+
+    const rect = _widget.getBoundingClientRect();
+    _drag = {
+      startX: e.clientX,
+      startY: e.clientY,
+      origLeft: rect.left,
+      origTop: rect.top,
+      width: rect.width,
+      height: rect.height,
+    };
+    let dragRaf = 0;
+    let pendingPos = null;
+    const applyDrag = () => {
+      dragRaf = 0;
+      if (!_widget || !pendingPos) return;
+      _widget.style.left = pendingPos.left + 'px';
+      _widget.style.top = pendingPos.top + 'px';
+    };
+    const scheduleDrag = (left, top) => {
+      pendingPos = { left, top };
+      if (!dragRaf) dragRaf = requestAnimationFrame(applyDrag);
+    };
+    const flushDrag = () => {
+      if (dragRaf) {
+        cancelAnimationFrame(dragRaf);
+        dragRaf = 0;
+      }
+      applyDrag();
+    };
+    header.style.cursor = 'move';
+
+    // Reset right/bottom positioning and switch to left/top
     _widget.style.right = 'auto';
     _widget.style.bottom = 'auto';
     _widget.style.left = _drag.origLeft + 'px';
@@ -581,25 +582,22 @@ function _makeDraggable(header) {
       if (!_drag) return;
       const dx = ev.clientX - _drag.startX;
       const dy = ev.clientY - _drag.startY;
-      let newLeft = _drag.origLeft + dx;
-      let newTop = _drag.origTop + dy;
-      // Constrain to viewport
-      const ww = _drag.width;
-      const wh = _drag.height;
-      newLeft = Math.max(0, Math.min(window.innerWidth - ww, newLeft));
-      newTop = Math.max(0, Math.min(window.innerHeight - wh, newTop));
-      scheduleDrag(newLeft, newTop);
-    };
-
-    const onUp = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      header.style.cursor = 'grab';
-      if (_drag) {
-        flushDrag();
-        _savePos(parseInt(_widget.style.left), parseInt(_widget.style.top));
-        _drag = null;
-      }
+      let newLeft = _drag.origLeft + dx;
+      let newTop = _drag.origTop + dy;
+      // Constrain to the app frame
+      ({ x: newLeft, y: newTop } = clampToFrame(newLeft, newTop, _drag.width, _drag.height));
+      scheduleDrag(newLeft, newTop);
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      header.style.cursor = 'move';
+      if (_drag) {
+        flushDrag();
+        _savePos(parseInt(_widget.style.left), parseInt(_widget.style.top));
+        _drag = null;
+      }
     };
 
     document.addEventListener('mousemove', onMove);

package/neural-interface/public/shared/ui-crash-notice.js

@@ -0,0 +1,187 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the notice after an automatic restart: the page side
+// ═══════════════════════════════════════════
+//
+// Asks GET /api/system/crash-notice when the page starts and every time its sync
+// socket connects: a page that was open through the crash is not reloaded, its
+// sockets reconnect (ui-sync.js `session:info`). What crash-notice-view.js says is
+// drawn in the update toast's shape (bottom right, styles.css .update-check-toast,
+// .crash-notice) once the loading screen is gone, and stays until it is dismissed.
+// Dismiss asks the server to drop it (POST /api/system/crash-notice/dismiss), which
+// tells every other window (`sync:crash-notice:changed`); this browser also keeps
+// the id it dismissed, for a server that could not remove its record. Open logs
+// is Settings > App's own: the desktop app's bridge, or POST
+// /api/system/app/open-folder, which only a page on this computer may ask. Never
+// asked by an invite guest, and never drawn for one, whatever reaches its sync
+// socket: /api/system is the owner's (the server sends `crash-notice:` to the
+// owner's pages only).
+
+import { on } from './state.js';
+import { getLocale, t } from './i18n.js';
+import { desktopApp } from './desktop-bridge.js';
+import { isGuest } from './ui-sync.js';
+import { crashNoticeView, isLoopbackHost, readCrashNotice } from './crash-notice-view.js';
+
+const NOTICE_URL = '/api/system/crash-notice';
+const OPEN_FOLDER_URL = '/api/system/app/open-folder';
+const WRITE = Object.freeze({ 'Content-Type': 'application/json', 'X-SynaBun-UI': '1', Accept: 'application/json' });
+const DISMISSED_KEY = 'synabun-crash-notice-dismissed';
+const NOTICE_ID = 'crash-notice';
+
+const translate = (key, params) => t(`crashNotice.${key}`, params);
+
+let _wired = false;
+let _asking = null;
+let _current = null; // { id, el }
+let _waiting = null; // the notice that waits for the loading screen to go
+let _guest = false;  // what the last `session:info` said (ui-sync.js isGuest() is the socket's own word)
+
+const guestPage = () => _guest || isGuest();
+
+function esc(value) {
+  return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function dismissedHere(id) {
+  try { return localStorage.getItem(DISMISSED_KEY) === id; } catch { return false; }
+}
+
+function rememberDismissed(id) {
+  try { localStorage.setItem(DISMISSED_KEY, id); } catch { /* storage refused: the server's word is enough */ }
+}
+
+function canOpenLogs() {
+  if (typeof desktopApp()?.openFolder === 'function') return true;
+  return isLoopbackHost(location.hostname);
+}
+
+function hide() {
+  const current = _current;
+  _current = null;
+  if (!current) return;
+  current.el.classList.remove('show');
+  setTimeout(() => current.el.remove(), 250);
+}
+
+/** The loading screen covers the page while it starts: the notice waits for it to go. */
+function whenPageShown(run) {
+  const overlay = document.getElementById('loading-overlay');
+  if (!overlay || overlay.classList.contains('hidden')) { run(); return; }
+  const watch = new MutationObserver(() => {
+    if (!overlay.classList.contains('hidden')) return;
+    watch.disconnect();
+    run();
+  });
+  watch.observe(overlay, { attributes: true, attributeFilter: ['class'] });
+}
+
+function show(view) {
+  hide();
+  document.querySelectorAll(`#${NOTICE_ID}`).forEach((el) => el.remove());
+  const el = document.createElement('div');
+  el.className = 'update-check-toast crash-notice';
+  el.id = NOTICE_ID;
+  el.setAttribute('role', 'status');
+  el.setAttribute('aria-label', view.label);
+  el.dataset.noticeId = view.id;
+  const buttons = view.actions.map((item) => `<button class="action-btn action-btn--ghost crash-notice-btn" type="button" data-crash-action="${esc(item.id)}" id="crash-notice-${esc(item.id)}">${esc(item.label)}</button>`).join('');
+  el.innerHTML = `
+      <div class="utc-icon utc-icon--err" aria-hidden="true">!</div>
+      <div class="utc-body">
+        <div class="utc-title" id="crash-notice-title">${esc(view.title)}</div>
+        <div class="utc-sub" id="crash-notice-when">${esc(view.when)}</div>
+        ${view.how ? `<div class="utc-sub" id="crash-notice-how">${esc(view.how)}</div>` : ''}
+        <div class="crash-notice-lost-title" id="crash-notice-lost-title">${esc(view.lostTitle)}</div>
+        <ul class="utc-list crash-notice-lost" aria-labelledby="crash-notice-lost-title">${view.lost.map((line) => `<li>${esc(line)}</li>`).join('')}</ul>
+        <div class="utc-sub crash-notice-note" id="crash-notice-note" role="status" hidden></div>
+        <div class="update-notice-actions">${buttons}</div>
+      </div>`;
+  el.querySelectorAll('[data-crash-action]').forEach((btn) => {
+    btn.addEventListener('click', (event) => {
+      event.stopPropagation();
+      if (btn.dataset.crashAction === 'dismiss') dismiss(view.id);
+      else if (btn.dataset.crashAction === 'logs') openLogs(el);
+    });
+  });
+  document.body.appendChild(el);
+  requestAnimationFrame(() => el.classList.add('show'));
+  _current = { id: view.id, el };
+}
+
+/** Show this notice (or none): once per crash, never one this browser dismissed, never on a guest's page. */
+function present(notice) {
+  if (!notice || guestPage()) {
+    _waiting = null;
+    hide();
+    return;
+  }
+  // A notice something else took off the page is drawn again: it stays until it is dismissed.
+  if (_current && !_current.el.isConnected) _current = null;
+  if (dismissedHere(notice.id) || _current?.id === notice.id || _waiting?.id === notice.id) return;
+  _waiting = notice;
+  whenPageShown(() => {
+    if (_waiting !== notice) return;
+    _waiting = null;
+    if (dismissedHere(notice.id) || guestPage()) return;
+    show(crashNoticeView(notice, { t: translate, locale: getLocale(), canOpenLogs: canOpenLogs() }));
+  });
+}
+
+/** Ask the server; an older server (404) or a guest (403) has nothing to say. */
+export function checkCrashNotice() {
+  if (guestPage()) return Promise.resolve(null);
+  if (_asking) return _asking;
+  _asking = (async () => {
+    try {
+      const res = await fetch(NOTICE_URL, { headers: { Accept: 'application/json' }, cache: 'no-store' });
+      if (!res.ok) return null;
+      const notice = readCrashNotice(await res.json());
+      present(notice);
+      return notice;
+    } catch {
+      return null;
+    }
+  })().finally(() => { _asking = null; });
+  return _asking;
+}
+
+async function dismiss(id) {
+  rememberDismissed(id);
+  hide();
+  try {
+    const res = await fetch(`${NOTICE_URL}/dismiss`, { method: 'POST', headers: WRITE, body: JSON.stringify({ id }) });
+    const next = res.ok ? readCrashNotice(await res.json()) : null;
+    // A newer crash came while this one was shown: that one is news.
+    if (next && next.id !== id) present(next);
+  } catch { /* the server is away: this browser keeps it dismissed */ }
+}
+
+async function openLogs(el) {
+  const note = el.querySelector('#crash-notice-note');
+  const bridge = desktopApp();
+  let ok = false;
+  if (typeof bridge?.openFolder === 'function') {
+    try { ok = !!(await bridge.openFolder('logs'))?.ok; } catch { ok = false; }
+  } else {
+    try {
+      const res = await fetch(OPEN_FOLDER_URL, { method: 'POST', headers: WRITE, body: JSON.stringify({ which: 'logs' }) });
+      ok = res.ok;
+    } catch { ok = false; }
+  }
+  if (!note) return;
+  note.hidden = ok;
+  note.textContent = ok ? '' : translate('openLogsFailed');
+}
+
+/** Wire the notice once: ask now, and again every time the sync socket connects. */
+export function initCrashNotice() {
+  if (_wired) return;
+  _wired = true;
+  on('session:info', (info) => {
+    _guest = !!info?.isGuest;
+    if (_guest) present(null);
+    else checkCrashNotice();
+  });
+  on('sync:crash-notice:changed', (message) => present(readCrashNotice(message)));
+  checkCrashNotice();
+}

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

@@ -14,7 +14,8 @@ import { storage } from './storage.js';
 import { catColor } from './colors.js';
 import { truncate, formatMemoryContent, exportMemoryAsMarkdown, rafThrottle, escapeHtml } from './utils.js';
 import { t, getLocale } from './i18n.js';
-import { savePanelLayout, restorePanelLayout } from './ui-panels.js';
+import { savePanelLayout, restorePanelLayout, clampPanelToFrame } from './ui-panels.js';
+import { frameRect } from './app-frame.js';
 import { sendSync as _sendSync, hasPermission, isGuest } from './ui-sync.js';
 
 // Wrap sendSync — skip card events when guest lacks cards permission
@@ -546,9 +547,11 @@ function bringToFront(cardEl) {
 function getNextCardPosition() {
   const count = _openCards.size;
   const offset = count * 30;
+  // Cascading from 200 / 80 px of the window (192 / 24 px into the app frame), inside the frame.
+  const f = frameRect();
   return {
-    left: Math.min(window.innerWidth - 540, 200 + (offset % 300)) + 'px',
-    top: Math.min(window.innerHeight - 300, 80 + (offset % 200)) + 'px',
+    left: Math.max(f.left, Math.min(f.right - 540, f.left + 192 + (offset % 300))) + 'px',
+    top: Math.max(f.top, Math.min(f.bottom - 300, f.top + 24 + (offset % 200))) + 'px',
   };
 }
 
@@ -587,6 +590,13 @@ export function getOpenCardCount() {
   return _openCards.size;
 }
 
+/** Press an open card's Linked button from outside it (the context menu), unless it is on already. */
+export function focusLinkedMemories(memoryId) {
+  const card = _openCards.get(memoryId);
+  if (!card || state.focusedNodeId === memoryId) return;
+  q(card.el, 'focus-btn')?.click();
+}
+
 export function restoreOpenCards() {
   const raw = storage.getItem(KEYS.OPEN_CARDS);
   if (!raw) return;
@@ -1062,6 +1072,8 @@ export function openMemoryCard(node, savedPosition) {
   // ── Add to DOM and state ──
   _openCards.set(node.id, cardState);
   document.body.appendChild(card);
+  // A position saved in another window size, or with the explorers closed, comes back inside the app frame.
+  if (savedPosition) clampPanelToFrame(card);
   bringToFront(card);
 
   // Trigger entrance animation on next frame

package/neural-interface/public/shared/ui-file-explorer.js

@@ -18,6 +18,7 @@ import { registerAction } from './ui-keybinds.js';
 import { storage } from './storage.js';
 import { sendToPanel as sendToClaudePanel } from './ui-claude-panel.js';
 import { attachPathToOpencode } from './ui-opencode-panel-v2.js';
+import { attachPathToAntigravity, isAntigravityPanelOpen, toggleAntigravityPanel } from './ui-antigravity-panel.js';
 import { isCodexPanelOpen, toggleCodexPanel } from './cdx/cdx-panel.js';
 import { addPathChip as addCodexPathChip } from './cdx/cdx-tabs.js';
 import { on, emit, state } from './state.js';
@@ -35,6 +36,7 @@ const SEND = {
   claude: (path) => sendToClaudePanel(path, { asFile: true }),
   codex: async (path) => { if (!isCodexPanelOpen()) await toggleCodexPanel(); addCodexPathChip(path); },
   opencode: (path) => attachPathToOpencode(path),
+  antigravity: async (path) => { if (!isAntigravityPanelOpen()) await toggleAntigravityPanel(); return attachPathToAntigravity(path); },
   assistant: (path) => attachToAssistant('assistant', path),
 };
 function attachToAssistant(target, filePath) {
@@ -289,6 +291,13 @@ async function showTree() {
   }
 }
 
+// What each scan state says, in words. The header never shows them while a branch is on screen (that would
+// move the row): there they are a dot on the branch button, its tooltip and label, and a line of the git popover.
+const SCAN_STATE_TEXT = { scanning: 'fileExplorer.branch.scanning', 'timed-out': 'fileExplorer.branch.timedOut', failed: 'fileExplorer.branch.scanFailed' };
+function scanStateText(git) {
+  return git && SCAN_STATE_TEXT[git.scanState] ? tr(SCAN_STATE_TEXT[git.scanState]) : '';
+}
+
 function updateBranchLabel(git) {
   _git = git;
   const btn = $('fe-branch-btn');
@@ -296,15 +305,33 @@ function updateBranchLabel(git) {
   const badge = $('fe-branch-btn-badge');
   if (!btn) return;
 
-  if (git.isGit && git.branch) {
+  const state = SCAN_STATE_TEXT[git.scanState] ? git.scanState : '';
+  const message = scanStateText(git);
+  const hasBranch = !!(git.isGit && git.branch);
+  // Nothing on screen yet (the project's first scan): the state, in one truncated line, where the branch will be.
+  const placeholder = !hasBranch && !git.shown && !!message;
+  let dot = btn.querySelector('.fe-branch-btn-state');
+  if (!dot) { dot = document.createElement('span'); dot.className = 'fe-branch-btn-state'; dot.setAttribute('aria-hidden', 'true'); btn.appendChild(dot); }
+  if (state) btn.dataset.scanState = state; else delete btn.dataset.scanState;
+  btn.setAttribute('aria-busy', String(state === 'scanning'));
+  // Read out, never drawn: only what the owner is waiting for (a first scan, a Refresh), or how one ended.
+  const live = $('fe-git-scan-live');
+  // A background scan clears it (that is not read out) rather than leave an old sentence there.
+  if (live) { const said = git.loud ? message : ''; if (live.textContent !== said) live.textContent = said; }
+
+  if (hasBranch || placeholder) {
     btn.style.display = '';
-    if (nameEl) nameEl.textContent = git.branch;
-    if (badge) badge.textContent = git.count > 0 ? git.count : '';
-    btn.setAttribute('aria-label', tr('fileExplorer.branch.label', { branch: git.branch, count: git.count }));
-    btn.dataset.tooltip = tr('fileExplorer.branch.label', { branch: git.branch, count: git.count });
+    btn.classList.toggle('fe-branch-btn--placeholder', placeholder);
+    if (nameEl) nameEl.textContent = hasBranch ? git.branch : message;
+    if (badge) badge.textContent = hasBranch && git.count > 0 ? git.count : '';
+    const label = hasBranch ? tr('fileExplorer.branch.label', { branch: git.branch, count: git.count }) : '';
+    const full = label && message ? tr('fileExplorer.branch.withState', { label, state: message }) : label || message;
+    btn.setAttribute('aria-label', full);
+    btn.dataset.tooltip = full;
     if (_gitPopoverOpen) renderGitSummary();
   } else {
     btn.style.display = 'none';
+    btn.classList.remove('fe-branch-btn--placeholder');
     closeGitPopover();
   }
 }
@@ -358,7 +385,8 @@ function openGitPopover() {
   requestAnimationFrame(() => pop.classList.add('visible'));
   loadGitBranches();
   renderGitSummary();
-  _fx?.refresh();
+  // Fresh counts for the popover, without a word in the header: nobody pressed Refresh.
+  _fx?.refresh({ quiet: true });
 }
 
 function closeGitPopover() {
@@ -379,6 +407,7 @@ function toggleGitPopover() {
 
 // What changed, in words and counts: from the git state the tree already holds.
 function renderGitSummary() {
+  renderGitScanState();
   const summary = $('fe-git-summary');
   if (!summary) return;
   const changes = _fx?.state.git.changed() || [];
@@ -405,6 +434,18 @@ function renderGitSummary() {
   }
 }
 
+// How the last scan went, in the popover (the header has no room for words): a timeout or a failure always,
+// a scan under way only when the owner is waiting for it (the first one, a Refresh).
+function renderGitScanState() {
+  const line = $('fe-git-scan-state');
+  if (!line) return;
+  const state = _git?.scanState;
+  const message = state === 'scanning' && !_git.loud ? '' : scanStateText(_git);
+  line.textContent = message;
+  line.hidden = !message;
+  if (message) line.dataset.tone = state; else delete line.dataset.tone;
+}
+
 async function loadGitBranches() {
   if (!_selectedProject) return;
   const sel = $('fe-git-branch-select');
@@ -561,6 +602,7 @@ function createGitPopover() {
       </div>
       <div class="fe-git-pop-sep"></div>
       <div class="fe-git-pop-section">
+        <div class="fe-git-scan-state" id="fe-git-scan-state" hidden></div>
         <div class="fe-git-summary" id="fe-git-summary"></div>
       </div>
     </div>

package/neural-interface/public/shared/ui-file-links.js

@@ -2,8 +2,8 @@
 // SynaBun Neural Interface — File links in agent messages: the page side
 // ═══════════════════════════════════════════
 //
-// One click handler for the links in the messages of the four side panels
-// (Assistant, Claude, Codex, OpenCode). A link that points at a file the code
+// One click handler for the links in the messages of the five side panels
+// (Assistant, Claude, Codex, OpenCode, Antigravity). A link that points at a file the code
 // editor can open opens it there (`open-file-editor`), at its line and column;
 // every other link keeps what its panel did with it. What a target means and
 // what a click does are decided in file-links.js; this module gives it the

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

@@ -197,12 +197,12 @@ function detectActiveGame() {
 // ── SVG icons for opponent picker ──
 const ICON_CLAUDE = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>';
 const ICON_OPENAI = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg>';
-const ICON_GEMINI = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"/></svg>';
+const ICON_ANTIGRAVITY = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 20 12 4l7.5 16"/><path d="M8.2 20a3.8 3.8 0 0 1 7.6 0"/></svg>';
 
 const OPPONENTS = [
   { id: 'claude-code', icon: ICON_CLAUDE, label: 'Claude' },
   { id: 'codex',       icon: ICON_OPENAI, label: 'OpenAI' },
-  { id: 'gemini',      icon: ICON_GEMINI, label: 'Gemini' },
+  { id: 'antigravity', icon: ICON_ANTIGRAVITY, label: 'Antigravity' },
 ];
 
 // ── Opponent picker overlay ──

package/neural-interface/public/shared/ui-image-gallery.js

@@ -8,6 +8,7 @@ import { emit, on } from './state.js';
 import { fetchImages, toggleImageFavorite, deleteImage } from './api.js';
 import { addImageToWhiteboard } from './ui-whiteboard.js';
 import { escapeHtml } from './utils.js';
+import { centeredInFrame } from './app-frame.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -23,33 +24,33 @@ let _lightboxImg = null;    // filename currently in lightbox
 let isVisible = false;
 
 // ── Drag state ──
-let _dragging = false;
-let _dragOff = { x: 0, y: 0 };
-let _dragRaf = 0;
-let _pendingDrag = null;
-
-function applyDragPosition() {
-  _dragRaf = 0;
-  if (!_panel || !_pendingDrag) return;
-  _panel.style.left = _pendingDrag.left + 'px';
-  _panel.style.top = _pendingDrag.top + 'px';
-}
-
-function scheduleDragPosition(left, top) {
-  _pendingDrag = { left, top };
-  if (!_dragRaf) _dragRaf = requestAnimationFrame(applyDragPosition);
-}
-
-function flushDragPosition() {
-  if (_dragRaf) {
-    cancelAnimationFrame(_dragRaf);
-    _dragRaf = 0;
-  }
-  applyDragPosition();
-}
-
-// ── Icons ──
-const ICON_CLOSE = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
+let _dragging = false;
+let _dragOff = { x: 0, y: 0 };
+let _dragRaf = 0;
+let _pendingDrag = null;
+
+function applyDragPosition() {
+  _dragRaf = 0;
+  if (!_panel || !_pendingDrag) return;
+  _panel.style.left = _pendingDrag.left + 'px';
+  _panel.style.top = _pendingDrag.top + 'px';
+}
+
+function scheduleDragPosition(left, top) {
+  _pendingDrag = { left, top };
+  if (!_dragRaf) _dragRaf = requestAnimationFrame(applyDragPosition);
+}
+
+function flushDragPosition() {
+  if (_dragRaf) {
+    cancelAnimationFrame(_dragRaf);
+    _dragRaf = 0;
+  }
+  applyDragPosition();
+}
+
+// ── Icons ──
+const ICON_CLOSE = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
 const ICON_REFRESH = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 8a5.5 5.5 0 019.2-4M13.5 8a5.5 5.5 0 01-9.2 4"/><path d="M11.5 2v2.5H14M4.5 14v-2.5H2"/></svg>';
 const ICON_HEART = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.7C4.3 11 2 8.7 2 6.3A3.3 3.3 0 018 4.6a3.3 3.3 0 016 1.7c0 2.4-2.3 4.7-6 7.4z"/></svg>';
 const ICON_HEART_FILL = '<svg viewBox="0 0 16 16" fill="currentColor" stroke="none"><path d="M8 13.7C4.3 11 2 8.7 2 6.3A3.3 3.3 0 018 4.6a3.3 3.3 0 016 1.7c0 2.4-2.3 4.7-6 7.4z"/></svg>';
@@ -388,13 +389,13 @@ function wirePanel() {
     header.addEventListener('mousedown', (e) => {
       if (e.target.closest('button')) return;
       _dragging = true;
-      _panel.classList.add('dragging');
-      const rect = _panel.getBoundingClientRect();
-      _dragOff = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-      _pendingDrag = null;
-      e.preventDefault();
-    });
-  }
+      _panel.classList.add('dragging');
+      const rect = _panel.getBoundingClientRect();
+      _dragOff = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      _pendingDrag = null;
+      e.preventDefault();
+    });
+  }
 
   // Keyboard in lightbox
   document.addEventListener('keydown', handleKey);
@@ -425,24 +426,26 @@ function openPanel() {
   _panel.innerHTML = buildPanelHTML();
   document.body.appendChild(_panel);
 
-  _panel.style.left = Math.max(20, (window.innerWidth - 780) / 2) + 'px';
-  _panel.style.top = Math.max(48, (window.innerHeight - 560) / 2) + 'px';
+  // Centred in the app frame
+  const at = centeredInFrame(780, 560);
+  _panel.style.left = at.left + 'px';
+  _panel.style.top = at.top + 'px';
 
   wirePanel();
   isVisible = true;
   refreshImages();
 
-  // Global mouse handlers for drag
-  const onMouseMove = (e) => {
-    if (!_dragging) return;
-    scheduleDragPosition(e.clientX - _dragOff.x, e.clientY - _dragOff.y);
-  };
-  const onMouseUp = () => {
-    if (!_dragging) return;
-    _dragging = false;
-    flushDragPosition();
-    if (_panel) _panel.classList.remove('dragging');
-  };
+  // Global mouse handlers for drag
+  const onMouseMove = (e) => {
+    if (!_dragging) return;
+    scheduleDragPosition(e.clientX - _dragOff.x, e.clientY - _dragOff.y);
+  };
+  const onMouseUp = () => {
+    if (!_dragging) return;
+    _dragging = false;
+    flushDragPosition();
+    if (_panel) _panel.classList.remove('dragging');
+  };
   document.addEventListener('mousemove', onMouseMove);
   document.addEventListener('mouseup', onMouseUp);