synabun 2.0.10 → 2.1.0

package/neural-interface/public/shared/ui-claude-panel.js

@@ -23,7 +23,7 @@ import { createStickyScrollController } from './ui-scroll-follow.js';
 import { requestGeneratedSessionTitle } from './session-title.js';
 import { wireFileLinks } from './ui-file-links.js';
 import { WORKER_END_CLASS, backToAssistant, buildWorkerEndCard, endWorkerRunOnClose, forgetWorkerEnd, trackWorkerEnd, updateWorkerEndBusy } from './ui-worker-end.js';
-import { isDispatchedRun, isEndOfRunAbort } from './worker-end.js';
+import { isDispatchedRun, isEndOfRunAbort, workerEndView } from './worker-end.js';
 import { runAwaitsAnswer } from './sidepanel-session-status.js';
 // ── cp/ feature modules (SDK-engine CLI parity: diffs, agents, bash, perms, statusline) ──
 import { setCpCtx } from './cp/cp-ctx.js';
@@ -2600,7 +2600,7 @@ function injectStyles() {
       border: 0.5px solid rgba(255,255,255,0.05);
       border-radius: 6px;
       font-size: 11px; color: rgba(255,255,255,0.7);
-      cursor: grab;
+      cursor: move;
       transition: background 0.15s, border-color 0.15s;
     }
     .cp-queue-item:hover {
@@ -2614,7 +2614,7 @@ function injectStyles() {
       background: rgba(120,180,255,0.08);
     }
     .cp-queue-drag {
-      color: rgba(255,255,255,0.2); cursor: grab;
+      color: rgba(255,255,255,0.2); cursor: move;
       font-size: 10px; user-select: none; flex-shrink: 0;
     }
     .cp-queue-text {
@@ -5442,7 +5442,8 @@ function _processTabMsg(tab, msg) {
         if (expectRunning && !(tab.sendStartedAt > tab._reattachSentAt)) {
           console.log('[claude-panel] No orphan to reattach — the turn ended while disconnected');
           finishTab(tab, true);
-          appendStatus(tab, 'Connection lost — this turn did not survive the disconnect.');
+          // A dispatched worker's session says what became of its run (resumed, or how it ended), not only this.
+          _lostTurnLine(tab).then((line) => { if (!tab.closed) appendStatus(tab, line); });
         }
         // Prompts queued behind a Compact when the socket closed: nothing says it finished.
         if (tab._queueWaits === 'session') _compactQueue.after(tab, 'lost');
@@ -10452,8 +10453,11 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
   }
   if (!tab) return { ok: false, reason: 'tab_limit' };
   const running = run.status === 'starting' || run.status === 'running';
+  // A dispatched worker a server restart cut off: suspended until the next start resumes it as the same run
+  // (lib/assistant-dispatch.js). It still owns this tab; nothing of its cut-off turn runs any more.
+  const suspended = run.status === 'suspended';
   tab.automationRunId = run.runId;
-  tab.automationActive = running;
+  tab.automationActive = running || suspended;
   tab.automationOwnerId = nativeLoopWindowId;
   tab.releasedRunId = null;
   tab.sdkMode = true;
@@ -10467,6 +10471,12 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
   setRunning(tab, running);
   updatePillLabel(tab);
   tab._automationIteration = run.currentIteration;
+  // Resumed after a server restart: what the run did while this window was away (the continuation prompt, its first
+  // steps: events sent before the page reconnected) is in its transcript, not in this tab, which reads it again.
+  // That holds for a run that resumed and ended while this window was away too.
+  const resumes = Number(run.resumes) || 0;
+  const resumedSinceSeen = resumes > (tab._automationResumes || 0);
+  if (tab._automationHydrated && resumedSinceSeen) tab._automationHydrated = false;
   if (!tab._automationHydrated) {
     tab._automationHydrated = true;
     if (tab.messagesEl) tab.messagesEl.innerHTML = '';
@@ -10476,6 +10486,10 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
       return { ok: false, reason: 'dismissed' };
     }
   }
+  if (running && resumedSinceSeen && tab._automationResumes !== undefined) appendStatus(tab, 'Resumed after the server restart — the run continues here.');
+  tab._automationResumes = Math.max(tab._automationResumes || 0, resumes);
+  if (suspended) _showRunSuspended(tab, run);
+  else tab._automationSuspendedAt = null;
   // (A dispatched worker's failure, with its reason, is on its end card.)
   if (run.status === 'failed' && run.error && !isDispatchedRun(run) && tab._automationLifecycleError !== run.error) {
     tab._automationLifecycleError = run.error;
@@ -10527,6 +10541,64 @@ function hasLiveBackgroundWork(tab) {
   return false;
 }
 
+const LOST_TURN_LINE = 'Connection lost — this turn did not survive the disconnect.';
+// What a tab says when the turn it showed did not survive a lost connection. When its session is a dispatched worker's
+// (a tab opened on that session), the line says what became of the run: resumed after a server restart (in its own
+// tab), or how it ended, with its reason. A tab the user continued by hand after its run ended keeps the generic line:
+// the turn that was cut off was the user's own.
+async function _lostTurnLine(tab) {
+  if (!tab?.sessionId || tab.releasedRunId) return LOST_TURN_LINE;
+  try {
+    const res = await fetch('/api/sidepanel-runs');
+    const runs = res.ok ? ((await res.json())?.runs || []) : [];
+    const run = runs.find((item) => item?.providerSessionId === tab.sessionId && isDispatchedRun(item));
+    if (!run) return LOST_TURN_LINE;
+    if (run.status === 'suspended') return 'SynaBun restarted — this worker run is being resumed in its own tab.';
+    if (run.status === 'starting' || run.status === 'running') {
+      return Number(run.resumes) > 0 ? 'SynaBun restarted — this worker run was resumed and continues in its own tab.' : LOST_TURN_LINE;
+    }
+    let dispatch = null;
+    try {
+      const reply = await fetch(`/api/assistant/runs/${encodeURIComponent(run.runId)}`);
+      if (reply.ok) dispatch = (await reply.json())?.run || null;
+    } catch {}
+    const view = workerEndView(run, dispatch);
+    return view ? `This session's worker run ended: ${view.title}${view.detail ? ` — ${view.detail}` : ''}` : LOST_TURN_LINE;
+  } catch {
+    return LOST_TURN_LINE;
+  }
+}
+
+// A run tab whose run the server suspended as it restarted (status 'suspended'): its turn was cut off, so the tab
+// stops looking busy (spinner, a tool row and its timer, background shells: all went with the CLI) and says the run
+// resumes. Once per suspension.
+function _showRunSuspended(tab, run) {
+  const key = run?.suspendedAt || 'suspended';
+  if (tab._automationSuspendedAt === key) return;
+  tab._automationSuspendedAt = key;
+  finishTab(tab, true);
+  _closeCutOffTools(tab);
+  appendStatus(tab, 'SynaBun restarted — resuming this run…');
+}
+
+// Every tool call of the tab still waiting for its result is closed as cut off, through the path a result takes (the
+// card's state, its timer, an agent card), and the background work the tab showed is over.
+function _closeCutOffTools(tab) {
+  const $msgs = tab?.messagesEl;
+  if (!$msgs) return;
+  for (const card of $msgs.querySelectorAll('.tool-card[data-tool-id]')) {
+    if (card.classList.contains('tool-ok') || card.classList.contains('tool-error') || card.dataset.resolved === '1') continue;
+    if (!card.dataset.toolId) continue;
+    try { updateToolResult(tab, { type: 'tool_result', tool_use_id: card.dataset.toolId, is_error: true, content: 'Cut off by the server restart.' }); } catch {}
+  }
+  let shells = false;
+  for (const task of tab.bgTasks?.values?.() || []) {
+    if (task?.status === 'running') { task.status = 'stopped'; shells = true; }
+  }
+  if (shells) { try { renderBgTray(tab); } catch {} }
+  _setBackgroundWork(tab, []);
+}
+
 // The end of a worker the Assistant dispatched (ui-worker-end.js): one card,
 // the last row of its transcript. Its button closes this tab the way the X
 // does (a warm worker that finished its task is completed, one still at work

package/neural-interface/public/shared/ui-command-runner.js

@@ -2,6 +2,7 @@
 import { emit, on } from './state.js';
 import { KEYS, COLOR_PALETTE } from './constants.js';
 import { storage } from './storage.js';
+import { frameRect, clampBox } from './app-frame.js';
 import { commandLaunchPayload, selectCommandGroups, isCommandLaunchAvailable } from './command-runner-model.js';
 
 const $ = id => document.getElementById(id);
@@ -35,9 +36,11 @@ export function initCommandRunner() { return on('command-runner:open', openPanel
 function clampPanel() {
   if (!_panel) return;
   const width = _panel.offsetWidth, height = _panel.offsetHeight;
-  const top = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')) || 48;
-  _panel.style.left = Math.max(8, Math.min(parseFloat(_panel.style.left) || 8, window.innerWidth - width - 8)) + 'px';
-  _panel.style.top = Math.max(top + 8, Math.min(parseFloat(_panel.style.top) || top + 8, window.innerHeight - height - 8)) + 'px';
+  // Inside the app frame (8px from the window and the bar, as before, and clear of an open explorer)
+  const f = frameRect();
+  const at = clampBox(parseFloat(_panel.style.left) || f.left, parseFloat(_panel.style.top) || f.top, width, height, f);
+  _panel.style.left = at.x + 'px';
+  _panel.style.top = at.y + 'px';
 }
 function openPanel() {
   if (_panel) { $('cr-search')?.focus(); return; }

package/neural-interface/public/shared/ui-context-menu.js

@@ -0,0 +1,295 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — The app's right-click menu
+// A right-click anywhere that has no menu of its own opens the app's menu
+// instead of the browser's: page actions, then what fits what was clicked
+// (selected text, a link, an image, a memory, the memory map, the 2D graph,
+// the focus-mode whiteboard), then the app's panels and tools. The
+// ContextMenu key and Shift+F10 open it at the focused element.
+//
+// The rule: the app's menu opens unless the element under the pointer shows
+// a menu of its own for that very click. Such an element takes the event
+// (preventDefault) only when it opens its menu: the terminal's viewport, a
+// File Explorer row or its empty tree, an editor tab, a 2D graph card, an
+// Automation Studio item or folder, the map's canvas (OrbitControls takes
+// every right-click there for right-drag pan; the map opens this menu itself
+// when the right button comes up where it went down). An area that only
+// suppressed the browser's menu would leave the user with nothing, so none
+// does. NATIVE_CONTEXTMENU_SELECTORS names exact elements, never a whole
+// screen or panel. Fields keep the browser's menu (spelling, paste), and so
+// does any right-click with Shift held.
+//
+// The items are context-menu-model.js; the component is context-menu.js;
+// the areas registry is context-menu-areas.js. Every action is a function the
+// app already has: a registered keybind action, a bus event the menubar
+// emits, a panel's button, sendToPanel, the memory card's functions.
+// ═══════════════════════════════════════════
+
+import { openContextMenu, isContextMenuOpen } from './context-menu.js';
+import { isEditableTarget, isMenuKey, nativeMenuReason, selectionPayload, usableImage, usableLink } from './context-menu-logic.js';
+import { buildAppMenu } from './context-menu-model.js';
+import { areaAt, registerContextMenuArea } from './context-menu-areas.js';
+import { t } from './i18n.js';
+import { state, emit } from './state.js';
+import { actionForKey, getShortcutLabel, hasAction, runAction } from './ui-keybinds.js';
+import { isGuest, hasPermission } from './ui-sync.js';
+import { sendToPanel } from './ui-claude-panel.js';
+import { closeMemoryCard, focusLinkedMemories, getOpenCardsSnapshot } from './ui-detail.js';
+import { formatMemoryForCLI } from './ui-terminal.js';
+import { fetchMemory } from './api.js';
+
+/**
+ * Where the browser's menu stays: the exact elements with a menu of their own (also for a click their handler did
+ * not take, such as Shift+F10 on them or a moment before they are wired), the other menus themselves, code editors,
+ * and what is not SynaBun's page or sits above the menu. Never a whole screen or panel: the rest of a panel gets the
+ * app's menu. Add `data-native-contextmenu` to an element to keep the browser's menu there.
+ */
+export const NATIVE_CONTEXTMENU_SELECTORS = [
+  '[data-native-contextmenu]',
+  '.term-viewport', '.xterm', '#term-context-menu',             // terminals (docked and floating) and their menu
+  '#fe-tree', '.fe-ctx-flyout',                                 // the File Explorer's tree (rows and its empty space) and its menus
+  '.cm-editor', '.fe-editor-menu',                              // a code editor anywhere; the editor's menus and palette
+  '#context-menu',                                              // the 2D graph's card menu
+  '.explorer-ctx-menu', '.as-context-menu',                     // the Explorer's and the Automation Studio's menus
+  '.browser-canvas',                                            // the SynaBun browser's view of another site (Back / Reload here would act on SynaBun)
+  '#loading-overlay',                                           // the loading / restart screen, above the menu
+];
+const OPT_OUT = NATIVE_CONTEXTMENU_SELECTORS.join(', ');
+const SEARCH_MAX = 500;   // a search for the selection takes its first 500 characters
+const KEY_ECHO_MS = 800;  // the contextmenu event a menu key sends after its keydown already opened the menu
+
+let _installed = false;
+let _keyboardOpenedAt = -Infinity;
+
+// ═══════════════════════════════════════════
+// AREAS (context-menu-areas.js; re-exported here for the pages that already import this module)
+// ═══════════════════════════════════════════
+
+export { registerContextMenuArea };
+
+// A row of the memory Explorer.
+const explorerArea = {
+  id: 'memory-explorer',
+  match(el) {
+    const row = el?.closest?.('.explorer-memory[data-id]');
+    return row ? { kind: 'memory', memory: { id: row.dataset.id } } : null;
+  },
+};
+
+// A memory card (ui-detail.js names its element after the memory's first 8 characters).
+const cardArea = {
+  id: 'memory-card',
+  match(el) {
+    const card = el?.closest?.('.detail-card');
+    if (!card?.id) return null;
+    const open = getOpenCardsSnapshot().find((c) => card.id === `detail-card-${String(c.memoryId).slice(0, 8)}`);
+    return open ? { kind: 'memory', memory: { id: open.memoryId, card: true } } : null;
+  },
+};
+
+// ═══════════════════════════════════════════
+// WHAT WAS CLICKED
+// ═══════════════════════════════════════════
+
+const elementOf = (node) => (node && node.nodeType !== 1 ? node.parentElement : node) || null;
+
+// The selected text, when the right-click is on it (or the keyboard opened the menu while something is selected).
+function selectionAt(el) {
+  const sel = window.getSelection?.();
+  if (!sel || sel.isCollapsed || !sel.rangeCount) return '';
+  const text = selectionPayload(sel.toString());
+  if (!text) return '';
+  if (!el || el === document.body || el === document.documentElement) return text;
+  for (let i = 0; i < sel.rangeCount; i++) {
+    try { if (sel.getRangeAt(i).intersectsNode(el)) return text; } catch { /* a node from another document */ }
+  }
+  return '';
+}
+
+function linkAt(el) {
+  const a = el?.closest?.('a[href]');
+  if (!a) return null;
+  const raw = a.getAttribute('href');
+  let resolved = null;
+  try { resolved = new URL(raw, document.baseURI).href; } catch { /* not an address */ }
+  return usableLink(raw, resolved);
+}
+
+function imageAt(el) {
+  const img = el?.closest?.('img');
+  return img ? usableImage(img.currentSrc || img.src) : null;
+}
+
+/** What the menu is about for an element (null: the page itself). */
+export function contextAt(el) {
+  return { selection: selectionAt(el), link: linkAt(el), image: imageAt(el), area: areaAt(el) };
+}
+
+// ═══════════════════════════════════════════
+// WHAT THE MENU CAN DO (the app's own functions)
+// ═══════════════════════════════════════════
+
+async function copyText(text) {
+  const value = String(text ?? '');
+  try {
+    if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(value); return true; }
+  } catch { /* not allowed here (an address that is not secure): the fallback below */ }
+  const area = document.createElement('textarea');
+  area.value = value;
+  area.setAttribute('readonly', '');
+  area.style.cssText = 'position:fixed;top:-1000px;left:0;opacity:0;';
+  document.body.appendChild(area);
+  area.select();
+  let ok = false;
+  try { ok = document.execCommand('copy'); } catch { /* nothing more to try */ }
+  area.remove();
+  return ok;
+}
+
+function toggleFullscreen() {
+  if (document.fullscreenElement) return document.exitFullscreen?.();
+  return document.documentElement.requestFullscreen?.();
+}
+
+// The search bar's own path: its input event shows "Searching…", waits its debounce and searches.
+function searchMemories(text) {
+  const query = selectionPayload(text, SEARCH_MAX);
+  const input = document.getElementById('search-input');
+  if (!input || !query) return;
+  input.value = query;
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+const findNode = (id) => state.allNodes?.find((n) => n.id === id) || null;
+
+// A memory the page has (the slim graph copy is enough to open it), else the one the server has.
+async function withMemory(id, fn) {
+  const node = findNode(id);
+  if (node) return fn(node);
+  const full = await fetchMemory(id).catch(() => null);
+  if (full?.payload) return fn({ id, payload: full.payload });
+  return undefined;
+}
+
+// The AI panel gets the whole memory (the graph's copy of its content is cut at 500 characters).
+async function sendMemory(id) {
+  const full = await fetchMemory(id).catch(() => null);
+  const node = full?.payload ? { id, payload: full.payload } : findNode(id);
+  if (node) await sendToPanel(formatMemoryForCLI(node));
+}
+
+export const ACTIONS = {
+  back: () => history.back(),
+  forward: () => history.forward(),
+  reload: () => location.reload(),
+  copyText,
+  toggleFullscreen,
+  openInNewTab: (href) => { window.open(href, '_blank', 'noopener,noreferrer'); },
+  searchMemories,
+  sendText: (text) => sendToPanel(text),
+  runAction: (actionId) => runAction(actionId),
+  press: (id) => document.getElementById(id)?.click(),
+  emit: (name, payload) => emit(name, payload),
+  openMemory: (id) => withMemory(id, (node) => emit('node-selected', node)),
+  showLinked: (id) => withMemory(id, (node) => { emit('node-selected', node); focusLinkedMemories(node.id); }),
+  sendMemory,
+  closeCard: (id) => closeMemoryCard(id),
+};
+
+function canGoBack() {
+  const nav = window.navigation;
+  return typeof nav?.canGoBack === 'boolean' ? nav.canGoBack : history.length > 1;
+}
+
+function canGoForward() {
+  const nav = window.navigation;
+  return typeof nav?.canGoForward === 'boolean' ? nav.canGoForward : true; // unknown without the Navigation API
+}
+
+/** The menu model's environment as the page is now (labels, keys and states are read at every open). */
+export function menuEnv() {
+  return {
+    t,
+    shortcut: (actionId) => getShortcutLabel(actionId),
+    hasAction,
+    hasElement: (id) => !!document.getElementById(id),
+    isActive: (id) => !!document.getElementById(id)?.classList.contains('active'),
+    allowed: (perm) => !isGuest() || hasPermission(perm),
+    appIcon: (id) => (id && document.getElementById(id)?.querySelector('.menu-icon')?.innerHTML) || '',
+    page: {
+      url: location.href,
+      canGoBack: canGoBack(),
+      canGoForward: canGoForward(),
+      fullscreen: !!document.fullscreenElement,
+      fullscreenEnabled: document.fullscreenEnabled !== false && typeof document.documentElement.requestFullscreen === 'function',
+    },
+    act: ACTIONS,
+  };
+}
+
+// ═══════════════════════════════════════════
+// OPENING
+// ═══════════════════════════════════════════
+
+// One menu at a time: the menubar, the dropdowns that listen for it, and the menus that only close on a click.
+function closeOtherMenus() {
+  emit('panel:close-all-dropdowns');
+  document.getElementById('term-context-menu')?.classList.remove('open');
+  document.getElementById('context-menu')?.classList.remove('open');
+  document.querySelectorAll('.as-context-menu, .explorer-ctx-menu').forEach((el) => el.remove());
+}
+
+function open(ctx, placement) {
+  const items = buildAppMenu(ctx, menuEnv());
+  closeOtherMenus();
+  return openContextMenu({ items, label: t('contextMenu.label'), ...placement });
+}
+
+/**
+ * Open the app's menu from an area that detects its own right-click (the memory map, where a right-drag pans):
+ * what is at `target`, with `area` in place of what the registered areas would say.
+ * @param {{ x?: number, y?: number, target?: Element | null, area?: object | null, keyboard?: boolean,
+ *   anchorRect?: DOMRect | null, returnFocus?: Element | null }} o
+ */
+export function openAppContextMenu({ x, y, target = null, area = null, keyboard = false, anchorRect = null, returnFocus } = {}) {
+  const el = elementOf(target);
+  const ctx = contextAt(el);
+  if (area) ctx.area = area;
+  return open(ctx, { x, y, anchorRect, keyboard, returnFocus: returnFocus === undefined ? document.activeElement : returnFocus });
+}
+
+function onContextMenu(event) {
+  // The menu key's own contextmenu event, after its keydown opened the menu.
+  if (isContextMenuOpen() && performance.now() - _keyboardOpenedAt < KEY_ECHO_MS) { event.preventDefault(); return; }
+  const el = elementOf(event.target);
+  const reason = nativeMenuReason(event, {
+    inOwnMenu: !!el?.closest?.('.app-ctx-menu'),
+    editable: isEditableTarget(el),
+    optedOut: !!el?.closest?.(OPT_OUT),
+  });
+  if (reason === 'own-menu') { event.preventDefault(); return; }
+  if (reason) return;
+  event.preventDefault();
+  open(contextAt(el), { x: event.clientX, y: event.clientY, keyboard: false, returnFocus: document.activeElement });
+}
+
+function onKeyDown(event) {
+  if (event.defaultPrevented || !isMenuKey(event) || isContextMenuOpen() || actionForKey(event)) return;
+  const active = document.activeElement;
+  const el = active && active !== document.body && active !== document.documentElement ? active : null;
+  if (el && (isEditableTarget(el) || el.closest(OPT_OUT) || el.closest('.app-ctx-menu'))) return;
+  event.preventDefault();
+  _keyboardOpenedAt = performance.now();
+  open(contextAt(el), { anchorRect: el?.getBoundingClientRect() || null, keyboard: true, returnFocus: el });
+}
+
+/** Install the app's right-click menu (once per page). */
+export function initAppContextMenu() {
+  if (_installed) return;
+  _installed = true;
+  registerContextMenuArea(explorerArea);
+  registerContextMenuArea(cardArea);
+  // Bubble phase at the window: every handler of the page has had the event first.
+  window.addEventListener('contextmenu', onContextMenu);
+  // A menu key the user bound to an action stays that action (actionForKey), whichever listener runs first.
+  document.addEventListener('keydown', onKeyDown);
+}

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);