synabun 1.3.0 → 2.0.0-beta

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

@@ -1,3 +1,4 @@
+import { sendToFocusedSession } from './ui-sidepanel-windows.js';
 // ═══════════════════════════════════════════
 // SynaBun Neural Interface — File Explorer
 // ═══════════════════════════════════════════
@@ -8,8 +9,30 @@
 import { KEYS } from './constants.js';
 import { registerAction } from './ui-keybinds.js';
 import { storage } from './storage.js';
-import { sendToPanel } from './ui-claude-panel.js';
-import { on, emit } from './state.js';
+import { sendToPanel as sendToClaudePanel } from './ui-claude-panel.js';
+import { attachPathToOpencode } from './ui-opencode-panel-v2.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';
+import { debounce, rafThrottle } from './utils.js';
+
+// Route to the most recently focused provider, even when several panels
+// are visible. The provider opens if minimized and attaches its native path chip.
+async function sendPathToActivePanel(filePath) {
+  if (sendToFocusedSession('path', filePath)) return;
+  const target = state.lastActivePanel || 'claude';
+
+  // The Assistant sidepanel: through the bus (a static import would close an import cycle).
+  if (target === 'assistant') { emit('assistant:attach-path', { path: filePath }); return; }
+  if (target === 'opencode') {
+    await attachPathToOpencode(filePath);
+  } else if (target === 'codex') {
+    if (!isCodexPanelOpen()) await toggleCodexPanel();
+    addCodexPathChip(filePath);
+  } else {
+    await sendToClaudePanel(filePath);
+  }
+}
 
 const $ = (id) => document.getElementById(id);
 
@@ -39,12 +62,43 @@ let _folderColors = {};           // { "/path/to/folder": "#hex" }
 let _customIcons = null;          // { extensions: {}, filenames: {} } from server
 let _planEditMode = false;        // true when editing a plan file from Claude panel
 let _planEditFilePath = null;     // path of the plan file being edited
+let _planEditSource = null;       // panel that opened the plan editor
+let _planEditTabId = null;        // tab id to route plan editor events back
+let _planEditContract = null;     // optional versioned document identity and atomic save callback
+let _editorSaving = false;
+let _editorOpenSequence = 0;
 let _changelogEditMode = false;   // true when editing a changelog draft from Claude panel
 let _changelogEditFilePath = null; // path of the changelog draft being edited
 
 const MIN_WIDTH = 240;
 const MAX_WIDTH = 500;
 
+function planEditorSourceLabel(source) {
+  if (source === 'codex') return 'Codex';
+  if (source === 'opencode') return 'OpenCode';
+  return 'Claude';
+}
+
+function planEditorEvent(extra = {}) {
+  const { planId, revision, accountId, threadId, sidepanelWindowId = null } = _planEditContract || {};
+  return { source: _planEditSource, tabId: _planEditTabId, planId, revision, accountId, threadId, sidepanelWindowId, ...extra };
+}
+
+function emitPlanEditorState() {
+  if (_planEditMode) emit('plan-editor-state', planEditorEvent({ dirty: _editorDirty, saving: _editorSaving, open: _editorOpen }));
+}
+
+function cancelPlanEditMode() {
+  if (!_planEditMode) return;
+  const event = planEditorEvent();
+  _planEditMode = false;
+  _planEditFilePath = null;
+  _planEditSource = null;
+  _planEditTabId = null;
+  _planEditContract = null;
+  emit('plan-edit-cancelled', event);
+}
+
 // ─── SVG icons ────────────────────────
 const FOLDER_SVG = '<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
 const FILE_SVG = '<svg viewBox="0 0 24 24"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><polyline points="13 2 13 7 18 7"/></svg>';
@@ -646,7 +700,13 @@ async function addProjectFlow() {
 
     // Register as a project
     const label = data.path.split(/[\\/]/).pop() || data.path;
-    await fetch('/api/claude-code/integrations', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ target: 'project', projectPath: data.path, label }) });
+    const integRes = await fetch('/api/claude-code/integrations', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ target: 'project', projectPath: data.path, label }) });
+    const integData = await integRes.json().catch(() => ({}));
+
+    // Windows git CVE-2022-24765 safe.directory prompt — only fires when server detected the specific error.
+    if (integData && integData.dubiousOwnership && integData.trustPath) {
+      await promptTrustWorkspace(integData.trustPath);
+    }
 
     // Refresh projects list and select the new one
     await fetchProjects();
@@ -663,6 +723,67 @@ async function addProjectFlow() {
   }
 }
 
+function promptTrustWorkspace(trustPath) {
+  return new Promise((resolve) => {
+    const existing = document.getElementById('fe-trust-modal');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'fe-trust-modal';
+    overlay.className = 'fe-modal-overlay';
+
+    const modal = document.createElement('div');
+    modal.className = 'fe-modal fe-trust-modal';
+    modal.innerHTML = `
+      <div class="fe-modal-title">Git ownership mismatch</div>
+      <div class="fe-modal-body">
+        Git is refusing to read this workspace because it's owned by a different user account. Trusting it adds the directory to your global <code>safe.directory</code> config so Synabun's git UI can show the branch and changes.
+        <div class="fe-trust-path" id="fe-trust-path"></div>
+      </div>
+      <div class="fe-modal-actions">
+        <button class="fe-modal-btn fe-modal-cancel" id="fe-trust-skip">Skip</button>
+        <button class="fe-modal-btn fe-modal-confirm" id="fe-trust-confirm">Trust workspace</button>
+      </div>
+    `;
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+    modal.querySelector('#fe-trust-path').textContent = trustPath;
+
+    requestAnimationFrame(() => overlay.classList.add('fe-modal-overlay--in'));
+
+    const done = () => {
+      overlay.classList.remove('fe-modal-overlay--in');
+      setTimeout(() => overlay.remove(), 150);
+      document.removeEventListener('keydown', onKey);
+      resolve();
+    };
+    const onKey = (ev) => { if (ev.key === 'Escape') done(); };
+    document.addEventListener('keydown', onKey);
+
+    modal.querySelector('#fe-trust-skip').addEventListener('click', done);
+    overlay.addEventListener('click', (ev) => { if (ev.target === overlay) done(); });
+
+    modal.querySelector('#fe-trust-confirm').addEventListener('click', async () => {
+      const btn = modal.querySelector('#fe-trust-confirm');
+      btn.disabled = true;
+      btn.textContent = 'Trusting...';
+      try {
+        const res = await fetch('/api/terminal/trust-workspace', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: trustPath }),
+        });
+        const data = await res.json();
+        if (data.ok) showToast('Workspace trusted');
+        else showToast(data.error || 'Trust failed');
+      } catch {
+        showToast('Trust failed');
+      }
+      done();
+    });
+  });
+}
+
 function initProjectSelector() {
   const btn = $('fe-project-btn');
   const wrap = $('fe-project-selector');
@@ -715,11 +836,11 @@ async function loadDirectory(dirPath) {
   return data;
 }
 
-async function searchFiles(term) {
+async function searchFiles(term, signal) {
   const params = new URLSearchParams({ search: term });
   // Scope search to selected project
   if (_selectedProject) params.set('path', _selectedProject.path);
-  const res = await fetch(`/api/project-files?${params}`);
+  const res = await fetch(`/api/project-files?${params}`, signal ? { signal } : undefined);
   return res.json();
 }
 
@@ -750,6 +871,8 @@ function createRow(item, depth) {
   node.dataset.path = item.fullPath || item.name;
   node.dataset.type = item.type;
   node.dataset.expanded = 'false';
+  node.dataset.depth = depth;
+  node._item = item;  // stashed so the delegated #fe-tree listener can recover context
 
   const row = document.createElement('div');
   row.className = 'fe-row';
@@ -811,33 +934,43 @@ function createRow(item, depth) {
     node.appendChild(children);
   }
 
-  // Event handlers
+  // Row click (dir → expand/collapse; file → context menu) and right-click are
+  // handled by the delegated listeners on #fe-tree (see onFeTreeClick /
+  // onFeTreeContextMenu). The node carries data-path/data-type/data-depth and a
+  // stashed _item so the handler can recover the same context createRow had.
+
+  return node;
+}
+
+// Delegated tree interaction — one click + one contextmenu listener on #fe-tree,
+// instead of two listeners per row re-created on every expand. Recovers the
+// server item / depth / row / icon from the clicked .fe-node.
+function onFeTreeClick(e) {
+  const nodeEl = e.target.closest('.fe-node');
+  if (!nodeEl) return;
+  const item = nodeEl._item;
+  if (!item) return;
+  const depth = Number(nodeEl.dataset.depth) || 0;
   if (item.type === 'dir') {
-    row.addEventListener('click', () => {
-      const isExpanded = node.dataset.expanded === 'true';
-      if (isExpanded) {
-        collapseDir(node, item.fullPath);
-      } else {
-        expandDir(node, item.fullPath, depth + 1);
-      }
-    });
+    if (nodeEl.dataset.expanded === 'true') {
+      collapseDir(nodeEl, item.fullPath);
+    } else {
+      expandDir(nodeEl, item.fullPath, depth + 1);
+    }
   } else {
-    // Left-click opens context menu for files too
-    row.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      showContextMenu(e, item, node, row, icon, depth);
-    });
-  }
-
-  // Right-click context menu for both files and folders
-  row.addEventListener('contextmenu', (e) => {
     e.preventDefault();
     e.stopPropagation();
-    showContextMenu(e, item, node, row, icon, depth);
-  });
+    showContextMenu(e, item, nodeEl, nodeEl.querySelector('.fe-row'), nodeEl.querySelector('.fe-icon'), depth);
+  }
+}
 
-  return node;
+function onFeTreeContextMenu(e) {
+  const nodeEl = e.target.closest('.fe-node');
+  if (!nodeEl || !nodeEl._item) return;
+  e.preventDefault();
+  e.stopPropagation();
+  const depth = Number(nodeEl.dataset.depth) || 0;
+  showContextMenu(e, nodeEl._item, nodeEl, nodeEl.querySelector('.fe-row'), nodeEl.querySelector('.fe-icon'), depth);
 }
 
 // ─── Delete undo/redo stacks ─────────────
@@ -1157,7 +1290,7 @@ function showContextMenu(e, item, nodeEl, rowEl, iconEl, depth) {
 
   // ── Send to AI (both)
   menu.appendChild(_ctxItem(aiIcon, 'Send to AI', () => {
-    sendToPanel(item.fullPath);
+    sendPathToActivePanel(item.fullPath);
     dismissCtxMenu();
   }));
 
@@ -1167,6 +1300,7 @@ function showContextMenu(e, item, nodeEl, rowEl, iconEl, depth) {
     // ── Edit File
     menu.appendChild(_ctxItem(editIcon, 'Edit File', () => {
       dismissCtxMenu();
+      if ((_editorOpen || _planEditMode) && !closeFileEditor()) return;
       openFileEditor(item.fullPath);
     }));
   }
@@ -1547,11 +1681,35 @@ function updateGutter() {
   const textarea = $('fe-editor-textarea');
   if (!gutter || !textarea) return;
   const lines = textarea.value.split('\n').length;
-  const frags = [];
-  for (let i = 1; i <= lines; i++) frags.push(`<div>${i}</div>`);
-  gutter.innerHTML = frags.join('');
+  // Incremental: line numbers are just 1..N, so we only add/remove the tail delta.
+  // childElementCount is the source of truth (desync-proof, no layout read), and the
+  // common typing case (line count unchanged) does zero DOM work.
+  let have = gutter.childElementCount;
+  if (have === lines) return;
+  if (have < lines) {
+    const frag = document.createDocumentFragment();
+    for (let i = have + 1; i <= lines; i++) {
+      const d = document.createElement('div');
+      d.textContent = i;
+      frag.appendChild(d);
+    }
+    gutter.appendChild(frag);
+  } else {
+    while (have > lines) { gutter.removeChild(gutter.lastChild); have--; }
+  }
 }
 
+// Debounced heavy editor render. Re-highlighting the whole file and reconciling
+// the gutter shouldn't run on every keystroke; the colorized <pre> sits behind a
+// transparent-text textarea, so the user reads live textarea glyphs while
+// colorization catches up a beat later. Caret/line-highlight + dirty state stay
+// immediate (see the input listener). Discrete actions (undo/redo/replace) keep
+// calling updateHighlight()/updateGutter() directly for instant feedback.
+const debouncedEditorRender = debounce(() => {
+  updateHighlight();
+  updateGutter();
+}, 90);
+
 function updateCursorPos() {
   const textarea = $('fe-editor-textarea');
   const el = $('fe-editor-cursor');
@@ -1570,15 +1728,70 @@ function syncGutterScroll() {
   if (gutter && textarea) gutter.scrollTop = textarea.scrollTop;
 }
 
+let _hlMirror = null;
+let _hlMirrorSynced = false;   // false \u2192 re-copy textarea computed styles + width into the mirror
+let _hlResizeObs = null;
+const _hlMirrorProps = [
+  'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'lineHeight',
+  'letterSpacing', 'wordSpacing', 'whiteSpace', 'overflowWrap',
+  'wordBreak', 'tabSize', 'paddingTop', 'paddingRight',
+  'paddingBottom', 'paddingLeft', 'boxSizing'
+];
+
+// Force the next getLineVisualTop to re-copy the textarea's computed styles into
+// the measuring mirror. Needed on word-wrap toggle, which changes wrapping without
+// changing the textarea's box size and so isn't caught by the ResizeObserver.
+function invalidateLineMirror() { _hlMirrorSynced = false; }
+
+function getLineVisualTop(textarea, pos) {
+  if (!_hlMirror) {
+    _hlMirror = document.createElement('div');
+    _hlMirror.style.position = 'absolute';
+    _hlMirror.style.visibility = 'hidden';
+    _hlMirror.style.pointerEvents = 'none';
+    _hlMirror.style.top = '-9999px';
+    _hlMirror.style.left = '0';
+    _hlMirror.style.height = 'auto';
+    _hlMirror.style.overflow = 'hidden';
+    _hlMirror.style.border = 'none';
+    document.body.appendChild(_hlMirror);
+    _hlMirrorSynced = false;
+  }
+  // Observe the textarea so any box-size change (panel/window resize, show/hide)
+  // invalidates the cached copy automatically. The textarea element is stable
+  // across file opens, so this observes exactly once.
+  if (typeof ResizeObserver === 'function' && _hlResizeObs?._target !== textarea) {
+    _hlResizeObs?.disconnect();
+    _hlResizeObs = new ResizeObserver(() => { _hlMirrorSynced = false; });
+    _hlResizeObs.observe(textarea);
+    _hlResizeObs._target = textarea;
+    _hlMirrorSynced = false;
+  }
+  // The getComputedStyle read + 16 style writes was the per-caret-move hot cost;
+  // copy only when stale. The marker measurement below is the one unavoidable read.
+  if (!_hlMirrorSynced) {
+    const cs = getComputedStyle(textarea);
+    for (const p of _hlMirrorProps) _hlMirror.style[p] = cs[p];
+    _hlMirror.style.width = textarea.clientWidth + 'px';
+    _hlMirrorSynced = true;
+  }
+
+  const val = textarea.value;
+  const lineStart = val.lastIndexOf('\n', pos - 1) + 1;
+  _hlMirror.textContent = '';
+  _hlMirror.appendChild(document.createTextNode(val.substring(0, lineStart)));
+  const marker = document.createElement('span');
+  marker.textContent = '\u200b';
+  _hlMirror.appendChild(marker);
+  return marker.offsetTop;
+}
+
 function updateLineHighlight() {
   const textarea = $('fe-editor-textarea');
   const hl = $('fe-editor-line-highlight');
   if (!textarea || !hl) return;
-  const val = textarea.value;
-  const pos = textarea.selectionStart;
-  const lineNum = val.substring(0, pos).split('\n').length - 1;
-  const lineH = 20;
-  hl.style.top = `${10 + lineNum * lineH - textarea.scrollTop}px`;
+  const yPos = getLineVisualTop(textarea, textarea.selectionStart);
+  hl.style.top = `${yPos - textarea.scrollTop}px`;
 }
 
 function updateScrollmap() {
@@ -1606,6 +1819,7 @@ function editorPushUndo(ta) {
 }
 
 function editorInsertText(ta, text) {
+  if (_editorSaving) return;
   editorPushUndo(ta);
   const start = ta.selectionStart;
   const end = ta.selectionEnd;
@@ -1616,12 +1830,14 @@ function editorInsertText(ta, text) {
 }
 
 function editorReplaceRange(ta, from, to, text) {
+  if (_editorSaving) return;
   editorPushUndo(ta);
   ta.value = ta.value.substring(0, from) + text + ta.value.substring(to);
   ta.dispatchEvent(new Event('input'));
 }
 
 function editorUndo(ta) {
+  if (_editorSaving) return;
   if (_undoStack.length === 0) return;
   _redoStack.push({ value: ta.value, selStart: ta.selectionStart, selEnd: ta.selectionEnd });
   const state = _undoStack.pop();
@@ -1634,6 +1850,7 @@ function editorUndo(ta) {
 }
 
 function editorRedo(ta) {
+  if (_editorSaving) return;
   if (_redoStack.length === 0) return;
   _undoStack.push({ value: ta.value, selStart: ta.selectionStart, selEnd: ta.selectionEnd });
   const state = _redoStack.pop();
@@ -1645,17 +1862,61 @@ function editorRedo(ta) {
   updateHighlight();
 }
 
-async function openFileEditor(filePath) {
+function getEditorSelectionOffset(text, lineNum, columnNum = 1) {
+  const content = String(text || '');
+  const lines = content.split('\n');
+  const targetLine = Math.min(Math.max(1, Number(lineNum) || 1), lines.length || 1);
+  const targetColumn = Math.max(1, Number(columnNum) || 1);
+  let pos = 0;
+  for (let i = 0; i < targetLine - 1; i++) pos += lines[i].length + 1;
+  pos += Math.min(targetColumn - 1, (lines[targetLine - 1] || '').length);
+  return { pos, line: targetLine };
+}
+
+function focusEditorLocation(lineNum, columnNum = 1) {
+  const textarea = $('fe-editor-textarea');
+  if (!textarea || !lineNum || lineNum < 1) return;
+  const { pos, line } = getEditorSelectionOffset(textarea.value, lineNum, columnNum);
+  textarea.focus();
+  textarea.setSelectionRange(pos, pos);
+  const yPos = getLineVisualTop(textarea, pos);
+  const lineHeight = 20;
+  textarea.scrollTop = Math.max(0, yPos - 5 * lineHeight);
+  updateCursorPos();
+  updateLineHighlight();
+  syncGutterScroll();
+}
+
+async function openFileEditor(filePath, opts = {}) {
+  const openSequence = ++_editorOpenSequence;
+  const contract = _planEditContract;
   try {
+    const normalizedPath = String(filePath || '').replace(/\\/g, '/');
     const res = await fetch(`/api/file-content?path=${encodeURIComponent(filePath)}`);
     const data = await res.json();
+    if (openSequence !== _editorOpenSequence) return;
     if (!res.ok) {
+      const isOpencodeConfig = normalizedPath.endsWith('/.config/opencode/config.json');
+      const isAllowlistMiss = res.status === 403 && data?.error === 'Path outside registered project roots';
+      if (isOpencodeConfig && isAllowlistMiss) {
+        showToast('Restart Synabun to apply OpenCode config editor support');
+        cancelPlanEditMode();
+        return;
+      }
       showToast(data.error || 'Cannot open file');
+      cancelPlanEditMode();
       return;
     }
 
+    if (typeof contract?.expectedMarkdown === 'string'
+      && String(data.content).replace(/\r\n/g, '\n') !== contract.expectedMarkdown.replace(/\r\n/g, '\n')) {
+      showToast('The plan file changed. Reopen the current plan revision.');
+      cancelPlanEditMode();
+      return;
+    }
     _editorOpen = true;
     _editorFilePath = data.path;
+    if (_planEditMode) _planEditFilePath = data.path;
     // Normalize line endings — textarea always returns \n, server may send \r\n on Windows
     _editorOriginal = data.content.replace(/\r\n/g, '\n');
     _editorDirty = false;
@@ -1713,7 +1974,9 @@ async function openFileEditor(filePath) {
     if (_planEditMode) {
       const banner = document.createElement('div');
       banner.className = 'fe-plan-banner';
-      banner.textContent = 'Editing plan — save to send to Claude';
+      banner.textContent = _planEditSource === 'codex'
+        ? 'Editing plan — save to return to review'
+        : `Editing plan — save to send to ${planEditorSourceLabel(_planEditSource)}`;
       edPanel?.prepend(banner);
     } else if (_changelogEditMode) {
       const banner = document.createElement('div');
@@ -1727,21 +1990,29 @@ async function openFileEditor(filePath) {
     updateCursorPos();
     updateEditorDirtyState();
     // Defer so the textarea has rendered its scroll dimensions
-    requestAnimationFrame(() => { updateLineHighlight(); updateScrollmap(); syncHighlightScroll(); });
+    requestAnimationFrame(() => {
+      if (opts?.line) focusEditorLocation(opts.line, opts.column || 1);
+      updateLineHighlight();
+      updateScrollmap();
+      syncHighlightScroll();
+    });
   } catch (err) {
+    cancelPlanEditMode();
     showToast('Failed to open file');
   }
 }
 
 function closeFileEditor() {
+  if (_editorSaving) return false;
   if (_editorDirty) {
     if (!confirm('Discard unsaved changes?')) return false;
   }
 
   // Emit cancel events before clearing flags so Claude panel can re-enable buttons
-  if (_planEditMode) emit('plan-edit-cancelled');
+  if (_planEditMode) cancelPlanEditMode();
   if (_changelogEditMode) emit('changelog-edit-cancelled');
 
+  ++_editorOpenSequence;
   _editorOpen = false;
   _editorFilePath = null;
   _editorOriginal = '';
@@ -1750,6 +2021,8 @@ function closeFileEditor() {
   _editorPreviewMode = false;
   _planEditMode = false;
   _planEditFilePath = null;
+  _planEditSource = null;
+  _planEditTabId = null;
   _changelogEditMode = false;
   _changelogEditFilePath = null;
   $('fe-editor-panel')?.querySelector('.fe-plan-banner')?.remove();
@@ -1757,6 +2030,7 @@ function closeFileEditor() {
   _shLines = null;
   _shViewStart = 0;
   _shViewEnd = 0;
+  if (_hlMirror) { _hlMirror.remove(); _hlMirror = null; }
   const hlCode = $('fe-editor-highlight-code');
   if (hlCode) hlCode.innerHTML = '';
 
@@ -1778,54 +2052,75 @@ function closeFileEditor() {
 }
 
 async function saveFileEditor() {
-  if (!_editorFilePath) return;
+  if (!_editorFilePath || _editorSaving) return;
   const textarea = $('fe-editor-textarea');
   if (!textarea) return;
-
+  const savedContent = textarea.value;
+  const savedPath = _editorFilePath;
+  const planEvent = _planEditMode ? planEditorEvent() : null;
+  const contract = _planEditContract;
+  _editorSaving = true;
+  textarea.readOnly = true;
+  updateEditorDirtyState();
+  let saved = false;
+  let result = null;
   try {
-    const res = await fetch('/api/file-content', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path: _editorFilePath, content: textarea.value })
-    });
-    const data = await res.json();
-    if (!res.ok) {
-      showToast(data.error || 'Save failed');
-      return;
+    if (planEvent?.source === 'codex' && typeof contract?.save !== 'function') {
+      throw new Error('This plan editor is missing its revision. Reopen the plan to save.');
     }
-    _editorOriginal = textarea.value;
-    updateEditorDirtyState();
-
-    // Plan edit: emit saved content to Claude panel, then close editor
-    if (_planEditMode && _editorFilePath === _planEditFilePath) {
-      const savedContent = textarea.value;
-      const savedPath = _editorFilePath;
-      _planEditMode = false;
-      _planEditFilePath = null;
-      showToast('Plan saved — sending to Claude');
-      emit('plan-saved', { filePath: savedPath, content: savedContent });
-      closeFileEditor();
-      return;
+    if (typeof contract?.save === 'function') {
+      result = await contract.save({ ...planEvent, content: savedContent });
+      if (!result?.ok) throw new Error(result?.reason || result?.error || 'The plan changed. Reopen the latest revision before saving.');
+    } else {
+      const res = await fetch('/api/file-content', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: savedPath, content: savedContent }),
+      });
+      result = await res.json();
+      if (!res.ok) throw new Error(result.error || 'Save failed');
     }
-
-    // Changelog edit: emit saved content to Claude panel, then close editor
-    if (_changelogEditMode && _editorFilePath === _changelogEditFilePath) {
-      const savedContent = textarea.value;
-      _changelogEditMode = false;
-      _changelogEditFilePath = null;
-      showToast('Changelog saved — sending to Claude');
-      emit('changelog-saved', { content: savedContent });
-      closeFileEditor();
-      return;
+    _editorOriginal = savedContent;
+    saved = true;
+  } catch (error) {
+    showToast(error?.message || 'Save failed');
+    if (_planEditSource === 'codex') {
+      const banner = $('fe-editor-panel')?.querySelector('.fe-plan-banner');
+      if (banner) banner.textContent = `${error?.message || 'Save failed'} Your edits are still open.`;
     }
-
-    showToast('Saved');
-  } catch {
-    showToast('Save failed');
+  } finally {
+    _editorSaving = false;
+    textarea.readOnly = false;
+    updateEditorDirtyState();
+  }
+  if (!saved) return;
+
+  if (planEvent && _planEditMode && savedPath === _planEditFilePath) {
+    _planEditMode = false;
+    _planEditFilePath = null;
+    _planEditSource = null;
+    _planEditTabId = null;
+    _planEditContract = null;
+    showToast('Plan saved');
+    emit('plan-saved', {
+      ...planEvent, filePath: result?.path || savedPath, content: savedContent,
+      persisted: typeof contract?.save === 'function', savedRevision: result?.document?.revision,
+    });
+    closeFileEditor();
+    return;
   }
+  if (_changelogEditMode && savedPath === _changelogEditFilePath) {
+    _changelogEditMode = false;
+    _changelogEditFilePath = null;
+    showToast('Changelog saved — sending to Claude');
+    emit('changelog-saved', { content: savedContent });
+    closeFileEditor();
+    return;
+  }
+  showToast('Saved');
 }
 
 function discardFileEditor() {
+  if (_editorSaving) return;
   if (!confirm('Discard changes?')) return;
   const textarea = $('fe-editor-textarea');
   if (textarea) textarea.value = _editorOriginal;
@@ -1841,12 +2136,13 @@ function updateEditorDirtyState() {
 
   const saveBtn = $('fe-editor-save');
   if (saveBtn) {
-    saveBtn.disabled = !_editorDirty;
+    saveBtn.disabled = _editorSaving || (!_editorDirty && !_planEditMode);
     saveBtn.classList.toggle('dirty', _editorDirty);
   }
 
   const discardBtn = $('fe-editor-discard');
-  if (discardBtn) discardBtn.disabled = !_editorDirty;
+  if (discardBtn) discardBtn.disabled = _editorSaving || !_editorDirty;
+  emitPlanEditorState();
 }
 
 // ─── Markdown rendering (same as Skills Studio) ────────────
@@ -1991,11 +2287,9 @@ function selectFindMatch(focusTextarea) {
     textarea.setSelectionRange(m.start, m.end);
   }
   // Scroll match into view
-  const text = textarea.value.substring(0, m.start);
-  const lineNum = text.split('\n').length;
+  const yPos = getLineVisualTop(textarea, m.start);
   const lineHeight = 20;
-  const targetScroll = (lineNum - 5) * lineHeight; // a few lines above
-  textarea.scrollTop = Math.max(0, targetScroll);
+  textarea.scrollTop = Math.max(0, yPos - 5 * lineHeight);
 }
 
 function updateFindCount() {
@@ -2010,6 +2304,7 @@ function updateFindCount() {
 }
 
 function doReplace() {
+  if (_editorSaving) return;
   const textarea = $('fe-editor-textarea');
   const replaceInput = $('fe-editor-replace-input');
   if (!textarea || !replaceInput || _findMatches.length === 0 || _findIndex < 0) return;
@@ -2030,6 +2325,7 @@ function doReplace() {
 }
 
 function doReplaceAll() {
+  if (_editorSaving) return;
   const textarea = $('fe-editor-textarea');
   const findInput = $('fe-editor-find-input');
   const replaceInput = $('fe-editor-replace-input');
@@ -2070,26 +2366,30 @@ function closeGoToLine() {
 }
 
 function goToLine(lineNum) {
-  const textarea = $('fe-editor-textarea');
-  if (!textarea || !lineNum || lineNum < 1) return;
-  const lines = textarea.value.split('\n');
-  const target = Math.min(lineNum, lines.length);
-  let pos = 0;
-  for (let i = 0; i < target - 1; i++) pos += lines[i].length + 1;
-  textarea.focus();
-  textarea.setSelectionRange(pos, pos);
-  const lineHeight = 20;
-  textarea.scrollTop = Math.max(0, (target - 5) * lineHeight);
-  updateCursorPos();
-  updateLineHighlight();
-  syncGutterScroll();
+  focusEditorLocation(lineNum, 1);
   closeGoToLine();
 }
 
 
+// Append a muted "… N more (truncated)" row when the server capped a large dir,
+// so files aren't silently dropped. Styled like the inline "Loading..." indicator.
+function appendTruncationNotice(container, total, shown, depth) {
+  if (!total || total <= shown) return;
+  const note = document.createElement('div');
+  note.style.cssText = `padding:4px 0 4px ${depth * 16 + 24}px;font-size:11px;color:rgba(255,255,255,0.3);font-family:var(--ff-mono);`;
+  note.textContent = `… ${total - shown} more (truncated — narrow with search)`;
+  container.appendChild(note);
+}
+
 async function buildFileTree() {
   const tree = $('fe-tree');
   if (!tree) return;
+  // Delegated listeners survive innerHTML clears, so wire them once on the container.
+  if (!tree._delegated) {
+    tree.addEventListener('click', onFeTreeClick);
+    tree.addEventListener('contextmenu', onFeTreeContextMenu);
+    tree._delegated = true;
+  }
   tree.innerHTML = '';
 
   const data = _cache.values().next().value || await loadDirectory();
@@ -2113,6 +2413,7 @@ async function buildFileTree() {
     tree.appendChild(node);
   }
 
+  if (data.truncated) appendTruncationNotice(tree, data.total, items.length, 0);
   updateCount(items.length);
 }
 
@@ -2142,6 +2443,8 @@ async function expandDir(nodeEl, dirPath, depth) {
     const child = createRow(item, depth);
     childrenEl.appendChild(child);
   }
+
+  if (data.truncated) appendTruncationNotice(childrenEl, data.total, items.length, depth);
 }
 
 function collapseDir(nodeEl, dirPath) {
@@ -2190,11 +2493,14 @@ function updateCount(count) {
 // ═══════════════════════════════════════════
 
 let _searchTimer = null;
+let _searchAbort = null;
 
 function onFilterInput(e) {
   _filterText = e.target.value.trim();
 
   clearTimeout(_searchTimer);
+  // Cancel any in-flight search — its response is for a now-stale query.
+  _searchAbort?.abort();
 
   if (_filterText.length > 2) {
     _searchTimer = setTimeout(async () => {
@@ -2202,7 +2508,20 @@ function onFilterInput(e) {
       if (!tree) return;
       tree.innerHTML = '<div style="padding:12px;font-size:11px;color:rgba(255,255,255,0.3);font-family:var(--ff-mono);text-align:center;">Searching...</div>';
 
-      const data = await searchFiles(_filterText);
+      const controller = new AbortController();
+      _searchAbort = controller;
+      const queryAtRequest = _filterText;
+      let data;
+      try {
+        data = await searchFiles(_filterText, controller.signal);
+      } catch (err) {
+        if (err && err.name === 'AbortError') return;  // superseded by a newer search
+        tree.innerHTML = '<div style="padding:12px;font-size:11px;color:rgba(255,120,120,0.6);font-family:var(--ff-mono);text-align:center;">Search failed</div>';
+        updateCount(0);
+        return;
+      }
+      // Guard against an out-of-order response landing after the query moved on.
+      if (queryAtRequest !== _filterText) return;
       tree.innerHTML = '';
 
       if (!data || !data.items || data.items.length === 0) {
@@ -2238,10 +2557,32 @@ function initResizeHandle() {
   if (!handle || !panel) return;
 
   let dragging = false;
+  let resizeRaf = 0;
+  let pendingWidth = _width;
+  let explorerWidth = 0;
+
+  const applyResize = () => {
+    resizeRaf = 0;
+    _width = pendingWidth;
+    panel.style.width = `${_width}px`;
+    applyFileExplorerWidth();
+  };
+  const scheduleResize = (width) => {
+    pendingWidth = width;
+    if (!resizeRaf) resizeRaf = requestAnimationFrame(applyResize);
+  };
+  const flushResize = () => {
+    if (resizeRaf) {
+      cancelAnimationFrame(resizeRaf);
+      resizeRaf = 0;
+    }
+    applyResize();
+  };
 
   handle.addEventListener('mousedown', (e) => {
     e.preventDefault();
     dragging = true;
+    explorerWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--explorer-width')) || 0;
     handle.classList.add('active');
     document.body.style.cursor = 'col-resize';
     document.body.style.userSelect = 'none';
@@ -2250,16 +2591,14 @@ function initResizeHandle() {
   document.addEventListener('mousemove', (e) => {
     if (!dragging) return;
     // The panel left edge starts at --explorer-width
-    const explorerWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--explorer-width')) || 0;
     const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, e.clientX - explorerWidth));
-    _width = newWidth;
-    panel.style.width = `${_width}px`;
-    applyFileExplorerWidth();
+    scheduleResize(newWidth);
   });
 
   document.addEventListener('mouseup', () => {
     if (!dragging) return;
     dragging = false;
+    flushResize();
     handle.classList.remove('active');
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
@@ -2336,19 +2675,48 @@ export function initFileExplorer() {
   });
 
   // ── Plan editor — open plan file from Claude panel for direct editing ──
-  on('open-plan-editor', ({ filePath }) => {
+  on('open-plan-editor', (contract = {}) => {
+    const { filePath, source = 'claude', tabId = null } = contract;
+    if (!filePath) return;
+    if (_planEditMode && _planEditFilePath === filePath
+      && _planEditSource === source && _planEditTabId === tabId
+      && _planEditContract?.planId === contract.planId && _planEditContract?.revision === contract.revision) {
+      $('fe-editor-textarea')?.focus();
+      return;
+    }
+    if ((_editorOpen || _planEditMode) && !closeFileEditor()) {
+      emit('plan-edit-cancelled', { source, tabId, planId: contract.planId, revision: contract.revision, accountId: contract.accountId, threadId: contract.threadId, sidepanelWindowId: contract.sidepanelWindowId || null });
+      return;
+    }
     _planEditMode = true;
     _planEditFilePath = filePath;
+    _planEditSource = source;
+    _planEditTabId = tabId;
+    _planEditContract = contract;
     openFileEditor(filePath);
   });
 
   // ── Changelog editor — open changelog draft from Claude panel for direct editing ──
   on('open-changelog-editor', ({ filePath }) => {
+    if ((_editorOpen || _planEditMode) && !closeFileEditor()) return;
     _changelogEditMode = true;
     _changelogEditFilePath = filePath;
     openFileEditor(filePath);
   });
 
+  on('open-file-editor', ({ filePath, line, column } = {}) => {
+    if (!filePath) return;
+    if ((_editorOpen || _planEditMode) && !closeFileEditor()) return;
+    _planEditContract = null;
+    _planEditMode = false;
+    _planEditFilePath = null;
+    _planEditSource = null;
+    _planEditTabId = null;
+    _changelogEditMode = false;
+    _changelogEditFilePath = null;
+    openFileEditor(filePath, { line, column });
+  });
+
   const panel = $('file-explorer-panel');
   if (!panel) return;
 
@@ -2432,6 +2800,10 @@ export function initFileExplorer() {
       const hl = $('fe-editor-highlight');
       if (hl) { hl.style.whiteSpace = newWrap; hl.style.overflowWrap = newOverflow; }
       wordWrapBtn.classList.toggle('active', !wrapped);
+      // Wrapping changed without a box-size change → re-sync the measuring mirror
+      // and reposition the current-line highlight.
+      invalidateLineMirror();
+      updateLineHighlight();
     });
   }
 
@@ -2503,18 +2875,23 @@ export function initFileExplorer() {
 
   if (editorTextarea) {
     editorTextarea.addEventListener('input', () => {
+      // Immediate: cheap feedback the user perceives directly.
       updateEditorDirtyState();
-      updateGutter();
-      updateHighlight();
       updateLineHighlight();
+      // Debounced: full-file syntax highlight + gutter reconcile (heavy on big files).
+      debouncedEditorRender();
     });
-    // Scroll sync: gutter follows textarea, update scrollmap + line highlight + syntax
-    editorTextarea.addEventListener('scroll', () => {
+    // Scroll sync: gutter follows textarea, update scrollmap + line highlight + syntax.
+    // Coalesced to one run per frame (vsync-aligned) so fast scrolling doesn't fire
+    // four DOM-measuring ops on every scroll pixel. Passive: the handler never
+    // calls preventDefault.
+    const onEditorScroll = rafThrottle(() => {
       syncGutterScroll();
       syncHighlightScroll();
       updateScrollmap();
       updateLineHighlight();
     });
+    editorTextarea.addEventListener('scroll', onEditorScroll, { passive: true });
     // Cursor position + line highlight tracking
     editorTextarea.addEventListener('click', () => { updateCursorPos(); updateLineHighlight(); });
     editorTextarea.addEventListener('keyup', () => { updateCursorPos(); updateLineHighlight(); });
@@ -2523,6 +2900,7 @@ export function initFileExplorer() {
     let _undoBurstTimer = null;
 
     editorTextarea.addEventListener('keydown', (e) => {
+      if (_editorSaving) return;
       const ta = e.target;
       const mod = e.ctrlKey || e.metaKey;