synabun 2.0.9 → 2.1.0

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

@@ -18,7 +18,7 @@
 import { state, emit, on } from './state.js';
 import { KEYS, COLOR_PALETTE } from './constants.js';
 import { storage } from './storage.js';
-import { normalizeNodes } from './utils.js';
+import { normalizeNodes, escapeHtml } from './utils.js';
 import { catColor, upgradeSelect } from './colors.js';
 import { isGuest, hasPermission, showGuestToast } from './ui-sync.js';
 import {
@@ -212,7 +212,7 @@ function openDescEditor(cat, chipEl) {
   const currentDesc = state.categoryDescriptions[cat] || '';
   editor.innerHTML = `
     <label>Description for "${cat}"</label>
-    <textarea class="desc-textarea">${currentDesc}</textarea>
+    <textarea class="desc-textarea">${escapeHtml(currentDesc)}</textarea>
     <div class="category-desc-actions">
       <button class="action-btn action-btn--ghost desc-cancel-btn">Cancel</button>
       <button class="action-btn action-btn--primary desc-save-btn">Save</button>
@@ -277,7 +277,7 @@ export function openCategoryChangeModal(node) {
       <div class="cat-modal-option${isActive ? ' active' : ''}" data-cat="${cat}">
         <div class="cat-opt-dot" style="color:${catColor(cat)}; background:${catColor(cat)}"></div>
         <span class="cat-opt-name">${cat}</span>
-        ${desc ? `<span class="cat-opt-desc">${desc}</span>` : ''}
+        ${desc ? `<span class="cat-opt-desc">${escapeHtml(desc)}</span>` : ''}
       </div>`;
   });
 
@@ -476,7 +476,7 @@ async function editCategoryUI(name) {
 
         <div class="ecm-field">
           <label>Description</label>
-          <textarea class="edit-cat-desc ecm-input ecm-textarea" rows="4" placeholder="What this category is for...">${currentDesc}</textarea>
+          <textarea class="edit-cat-desc ecm-input ecm-textarea" rows="4" placeholder="What this category is for...">${escapeHtml(currentDesc)}</textarea>
         </div>
 
         <div class="ecm-divider"></div>

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

@@ -1,5 +1,6 @@
 import { hostedSidepanelId, sidepanelHost } from './ui-sidepanel-runtime.js';
 import { emit } from './state.js';
+import { sessionWindowStatus } from './sidepanel-session-status.js';
 
 const host = sidepanelHost();
 const provider = new URLSearchParams(location.search).get('provider');
@@ -32,6 +33,18 @@ if (hostedSidepanelId && host) {
     const syncTitle = () => host.title(hostedSidepanelId, title?.textContent?.trim());
     if (title) new MutationObserver(syncTitle).observe(title, { childList: true, subtree: true, characterData: true });
     syncTitle();
+    // What its sessions do, for this window's pill in the main window: read from this document's own tray
+    // pills, which the panel paints from its sessions' state, and sent when it changes.
+    const tray = document.getElementById('term-minimized-tray');
+    let sentStatus = '';
+    const syncStatus = () => {
+      const status = sessionWindowStatus([...(tray?.querySelectorAll('.term-minimized-pill') || [])].map((pill) => [...pill.classList]));
+      if (status === sentStatus) return;
+      sentStatus = status;
+      host.status?.(hostedSidepanelId, status);
+    };
+    if (tray) new MutationObserver(syncStatus).observe(tray, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
+    syncStatus();
     host.ready(hostedSidepanelId, { focus, defaults, end, receive(kind, data) {
       if (kind === 'path') return receivePath(data);
       emit(kind === 'image' ? 'wb:send-to-panel' : kind, data);

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

@@ -2,9 +2,15 @@ import { storage } from './storage.js';
 import { state, emit } from './state.js';
 import { hostedSidepanelId } from './ui-sidepanel-runtime.js';
 import { registerSidepanel, setSidepanelVisible, focusSidepanel, detachSidepanel, getSidepanelPresentation, sendToFocusedSession } from './ui-sidepanel-windows.js';
+import { getProviderMeta } from './provider-icons.js';
+import { normalizeSessionWindowStatus } from './sidepanel-session-status.js';
+import { savedTabsStatus } from './ui-sidepanel-tray.js';
 
 let manifestKey;
 const PROVIDERS = { claude: 'Claude', codex: 'Codex', opencode: 'OpenCode' };
+// 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 STATUS_WORDS = { working: 'working', action: 'needs you' };
 const entries = new Map();
 const editorOwners = new Map();
 let initialized = false;
@@ -38,6 +44,11 @@ function pillFor(entry) {
   const pill = document.createElement('div');
   pill.className = 'term-minimized-pill sp-session-pill';
   pill.dataset.sessionWindow = entry.id;
+  const meta = getProviderMeta(PROVIDER_IDS[entry.provider]);
+  pill.style.setProperty('--sp-pill-color', meta.color);
+  const icon = document.createElement('span');
+  icon.className = 'term-minimized-pill-icon';
+  icon.innerHTML = meta.icon; // provider-icons.js's own SVG
   const label = document.createElement('span');
   label.className = 'term-minimized-pill-label';
   const close = document.createElement('button');
@@ -45,7 +56,7 @@ function pillFor(entry) {
   close.textContent = '×';
   close.title = 'End detached session';
   close.addEventListener('click', event => { event.stopPropagation(); end(entry).catch(showError.bind(null, entry)); });
-  pill.append(label, close);
+  pill.append(icon, label, close);
   pill.addEventListener('click', () => show(entry));
   tray.append(pill);
   entry.pill = pill;
@@ -55,16 +66,25 @@ function pillFor(entry) {
 function renderPill(entry) {
   const pill = pillFor(entry);
   if (!pill) return;
-  pill.querySelector('.term-minimized-pill-label').textContent = entry.title || `${PROVIDERS[entry.provider]} session`;
+  const name = entry.title || `${PROVIDERS[entry.provider]} session`;
+  pill.querySelector('.term-minimized-pill-label').textContent = name;
   // Visible session pills also act as a window switcher when windows overlap.
   pill.classList.toggle('active', !!getSidepanelPresentation(entry.id)?.visible);
+  // What its sessions do, as the window's own tray pills say it (ui-sidepanel-session-entry.js): working
+  // like a tray pill, or needing you (a session in it waits on an answer).
+  const status = normalizeSessionWindowStatus(entry.status);
+  pill.classList.toggle('sp-pill-running', status === 'working');
+  pill.classList.toggle('sp-pill-attention', status === 'action');
+  pill.dataset.status = status;
+  pill.title = STATUS_WORDS[status] ? `${name} · ${STATUS_WORDS[status]}` : name;
 }
 
 function showError(entry, error) {
   if (entry.loading) entry.loading.textContent = `Could not open session: ${error?.message || error}`;
 }
 
-function show(entry) {
+/** The window and its session's frame, made once. Whether it shows is setSidepanelVisible's: show(). */
+function mount(entry) {
   if (!entry.element) {
     const element = document.createElement('section');
     element.className = 'sp-session-window';
@@ -103,6 +123,10 @@ function show(entry) {
     const lang = new URLSearchParams(window.location.search).get('lang');
     frame.src = `/sidepanel-session.html?provider=${entry.provider}${lang ? `&lang=${encodeURIComponent(lang)}` : ''}`;
   }
+}
+
+function show(entry) {
+  mount(entry);
   setSidepanelVisible(entry.id, true);
 }
 
@@ -159,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;
@@ -167,6 +191,15 @@ export function initDetachedAgentSessions() {
     .sp-session-button:hover { color:white; background:#ffffff18; }
     .sp-session-window iframe { border:0; width:100%; flex:1; min-height:0; border-radius:0 0 15px 15px; }
     .sp-session-loading { padding:12px; font:12px sans-serif; color:#cbd5e1; }
+    .sp-session-pill .term-minimized-pill-icon { color: color-mix(in srgb, var(--sp-pill-color, #fff) 45%, transparent); transition: color .2s; }
+    .sp-session-pill.sp-pill-running { border-color: color-mix(in srgb, var(--sp-pill-color, #fff) 42%, transparent); }
+    .sp-session-pill.sp-pill-running .term-minimized-pill-icon { color: var(--sp-pill-color, #fff); }
+    .sp-session-pill.sp-pill-running .term-minimized-pill-label::before { content: ''; display: inline-block; width: 6px;
+      height: 6px; margin-right: 6px; border-radius: 50%; background: var(--sp-pill-color, #fff); vertical-align: middle;
+      animation: sp-pill-pulse 1.2s ease-in-out infinite; }
+    .sp-session-pill.sp-pill-attention { border-color: color-mix(in srgb, var(--accent-orange, #FFB74D) 42%, transparent); }
+    .sp-session-pill.sp-pill-attention .term-minimized-pill-icon { color: var(--accent-orange, #FFB74D); }
+    @keyframes sp-pill-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
     .sp-session-pill.active { border-color:#3b82f680; }
   `;
   document.head.append(style);
@@ -189,6 +222,15 @@ export function initDetachedAgentSessions() {
       entry.title = next; if (entry.label) entry.label.textContent = next; renderPill(entry); save();
     },
     fail: (id, error) => { const entry = entries.get(id); if (entry) showError(entry, error); },
+    // What the window's sessions do, sent by the window when it changes (sidepanel-session-status.js).
+    status(id, status) {
+      const entry = entries.get(id);
+      if (!entry) return;
+      const next = normalizeSessionWindowStatus(status);
+      if (entry.status === next) return;
+      entry.status = next;
+      renderPill(entry);
+    },
     send(id, kind, data) {
       const entry = entries.get(id);
       if (!entry) return;
@@ -217,7 +259,16 @@ export function initDetachedAgentSessions() {
   try {
     for (const record of JSON.parse(storage.getItem(manifestKey) || '[]')) {
       if (!/^session-[a-f0-9-]+$/.test(record.id) || !PROVIDERS[record.provider]) continue;
-      entries.set(record.id, record); renderPill(record);
+      entries.set(record.id, record);
+      // A window whose session was working, or waiting on the user, when the page went away (its saved tabs say
+      // so, read as the tray's placeholders read them) says it at once, and its panel loads, hidden, to say what
+      // the session does now.
+      const saved = savedTabsStatus(record.provider, record.id);
+      if (saved !== 'idle') {
+        record.status = saved;
+        try { mount(record); } catch (error) { console.warn('[sidepanel-sessions] could not load a working window', error); }
+      }
+      renderPill(record);
     }
   } catch { /* Missing or invalid saved manifest starts with no extra windows. */ }
 }

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

@@ -1,12 +1,16 @@
 // SynaBun sidepanel tray placeholders.
 // Renders minimized pills for persisted sidepanel tabs before a panel is booted.
+// A tab saved while it was working may still be working (its turn outlives the
+// page on the server): its provider's panel boots then, hidden, and asks, and
+// its own pills (its styles, the sessions' real state) take the placeholders'
+// places. Panels whose saved tabs were all idle stay lazy.
 
 import { storage } from './storage.js';
 import { emit } from './state.js';
 import { getProviderMeta } from './provider-icons.js';
-import { toggleClaudePanel, isClaudePanelOpen } from './ui-claude-panel.js';
-import { toggleCodexPanel, isCodexPanelOpen } from './ui-codex-panel.js';
-import { toggleOpencodePanel, isOpencodePanelOpen } from './ui-opencode-panel-v2.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 { nativeLoopWindowId } from './ui-native-window-id.js';
 
 const PLACEHOLDER_CLASS = 'sidepanel-tray-placeholder';
@@ -17,6 +21,8 @@ const PROVIDERS = {
     windowKey: 'cp-window-id',
     tabsKeyPrefix: 'synabun-claude-panel-tabs',
     pillClass: 'cp-session-pill',
+    // A tab saved while a permission or a question waited on the user (tabNeedsYou in ui-claude-panel.js).
+    attentionClass: 'cp-pill-attention',
     eventName: 'claude-panel:show',
   },
   codex: {
@@ -24,6 +30,8 @@ const PROVIDERS = {
     windowKey: 'cxp-window-id',
     tabsKeyPrefix: 'synabun-codex-panel-tabs',
     pillClass: 'cxp-session-pill',
+    // A tab saved while an approval or a question card waited on the user (paintTrayPill in cdx-tabs.js).
+    attentionClass: 'cxp-pill-attention',
     eventName: 'codex-panel:show',
   },
   opencode: {
@@ -35,13 +43,30 @@ const PROVIDERS = {
     automationKeyPrefix: 'opencode-v2-automations',
     v2Plain: true,
     windowScopedPlain: true,
+    // The sessions that were working when the panel last saw them (ocp-v2-panel.js STOR_BUSY).
+    busyKeyPrefix: 'opencode-v2-busy',
     legacyV1Prefix: 'synabun-ocp-tabs',
     legacyV1CleanupFlag: 'opencode-v1-cleanup-done',
-    pillClass: 'ocp-session-pill',
+    // The v2 panel's own pill (the v1 panel and its ocp-session-pill styles are gone), so a
+    // working placeholder wears ocpv2-pill-running like the real one.
+    pillClass: 'ocpv2-session-pill',
     eventName: 'opencode-panel:show',
   },
 };
 
+// How each panel boots without showing itself, and whether it should: OpenCode only
+// while its server runs (a SynaBun restart stopped every turn, and booting would
+// start the server again just to hear that).
+const BOOT_HIDDEN = {
+  claude: { boot: () => bootClaudePanel() },
+  codex: { boot: () => bootCodexPanel() },
+  opencode: {
+    boot: () => bootOpencodePanel(),
+    ready: async () => (await (await fetch('/api/opencode-v2/status')).json())?.running === true,
+  },
+};
+const _bootedHidden = new Set();
+
 const _loadedProviders = new Set();
 let _initialized = false;
 
@@ -147,8 +172,16 @@ function tabId(provider, tab, index) {
   return `${provider}-${index}`;
 }
 
+// Working when it was saved: a turn (or, in Codex, a thread being made), or, in Claude, background agents
+// and shells its turn left running (`backgroundWork`, their count: the real pill's tabWorking).
 function isRunning(tab) {
-  return !!(tab.running || tab.startingThread);
+  return !!(tab.running || tab.startingThread || Number(tab.backgroundWork) > 0);
+}
+
+// Waiting on the user when it was saved (Claude, Codex: `needsYou`): its placeholder says so before it says
+// working, and the panel boots to ask, as for a working tab (the reattach brings the card back).
+function needsYou(tab) {
+  return tab.needsYou === true;
 }
 
 function isForeignActiveAutomation(tab) {
@@ -168,6 +201,10 @@ function readPayload(key, meta = null) {
       const automationBySession = new Map((Array.isArray(automationRows) ? automationRows : [])
         .filter((row) => row?.sessionId && row?.runId)
         .map((row) => [row.sessionId, row]));
+      const busyRows = windowId && meta.busyKeyPrefix
+        ? parseJson(storage.getItem(`${meta.busyKeyPrefix}-${windowId}`), [])
+        : [];
+      const busy = new Set(Array.isArray(busyRows) ? busyRows : []);
       const tabs = arr
         .filter((s) => typeof s === 'string' && s)
         .map((sid) => {
@@ -177,7 +214,8 @@ function readPayload(key, meta = null) {
             automationRunId: automation?.runId || null,
             automationActive: !!automation?.running,
             automationOwnerId: automation?.ownerId || null,
-            running: !!automation?.running,
+            // An automation's pill follows its turn: a warm worker saved between turns ('idle') rests.
+            running: (!!automation?.running && automation.turn !== 'idle') || busy.has(sid),
           };
         });
       if (!tabs.length) return null;
@@ -492,7 +530,9 @@ function createPlaceholder(provider, payload, tab, index) {
     <span class="term-minimized-pill-label">${esc(tabLabel(provider, tab))}</span>
     <button class="term-minimized-pill-close" data-tooltip="Close" data-tooltip-pos="top">&times;</button>
   `;
-  pill.classList.toggle(`${meta.pillClass.replace('-session-pill', '')}-pill-running`, isRunning(tab));
+  const waiting = !!meta.attentionClass && needsYou(tab);
+  if (meta.attentionClass) pill.classList.toggle(meta.attentionClass, waiting);
+  pill.classList.toggle(`${meta.pillClass.replace('-session-pill', '')}-pill-running`, !waiting && isRunning(tab));
   pill.dataset.sourceKey = payload.key || '';
   pill.addEventListener('click', () => openProvider(provider, id, payload.key));
   pill.querySelector('.term-minimized-pill-close')?.addEventListener('click', (event) => {
@@ -517,6 +557,40 @@ function createPlaceholder(provider, payload, tab, index) {
   return pill;
 }
 
+/**
+ * Whether a provider's panel should boot, hidden, to ask after its tabs: one of this window's own
+ * saved tabs (the ones its restore brings back; never another window's, which a click migrates)
+ * was working when it was saved. Pure: `pills` is meaningfulPills(), `currentKey` this window's key.
+ */
+export function placeholdersNeedBoot(pills, currentKey) {
+  return (Array.isArray(pills) ? pills : [])
+    .some(({ payload, tab }) => payload?.key === currentKey && (isRunning(tab) || needsYou(tab)));
+}
+
+/**
+ * What the tabs a window of `provider` saved were doing then, read as the placeholders read them:
+ * 'action' when one waited on the user (needsYou), 'working' when one worked, else 'idle'. A detached
+ * session window's pill says it before the window loads (ui-sidepanel-sessions.js).
+ */
+export function savedTabsStatus(provider, windowId) {
+  const meta = PROVIDERS[provider];
+  if (!meta || !windowId) return 'idle';
+  const tabs = readPayload(`${meta.tabsKeyPrefix}-${windowId}`, meta)?.tabs || [];
+  if (tabs.some((tab) => needsYou(tab))) return 'action';
+  return tabs.some((tab) => isRunning(tab)) ? 'working' : 'idle';
+}
+
+function bootHiddenIfWorking(provider, pills) {
+  const meta = PROVIDERS[provider];
+  const entry = BOOT_HIDDEN[provider];
+  if (!meta || !entry || _bootedHidden.has(provider) || _loadedProviders.has(provider)) return;
+  if (!placeholdersNeedBoot(pills, scopedTabsKey(meta))) return;
+  _bootedHidden.add(provider);
+  Promise.resolve(entry.ready ? entry.ready() : true)
+    .then((ok) => (ok ? entry.boot() : null))
+    .catch((err) => console.warn(`[sidepanel-tray] ${provider}: could not boot to ask after its working tabs`, err));
+}
+
 export function renderSidepanelTrayPlaceholders() {
   for (const provider of Object.keys(PROVIDERS)) {
     if (_loadedProviders.has(provider)) {
@@ -524,9 +598,11 @@ export function renderSidepanelTrayPlaceholders() {
       continue;
     }
     removePlaceholders(provider);
-    for (const { payload, tab, index } of meaningfulPills(provider)) {
+    const pills = meaningfulPills(provider);
+    for (const { payload, tab, index } of pills) {
       createPlaceholder(provider, payload, tab, index);
     }
+    bootHiddenIfWorking(provider, pills);
   }
 }
 

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(() => {