synabun 2.0.10 → 2.2.0

package/neural-interface/public/shared/ui-sidepanel-session-entry.js

@@ -27,9 +27,16 @@ if (hostedSidepanelId && host) {
       receivePath = panel.attachPathToOpencode;
       end = panel.endHostedOpenCodeSessions;
       defaults = () => ({ project: store.getState().cwd || '' });
+    } else if (provider === 'antigravity') {
+      const panel = await import('./ui-antigravity-panel.js');
+      await panel.toggleAntigravityPanel();
+      receivePath = panel.attachPathToAntigravity;
+      end = panel.endHostedAntigravitySessions;
+      // The active tab's project (the picker's hidden input holds '' until the project list has loaded).
+      defaults = panel.antigravityPanelDefaults;
     } else throw new Error('Unknown session provider');
-    const focus = () => document.querySelector('#cp-input, #cxp-input, .ocpv2-compose textarea')?.focus();
-    const title = document.querySelector('.cp-session-label, .cxp-session-label, .ocpv2-session-label');
+    const focus = () => document.querySelector('#cp-input, #cxp-input, .ocpv2-compose textarea, .agy-input')?.focus();
+    const title = document.querySelector('.cp-session-label, .cxp-session-label, .ocpv2-session-label, .agy-session-btn span');
     const syncTitle = () => host.title(hostedSidepanelId, title?.textContent?.trim());
     if (title) new MutationObserver(syncTitle).observe(title, { childList: true, subtree: true, characterData: true });
     syncTitle();

package/neural-interface/public/shared/ui-sidepanel-sessions.js

@@ -7,9 +7,9 @@ import { normalizeSessionWindowStatus } from './sidepanel-session-status.js';
 import { savedTabsStatus } from './ui-sidepanel-tray.js';
 
 let manifestKey;
-const PROVIDERS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode' };
+const PROVIDERS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode', antigravity: 'Antigravity' };
 // provider-icons.js ids: the window's pill wears its provider's icon and colour.
-const PROVIDER_IDS = { claude: 'claude-code', codex: 'codex', opencode: 'opencode' };
+const PROVIDER_IDS = { claude: 'claude-code', codex: 'codex', opencode: 'opencode', antigravity: 'antigravity' };
 const STATUS_WORDS = { working: 'working', action: 'needs you' };
 const entries = new Map();
 const editorOwners = new Map();
@@ -22,7 +22,7 @@ function save() {
 function storageFor(id) {
   // Session lists/registries share one live cache. Unscoped defaults and legacy
   // session pointers belong to the individual document, never another session.
-  const scoped = key => /^(synabun-(claude|codex)-panel-(session|thread|title|project|model|effort|autoaccept|default-model|permission-mode)|opencode-v2-project)$/.test(key);
+  const scoped = key => /^(synabun-(claude|codex|antigravity)-panel-(session|thread|title|project|model|effort|autoaccept|default-model|permission-mode)|opencode-v2-project)$/.test(key);
   const keyFor = key => scoped(key) ? `synabun-session-pref-${id}:${key}` : key;
   return {
     getItem(key) {
@@ -183,7 +183,7 @@ export function initDetachedAgentSessions() {
       display:flex; flex-direction:column; background:#121214; border:1px solid #ffffff18;
       border-radius:16px; box-shadow:0 12px 40px #0008; }
     .sp-session-header { display:flex; align-items:center; gap:6px; padding:8px; flex-shrink:0;
-      cursor:grab; touch-action:none; color:#cbd5e1; font:11px 'JetBrains Mono',monospace; }
+      cursor:move; touch-action:none; color:#cbd5e1; font:11px 'JetBrains Mono',monospace; }
     .sp-session-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .sp-session-actions { display:flex; gap:3px; }
     .sp-session-button { display:inline-flex; justify-content:center; align-items:center; width:25px;

package/neural-interface/public/shared/ui-sidepanel-state.js

@@ -2,34 +2,45 @@
 const MIN_SIZE = 320;
 const MARGIN = 8;
 
+// `viewport` is the area a floating panel stays in: { top, width, height } (the window below the bar), or the app
+// frame's edges { left, top, right, bottom } (app-frame.js frameRect()). MARGIN keeps it clear of those edges.
+function boundsOf(viewport) {
+  const left = Number.isFinite(viewport.left) ? viewport.left : 0;
+  const right = Number.isFinite(viewport.right) ? viewport.right : viewport.width;
+  const bottom = Number.isFinite(viewport.bottom) ? viewport.bottom : viewport.height;
+  return { left, top: viewport.top || 0, right, bottom };
+}
+
 export function clampSidepanelRect(rect, viewport) {
-  const left = MARGIN;
-  const top = Math.max(MARGIN, viewport.top + MARGIN);
-  const availableWidth = Math.max(1, viewport.width - MARGIN * 2);
-  const availableHeight = Math.max(1, viewport.height - top - MARGIN);
+  const b = boundsOf(viewport);
+  const left = b.left + MARGIN;
+  const top = Math.max(MARGIN, b.top + MARGIN);
+  const availableWidth = Math.max(1, b.right - b.left - MARGIN * 2);
+  const availableHeight = Math.max(1, b.bottom - top - MARGIN);
   const width = Math.min(availableWidth, Math.max(Math.min(MIN_SIZE, availableWidth), rect.width));
   const height = Math.min(availableHeight, Math.max(Math.min(MIN_SIZE, availableHeight), rect.height));
   return {
-    x: Math.max(left, Math.min(viewport.width - MARGIN - width, rect.x)),
-    y: Math.max(top, Math.min(viewport.height - MARGIN - height, rect.y)),
+    x: Math.max(left, Math.min(b.right - MARGIN - width, rect.x)),
+    y: Math.max(top, Math.min(b.bottom - MARGIN - height, rect.y)),
     width, height,
   };
 }
 
 export function resizeSidepanelRect(rect, edge, dx, dy, viewport) {
-  const minWidth = Math.min(MIN_SIZE, Math.max(1, viewport.width - MARGIN * 2));
-  const minHeight = Math.min(MIN_SIZE, Math.max(1, viewport.height - viewport.top - MARGIN * 2));
+  const b = boundsOf(viewport);
+  const minWidth = Math.min(MIN_SIZE, Math.max(1, b.right - b.left - MARGIN * 2));
+  const minHeight = Math.min(MIN_SIZE, Math.max(1, b.bottom - b.top - MARGIN * 2));
   let { x, y, width, height } = rect;
   if (edge.includes('w')) {
-    x = Math.max(MARGIN, Math.min(rect.x + dx, rect.x + rect.width - minWidth));
+    x = Math.max(b.left + MARGIN, Math.min(rect.x + dx, rect.x + rect.width - minWidth));
     width = rect.x + rect.width - x;
   }
-  if (edge.includes('e')) width = Math.max(minWidth, Math.min(viewport.width - MARGIN - x, rect.width + dx));
+  if (edge.includes('e')) width = Math.max(minWidth, Math.min(b.right - MARGIN - x, rect.width + dx));
   if (edge.includes('n')) {
-    y = Math.max(viewport.top + MARGIN, Math.min(rect.y + dy, rect.y + rect.height - minHeight));
+    y = Math.max(b.top + MARGIN, Math.min(rect.y + dy, rect.y + rect.height - minHeight));
     height = rect.y + rect.height - y;
   }
-  if (edge.includes('s')) height = Math.max(minHeight, Math.min(viewport.height - MARGIN - y, rect.height + dy));
+  if (edge.includes('s')) height = Math.max(minHeight, Math.min(b.bottom - MARGIN - y, rect.height + dy));
   return clampSidepanelRect({ x, y, width, height }, viewport);
 }
 

package/neural-interface/public/shared/ui-sidepanel-tray.js

@@ -11,6 +11,7 @@ import { getProviderMeta } from './provider-icons.js';
 import { toggleClaudePanel, isClaudePanelOpen, bootClaudePanel } from './ui-claude-panel.js';
 import { toggleCodexPanel, isCodexPanelOpen, bootCodexPanel } from './ui-codex-panel.js';
 import { toggleOpencodePanel, isOpencodePanelOpen, bootOpencodePanel } from './ui-opencode-panel-v2.js';
+import { toggleAntigravityPanel, isAntigravityPanelOpen, bootAntigravityPanel } from './ui-antigravity-panel.js';
 import { nativeLoopWindowId } from './ui-native-window-id.js';
 
 const PLACEHOLDER_CLASS = 'sidepanel-tray-placeholder';
@@ -52,6 +53,15 @@ const PROVIDERS = {
     pillClass: 'ocpv2-session-pill',
     eventName: 'opencode-panel:show',
   },
+  antigravity: {
+    providerId: 'antigravity',
+    windowKey: 'agy-window-id',
+    tabsKeyPrefix: 'synabun-antigravity-panel-tabs',
+    pillClass: 'agy-session-pill',
+    // A tab saved while a permission card waited on the user (agy-panel.js renderPills).
+    attentionClass: 'agy-pill-attention',
+    eventName: 'antigravity-panel:show',
+  },
 };
 
 // How each panel boots without showing itself, and whether it should: OpenCode only
@@ -60,6 +70,9 @@ const PROVIDERS = {
 const BOOT_HIDDEN = {
   claude: { boot: () => bootClaudePanel() },
   codex: { boot: () => bootCodexPanel() },
+  // An Antigravity turn ends with the page that ran it (its `agy acp` belongs to the panel socket), so a saved tab is
+  // never working after a reload: booting would only start Antigravity to say so.
+  antigravity: { boot: () => bootAntigravityPanel(), ready: async () => false },
   opencode: {
     boot: () => bootOpencodePanel(),
     ready: async () => (await (await fetch('/api/opencode-v2/status')).json())?.running === true,
@@ -152,8 +165,24 @@ function hasOpenCodeState(tab) {
   );
 }
 
+function hasAntigravityState(tab) {
+  const label = normalizeLabel(tab.title || tab.label);
+  return !!(
+    tab.sessionId
+    || tab.running
+    || tab.automationRunId
+    || normalizeLabel(tab.draft)
+    || !isDefaultLabel(label, ['new session', 'antigravity'])
+  );
+}
+
 function tabLabel(provider, tab) {
   if (provider === 'claude') return normalizeLabel(tab.label) || 'New chat';
+  if (provider === 'antigravity') {
+    const title = normalizeLabel(tab.title || tab.label);
+    if (title && !isDefaultLabel(title, ['new session'])) return title;
+    return tab.sessionId ? `Antigravity · ${String(tab.sessionId).slice(0, 8)}` : 'New session';
+  }
   if (provider === 'codex') return normalizeLabel(tab.pendingSessionLabel || tab.title || tab.sessionLabel) || 'New session';
   const title = normalizeLabel(tab.sessionTitle || tab.title);
   if (title) return title;
@@ -169,6 +198,7 @@ function tabId(provider, tab, index) {
   if (provider === 'claude' && tab.sessionId) return String(tab.sessionId);
   if (provider === 'codex' && tab.threadId) return String(tab.threadId);
   if (provider === 'opencode' && tab.sessionId) return String(tab.sessionId);
+  if (provider === 'antigravity' && tab.sessionId) return String(tab.sessionId);
   return `${provider}-${index}`;
 }
 
@@ -338,12 +368,14 @@ function cleanupLegacyV1Once(meta) {
 function statePredicate(provider) {
   if (provider === 'claude') return hasClaudeState;
   if (provider === 'codex') return hasCodexState;
+  if (provider === 'antigravity') return hasAntigravityState;
   return hasOpenCodeState;
 }
 
 function dedupeKeyForTab(provider, tab) {
   if (provider === 'claude') return tab.sessionId ? `cp:${tab.sessionId}` : null;
   if (provider === 'codex') return tab.threadId ? `cxp:${tab.threadId}` : null;
+  if (provider === 'antigravity') return tab.sessionId ? `agy:${tab.sessionId}` : null;
   return tab.sessionId ? `ocp:${tab.sessionId}` : null;
 }
 
@@ -505,14 +537,23 @@ function migrateSourceToCurrentWindow(provider, sourceKey) {
 
 async function openProvider(provider, tabIdValue, sourceKey) {
   migrateSourceToCurrentWindow(provider, sourceKey);
-  if (provider === 'claude') {
-    if (!isClaudePanelOpen()) await toggleClaudePanel();
-  } else if (provider === 'codex') {
-    if (!isCodexPanelOpen()) await toggleCodexPanel();
-  } else if (provider === 'opencode') {
-    if (!isOpencodePanelOpen()) await toggleOpencodePanel();
+  if (tabIdValue) globalThis.__synabunPendingTab = { provider, tabId: String(tabIdValue) };
+  try {
+    if (provider === 'claude') {
+      if (!isClaudePanelOpen()) await toggleClaudePanel();
+    } else if (provider === 'codex') {
+      if (!isCodexPanelOpen()) await toggleCodexPanel();
+    } else if (provider === 'opencode') {
+      if (!isOpencodePanelOpen()) await toggleOpencodePanel();
+    } else if (provider === 'antigravity') {
+      if (!isAntigravityPanelOpen()) await toggleAntigravityPanel();
+    }
+    emit(PROVIDERS[provider]?.eventName, { tabId: tabIdValue });
+  } finally {
+    if (globalThis.__synabunPendingTab?.provider === provider) {
+      globalThis.__synabunPendingTab = null;
+    }
   }
-  emit(PROVIDERS[provider]?.eventName, { tabId: tabIdValue });
 }
 
 function createPlaceholder(provider, payload, tab, index) {

package/neural-interface/public/shared/ui-sidepanel-windows.js

@@ -3,10 +3,11 @@ import { state } from './state.js';
 import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
 import { reserveRightPanelLayout, clearRightPanelLayout, setRightPanelResizing } from './ui-sidepanel-layout.js';
 import { createSidepanelController, clampSidepanelRect, resizeSidepanelRect } from './ui-sidepanel-state.js';
+import { FRAMED_CLASS, frameRect } from './app-frame.js';
 
 const STORAGE_PREFIX = 'synabun-sidepanel-layout-';
 const surfaces = new Map();
-const LABELS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode', assistant: 'SynaBun Assistant' };
+const LABELS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode', antigravity: 'Antigravity', assistant: 'SynaBun Assistant' };
 const DETACH_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="7" width="14" height="14" rx="2"/><path d="M13 3h8v8M21 3l-9 9"/></svg>';
 const DOCK_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16M6 12h6m-3-3 3 3-3 3"/></svg>';
 const MOVE_ICON = '<svg viewBox="0 0 16 16" fill="currentColor"><circle cx="5" cy="4" r="1"/><circle cx="11" cy="4" r="1"/><circle cx="5" cy="8" r="1"/><circle cx="11" cy="8" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="11" cy="12" r="1"/></svg>';
@@ -36,11 +37,14 @@ const controller = createSidepanelController({
   },
 });
 
+// A floating panel stays inside the app frame (below the bar, right of the explorers, the gutter around it). A page
+// without the frame keeps the old rule: the window below the bar.
 function viewport() {
-  return {
-    width: window.innerWidth, height: window.innerHeight,
-    top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')) || 48,
-  };
+  const f = frameRect();
+  const top = document.documentElement.classList.contains(FRAMED_CLASS)
+    ? f.top
+    : parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')) || 48;
+  return { left: f.left, top, right: f.right, bottom: f.bottom, width: f.right, height: f.bottom };
 }
 
 function injectStyles() {
@@ -55,10 +59,10 @@ function injectStyles() {
       transform: none !important; transition: opacity .15s ease;
     }
     .sp-sidepanel.sp-floating.sp-window-focused { border-color: rgba(148,163,184,.38); }
-    .sp-sidepanel.sp-floating > :is(.cp-resize-handle,.cxp-resize-handle,.ocpv2-resize-handle,.asp-resize-handle) { display: none; }
+    .sp-sidepanel.sp-floating > :is(.cp-resize-handle,.cxp-resize-handle,.ocpv2-resize-handle,.agy-resize-handle,.asp-resize-handle) { display: none; }
     .sp-window-move { display: none !important; }
-    .sp-floating .sp-window-move { display: inline-flex !important; cursor: grab; flex-shrink: 0; }
-    .sp-floating > :is(.cp-header,.cxp-header,.ocpv2-header,.asp-header) { cursor: grab; touch-action: none; }
+    .sp-floating .sp-window-move { display: inline-flex !important; cursor: move; flex-shrink: 0; }
+    .sp-floating > :is(.cp-header,.cxp-header,.ocpv2-header,.agy-header,.asp-header) { cursor: move; touch-action: none; }
     .sp-window-toggle svg, .sp-window-move svg { width: 13px; height: 13px; pointer-events: none; }
     .sp-window-resize { display: none; position: absolute; z-index: 20; touch-action: none; }
     .sp-floating > .sp-window-resize { display: block; }
@@ -229,7 +233,7 @@ function ensureFloatingRect(owner) {
   const view = controller.get(owner);
   if (view.layout.mode !== 'floating') return;
   const element = surfaces.get(owner).element;
-  const rect = view.layout.rect || { x: window.innerWidth - element.offsetWidth - 44, y: viewport().top + 44,
+  const rect = view.layout.rect || { x: viewport().right - element.offsetWidth - 36, y: viewport().top + 36,
     width: element.offsetWidth, height: element.offsetHeight };
   const clamped = clampSidepanelRect(rect, viewport());
   if (!view.layout.rect || Object.keys(clamped).some(key => clamped[key] !== view.layout.rect[key])) {
@@ -284,7 +288,7 @@ function startInteraction(id, kind, event) {
   element.classList.add('sp-window-interacting');
   document.body.classList.add('ui-interacting');
   document.body.style.userSelect = 'none';
-  document.body.style.cursor = kind === 'move' ? 'grabbing' : kind === 'dock' ? 'col-resize' : `${kind}-resize`;
+  document.body.style.cursor = kind === 'move' ? 'move' : kind === 'dock' ? 'col-resize' : `${kind}-resize`;
   if (kind === 'dock') setRightPanelResizing(true);
 }
 
@@ -372,11 +376,12 @@ function refreshViewport() {
 }
 window.addEventListener('resize', refreshViewport);
 
-// UI settings and the measured title bar can change without a window resize.
-// Inspect only those inline variables so reservation writes cannot retrigger us.
+// UI settings, the measured title bar and the explorers (the app frame's left edge) can change without a window
+// resize. Inspect only those inline variables so reservation writes cannot retrigger us.
 function viewportStyleKey() {
   const style = document.documentElement.style;
-  return `${style.getPropertyValue('--ui-scale')}|${style.getPropertyValue('--navbar-height')}`;
+  return ['--ui-scale', '--navbar-height', '--explorer-width', '--file-explorer-width']
+    .map(name => style.getPropertyValue(name)).join('|');
 }
 let lastViewportStyle = viewportStyleKey();
 new MutationObserver(() => {