synabun 2.0.10 → 2.1.0

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

@@ -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-windows.js

@@ -3,6 +3,7 @@ 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();
@@ -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() {
@@ -57,8 +61,8 @@ function injectStyles() {
     .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-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,.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(() => {