mbeditor 0.13.1 → 0.14.0

data/app/assets/javascripts/mbeditor/components/MbeditorApp.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -25,14 +24,23 @@ var useMemo = _React.useMemo;
 // the re-render happened anyway, and the quick-open index was never rebuilt.
 // JSON.stringify over the whole tree measures 0.33 ms for ~1600 nodes, well
 // under the render it saves.
-function _treeUpdater(newData) {
+// newSignature lets a caller that has already stringified newData hand the
+// result in. The tree poll needs its own changed/unchanged answer and cannot
+// read one out of a functional setState updater, which React invokes during a
+// later render and which has to stay pure. Without this the poll stringified
+// the whole tree a second time on every tick, forever.
+function _treeUpdater(newData, newSignature) {
   return function (prevData) {
-    if (JSON.stringify(newData) === JSON.stringify(prevData)) return prevData;
+    var signature = newSignature != null ? newSignature : JSON.stringify(newData);
+    if (signature === JSON.stringify(prevData)) return prevData;
     SearchService.buildIndex(newData);
     return newData;
   };
 }
 
+// The tree poll's own view of the last tree it saw.
+var _lastPolledTree = null;
+
 var SIDEBAR_MIN_WIDTH = 280;
 var SIDEBAR_MAX_WIDTH = 560;
 var EDITOR_MIN_WIDTH = 320;
@@ -40,6 +48,7 @@ var GIT_PANEL_MIN_WIDTH = 280;
 var PANE_MIN_WIDTH_PERCENT = 20;
 var PANE_MAX_WIDTH_PERCENT = 80;
 var SIDEBAR_COLLAPSED_WIDTH = 48;
+var DRAWER_MIN_HEIGHT = 120;
 // Extension -> Prettier parser. Limited to what the vendored plugins actually
 // parse (babel, estree, html, postcss, markdown); anything outside this map
 // falls through to Monaco's re-indent.
@@ -61,6 +70,27 @@ function prettierParserFor(path) {
   return PRETTIER_PARSERS[String(path || '').split('.').pop().toLowerCase()] || null;
 }
 
+// The audit ring takes numbers only, so a path travels as the index of its
+// extension in the legend and can never be reconstructed from the log.
+function _auditExt(path) {
+  var audit = window.MbeditorAudit;
+  return audit ? audit.code('ext', String(path || '').split('.').pop().toLowerCase()) : 0;
+}
+
+// Named rather than passed an EV code so callers need no audit reference.
+function _recErr(evName) {
+  var audit = window.MbeditorAudit;
+  if (audit) audit.rec(audit.EV.ERR, audit.EV[evName]);
+}
+
+// null means no formatter covers this file type, which is not a round trip.
+function _recFormat(path, startedAt, formatted) {
+  var audit = window.MbeditorAudit;
+  if (audit && formatted != null) {
+    audit.rec(audit.EV.FORMAT, _auditExt(path), Date.now() - startedAt, formatted.length);
+  }
+}
+
 // Indentation comes from the editor's own tabSize/insertSpaces, so formatting
 // produces what the user set up. `insertSpaces !== true` mirrors how
 // EditorPanel configures Monaco: anything but an explicit true means tabs.
@@ -116,7 +146,8 @@ var DEFAULT_EDITOR_PREFS = {
   wordBasedSuggestions: 'matchingDocuments',
   acceptSuggestionOnEnter: 'on',
   autoRevealInExplorer: true,
-  toolbarIconOnly: false,
+  toolbarLabels: false,
+  glass: false,
   rubocopLintEnabled: true,
   routeHints: true,
   prettierPrintWidth: 80,
@@ -130,7 +161,8 @@ var DEFAULT_EDITOR_PREFS = {
   tabDisplayMode: 'scroll',
   persistFindState: true,
   showDotFiles: false,
-  branchStateRestore: true
+  branchStateRestore: true,
+  auditLog: true
 };
 
 // Indentation of formatted output is the formatter's job, not a post-pass:
@@ -139,6 +171,52 @@ var DEFAULT_EDITOR_PREFS = {
 // "Convert Indentation to Tabs / to Spaces" commands (F1) cover converting a
 // file that is already open, using its own indentation guesser.
 
+// Drops both rings — the browser's and the server's — so the next download is
+// a trace of one session and nothing else.
+function clearAuditLog() {
+  if (window.MbeditorAudit) window.MbeditorAudit.clear();
+  fetch(window.mbeditorBasePath() + '/audit_log', {
+    method: 'DELETE',
+    headers: { 'X-Mbeditor-Client': '1' }
+  }).then(function () {
+    EditorStore.setStatus('Audit log cleared', 'info');
+  })["catch"](function () {
+    EditorStore.setStatus('Could not clear the audit log', 'error');
+  });
+}
+
+// Flush first, so the entries recorded in this session are on the server
+// before it builds the payload.
+function downloadAuditLog() {
+  var fetchLog = function () {
+    return fetch(window.mbeditorBasePath() + '/audit_log').then(function (resp) {
+      if (!resp.ok) throw new Error('HTTP ' + resp.status);
+      return resp.json();
+    }).then(function (payload) {
+      // The legend lives only in the browser bundle, so it is stitched on here
+      // rather than uploaded — see audit_log.js.
+      if (payload.client && window.MbeditorAudit) payload.client.legend = window.MbeditorAudit.LEGEND;
+      var blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+      var objectUrl = URL.createObjectURL(blob);
+      var link = document.createElement('a');
+      link.href = objectUrl;
+      link.download = 'mbeditor-audit-' + Date.now() + '.json';
+      link.rel = 'noopener';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // Revoking in the same tick can free the blob before the browser has
+      // started reading it, which cancels the download instead of saving it.
+      setTimeout(function () { URL.revokeObjectURL(objectUrl); }, 60000);
+      EditorStore.setStatus('Downloading audit log...', 'info');
+    });
+  };
+  var flushed = window.MbeditorAudit ? window.MbeditorAudit.flush() : Promise.resolve();
+  flushed.then(fetchLog, fetchLog)["catch"](function (err) {
+    EditorStore.setStatus('Audit log download failed: ' + (err && err.message || 'network error'), 'error');
+  });
+}
+
 function diffLines(oldLines, newLines) {
   var n = oldLines.length, m = newLines.length;
   var dp = [];
@@ -157,6 +235,46 @@ function diffLines(oldLines, newLines) {
   return changed;
 }
 
+// Cursor line/column for the status bar.
+//
+// Its own component holding its own state, deliberately: the cursor moves on
+// every keystroke and every click, and MbeditorApp subscribes to the whole
+// store — reading the position there would re-render the entire app, tree and
+// all, on each keypress. Here a move re-renders one span.
+var CursorPosition = function CursorPosition() {
+  var _pos = React.useState(null);
+  var pos = _pos[0];
+  var setPos = _pos[1];
+
+  React.useEffect(function () {
+    var disposable = null;
+    var attach = function () {
+      if (disposable) { disposable.dispose(); disposable = null; }
+      var editor = window.__mbeditorActiveEditor;
+      if (!editor) { setPos(null); return; }
+      var read = function () {
+        var p = editor.getPosition();
+        setPos(p ? { line: p.lineNumber, col: p.column } : null);
+      };
+      read();
+      disposable = editor.onDidChangeCursorPosition(read);
+    };
+    attach();
+    window.addEventListener('mbeditor:active-editor', attach);
+    return function () {
+      window.removeEventListener('mbeditor:active-editor', attach);
+      if (disposable) disposable.dispose();
+    };
+  }, []);
+
+  if (!pos) return null;
+  return React.createElement(
+    'span',
+    { className: 'statusbar-cursor', title: 'Line ' + pos.line + ', column ' + pos.col },
+    'Ln ' + pos.line + ', Col ' + pos.col
+  );
+};
+
 var SidebarActionButton = function SidebarActionButton(_ref) {
   var title = _ref.title;
   var iconClass = _ref.iconClass;
@@ -191,7 +309,13 @@ var SidebarActionButton = function SidebarActionButton(_ref) {
         className: "project-action-btn" + (danger ? " danger" : ""),
         "aria-label": ariaLabel || title,
         "aria-busy": !!ariaBusy,
-        onClick: onClick,
+        onClick: function (e) {
+          if (onClick) onClick(e);
+          // Clicking leaves the button focused, which keeps the :focus-within
+          // tooltip open until the user clicks elsewhere. Blur to drop it
+          // immediately; a Tab-focused button still shows it on keyboard focus.
+          e.currentTarget.blur();
+        },
         disabled: !!disabled
       },
       !ariaBusy && React.createElement("i", { className: iconClass })
@@ -271,107 +395,126 @@ function FileReloadBanner(_ref) {
   );
 }
 
+// ── Test-result cache (localStorage) ────────────────────────────────────
+// One entry per test file, capped so an unbounded suite can't fill the
+// origin's quota and take the unsaved-draft backup down with it (#84).
+var TEST_CACHE_PREFIX = 'mbeditor_test_result_';
+var TEST_CACHE_MAX_ENTRIES = 50;
+
+// ponytail: full localStorage scan per save, fine at a 50-entry cap.
+function _trimTestResultCache(maxEntries) {
+  var entries = [];
+  for (var i = 0; i < localStorage.length; i++) {
+    var key = localStorage.key(i);
+    if (key && key.indexOf(TEST_CACHE_PREFIX) === 0) {
+      var ts = 0;
+      try { ts = (JSON.parse(localStorage.getItem(key)) || {}).ts || 0; } catch (e) {}
+      entries.push({ key: key, ts: ts });
+    }
+  }
+  entries.sort(function (a, b) { return a.ts - b.ts; });
+  while (entries.length > maxEntries) localStorage.removeItem(entries.shift().key);
+}
+
+function saveCachedTestResult(filePath, result) {
+  var payload = JSON.stringify(_extends({}, result, { ts: Date.now() }));
+  try {
+    localStorage.setItem(TEST_CACHE_PREFIX + filePath, payload);
+  } catch (e) {
+    _trimTestResultCache(Math.floor(TEST_CACHE_MAX_ENTRIES / 2));
+    try { localStorage.setItem(TEST_CACHE_PREFIX + filePath, payload); } catch (e2) { return; }
+  }
+  _trimTestResultCache(TEST_CACHE_MAX_ENTRIES);
+}
+
 var MbeditorApp = function MbeditorApp() {
   var _useState = useState(EditorStore.getState());
 
-  var _useState2 = _slicedToArray(_useState, 2);
 
-  var state = _useState2[0];
-  var setState = _useState2[1];
+  var state = _useState[0];
+  var setState = _useState[1];
 
   var _useState21 = useState(null);
-  var _useState22 = _slicedToArray(_useState21, 2);
-  var historyPanelPath = _useState22[0];
-  var setHistoryPanelPath = _useState22[1];
+  var historyPanelPath = _useState21[0];
+  var setHistoryPanelPath = _useState21[1];
 
   var _useState23 = useState(false);
-  var _useState24 = _slicedToArray(_useState23, 2);
-  var isNavigating = _useState24[0];
-  var setIsNavigating = _useState24[1];
+  var isNavigating = _useState23[0];
+  var setIsNavigating = _useState23[1];
 
   var _useState25 = useState(false);
-  var _useState26 = _slicedToArray(_useState25, 2);
-  var isReviewOpen = _useState26[0];
-  var setIsReviewOpen = _useState26[1];
+  var isReviewOpen = _useState25[0];
+  var setIsReviewOpen = _useState25[1];
 
   var _useState27 = useState(null);
-  var _useState28 = _slicedToArray(_useState27, 2);
-  var selectedCommit = _useState28[0];
-  var setSelectedCommit = _useState28[1];
+  var selectedCommit = _useState27[0];
+  var setSelectedCommit = _useState27[1];
 
   var _useState29 = useState(null);
-  var _useState30 = _slicedToArray(_useState29, 2);
-  var commitDetailFiles = _useState30[0];
-  var setCommitDetailFiles = _useState30[1];
+  var commitDetailFiles = _useState29[0];
+  var setCommitDetailFiles = _useState29[1];
+
+  var _useStateCFI = useState(0);
+  var conflictFileIndex = _useStateCFI[0];
+  var setConflictFileIndex = _useStateCFI[1];
 
   var _useState4 = useState([]);
 
-  var _useState42 = _slicedToArray(_useState4, 2);
 
-  var treeData = _useState42[0];
-  var setTreeData = _useState42[1];
+  var treeData = _useState4[0];
+  var setTreeData = _useState4[1];
 
   var _useState5 = useState("");
 
-  var _useState52 = _slicedToArray(_useState5, 2);
 
-  var projectRootName = _useState52[0];
-  var setProjectRootName = _useState52[1];
+  var projectRootName = _useState5[0];
+  var setProjectRootName = _useState5[1];
 
   var _useState6 = useState(null);
 
-  var _useState62 = _slicedToArray(_useState6, 2);
 
-  var selectedTreeNode = _useState62[0];
-  var setSelectedTreeNode = _useState62[1];
+  var selectedTreeNode = _useState6[0];
+  var setSelectedTreeNode = _useState6[1];
 
   var _useStateSP = useState(new Set());
-  var _useStateSP2 = _slicedToArray(_useStateSP, 2);
-  var selectedPaths = _useStateSP2[0];
-  var setSelectedPaths = _useStateSP2[1];
+  var selectedPaths = _useStateSP[0];
+  var setSelectedPaths = _useStateSP[1];
 
   var _useState7 = useState("");
 
-  var _useState72 = _slicedToArray(_useState7, 2);
 
-  var searchQuery = _useState72[0];
-  var setSearchQuery = _useState72[1];
+  var searchQuery = _useState7[0];
+  var setSearchQuery = _useState7[1];
 
   var _useState33 = useState(false);
-  var _useState332 = _slicedToArray(_useState33, 2);
-  var searchLoading = _useState332[0];
-  var setSearchLoading = _useState332[1];
+  var searchLoading = _useState33[0];
+  var setSearchLoading = _useState33[1];
 
   var searchRequestIdRef = useRef(0);
 
   var _useState33h = useState(false);
-  var _useState33h2 = _slicedToArray(_useState33h, 2);
-  var searchHasMore = _useState33h2[0];
-  var setSearchHasMore = _useState33h2[1];
+  var searchHasMore = _useState33h[0];
+  var setSearchHasMore = _useState33h[1];
 
   var _useState33tc = useState(0);
-  var _useState33tc2 = _slicedToArray(_useState33tc, 2);
-  var searchTotalCount = _useState33tc2[0];
-  var setSearchTotalCount = _useState33tc2[1];
+  var searchTotalCount = _useState33tc[0];
+  var setSearchTotalCount = _useState33tc[1];
 
   var searchHasMoreRef      = useRef(false);
   var searchOffsetRef       = useRef(0);
   var searchLoadingMoreRef  = useRef(false);
 
   var _useStateRx = useState(false);
-  var _useStateRx2 = _slicedToArray(_useStateRx, 2);
-  var searchUseRegex = _useStateRx2[0];
-  var setSearchUseRegex = _useStateRx2[1];
+  var searchUseRegex = _useStateRx[0];
+  var setSearchUseRegex = _useStateRx[1];
 
   var _useStateMC = useState(false);
-  var _useStateMC2 = _slicedToArray(_useStateMC, 2);
-  var searchMatchCase = _useStateMC2[0];
-  var setSearchMatchCase = _useStateMC2[1];
+  var searchMatchCase = _useStateMC[0];
+  var setSearchMatchCase = _useStateMC[1];
 
   var _useStateWW = useState(false);
-  var _useStateWW2 = _slicedToArray(_useStateWW, 2);
-  var searchWholeWord = _useStateWW2[0];
-  var setSearchWholeWord = _useStateWW2[1];
+  var searchWholeWord = _useStateWW[0];
+  var setSearchWholeWord = _useStateWW[1];
 
   var searchQueryRef = useRef('');
   var searchUseRegexRef = useRef(false);
@@ -395,9 +538,8 @@ var MbeditorApp = function MbeditorApp() {
   // File paths whose match list is folded away. Keyed by path, so a file that
   // scrolls out of the window keeps its state.
   var _useStateSC = useState({});
-  var _useStateSC2 = _slicedToArray(_useStateSC, 2);
-  var searchCollapsedFiles = _useStateSC2[0];
-  var setSearchCollapsedFiles = _useStateSC2[1];
+  var searchCollapsedFiles = _useStateSC[0];
+  var setSearchCollapsedFiles = _useStateSC[1];
   var toggleSearchFile = function toggleSearchFile(file) {
     setSearchCollapsedFiles(function (prev) {
       var next = Object.assign({}, prev);
@@ -406,9 +548,8 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
   var _useStateSV = useState({ scrollTop: 0, height: 0 });
-  var _useStateSV2 = _slicedToArray(_useStateSV, 2);
-  var searchViewport = _useStateSV2[0];
-  var setSearchViewport = _useStateSV2[1];
+  var searchViewport = _useStateSV[0];
+  var setSearchViewport = _useStateSV[1];
 
   // The container's height is only known once it is on screen, and a viewport
   // of 0 would render a single row and never grow — nothing would scroll, so
@@ -441,31 +582,26 @@ var MbeditorApp = function MbeditorApp() {
   }).current;
 
   var _useStateRM = useState(false);
-  var _useStateRM2 = _slicedToArray(_useStateRM, 2);
-  var replaceMode = _useStateRM2[0];
-  var setReplaceMode = _useStateRM2[1];
+  var replaceMode = _useStateRM[0];
+  var setReplaceMode = _useStateRM[1];
 
   var _useStateRQ = useState('');
-  var _useStateRQ2 = _slicedToArray(_useStateRQ, 2);
-  var replaceQuery = _useStateRQ2[0];
-  var setReplaceQuery = _useStateRQ2[1];
+  var replaceQuery = _useStateRQ[0];
+  var setReplaceQuery = _useStateRQ[1];
 
   var _useStateRL = useState(false);
-  var _useStateRL2 = _slicedToArray(_useStateRL, 2);
-  var replaceLoading = _useStateRL2[0];
-  var setReplaceLoading = _useStateRL2[1];
+  var replaceLoading = _useStateRL[0];
+  var setReplaceLoading = _useStateRL[1];
 
   var _useState8 = useState("explorer");
 
-  var _useState82 = _slicedToArray(_useState8, 2);
 
-  var activeSidebarTab = _useState82[0];
-  var setActiveSidebarTab = _useState82[1];
+  var activeSidebarTab = _useState8[0];
+  var setActiveSidebarTab = _useState8[1];
 
   var _useStateSC = useState(false);
-  var _useStateSC2 = _slicedToArray(_useStateSC, 2);
-  var sidebarCollapsed = _useStateSC2[0];
-  var setSidebarCollapsed = _useStateSC2[1];
+  var sidebarCollapsed = _useStateSC[0];
+  var setSidebarCollapsed = _useStateSC[1];
 
   // Ref mirrors for use inside long-lived event handlers registered with
   // empty-dependency effects (live search refresh on files_changed).
@@ -477,130 +613,110 @@ var MbeditorApp = function MbeditorApp() {
   var jsSyntaxCheckAvailableRef = useRef(false);
 
   var _useStateRFMap = useState({});
-  var _useStateRFMap2 = _slicedToArray(_useStateRFMap, 2);
-  var railsFilesMap = _useStateRFMap2[0];
-  var setRailsFilesMap = _useStateRFMap2[1];
+  var railsFilesMap = _useStateRFMap[0];
+  var setRailsFilesMap = _useStateRFMap[1];
 
   var _useStateRFC = useState({});
-  var _useStateRFC2 = _slicedToArray(_useStateRFC, 2);
-  var railsGroupsCollapsed = _useStateRFC2[0];
-  var setRailsGroupsCollapsed = _useStateRFC2[1];
+  var railsGroupsCollapsed = _useStateRFC[0];
+  var setRailsGroupsCollapsed = _useStateRFC[1];
 
   var _useStateChangelog = useState(null); // null | { content, loading, error }
-  var _useStateChangelog2 = _slicedToArray(_useStateChangelog, 2);
-  var changelogState = _useStateChangelog2[0];
-  var setChangelogState = _useStateChangelog2[1];
+  var changelogState = _useStateChangelog[0];
+  var setChangelogState = _useStateChangelog[1];
 
   var _useStateSchemaModal = useState(null);
-  var _useStateSchemaModal2 = _slicedToArray(_useStateSchemaModal, 2);
-  var schemaModal = _useStateSchemaModal2[0];
-  var setSchemaModal = _useStateSchemaModal2[1];
+  var schemaModal = _useStateSchemaModal[0];
+  var setSchemaModal = _useStateSchemaModal[1];
 
   var _useStateImportConflict = useState(null);
-  var _useStateImportConflict2 = _slicedToArray(_useStateImportConflict, 2);
-  var importConflict = _useStateImportConflict2[0];
-  var setImportConflict = _useStateImportConflict2[1];
+  var importConflict = _useStateImportConflict[0];
+  var setImportConflict = _useStateImportConflict[1];
 
   // { initialFolder } while the upload dialog is open, null otherwise.
   var _useStateImportDialog = useState(null);
-  var _useStateImportDialog2 = _slicedToArray(_useStateImportDialog, 2);
-  var importDialog = _useStateImportDialog2[0];
-  var setImportDialog = _useStateImportDialog2[1];
+  var importDialog = _useStateImportDialog[0];
+  var setImportDialog = _useStateImportDialog[1];
 
   var _useStateSchemaLoading = useState(null);
-  var _useStateSchemaLoading2 = _slicedToArray(_useStateSchemaLoading, 2);
-  var schemaLoadingLabel = _useStateSchemaLoading2[0];
-  var setSchemaLoadingLabel = _useStateSchemaLoading2[1];
+  var schemaLoadingLabel = _useStateSchemaLoading[0];
+  var setSchemaLoadingLabel = _useStateSchemaLoading[1];
 
   var _useState9 = useState({});
 
-  var _useState92 = _slicedToArray(_useState9, 2);
 
-  var markers = _useState92[0];
-  var setMarkers = _useState92[1];
+  var markers = _useState9[0];
+  var setMarkers = _useState9[1];
   // { tabId: [] }
 
   var _useState10 = useState({});
 
-  var _useState102 = _slicedToArray(_useState10, 2);
 
-  var loading = _useState102[0];
-  var setLoading = _useState102[1];
+  var loading = _useState10[0];
+  var setLoading = _useState10[1];
 
   var _useState11 = useState(null);
 
-  var _useState112 = _slicedToArray(_useState11, 2);
 
-  var closingTabId = _useState112[0];
-  var setClosingTabId = _useState112[1];
+  var closingTabId = _useState11[0];
+  var setClosingTabId = _useState11[1];
 
   var _useState12 = useState(null);
 
-  var _useState122 = _slicedToArray(_useState12, 2);
 
-  var closingPaneId = _useState122[0];
-  var setClosingPaneId = _useState122[1];
+  var closingPaneId = _useState12[0];
+  var setClosingPaneId = _useState12[1];
 
   var _useState13 = useState(SIDEBAR_MIN_WIDTH);
 
-  var _useState132 = _slicedToArray(_useState13, 2);
 
-  var sidebarWidth = _useState132[0];
-  var setSidebarWidth = _useState132[1];
+  var sidebarWidth = _useState13[0];
+  var setSidebarWidth = _useState13[1];
 
   var _useState14 = useState(50);
 
-  var _useState142 = _slicedToArray(_useState14, 2);
 
-  var pane1Width = _useState142[0];
-  var setPane1Width = _useState142[1];
+  var pane1Width = _useState14[0];
+  var setPane1Width = _useState14[1];
   // percentage
 
   var dragSplitWidthRef = useRef(pane1Width);
 
   var _useState15 = useState(null);
 
-  var _useState152 = _slicedToArray(_useState15, 2);
 
-  var activeResizeMode = _useState152[0];
-  var setActiveResizeMode = _useState152[1];
+  var activeResizeMode = _useState15[0];
+  var setActiveResizeMode = _useState15[1];
 
   var _useState16 = useState(null);
 
-  var _useState162 = _slicedToArray(_useState16, 2);
 
-  var draggedTab = _useState162[0];
-  var setDraggedTab = _useState162[1];
+  var draggedTab = _useState16[0];
+  var setDraggedTab = _useState16[1];
 
   var _useState17 = useState(null);
 
-  var _useState172 = _slicedToArray(_useState17, 2);
 
-  var dragOverPaneId = _useState172[0];
-  var setDragOverPaneId = _useState172[1];
+  var dragOverPaneId = _useState17[0];
+  var setDragOverPaneId = _useState17[1];
 
   var _useState18 = useState(false);
-  var _useState182 = _slicedToArray(_useState18, 2);
-  var showGitPanel = _useState182[0];
-  var setShowGitPanel = _useState182[1];
+  var showGitPanel = _useState18[0];
+  var setShowGitPanel = _useState18[1];
   var showGitPanelRef = useRef(showGitPanel);
   showGitPanelRef.current = showGitPanel;
 
   var _useStateLog = useState(false);
-  var _useStateLog2 = _slicedToArray(_useStateLog, 2);
-  var showLogPanel = _useStateLog2[0];
-  var setShowLogPanel = _useStateLog2[1];
+  var showLogPanel = _useStateLog[0];
+  var setShowLogPanel = _useStateLog[1];
 
   var _useStateProblems = useState(false);
-  var _useStateProblems2 = _slicedToArray(_useStateProblems, 2);
-  var showProblemsPanel = _useStateProblems2[0];
-  var setShowProblemsPanel = _useStateProblems2[1];
+  var showProblemsPanel = _useStateProblems[0];
+  var setShowProblemsPanel = _useStateProblems[1];
 
   // Error/warning tallies across the open tabs, mirrored into the status bar.
   var _useStateProblemCounts = useState({ errors: 0, warnings: 0 });
-  var _useStateProblemCounts2 = _slicedToArray(_useStateProblemCounts, 2);
-  var problemCounts = _useStateProblemCounts2[0];
-  var setProblemCounts = _useStateProblemCounts2[1];
+  var problemCounts = _useStateProblemCounts[0];
+  var setProblemCounts = _useStateProblemCounts[1];
 
   // Below this the toolbar's labelled buttons no longer fit beside the title
   // and the file search, and start pushing each other out of the bar.
@@ -612,9 +728,8 @@ var MbeditorApp = function MbeditorApp() {
     return typeof window.matchMedia === 'function' &&
       window.matchMedia('(max-width: ' + TOOLBAR_LABEL_MIN_WIDTH + 'px)').matches;
   });
-  var _useStateNarrow2 = _slicedToArray(_useStateNarrow, 2);
-  var narrowToolbar = _useStateNarrow2[0];
-  var setNarrowToolbar = _useStateNarrow2[1];
+  var narrowToolbar = _useStateNarrow[0];
+  var setNarrowToolbar = _useStateNarrow[1];
 
   useEffect(function () {
     if (typeof window.matchMedia !== 'function') return;
@@ -634,146 +749,183 @@ var MbeditorApp = function MbeditorApp() {
   // Model graph. Built lazily — generating it eager-loads the host app — and
   // only when the Models tab is opened.
   var _useStateModelGraph = useState(null);
-  var _useStateModelGraph2 = _slicedToArray(_useStateModelGraph, 2);
-  var modelGraph = _useStateModelGraph2[0];
-  var setModelGraph = _useStateModelGraph2[1];
+  var modelGraph = _useStateModelGraph[0];
+  var setModelGraph = _useStateModelGraph[1];
 
   var _useStateModelGraphLoading = useState(false);
-  var _useStateModelGraphLoading2 = _slicedToArray(_useStateModelGraphLoading, 2);
-  var modelGraphLoading = _useStateModelGraphLoading2[0];
-  var setModelGraphLoading = _useStateModelGraphLoading2[1];
+  var modelGraphLoading = _useStateModelGraphLoading[0];
+  var setModelGraphLoading = _useStateModelGraphLoading[1];
 
   var _useState18g = useState(320);
-  var _useState18g2 = _slicedToArray(_useState18g, 2);
-  var gitPanelWidth = _useState18g2[0];
-  var setGitPanelWidth = _useState18g2[1];
+  var gitPanelWidth = _useState18g[0];
+  var setGitPanelWidth = _useState18g[1];
   var gitPanelWidthRef = useRef(gitPanelWidth);
   gitPanelWidthRef.current = gitPanelWidth;
 
   var _useState18h = useState(false);
 
-  var _useState18h2 = _slicedToArray(_useState18h, 2);
 
-  var showHelp = _useState18h2[0];
-  var setShowHelp = _useState18h2[1];
+  var showHelp = _useState18h[0];
+  var setShowHelp = _useState18h[1];
+
+  var _useState18s = useState(false);
+  var showSettings = _useState18s[0];
+  var setShowSettings = _useState18s[1];
 
   var _useStatePwa = useState(null);
-  var _useStatePwa2 = _slicedToArray(_useStatePwa, 2);
-  var pwaInstallPrompt = _useStatePwa2[0];
-  var setPwaInstallPrompt = _useStatePwa2[1];
+  var pwaInstallPrompt = _useStatePwa[0];
+  var setPwaInstallPrompt = _useStatePwa[1];
 
   var _useState18b = useState(true);
 
-  var _useState18b2 = _slicedToArray(_useState18b, 2);
 
-  var serverOnline = _useState18b2[0];
-  var setServerOnline = _useState18b2[1];
+  var serverOnline = _useState18b[0];
+  var setServerOnline = _useState18b[1];
+
+  // Pending migrations. file_service.js owns the truth (it is what sees the
+  // response header) and publishes it as a <body> class plus an event; this
+  // only mirrors it into the status bar.
+  var _useStateMig = useState(function () {
+    return document.body.classList.contains('mbeditor-migration-pending');
+  });
+  var migrationsPending = _useStateMig[0];
+  var setMigrationsPending = _useStateMig[1];
+
+  useEffect(function () {
+    function onChange(e) { setMigrationsPending(!!e.detail); }
+    window.addEventListener('mbeditor:pending-migration', onChange);
+    return function () { window.removeEventListener('mbeditor:pending-migration', onChange); };
+  }, []);
 
   var _useState18c = useState(false);
 
-  var _useState18c2 = _slicedToArray(_useState18c, 2);
 
-  var rubocopAvailable = _useState18c2[0];
-  var setRubocopAvailable = _useState18c2[1];
+  var rubocopAvailable = _useState18c[0];
+  var setRubocopAvailable = _useState18c[1];
 
   var _useState18d = useState(false);
 
-  var _useState18d2 = _slicedToArray(_useState18d, 2);
 
-  var hamlLintAvailable = _useState18d2[0];
-  var setHamlLintAvailable = _useState18d2[1];
+  var hamlLintAvailable = _useState18d[0];
+  var setHamlLintAvailable = _useState18d[1];
 
   var _useState18e = useState(false);
-  var _useState18e2 = _slicedToArray(_useState18e, 2);
-  var gitAvailable = _useState18e2[0];
-  var setGitAvailable = _useState18e2[1];
+  var gitAvailable = _useState18e[0];
+  var setGitAvailable = _useState18e[1];
 
   var _useState18f = useState(false);
-  var _useState18f2 = _slicedToArray(_useState18f, 2);
-  var redmineEnabled = _useState18f2[0];
-  var setRedmineEnabled = _useState18f2[1];
+  var redmineEnabled = _useState18f[0];
+  var setRedmineEnabled = _useState18f[1];
 
   var _useState18rc = useState(null);
-  var _useState18rc2 = _slicedToArray(_useState18rc, 2);
-  var rubocopConfigPath = _useState18rc2[0];
-  var setRubocopConfigPath = _useState18rc2[1];
+  var rubocopConfigPath = _useState18rc[0];
+  var setRubocopConfigPath = _useState18rc[1];
 
   var _useState18u = useState(null);
-  var _useState18u2 = _slicedToArray(_useState18u, 2);
-  var testResult = _useState18u2[0];
-  var setTestResult = _useState18u2[1];
+  var testResult = _useState18u[0];
+  var setTestResult = _useState18u[1];
 
   var _useState18v = useState(false);
-  var _useState18v2 = _slicedToArray(_useState18v, 2);
-  var testLoading = _useState18v2[0];
-  var setTestLoading = _useState18v2[1];
+  var testLoading = _useState18v[0];
+  var setTestLoading = _useState18v[1];
 
   var _useState18w = useState(true);
-  var _useState18w2 = _slicedToArray(_useState18w, 2);
-  var testInlineVisible = _useState18w2[0];
-  var setTestInlineVisible = _useState18w2[1];
+  var testInlineVisible = _useState18w[0];
+  var setTestInlineVisible = _useState18w[1];
 
   var _useState18x = useState(null);
-  var _useState18x2 = _slicedToArray(_useState18x, 2);
-  var testPanelFile = _useState18x2[0];
-  var setTestPanelFile = _useState18x2[1];
+  var testPanelFile = _useState18x[0];
+  var setTestPanelFile = _useState18x[1];
 
   var _useState18y = useState(false);
-  var _useState18y2 = _slicedToArray(_useState18y, 2);
-  var testPanelOpen = _useState18y2[0];
-  var setTestPanelOpen = _useState18y2[1];
+  var testPanelOpen = _useState18y[0];
+  var setTestPanelOpen = _useState18y[1];
 
   var _useState18p = useState(DEFAULT_EDITOR_PREFS);
-  var _useState18p2 = _slicedToArray(_useState18p, 2);
-  var editorPrefs = _useState18p2[0];
-  var setEditorPrefs = _useState18p2[1];
-
-  // Icon-only toolbar: on by preference, or automatically once the window is
-  // too narrow for the labels to fit beside the title and file search.
-  var toolbarIconOnly = editorPrefs.toolbarIconOnly || narrowToolbar;
+  var editorPrefs = _useState18p[0];
+  var setEditorPrefs = _useState18p[1];
+
+  // Icon-only toolbar: the default, since every button carries its name in a
+  // title attribute. Labels are opt-in, and are dropped regardless once the
+  // window is too narrow for them to fit beside the title and file search.
+  var toolbarIconOnly = !editorPrefs.toolbarLabels || narrowToolbar;
+
+  // The audit ring never reads preferences itself; enablement is pushed in.
+  // BOOT is recorded on the first enable rather than at mount, because the
+  // stored preference arrives from /state after the default has already been
+  // applied and switching off discards anything buffered before it.
+  var auditBooted = useRef(false);
+  useEffect(function () {
+    var audit = window.MbeditorAudit;
+    if (!audit) return;
+    var on = editorPrefs.auditLog !== false;
+    audit.setEnabled(on);
+    if (!on || auditBooted.current) return;
+    auditBooted.current = true;
+    // Ready is when Monaco is up and the file can be typed in, not when React
+    // mounted: the gap between the two is most of the boot.
+    Promise.resolve(window.__monacoReady).then(function () {
+      audit.rec(audit.EV.BOOT, performance.now() | 0);
+    });
+  }, [editorPrefs.auditLog]);
 
   var _useState19 = useState({
     openEditors: false,
     projects: false
   });
 
-  var _useState192 = _slicedToArray(_useState19, 2);
 
-  var collapsedSections = _useState192[0];
-  var setCollapsedSections = _useState192[1];
+  var collapsedSections = _useState19[0];
+  var setCollapsedSections = _useState19[1];
 
   var _useState20 = useState({});
 
-  var _useState202 = _slicedToArray(_useState20, 2);
 
-  var expandedDirs = _useState202[0];
-  var setExpandedDirs = _useState202[1];
+  var expandedDirs = _useState20[0];
+  var setExpandedDirs = _useState20[1];
 
   var _useState21 = useState(null);
 
-  var _useState212 = _slicedToArray(_useState21, 2);
 
-  var pendingCreate = _useState212[0];
-  var setPendingCreate = _useState212[1];
+  var pendingCreate = _useState21[0];
+  var setPendingCreate = _useState21[1];
 
   var _useState22 = useState(null);
 
-  var _useState222 = _slicedToArray(_useState22, 2);
 
-  var pendingRename = _useState222[0];
-  var setPendingRename = _useState222[1];
+  var pendingRename = _useState22[0];
+  var setPendingRename = _useState22[1];
 
   var _useState23 = useState(null);
 
-  var _useState232 = _slicedToArray(_useState23, 2);
 
-  var contextMenu = _useState232[0];
-  var setContextMenu = _useState232[1];
+  var contextMenu = _useState23[0];
+  var setContextMenu = _useState23[1];
+  var contextMenuRef = useRef(null);
 
   var _useState24 = useState(140);
-  var _useState242 = _slicedToArray(_useState24, 2);
-  var openEditorsHeight = _useState242[0];
-  var setOpenEditorsHeight = _useState242[1];
+  var openEditorsHeight = _useState24[0];
+  var setOpenEditorsHeight = _useState24[1];
+
+  // Both bottom drawers are resized by a gutter that sits between the editor
+  // card and the drawer, so the height lives here rather than in the drawer —
+  // a panel cannot own the handle that is no longer inside it.
+  var _drawerHeight = function (key) {
+    var saved = parseInt(window.localStorage.getItem(key), 10);
+    return (saved && saved >= DRAWER_MIN_HEIGHT) ? saved : 240;
+  };
+  var _useStateLogH = useState(function () { return _drawerHeight('mbeditorLogHeight'); });
+  var logHeight = _useStateLogH[0];
+  var setLogHeight = _useStateLogH[1];
+  var _useStateProblemsH = useState(function () { return _drawerHeight('mbeditorProblemsHeight'); });
+  var problemsHeight = _useStateProblemsH[0];
+  var setProblemsHeight = _useStateProblemsH[1];
+
+  // One-shot target for post-operation scroll reveal (create/rename/delete).
+  // A fresh object each time so the effect re-fires even for a repeated path.
+  var _useState25 = useState(null);
+  var revealTarget = _useState25[0];
+  var setRevealTarget = _useState25[1];
 
   var resizeSessionRef = useRef(null);
   var resizeRafRef = useRef(null);
@@ -783,9 +935,8 @@ var MbeditorApp = function MbeditorApp() {
   var ctrlWPendingRef = useRef(false);
   var ctrlWTimeoutRef = useRef(null);
   var _useStateCP = useState([]);
-  var _useStateCP2 = _slicedToArray(_useStateCP, 2);
-  var customPaths = _useStateCP2[0];
-  var setCustomPaths = _useStateCP2[1];
+  var customPaths = _useStateCP[0];
+  var setCustomPaths = _useStateCP[1];
   var customPathsRef = useRef([]);
   customPathsRef.current = customPaths;
   // Whether to show the presence chips at all. Read at render rather than held in
@@ -798,33 +949,29 @@ var MbeditorApp = function MbeditorApp() {
   var _useStateIdent = useState(
     typeof CollaborationIdentity !== 'undefined' ? CollaborationIdentity.get() : null
   );
-  var _useStateIdent2 = _slicedToArray(_useStateIdent, 2);
-  var collabIdentity = _useStateIdent2[0];
-  var setCollabIdentity = _useStateIdent2[1];
+  var collabIdentity = _useStateIdent[0];
+  var setCollabIdentity = _useStateIdent[1];
   // Presence roster: other connected participants, keyed by client_id →
   // { name, colour, current_file }. Fed by the global presence stream; rendered
   // as click-to-jump chips in the status bar.
   var _useStateRoster = useState({});
-  var _useStateRoster2 = _slicedToArray(_useStateRoster, 2);
-  var collabRoster = _useStateRoster2[0];
-  var setCollabRoster = _useStateRoster2[1];
+  var collabRoster = _useStateRoster[0];
+  var setCollabRoster = _useStateRoster[1];
 
   // Follow mode (slice 8): the presence client_id of the participant whose file +
   // viewport we're tracking, or null when navigating independently. Toggled from a
   // roster chip. The file-open is driven by the effect below; the scroll-tracking
   // lives in CollaborationService.setFollow().
   var _useStateFollow = useState(null);
-  var _useStateFollow2 = _slicedToArray(_useStateFollow, 2);
-  var followedClientId = _useStateFollow2[0];
-  var setFollowedClientId = _useStateFollow2[1];
+  var followedClientId = _useStateFollow[0];
+  var setFollowedClientId = _useStateFollow[1];
   var recentSavesRef = useRef({});
   var isSavingRef = useRef(false);
   // True once the saved session has finished loading into the panes. Anything
   // that opens a tab on startup must wait for this, or the restore overwrites it.
   var _useStateSR = useState(false);
-  var _useStateSR2 = _slicedToArray(_useStateSR, 2);
-  var sessionRestored = _useStateSR2[0];
-  var setSessionRestored = _useStateSR2[1];
+  var sessionRestored = _useStateSR[0];
+  var setSessionRestored = _useStateSR[1];
   var pendingChangelogRef = useRef(false);
   // path -> the file's content as last seen ON DISK (newline-normalised).
   // External-change detection compares disk-to-disk; comparing disk to the
@@ -853,15 +1000,37 @@ var MbeditorApp = function MbeditorApp() {
 
   // ── Draft backup helpers ─────────────────────────────────────────────────
   var draftWriteTimerRef = useRef({});
+  var draftWriteWarnedRef = useRef({});
   var serverOnlineRef = useRef(true);
 
   var _draftKey = function _draftKey(path) {
     var base = typeof window.mbeditorBasePath === 'function' ? window.mbeditorBasePath() : '';
     return 'mbeditor_draft\x00' + base + '\x00' + path;
   };
+  // localStorage is UTF-16 and most browsers cap it near 5MB, so a draft for a
+  // file past this can never fit: every debounced write failed, warned once, and
+  // then kept stringifying + attempting the whole buffer every 500ms of typing.
+  // Skip it outright; an explicit save is the safety net for huge files.
+  var MAX_DRAFT_CHARS = 1000000;
   var _saveDraftNow = function _saveDraftNow(path, content) {
+    if (typeof content === 'string' && content.length > MAX_DRAFT_CHARS) {
+      if (!draftWriteWarnedRef.current[path]) {
+        draftWriteWarnedRef.current[path] = true;
+        EditorStore.setStatus('Crash-recovery backup skipped for ' + path + ' (file too large)', 'info');
+      }
+      _clearDraft(path);
+      return;
+    }
     var doWrite = function() {
-      try { localStorage.setItem(_draftKey(path), JSON.stringify({ content: content, ts: Date.now() })); } catch (e) {}
+      try {
+        localStorage.setItem(_draftKey(path), JSON.stringify({ content: content, ts: Date.now() }));
+      } catch (e) {
+        // Once per path: this fires on every debounced keystroke otherwise.
+        if (!draftWriteWarnedRef.current[path]) {
+          draftWriteWarnedRef.current[path] = true;
+          EditorStore.setStatus('Crash-recovery backup failed for ' + path + ' (storage full)', 'error');
+        }
+      }
     };
     if (typeof requestIdleCallback !== 'undefined') {
       requestIdleCallback(doWrite, { timeout: 2000 });
@@ -884,24 +1053,25 @@ var MbeditorApp = function MbeditorApp() {
   };
 
   var _useState_dro = useState(null);
-  var _useState_dro2 = _slicedToArray(_useState_dro, 2);
-  var draftRestoreOffer = _useState_dro2[0];
-  var setDraftRestoreOffer = _useState_dro2[1];
+  var draftRestoreOffer = _useState_dro[0];
+  var setDraftRestoreOffer = _useState_dro[1];
 
   var _useStateMR = useState(false);
-  var _useStateMR2 = _slicedToArray(_useStateMR, 2);
-  var monacoReady = _useStateMR2[0];
-  var setMonacoReady = _useStateMR2[1];
+  var monacoReady = _useStateMR[0];
+  var setMonacoReady = _useStateMR[1];
 
   var _useStateZen = useState(false);
-  var _useStateZen2 = _slicedToArray(_useStateZen, 2);
-  var zenMode = _useStateZen2[0];
-  var setZenMode = _useStateZen2[1];
+  var zenMode = _useStateZen[0];
+  var setZenMode = _useStateZen[1];
+
+  // Transient, like zen mode — never persisted, always starts closed.
+  var _useStateMGV = useState(false);
+  var showModelGraphView = _useStateMGV[0];
+  var setShowModelGraphView = _useStateMGV[1];
 
   var _useStateSB = useState(false);
-  var _useStateSB2 = _slicedToArray(_useStateSB, 2);
-  var isSwitchingBranch = _useStateSB2[0];
-  var setIsSwitchingBranch = _useStateSB2[1];
+  var isSwitchingBranch = _useStateSB[0];
+  var setIsSwitchingBranch = _useStateSB[1];
 
   var clamp = function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
@@ -955,6 +1125,48 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
+  // Finds the children array of parentPath within tree ('' means the root).
+  var findTreeChildren = function findTreeChildren(tree, parentPath) {
+    if (!parentPath) return tree;
+    for (var i = 0; i < tree.length; i++) {
+      var item = tree[i];
+      if (item.path === parentPath && item.type === 'folder') return item.children || [];
+      if (item.type === 'folder' && item.children) {
+        var found = findTreeChildren(item.children, parentPath);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  // Row to reveal after a delete: the next surviving sibling in display
+  // order, else the previous one, else the parent directory. Sorted the same
+  // way FileTree sorts (folders first, then name) so it matches what the
+  // user actually sees.
+  var computeDeleteRevealTarget = function computeDeleteRevealTarget(tree, deletedPaths) {
+    var anchor = deletedPaths[0];
+    var parent = parentDir(anchor);
+    var siblings = findTreeChildren(tree, parent);
+    if (siblings) {
+      var sorted = siblings.concat().sort(function (a, b) {
+        if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+      var idx = sorted.findIndex(function (n) { return n.path === anchor; });
+      if (idx >= 0) {
+        var deletedSet = new Set(deletedPaths);
+        var j, k;
+        for (j = idx + 1; j < sorted.length; j++) {
+          if (!deletedSet.has(sorted[j].path)) return sorted[j].path;
+        }
+        for (k = idx - 1; k >= 0; k--) {
+          if (!deletedSet.has(sorted[k].path)) return sorted[k].path;
+        }
+      }
+    }
+    return parent || null;
+  };
+
   // Every structural mutation (create, delete, rename, import) funnels through
   // here, so this is where the project-search cache has to be dropped. Saves
   // invalidated it at their own call sites, which is why editing a file
@@ -1085,6 +1297,8 @@ var MbeditorApp = function MbeditorApp() {
       EditorStore.setStatus('Linting...', 'info');
     }
 
+    var startedAt = Date.now();
+
     // ruby-lsp answers diagnostics for Ruby files when it's available: same
     // markers, plus Prism syntax errors, without a per-keystroke rubocop boot.
     // Anything short of a usable answer falls through to the HTTP lint for
@@ -1107,6 +1321,8 @@ var MbeditorApp = function MbeditorApp() {
 
     return lintRequest.then(function (res) {
       var nextMarkers = res.markers || [];
+      var audit = window.MbeditorAudit;
+      if (audit) audit.rec(audit.EV.LINT, _auditExt(tab.path), Date.now() - startedAt, nextMarkers.length);
       applyMarkersForTab(tab.id, nextMarkers);
 
       if (options.showStatus) {
@@ -1116,6 +1332,7 @@ var MbeditorApp = function MbeditorApp() {
 
       return res;
     })["catch"](function (err) {
+      _recErr('LINT');
       if (options.showStatus) {
         EditorStore.setStatus('Lint failed: ' + err.message, 'error');
       }
@@ -1191,9 +1408,7 @@ var MbeditorApp = function MbeditorApp() {
     Promise.all([FileService.getWorkspace()["catch"](function () {
       return null;
     }), refreshProjectTree()]).then(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 1);
-
-      var workspace = _ref2[0];
+      var workspace = _ref[0];
 
       if (workspace && workspace.rootName) {
         setProjectRootName(workspace.rootName);
@@ -1214,6 +1429,9 @@ var MbeditorApp = function MbeditorApp() {
       if (workspace && typeof workspace.rubyLspAvailable === 'boolean') {
         window.MBEDITOR_RUBY_LSP_AVAILABLE = workspace.rubyLspAvailable;
       }
+      if (workspace && workspace.searchBackend) {
+        window.MBEDITOR_SEARCH_BACKEND = workspace.searchBackend;
+      }
       if (workspace && typeof workspace.gitAvailable === 'boolean') {
         setGitAvailable(workspace.gitAvailable);
       }
@@ -1231,11 +1449,15 @@ var MbeditorApp = function MbeditorApp() {
     // Helper: load tab content for a set of panes and restore them into EditorStore
     function loadPaneState(panesToLoad, focusedPaneId) {
       if (!panesToLoad || panesToLoad.length === 0) return Promise.resolve();
+      // Settings is a modal now; a state saved when it was a tab must not
+      // restore one.
+      panesToLoad = panesToLoad.map(function (p) {
+        return _extends({}, p, {
+          tabs: p.tabs.filter(function (t) { return !t.isSettings && t.path !== '__settings__'; })
+        });
+      });
       var allTabs = panesToLoad.flatMap(function (p) { return p.tabs; });
       return Promise.all(allTabs.map(function (t) {
-        if (t.isSettings || t.path === '__settings__') {
-          return Promise.resolve({ content: '' });
-        }
         if (t.isChangelog || t.path === 'mbeditor://changelog') {
           return Promise.resolve({ content: '' });
         }
@@ -1247,9 +1469,6 @@ var MbeditorApp = function MbeditorApp() {
         if (t.isCombinedDiff || (t.path || '').startsWith('combined-diff://') || (t.path || '').startsWith('diff://')) {
           return Promise.resolve({ content: '' });
         }
-        if (t.isModelGraph || t.path === 'mbeditor://model-graph') {
-          return Promise.resolve({ content: '' });
-        }
         var sourcePath = t.isPreview || /::preview$/.test(t.path || '') ? t.previewFor || (t.path || '').replace(/::preview$/, '') : t.path;
         return FileService.getFile(sourcePath, { allowMissing: true }).then(function (data) {
           return {
@@ -1272,8 +1491,8 @@ var MbeditorApp = function MbeditorApp() {
           var tabs = [];
           p.tabs.forEach(function (t) {
             var res = results[resIdx++];
-            var isPlainFile = t.path && !t.isDiff && !t.isCombinedDiff && !t.isSettings &&
-              !t.isChangelog && !t.isPreview && !t.isModelGraph &&
+            var isPlainFile = t.path && !t.isDiff && !t.isCombinedDiff &&
+              !t.isChangelog && !t.isPreview &&
               !/^(diff|combined-diff):\/\//.test(t.path) && !/::preview$/.test(t.path);
             if (isPlainFile) {
               if (seenPaths[t.path]) return;
@@ -1283,9 +1502,6 @@ var MbeditorApp = function MbeditorApp() {
               content: res.content,
               externalContentVersion: (t.externalContentVersion || 0) + 1
             },
-            // A state saved before this tab type existed carries the path but
-            // not the flag, and would restore as a missing file.
-            t.path === 'mbeditor://model-graph' ? { isModelGraph: true } : {},
             res._isDiffResult ? { diffOriginal: res.diffOriginal, diffModified: res.diffModified } : {},
             typeof res.fileNotFound === 'boolean' ? { fileNotFound: res.fileNotFound, dirty: res.fileNotFound ? false : t.dirty } : {},
             res.image === true ? { isImage: true } : {}));
@@ -1397,10 +1613,10 @@ var MbeditorApp = function MbeditorApp() {
           return {
             id: p.id,
             activeTabId: p.activeTabId,
-            tabs: p.tabs.filter(function (t) { return !t.isCombinedDiff && !t.isModelGraph && !t.isUntitled; }).map(function (t) {
+            tabs: p.tabs.filter(function (t) { return !t.isCombinedDiff && !t.isUntitled; }).map(function (t) {
               return {
                 id: t.id, path: t.path, name: t.name, dirty: t.dirty, viewState: t.viewState,
-                isSettings: !!t.isSettings, isPreview: !!t.isPreview, previewFor: t.previewFor || null,
+                isPreview: !!t.isPreview, previewFor: t.previewFor || null,
                 isDiff: !!t.isDiff, diffBaseSha: t.diffBaseSha || null, diffHeadSha: t.diffHeadSha || null,
                 repoPath: t.repoPath || null, isChangelog: !!t.isChangelog
               };
@@ -1483,6 +1699,7 @@ var MbeditorApp = function MbeditorApp() {
       if (e.key === 'Escape') {
         setContextMenu(null);
         setShowHelp(false);
+        setCollabOverflowOpen(false);
       }
     };
 
@@ -1516,6 +1733,9 @@ var MbeditorApp = function MbeditorApp() {
           var reservedRight = EDITOR_MIN_WIDTH + (showGitPanelRef.current ? gitPanelWidthRef.current : 0);
           var maxSidebarWidth = Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, rect.width - reservedRight));
           var nextWidth = clientX - rect.left - SIDEBAR_COLLAPSED_WIDTH;
+          // Remembered for mouseup: dragged well under the minimum, the
+          // explorer snaps shut instead of pinning at SIDEBAR_MIN_WIDTH.
+          s.snapClose = nextWidth < SIDEBAR_MIN_WIDTH - 80;
           setSidebarWidth(clamp(nextWidth, SIDEBAR_MIN_WIDTH, maxSidebarWidth));
         }
 
@@ -1533,11 +1753,26 @@ var MbeditorApp = function MbeditorApp() {
           var nextHeight = Math.max(60, Math.min(400, s.startHeight + delta));
           setOpenEditorsHeight(nextHeight);
         }
+
+        // Bottom drawers. Delta-based and inverted: dragging the gutter up
+        // grows the drawer. Independent of where the drawer is anchored and
+        // survives a zero/unknown viewport height.
+        if (s.mode === 'log' || s.mode === 'problems') {
+          var vh = window.innerHeight || document.documentElement.clientHeight || 0;
+          var maxH = vh > 0 ? Math.round(vh * 0.85) : Infinity;
+          s.lastHeight = Math.min(maxH, Math.max(DRAWER_MIN_HEIGHT, s.startHeight + (s.startY - clientY)));
+          (s.mode === 'log' ? setLogHeight : setProblemsHeight)(s.lastHeight);
+        }
       });
     };
 
     var handleMouseUp = function handleMouseUp() {
       if (!resizeSessionRef.current) return;
+      if (resizeSessionRef.current.snapClose) setSidebarCollapsed(true);
+      var s = resizeSessionRef.current;
+      if (s.storeKey && s.lastHeight) {
+        try { window.localStorage.setItem(s.storeKey, String(s.lastHeight)); } catch (err) {}
+      }
 
       if (resizeRafRef.current) {
         cancelAnimationFrame(resizeRafRef.current);
@@ -1850,7 +2085,10 @@ var MbeditorApp = function MbeditorApp() {
     function handleFileSaved(data) {
       var path = data && data.path;
       if (!path) return;
-      if (typeof CollaborationService === 'undefined' || !CollaborationService.isBound(path)) return;
+      // Only an attached (CRDT-bound) tab has the peer's content. A room that is
+      // still deferring, or degraded to local, holds its own buffer — a peer save
+      // is an external change for it, handled by the files_changed path.
+      if (typeof CollaborationService === 'undefined' || !CollaborationService.isAttached(path)) return;
 
       var st = EditorStore.getState();
       var changed = false;
@@ -1911,7 +2149,6 @@ var MbeditorApp = function MbeditorApp() {
         !path.startsWith('combined-diff://') &&
         !path.startsWith('untitled://') &&
         !pt.tab.isCombinedDiff &&
-        !pt.tab.isSettings &&
         !pt.tab.isImage &&
         !pt.tab.isDiff &&
         typeof pt.tab.content === 'string';
@@ -2018,8 +2255,18 @@ var MbeditorApp = function MbeditorApp() {
   useEffect(function () {
     var intervalId = setInterval(function () {
       if (document.hidden) return;
+      var startedAt = Date.now();
       FileService.getTree({ background: true }).then(function (data) {
-        setTreeData(_treeUpdater(data || []));
+        var next = data || [];
+        var audit = window.MbeditorAudit;
+        // Stringified once and reused by the updater, so instrumenting the poll
+        // costs no extra pass over the tree.
+        var signature = audit ? JSON.stringify(next) : null;
+        setTreeData(_treeUpdater(next, signature));
+        if (!audit) return;
+        var changed = signature !== _lastPolledTree;
+        _lastPolledTree = signature;
+        audit.rec(audit.EV.TREE_POLL, Date.now() - startedAt, changed ? 1 : 0);
       }).catch(function () {}); // silently ignore auto-refresh errors
     }, 10000);
     return function () { clearInterval(intervalId); };
@@ -2086,6 +2333,10 @@ var MbeditorApp = function MbeditorApp() {
   }, [monacoReady]);
 
   var handleSelectFile = function handleSelectFile(path, name, line, col, endCol) {
+    // The one place every reachable "open a file" action funnels through while
+    // the model graph view is up (quick open is the only such surface left —
+    // explorer, search, rails and git panel are all hidden with it).
+    setShowModelGraphView(false);
     TabManager.openTab(path, name, line, null, false, col, endCol);
     handleNodeSelect({ path: path, name: name || path.split('/').pop(), type: 'file' });
     setQuickOpen(false);
@@ -2141,6 +2392,17 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
+  // Drop any pending-reload prompt whose tab is no longer open in any pane.
+  var _prunePendingReloads = function _prunePendingReloads() {
+    EditorStore.setState({
+      pendingReloads: EditorStore.getState().pendingReloads.filter(function (r) {
+        return EditorStore.getState().panes.some(function (p) {
+          return p.tabs.some(function (t) { return t.id === r.tabId; });
+        });
+      })
+    });
+  };
+
   var requestCloseTab = function requestCloseTab(paneId, id) {
     var pane = state.panes.find(function (p) {
       return p.id === paneId;
@@ -2153,13 +2415,7 @@ var MbeditorApp = function MbeditorApp() {
       setClosingTabId(id);
     } else {
       TabManager.closeTab(paneId, id);
-      EditorStore.setState({
-        pendingReloads: EditorStore.getState().pendingReloads.filter(function (r) {
-          return EditorStore.getState().panes.some(function (p) {
-            return p.tabs.some(function (t) { return t.id === r.tabId; });
-          });
-        })
-      });
+      _prunePendingReloads();
       forgetClosedTabs();
     }
   };
@@ -2178,6 +2434,7 @@ var MbeditorApp = function MbeditorApp() {
     }
 
     if (save) {
+      tab = _freshTab(closingPaneId, tab);
       if (tab.isUntitled) {
         // Save-as converts the scratch tab to a real one (closing the scratch
         // tab in the process); a cancelled prompt keeps the tab open.
@@ -2191,49 +2448,20 @@ var MbeditorApp = function MbeditorApp() {
         });
         return;
       }
-      setLoading(function (prev) {
-        return _extends({}, prev, { save: true });
-      });
-      EditorStore.setStatus("Saving " + tab.name + "...", "info");
-      isSavingRef.current = true;
-      FileService.saveFile(tab.path, tab.content).then(function () {
-        noteLocalSave(tab.path, tab.content);
+      _runSave(tab, function () {
         EditorStore.setStatus("Saved", "success");
         SearchService.invalidate();
         GitService.fetchStatusLite({ background: true });
-        // Reset the AVI clean baseline so undo past this save point shows dirty correctly.
-        var _closeEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
-        if (_closeEntry && _closeEntry.model && !_closeEntry.model.isDisposed()) {
-          _closeEntry.cleanVersionId = _closeEntry.model.getAlternativeVersionId();
-        }
         TabManager.closeTab(closingPaneId, tab.id);
-        EditorStore.setState({
-          pendingReloads: EditorStore.getState().pendingReloads.filter(function (r) {
-            return EditorStore.getState().panes.some(function (p) {
-              return p.tabs.some(function (t) { return t.id === r.tabId; });
-            });
-          })
-        });
+        _prunePendingReloads();
         forgetClosedTabs();
-      })["catch"](function (err) {
-        EditorStore.setStatus("Save failed: " + err.message, "error");
-      })["finally"](function () {
-        isSavingRef.current = false;
-        setLoading(function (prev) {
-          return _extends({}, prev, { save: false });
-        });
+      }, function () {
         setClosingTabId(null);
         setClosingPaneId(null);
       });
     } else {
       TabManager.closeTab(closingPaneId, tab.id);
-      EditorStore.setState({
-        pendingReloads: EditorStore.getState().pendingReloads.filter(function (r) {
-          return EditorStore.getState().panes.some(function (p) {
-            return p.tabs.some(function (t) { return t.id === r.tabId; });
-          });
-        })
-      });
+      _prunePendingReloads();
       forgetClosedTabs();
       setClosingTabId(null);
       setClosingPaneId(null);
@@ -2308,7 +2536,10 @@ var MbeditorApp = function MbeditorApp() {
     var input = window.prompt('Save as (path relative to workspace root):', tab.name + '.txt');
     if (!input || !input.trim()) return Promise.reject({ cancelled: true });
     var newPath = input.trim().replace(/^\/+/, '');
+    var startedAt = Date.now();
     return FileService.saveFile(newPath, tab.content).then(function () {
+      var audit = window.MbeditorAudit;
+      if (audit) audit.rec(audit.EV.SAVE, _auditExt(newPath), tab.content.length, Date.now() - startedAt);
       noteLocalSave(newPath, tab.content);
       SearchService.invalidate();
       GitService.fetchStatusLite({ background: true });
@@ -2333,14 +2564,13 @@ var MbeditorApp = function MbeditorApp() {
         return {
           id: p.id,
           activeTabId: p.activeTabId,
-          tabs: p.tabs.filter(function(t) { return !t.isCombinedDiff && !t.isModelGraph && !t.isUntitled; }).map(function (t) {
+          tabs: p.tabs.filter(function(t) { return !t.isCombinedDiff && !t.isUntitled; }).map(function (t) {
             return {
               id: t.id,
               path: t.path,
               name: t.name,
               dirty: t.dirty,
               viewState: t.viewState,
-              isSettings: !!t.isSettings,
               isChangelog: !!t.isChangelog,
               isPreview: !!t.isPreview,
               previewFor: t.previewFor || null,
@@ -2367,7 +2597,11 @@ var MbeditorApp = function MbeditorApp() {
 
   useEffect(function() {
     document.documentElement.setAttribute('data-theme', editorPrefs.theme || 'vs-dark');
-  }, [editorPrefs.theme]);
+    // Glass is a layer over the active theme, not a theme, so it rides on its
+    // own attribute and glass.css derives every colour from the theme tokens.
+    if (editorPrefs.glass) document.documentElement.dataset.glass = '1';
+    else delete document.documentElement.dataset.glass;
+  }, [editorPrefs.theme, editorPrefs.glass]);
 
   useEffect(function() {
     EditorStore.setState({ editorPrefs: editorPrefs });
@@ -2491,7 +2725,7 @@ var MbeditorApp = function MbeditorApp() {
       });
       tabs.forEach(function(t) {
         if (Object.keys(deps).length >= RAILS_MAX_RESOURCES) return;
-        if (!t.path || t.path === '__settings__' || t.path.startsWith('mbeditor://')) return;
+        if (!t.path || t.path.startsWith('mbeditor://')) return;
         var label = resourceLabelFromPath(t.path);
         if (label && !deps[label]) deps[label] = t.path;
       });
@@ -2504,7 +2738,7 @@ var MbeditorApp = function MbeditorApp() {
     var all = {};
     state.panes.forEach(function(p) {
       p.tabs.forEach(function(t) {
-        if (!t.path || t.path === '__settings__' || t.path.startsWith('mbeditor://')) return;
+        if (!t.path || t.path.startsWith('mbeditor://')) return;
         var label = resourceLabelFromPath(t.path);
         if (label) all[label] = true;
       });
@@ -2564,14 +2798,14 @@ var MbeditorApp = function MbeditorApp() {
 
   // ── Collaboration presence (slice 7) ──────────────────────────────────────
   // Only real, openable files belong in presence — virtual tabs (diffs, previews,
-  // settings/changelog) are reported as "no file" so a peer's chip stays blank
+  // changelog) are reported as "no file" so a peer's chip stays blank
   // rather than pointing at something click-to-jump can't open.
   var _presenceFileFor = function (tab) {
     if (!tab || !tab.path) return null;
     var p = tab.path;
-    if (tab.isDiff || tab.isCombinedDiff || tab.isCommitGraph || tab.isPreview || tab.isSettings || tab.isChangelog) return null;
+    if (tab.isDiff || tab.isCombinedDiff || tab.isCommitGraph || tab.isPreview || tab.isChangelog) return null;
     if (p.indexOf('diff://') === 0 || p.indexOf('combined-diff://') === 0 || p.indexOf('mbeditor://') === 0) return null;
-    if (p.indexOf('::preview') !== -1 || p === '__settings__') return null;
+    if (p.indexOf('::preview') !== -1) return null;
     return p;
   };
   var presenceFile = _presenceFileFor(activeTab);
@@ -2777,14 +3011,13 @@ var MbeditorApp = function MbeditorApp() {
 
   var collabPeerIds = Object.keys(collabRoster);
 
-  // A labelled peer chip costs ~110px (name + filename), and the titlebar button
-  // cluster does not shrink or wrap: past three peers it squeezes the search pill
-  // to its floor and then pushes Help / Install off the right edge. Drop to bare
-  // colour dots instead of hiding peers behind a "+N more" summary — a dot is
-  // ~20px, so ten peers still fit, every chip stays clickable to follow, and the
-  // solid/hollow ring keeps working. The name and file live in the tooltip.
-  var COLLAB_LABEL_LIMIT = 3;
-  var collabPeerLabels = !toolbarIconOnly && collabPeerIds.length <= COLLAB_LABEL_LIMIT;
+  // One button per peer stopped working past ~4 people: the titlebar cluster
+  // does not shrink or wrap, so it squeezed the search pill to its floor and
+  // pushed Help / Install off the right edge. Fixed-width stack instead: up to
+  // three overlapping avatars, the rest collapse into one "+N" with a popover.
+  var COLLAB_AVATAR_LIMIT = 3;
+  var collabAvatarIds = collabPeerIds.slice(0, COLLAB_AVATAR_LIMIT);
+  var collabOverflowIds = collabPeerIds.slice(COLLAB_AVATAR_LIMIT);
 
   // Colour is minted from a hash before any peer is known, so it has to be
   // reconciled against the roster once one exists. Runs on every roster change;
@@ -2801,9 +3034,8 @@ var MbeditorApp = function MbeditorApp() {
   // chips sit against the right edge of the titlebar and a left-anchored card
   // would run off screen.
   var _useStateHover = useState(null);
-  var _useStateHover2 = _slicedToArray(_useStateHover, 2);
-  var collabHover = _useStateHover2[0];
-  var setCollabHover = _useStateHover2[1];
+  var collabHover = _useStateHover[0];
+  var setCollabHover = _useStateHover[1];
 
   var openCollabHover = function (cid, e) {
     var r = e.currentTarget.getBoundingClientRect();
@@ -2813,8 +3045,7 @@ var MbeditorApp = function MbeditorApp() {
   // Latency and last-seen only need to tick while the card is actually on screen,
   // so the interval lives and dies with it. Idle cost stays zero.
   var _useStateHoverTick = useState(0);
-  var _useStateHoverTick2 = _slicedToArray(_useStateHoverTick, 2);
-  var setCollabHoverTick = _useStateHoverTick2[1];
+  var setCollabHoverTick = _useStateHoverTick[1];
   useEffect(function () {
     if (!collabHover) return;
     var id = setInterval(function () { setCollabHoverTick(function (n) { return n + 1; }); }, 1000);
@@ -2845,17 +3076,57 @@ var MbeditorApp = function MbeditorApp() {
     handleSelectFile(followedFile, followedFile.split('/').pop());
   }, [followedClientId, followedFile]);
 
+  // Shared by the avatar stack and the overflow popover so "which peer, what
+  // file, are we following them" is computed once per id instead of twice.
+  var collabPeerInfo = function (cid) {
+    var peer = collabRoster[cid];
+    var file = peer.current_file;
+    return {
+      name: peer.name || 'Anonymous',
+      colour: peer.colour || '#888888',
+      file: file,
+      following: followedClientId === cid,
+      elsewhere: file !== presenceFile
+    };
+  };
+
+  // The "+N" overflow popover. A plain onMouseLeave that closes immediately
+  // makes it uncrossable — the pointer has to travel off the button and onto
+  // the popover — so the close is delayed and cancelled by either one's
+  // onMouseEnter. Click still toggles it directly, which is what makes it
+  // reachable without a mouse at all.
+  // The anchor, not a boolean: the popover renders at the root next to the
+  // hovercard, because an absolutely-positioned child of the title bar is
+  // painted under the editor whatever its z-index.
+  var _useStateOverflow = useState(null);
+  var collabOverflowAnchor = _useStateOverflow[0];
+  var setCollabOverflowAnchor = _useStateOverflow[1];
+  var collabOverflowOpen = !!collabOverflowAnchor;
+  var anchorFrom = function (el) {
+    var r = el.getBoundingClientRect();
+    return { top: r.bottom + 4, right: window.innerWidth - r.right };
+  };
+  var collabOverflowCloseTimerRef = useRef(null);
+  var cancelOverflowClose = function () {
+    if (collabOverflowCloseTimerRef.current) {
+      clearTimeout(collabOverflowCloseTimerRef.current);
+      collabOverflowCloseTimerRef.current = null;
+    }
+  };
+  var scheduleOverflowClose = function () {
+    cancelOverflowClose();
+    collabOverflowCloseTimerRef.current = setTimeout(function () { setCollabOverflowAnchor(null); }, 250);
+  };
+
   // Phase 7: Per-file last-commit info shown in the status bar
   var _useState31 = useState(null);
-  var _useState32 = _slicedToArray(_useState31, 2);
-  var activeFileCommit = _useState32[0];
-  var setActiveFileCommit = _useState32[1];
+  var activeFileCommit = _useState31[0];
+  var setActiveFileCommit = _useState31[1];
 
   // EOL indicator — tracks current line-ending style of the active file
   var _useState31e = useState(null);
-  var _useState31e2 = _slicedToArray(_useState31e, 2);
-  var activeEOL = _useState31e2[0];
-  var setActiveEOL = _useState31e2[1];
+  var activeEOL = _useState31e[0];
+  var setActiveEOL = _useState31e[1];
 
   useEffect(function () {
     if (!gitAvailable || !activeTab || activeTab.isDiff || activeTab.isCombinedDiff || activeTab.isCommitGraph || !activeTab.path || activeTab.path.indexOf('://') >= 0) {
@@ -2875,7 +3146,9 @@ var MbeditorApp = function MbeditorApp() {
     });
   }, [activeTab ? activeTab.id : null, gitAvailable]);
 
-  // Update EOL indicator whenever active tab or its content changes
+  // Update EOL indicator on external loads, not on every content write. The
+  // content effect fires on the 250ms typing flush, and scanning the whole
+  // buffer for '\r' there was pure waste — typing cannot change the line ending.
   useEffect(function () {
     if (!activeTab || typeof activeTab.content !== 'string' ||
         activeTab.isDiff || activeTab.isCombinedDiff || activeTab.isCommitGraph || activeTab.isPreview) {
@@ -2889,7 +3162,7 @@ var MbeditorApp = function MbeditorApp() {
     } else {
       setActiveEOL('LF');
     }
-  }, [activeTab ? activeTab.id : null, activeTab ? activeTab.content : null]);
+  }, [activeTab ? activeTab.id : null, activeTab ? activeTab.externalContentVersion : null]);
 
   useEffect(function () {
     if (!activeTab || typeof activeTab.content !== 'string') return;
@@ -2966,15 +3239,35 @@ var MbeditorApp = function MbeditorApp() {
   // by a formatter problem).
   var _formatContentForSave = function _formatContentForSave(tab) {
     var isRubyLang = /\.(rb|rake|gemspec)$/.test(tab.path) || /(?:^|\/)(Rakefile|Gemfile)$/.test(tab.path);
+    var startedAt = Date.now();
     if (isRubyLang) {
-      if (!rubocopAvailable) return Promise.resolve(null);
-      return FileService.formatFile(tab.path, tab.content)
-        .then(function (res) { return (res && res.content) || null; })
-        ["catch"](function () { return null; });
+      // Same route as the Format button: formatRubySource tries ruby-lsp and
+      // falls back to /format's `rubocop -A`. Calling /format directly here
+      // meant saving a Ruby file could produce different bytes from formatting
+      // the same file by hand — the two-formatters-disagree trap this file
+      // already documents for JS — and gating on RuboCop alone made
+      // format-on-save silently do nothing when only ruby-lsp was present.
+      if (!rubocopAvailable && !window.MBEDITOR_RUBY_LSP_AVAILABLE) return Promise.resolve(null);
+      return formatRubySource(tab.path, tab.content)
+        .then(function (res) {
+          var out = (res && res.content) || null;
+          _recFormat(tab.path, startedAt, out);
+          return out;
+        })
+        ["catch"](function () {
+          _recErr('FORMAT');
+          return null;
+        });
     }
     var parserName = prettierParserFor(tab.path);
     if (!parserName) return Promise.resolve(null);
-    return runPrettier(tab.content, editorPrefs, parserName)["catch"](function () { return null; });
+    return runPrettier(tab.content, editorPrefs, parserName).then(function (out) {
+      _recFormat(tab.path, startedAt, out);
+      return out;
+    })["catch"](function () {
+      _recErr('FORMAT');
+      return null;
+    });
   };
 
   // Re-read a tab from the store after flushing TabManager's throttled content
@@ -3013,6 +3306,40 @@ var MbeditorApp = function MbeditorApp() {
     _doSave(paneId, tab);
   };
 
+  // Shared save-execution flow for a known-on-disk (non-untitled) tab: the
+  // saving status/loading flag, the FileService write, the AVI clean-baseline
+  // reset, and save-failed/cleanup handling. `onSuccess` runs whatever the
+  // caller does after a successful write (before the finally cleanup);
+  // `onFinally` runs any extra caller-specific cleanup after the standard one.
+  var _runSave = function _runSave(tab, onSuccess, onFinally) {
+    setLoading(function (prev) {
+      return _extends({}, prev, { save: true });
+    });
+    EditorStore.setStatus("Saving " + tab.name + "...", "info");
+    isSavingRef.current = true;
+    var startedAt = Date.now();
+    return FileService.saveFile(tab.path, tab.content).then(function () {
+      var audit = window.MbeditorAudit;
+      if (audit) audit.rec(audit.EV.SAVE, _auditExt(tab.path), tab.content.length, Date.now() - startedAt);
+      noteLocalSave(tab.path, tab.content);
+      // Reset the AVI clean baseline so undo past this save point shows dirty correctly.
+      var _modelEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
+      if (_modelEntry && _modelEntry.model && !_modelEntry.model.isDisposed()) {
+        _modelEntry.cleanVersionId = _modelEntry.model.getAlternativeVersionId();
+      }
+      onSuccess();
+    })["catch"](function (err) {
+      _recErr('SAVE');
+      EditorStore.setStatus("Save failed: " + err.message, "error");
+    })["finally"](function () {
+      isSavingRef.current = false;
+      setLoading(function (prev) {
+        return _extends({}, prev, { save: false });
+      });
+      if (onFinally) onFinally();
+    });
+  };
+
   var _doSave = function _doSave(paneId, tab) {
     if (tab.isUntitled) {
       saveUntitledTab(paneId, tab)["catch"](function (err) {
@@ -3021,13 +3348,7 @@ var MbeditorApp = function MbeditorApp() {
       });
       return;
     }
-    setLoading(function (prev) {
-      return _extends({}, prev, { save: true });
-    });
-    EditorStore.setStatus("Saving " + tab.name + "...", "info");
-    isSavingRef.current = true;
-    FileService.saveFile(tab.path, tab.content).then(function () {
-      noteLocalSave(tab.path, tab.content);
+    _runSave(tab, function () {
       var newPanes = EditorStore.getState().panes.map(function (p) {
         if (p.id === paneId) {
           return _extends({}, p, { tabs: p.tabs.map(function (t) {
@@ -3037,13 +3358,10 @@ var MbeditorApp = function MbeditorApp() {
         return p;
       });
       EditorStore.setState({ panes: newPanes });
-      // Reset the AVI clean baseline so undo past this save point shows dirty correctly.
-      var _modelEntry = window.__mbeditorModels && window.__mbeditorModels[tab.path];
-      if (_modelEntry && _modelEntry.model && !_modelEntry.model.isDisposed()) {
-        _modelEntry.cleanVersionId = _modelEntry.model.getAlternativeVersionId();
-      }
       // Collab: push a fresh snapshot so the server compacts the buffered deltas.
-      if (typeof CollaborationService !== 'undefined' && CollaborationService.isBound(tab.path)) {
+      // Only for an attached tab — a deferred or degraded room pushing its local
+      // buffer as a snapshot could seed a second copy into what a peer holds.
+      if (typeof CollaborationService !== 'undefined' && CollaborationService.isAttached(tab.path)) {
         CollaborationService.pushSnapshot(tab.path);
       }
       EditorStore.setStatus("Saved", "success");
@@ -3062,8 +3380,11 @@ var MbeditorApp = function MbeditorApp() {
       // sprockets/react-rails pipeline can't transform (errors Monaco's TS
       // worker misses). Save only — never per keystroke.
       if (jsSyntaxCheckAvailableRef.current && /\.(js|jsx)$/i.test(tab.path)) {
+        var lintStartedAt = Date.now();
         FileService.lintFile(tab.path, tab.content, 'javascript').then(function (res) {
           var babelMarkers = (res && res.markers) || [];
+          var audit = window.MbeditorAudit;
+          if (audit) audit.rec(audit.EV.LINT, _auditExt(tab.path), Date.now() - lintStartedAt, babelMarkers.length);
           if (babelMarkers.length > 0) {
             applyMarkersForTab(tab.id, babelMarkers);
             EditorStore.setStatus('Saved — babel: ' + babelMarkers[0].message, 'warning');
@@ -3073,7 +3394,9 @@ var MbeditorApp = function MbeditorApp() {
             // applyMarkersForTab keeps the previous map when it is already empty.
             applyMarkersForTab(tab.id, []);
           }
-        })["catch"](function () {});
+        })["catch"](function () {
+          _recErr('LINT');
+        });
       }
 
       // The server broadcasts files_changed for this very write, and the
@@ -3084,13 +3407,6 @@ var MbeditorApp = function MbeditorApp() {
       // file every time does by definition, so the duplicate was the expensive
       // one. Without a socket no broadcast arrives, so keep it for that case.
       if (!_socketWillBroadcast()) GitService.fetchStatusLite({ background: true });
-    })["catch"](function (err) {
-      EditorStore.setStatus("Save failed: " + err.message, "error");
-    })["finally"](function () {
-      isSavingRef.current = false;
-      return setLoading(function (prev) {
-        return _extends({}, prev, { save: false });
-      });
     });
   };
 
@@ -3179,7 +3495,15 @@ var MbeditorApp = function MbeditorApp() {
     // disk stayed dirty and the only thing on offer was to hit Save All again.
     // Each file is now settled on its own result.
     var promises = dirtyTabs.map(function (tab) {
-      return FileService.saveFile(tab.path, tab.content);
+      var startedAt = Date.now();
+      return FileService.saveFile(tab.path, tab.content).then(function (res) {
+        var audit = window.MbeditorAudit;
+        if (audit) audit.rec(audit.EV.SAVE, _auditExt(tab.path), tab.content.length, Date.now() - startedAt);
+        return res;
+      }, function (err) {
+        _recErr('SAVE');
+        throw err;
+      });
     });
     Promise.allSettled(promises).then(function (results) {
       var saved = dirtyTabs.filter(function (tab, i) { return results[i].status === "fulfilled"; });
@@ -3327,6 +3651,7 @@ var MbeditorApp = function MbeditorApp() {
   // rather than the button appearing to do nothing.
   var formatTabContent = function formatTabContent(tab, prefs) {
     prefs = prefs || editorPrefs;
+    var startedAt = Date.now();
     if (isRubyPath(tab.path) || tab.path.endsWith('.rake')) {
       if (!rubocopAvailable) return Promise.reject(new Error("RuboCop is not available for this workspace."));
       // RuboCop's output is taken as-is. Ruby indentation belongs to the
@@ -3335,13 +3660,18 @@ var MbeditorApp = function MbeditorApp() {
       // the same file. The old code tried the opposite — converting the source
       // to tabs *before* handing it over — which RuboCop simply discarded.
       return formatRubySource(tab.path, tab.content).then(function (res) {
-        return (res && res.content) || null;
+        var out = (res && res.content) || null;
+        _recFormat(tab.path, startedAt, out);
+        return out;
       });
     }
 
     var parserName = prettierParserFor(tab.path);
     if (!parserName) return Promise.resolve(null);
-    return runPrettier(tab.content, prefs, parserName);
+    return runPrettier(tab.content, prefs, parserName).then(function (out) {
+      _recFormat(tab.path, startedAt, out);
+      return out;
+    });
   };
 
   // Markers are per-model and only the mounted editor re-lints, so a document
@@ -3434,6 +3764,7 @@ var MbeditorApp = function MbeditorApp() {
       EditorStore.setStatus(formatted === originalContent ? "Already formatted" : "Formatted (Unsaved)", "success");
       GitService.fetchStatus();
     })["catch"](function (err) {
+      _recErr('FORMAT');
       EditorStore.setStatus("Format failed: " + (err && err.message ? err.message : err), "error");
     })["finally"](function () {
       setLoading(function (prev) { return _extends({}, prev, { format: false }); });
@@ -3451,7 +3782,7 @@ var MbeditorApp = function MbeditorApp() {
     var targets = [];
     EditorStore.getState().panes.forEach(function (p) {
       p.tabs.forEach(function (t) {
-        if (t.path && !t.path.startsWith('mbeditor://') && t.path !== '__settings__' && typeof t.content === 'string') {
+        if (t.path && !t.path.startsWith('mbeditor://') && typeof t.content === 'string') {
           targets.push({ paneId: p.id, tab: t });
         }
       });
@@ -3492,14 +3823,6 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
-  var TEST_CACHE_PREFIX = 'mbeditor_test_result_';
-
-  var saveCachedTestResult = function saveCachedTestResult(filePath, result) {
-    try {
-      localStorage.setItem(TEST_CACHE_PREFIX + filePath, JSON.stringify(result));
-    } catch (e) {}
-  };
-
   var executeTestRun = function executeTestRun(filePath, line) {
     setTestLoading(true);
     EditorStore.setStatus(line ? 'Running test at line ' + line + '...' : 'Running tests...', 'info');
@@ -3608,6 +3931,15 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
+  // Paging is scroll-driven, so a list too short to scroll — few hits, or a
+  // big file group just collapsed — would show "Loading more…" and never load
+  // it. Fill the viewport whenever the list stops being scrollable.
+  useEffect(function () {
+    var el = searchResultsContainerRef.current;
+    if (!searchHasMore || !el) return;
+    if (el.scrollHeight <= el.clientHeight + 200) loadMoreSearchResults();
+  }, [searchHasMore, state.searchResults, searchCollapsedFiles]);
+
   var handleSearchChange = function handleSearchChange(e) {
     var val = e.target.value;
     if (!val) { clearSearch(); return; }
@@ -3850,10 +4182,8 @@ var MbeditorApp = function MbeditorApp() {
     if (imported > 0) {
       // Expand down to what was just written, so the tree actually shows it —
       // importing into a collapsed folder otherwise leaves the explorer looking
-      // untouched. Deliberately does not *select* the folder: the tree
-      // selection is what the toolbar's Upload button reads for its default
-      // destination, and pinning it here would make every later upload default
-      // to this import's folder.
+      // untouched. Deliberately does not *select* the folder, which would move
+      // the selection somewhere the user did not put it.
       var landed = parentDir(written[0].path);
       var toExpand = {};
       var bits = landed ? landed.split('/') : [];
@@ -3872,8 +4202,7 @@ var MbeditorApp = function MbeditorApp() {
   // rather than a disaster. Real targets stopPropagation before this runs.
   useEffect(function () {
     var swallow = function (e) {
-      var types = (e.dataTransfer && e.dataTransfer.types) || [];
-      if (Array.prototype.indexOf.call(types, 'Files') === -1) return;
+      if (!FileImport.hasExternalFiles(e.dataTransfer)) return;
       e.preventDefault();
       // dragover is left alone beyond preventDefault: setting dropEffect here
       // would override the 'copy' cursor the tree sets on a valid folder.
@@ -3901,7 +4230,15 @@ var MbeditorApp = function MbeditorApp() {
         (entries.length === 1 ? '' : 's') + '...', 'info');
     }
 
-    return FileService.importFiles(FileImport.buildFormData(entries, targetFolderPath, 'ask'))
+    var where = targetFolderPath || 'the workspace root';
+    var noun = entries.length + ' file' + (entries.length === 1 ? '' : 's');
+    var progress = function (percent) {
+      EditorStore.setStatus(percent === null
+        ? 'Uploaded ' + noun + ' to ' + where + ', writing them...'
+        : 'Uploading ' + noun + ' to ' + where + '... ' + percent + '%', 'info');
+    };
+
+    return FileService.importFiles(FileImport.buildFormData(entries, targetFolderPath, 'ask'), progress)
       .then(function(result) {
         if (result.conflicts && result.conflicts.length > 0) {
           setImportConflict({ result: result, entries: entries, targetFolderPath: targetFolderPath });
@@ -3941,32 +4278,81 @@ var MbeditorApp = function MbeditorApp() {
       });
   };
 
-  // Downloads go straight through /raw?download=1 — the browser's own save
-  // flow, so nothing is buffered client-side and a 5 MB file costs no memory.
-  // A synthetic anchor rather than location.href: navigating away from the
-  // editor to an attachment response leaves the page in a half-unloaded state
-  // in Safari.
+  // /raw stays a bare anchor for the single-file case — nothing buffered
+  // client-side. /archive can fail with a JSON error body a plain anchor
+  // navigation can't see, so that path goes through fetch instead.
+  // Right-clicking a node inside a multi-selection acts on the whole selection;
+  // right-clicking outside it acts on that node alone. The standard file-manager
+  // rule, and why FileTree's onContextMenu stopped collapsing the set. Every
+  // menu action that can operate on more than one path asks this.
+  var actsOnSelection = function actsOnSelection(node) {
+    return !!(node && selectedPaths && selectedPaths.size > 1 && selectedPaths.has(node.path));
+  };
+
   var handleDownloadFile = function handleDownloadFile(node) {
-    if (!node || node.type !== 'file') return;
-    var link = document.createElement('a');
-    link.href = window.mbeditorBasePath() + '/raw?download=1&path=' + encodeURIComponent(node.path);
-    link.download = node.name;
-    link.rel = 'noopener';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    EditorStore.setStatus('Downloading ' + node.name + '...', 'info');
+    if (!node) return;
+    var isMultiSelect = actsOnSelection(node);
+    if (!isMultiSelect && node.type === 'file') {
+      var link = document.createElement('a');
+      link.href = window.mbeditorBasePath() + '/raw?download=1&path=' + encodeURIComponent(node.path);
+      link.download = node.name;
+      link.rel = 'noopener';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      EditorStore.setStatus('Downloading ' + node.name + '...', 'info');
+      return;
+    }
+    var paths = isMultiSelect ? Array.from(selectedPaths) : [node.path];
+    var url = window.mbeditorBasePath() + '/archive?' + paths.map(function (p) {
+      return 'paths[]=' + encodeURIComponent(p);
+    }).join('&');
+    fetch(url).then(function (resp) {
+      if (!resp.ok) {
+        return resp.json().catch(function () { return {}; }).then(function (body) {
+          var message = (body && body.error) || ('HTTP ' + resp.status);
+          EditorStore.setStatus('Download failed: ' + message, 'error');
+        });
+      }
+      var disposition = resp.headers.get('Content-Disposition');
+      var match = disposition && disposition.match(/filename="([^"]+)"/);
+      var filename = (match && match[1]) || 'archive.tar.gz';
+      return resp.blob().then(function (blob) {
+        var objectUrl = URL.createObjectURL(blob);
+        var archiveLink = document.createElement('a');
+        archiveLink.href = objectUrl;
+        archiveLink.download = filename;
+        archiveLink.rel = 'noopener';
+        document.body.appendChild(archiveLink);
+        archiveLink.click();
+        document.body.removeChild(archiveLink);
+        // Revoking in the same tick can free the blob before the browser has
+        // started reading it, which cancels the download instead of saving it.
+        setTimeout(function () { URL.revokeObjectURL(objectUrl); }, 60000);
+        EditorStore.setStatus('Downloading ' + filename + '...', 'info');
+      });
+    }).catch(function (err) {
+      EditorStore.setStatus('Download failed: ' + (err && err.message || 'network error'), 'error');
+    });
+  };
+
+  var downloadMenuLabel = function downloadMenuLabel(node) {
+    if (!node) return 'Download';
+    if (actsOnSelection(node)) return 'Download ' + selectedPaths.size + ' items';
+    if (node.type === 'folder') return 'Download folder';
+    return 'Download';
+  };
+
+  // Deleting is irreversible, so the item has to say how much it will take —
+  // "Delete" over a 3-item selection would understate it.
+  var deleteMenuLabel = function deleteMenuLabel(node) {
+    return actsOnSelection(node) ? 'Delete ' + selectedPaths.size + ' items' : 'Delete';
   };
 
   // A file node means "upload alongside this file", so the dialog opens on its
   // parent — right-clicking a file to upload next to it is the common gesture.
   var openImportDialog = function openImportDialog(node) {
-    var folder = '';
-    if (node && node.type === 'folder') {
-      folder = node.path;
-    } else if (node && node.path) {
-      folder = node.path.split('/').slice(0, -1).join('/');
-    }
+    var folder = node ? (node.type === 'folder' ? node.path : parentDir(node.path)) : '';
     setImportDialog({ initialFolder: folder });
   };
 
@@ -3977,13 +4363,18 @@ var MbeditorApp = function MbeditorApp() {
 
   var openContextMenu = function openContextMenu(e, node) {
     setContextMenu({ x: e.clientX, y: e.clientY, node: node });
-    handleNodeSelect(node);
+    if (!actsOnSelection(node)) handleNodeSelect(node);
   };
 
   var closeContextMenu = function closeContextMenu() {
     return setContextMenu(null);
   };
 
+  // Clamp into view whenever the menu opens at a new position.
+  useEffect(function () {
+    if (contextMenu) window.clampMenuIntoView(contextMenuRef.current);
+  }, [contextMenu]);
+
   var handleContextMenuAction = function handleContextMenuAction(action) {
     var node = contextMenu && contextMenu.node;
     closeContextMenu();
@@ -4042,17 +4433,34 @@ var MbeditorApp = function MbeditorApp() {
     document.body.style.userSelect = 'none';
   };
 
+  var startDrawerResize = function startDrawerResize(mode, startHeight, storeKey) {
+    return function (e) {
+      e.preventDefault();
+      resizeSessionRef.current = { mode: mode, startY: e.clientY, startHeight: startHeight, storeKey: storeKey };
+      setActiveResizeMode(mode);
+      document.body.style.cursor = 'row-resize';
+      document.body.style.userSelect = 'none';
+    };
+  };
+
   var handleActivityBarClick = function handleActivityBarClick(tab) {
     if (tab === 'settings') {
-      openSettingsTab();
+      setShowModelGraphView(false);
+      setShowSettings(!showSettings);
       return;
     }
     // The model graph is a view, not a panel: it takes over the central area
-    // and needs the width. There is no sidebar half to show.
+    // and needs the width. There is no sidebar half to show, so it toggles
+    // instead of behaving like the other sidebar tabs.
     if (tab === 'models') {
-      openModelGraphTab();
+      setShowModelGraphView(function (prev) {
+        var next = !prev;
+        if (next) loadModelGraph(false);
+        return next;
+      });
       return;
     }
+    setShowModelGraphView(false);
     if (!sidebarCollapsed && activeSidebarTab === tab) {
       setSidebarCollapsed(true);
     } else {
@@ -4207,6 +4615,7 @@ var MbeditorApp = function MbeditorApp() {
     // Optimistically insert the new node so the tree doesn't flash empty while waiting for the server
     var optimisticNode = { path: path, name: name, type: type === 'folder' ? 'folder' : 'file', children: type === 'folder' ? [] : undefined };
     setTreeData(function (prev) { return insertNodeIntoTree(prev, parentPath, optimisticNode); });
+    setRevealTarget({ path: path });
 
     if (type === 'file') {
       setLoading(function (prev) {
@@ -4337,6 +4746,7 @@ var MbeditorApp = function MbeditorApp() {
       EditorStore.setStatus('Renamed to: ' + renamedPath, 'success');
       return refreshProjectTree().then(function () {
         GitService.fetchStatusLite({ background: true });
+        setRevealTarget({ path: renamedPath });
       });
     })["catch"](function (err) {
       var message = err && err.response && err.response.data && err.response.data.error || err.message;
@@ -4353,10 +4763,12 @@ var MbeditorApp = function MbeditorApp() {
   };
 
   var handleDeletePath = function handleDeletePath(targetNode) {
-    // If a specific node is provided (e.g. from context menu), delete just that.
-    // Otherwise delete all paths in the multi-selection (or fall back to selectedTreeNode).
+    // A node from the context menu deletes just that node — unless it is part
+    // of a live multi-selection, in which case the whole selection goes, the
+    // same rule Download follows. With no node (the toolbar button) it is
+    // always the selection, falling back to selectedTreeNode.
     var pathsToDelete;
-    if (targetNode !== undefined && targetNode) {
+    if (targetNode && !actsOnSelection(targetNode)) {
       pathsToDelete = [targetNode.path];
     } else if (selectedPaths && selectedPaths.size > 0) {
       pathsToDelete = Array.from(selectedPaths);
@@ -4380,6 +4792,10 @@ var MbeditorApp = function MbeditorApp() {
     var confirmed = window.confirm('Delete ' + label + '? This cannot be undone.');
     if (!confirmed) return;
 
+    // Computed against the pre-delete tree, since the deleted paths' siblings
+    // are only known before the tree is refreshed.
+    var deleteRevealTarget = computeDeleteRevealTarget(treeData, pathsToDelete);
+
     setLoading(function (prev) {
       return _extends({}, prev, { deletePath: true });
     });
@@ -4398,6 +4814,7 @@ var MbeditorApp = function MbeditorApp() {
       }
       return refreshProjectTree().then(function () {
         GitService.fetchStatusLite({ background: true });
+        if (failures.length === 0 && deleteRevealTarget) setRevealTarget({ path: deleteRevealTarget });
       });
     })["finally"](function () {
       setLoading(function (prev) {
@@ -4415,6 +4832,35 @@ var MbeditorApp = function MbeditorApp() {
   var canLintAndFormat = !!activeTab;
   var hasGitBranch = !!(state.gitBranch && state.gitBranch.trim());
 
+  // Derived at render from state already in the store — not stored via setState,
+  // so the 5s git-status poll (MbeditorApp.js re-render rules) never fires an
+  // extra re-render on an unchanged tick. Only conflictFileIndex is state, and
+  // it changes only on explicit user click, never from a poll.
+  var conflictedFiles = (state.gitInfo && state.gitInfo.workingTree || []).filter(function (f) {
+    return window.MBEDITOR_UNMERGED_STATUSES[(f.status || '').trim()];
+  });
+
+  // Opens the conflicted file at index idx (wrapping), landing the cursor/reveal
+  // on its first `<<<<<<<` marker. Prefers an already-open tab's live content
+  // (may hold unsaved edits) over a fresh disk fetch.
+  var openConflictedFileAt = function openConflictedFileAt(idx) {
+    if (!conflictedFiles.length) return;
+    var i = ((idx % conflictedFiles.length) + conflictedFiles.length) % conflictedFiles.length;
+    var file = conflictedFiles[i];
+    setConflictFileIndex(i);
+    var openTab = state.panes.reduce(function (found, p) {
+      return found || p.tabs.find(function (t) { return t.path === file.path; });
+    }, null);
+    var name = file.path.split('/').pop();
+    var contentPromise = openTab ? Promise.resolve({ content: openTab.content }) : FileService.getFile(file.path);
+    contentPromise.then(function (data) {
+      var content = typeof data.content === 'string' ? data.content : '';
+      var blocks = ConflictParser.parse(content);
+      var line = blocks.length ? blocks[0].startLine + 1 : null;
+      TabManager.openTab(file.path, name, line);
+    });
+  };
+
   var renderTabBar = function renderTabBar(paneId, tabs, activeId) {
     return React.createElement(TabBar, {
       tabs: tabs,
@@ -4427,7 +4873,7 @@ var MbeditorApp = function MbeditorApp() {
       onSelect: function (id) {
         // Sync explorer selection with the newly active tab so there's only one highlight
         var tab = tabs.find(function(t) { return t.id === id; });
-        if (tab && tab.path && !tab.path.startsWith('mbeditor://') && tab.path !== '__settings__') {
+        if (tab && tab.path && !tab.path.startsWith('mbeditor://')) {
           handleNodeSelect({ path: tab.path, name: tab.name, type: 'file' });
         }
         TabManager.switchTab(paneId, id);
@@ -4464,78 +4910,6 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
-  function openSettingsTab() {
-    var st = EditorStore.getState();
-    var foundPaneId = null;
-    var foundTab = null;
-    st.panes.forEach(function(p) {
-      if (!foundTab) {
-        var t = p.tabs.find(function(tab) { return tab.path === '__settings__'; });
-        if (t) { foundTab = t; foundPaneId = p.id; }
-      }
-    });
-    if (foundTab) {
-      var newPanes = st.panes.map(function(p) {
-        if (p.id === foundPaneId) return Object.assign({}, p, { activeTabId: '__settings__' });
-        return p;
-      });
-      EditorStore.setState({ panes: newPanes, focusedPaneId: foundPaneId, activeTabId: '__settings__' });
-      return;
-    }
-    var paneId = st.focusedPaneId;
-    var pane = st.panes.find(function(p) { return p.id === paneId; }) || st.panes[0];
-    if (!pane) return;
-    paneId = pane.id;
-    var newTab = { id: '__settings__', path: '__settings__', name: 'Settings', dirty: false, content: '', isSettings: true };
-    var newPanes2 = st.panes.map(function(p) {
-      if (p.id === paneId) return Object.assign({}, p, { tabs: p.tabs.concat(newTab), activeTabId: '__settings__' });
-      return p;
-    });
-    EditorStore.setState({ panes: newPanes2, focusedPaneId: paneId, activeTabId: '__settings__' });
-  }
-
-  // The diagram lives in an editor tab, not the sidebar: a layered graph is
-  // inherently wide and a ~300px panel can only ever show its first column.
-  // The sidebar tab is the entry point and the searchable model list.
-  var MODEL_GRAPH_TAB_ID = 'mbeditor://model-graph';
-  function openModelGraphTab() {
-    var st = EditorStore.getState();
-    var paneId = st.focusedPaneId;
-
-    var existing = null;
-    st.panes.forEach(function (p) {
-      if (!existing && p.tabs.some(function (t) { return t.id === MODEL_GRAPH_TAB_ID; })) {
-        existing = p.id;
-      }
-    });
-    if (existing) {
-      EditorStore.setState({
-        panes: st.panes.map(function (p) {
-          return p.id === existing ? Object.assign({}, p, { activeTabId: MODEL_GRAPH_TAB_ID }) : p;
-        }),
-        focusedPaneId: existing
-      });
-      return;
-    }
-
-    var pane = st.panes.find(function (p) { return p.id === paneId; }) || st.panes[0];
-    if (!pane) return;
-
-    var newTab = {
-      id: MODEL_GRAPH_TAB_ID, path: MODEL_GRAPH_TAB_ID, name: 'Model Graph',
-      dirty: false, content: '', isModelGraph: true
-    };
-    EditorStore.setState({
-      panes: st.panes.map(function (p) {
-        return p.id === pane.id
-          ? Object.assign({}, p, { tabs: p.tabs.concat(newTab), activeTabId: MODEL_GRAPH_TAB_ID })
-          : p;
-      }),
-      focusedPaneId: pane.id
-    });
-    loadModelGraph(false);
-  }
-
   var CHANGELOG_TAB_ID = 'mbeditor://changelog';
   function openChangelogTab() {
     var st = EditorStore.getState();
@@ -4593,10 +4967,11 @@ var MbeditorApp = function MbeditorApp() {
       { className: "ide-titlebar" },
       React.createElement("i", { className: "fas fa-layer-group ide-titlebar-icon" }),
       React.createElement(
+        // The product name, not the window title: the host and port are in the
+        // browser's own address bar, and the long form crowded the search pill.
         "div",
-        { className: "ide-titlebar-title" },
-        "Mini Browser Editor — ",
-        window.location.host
+        { className: "ide-titlebar-title", title: "Mini Browser Editor — " + window.location.host },
+        "Mbeditor"
       ),
       // The slot claims all the room between the title and the buttons; the
       // search pill then takes 75% of it, centred. Sizing the pill against a
@@ -4686,6 +5061,35 @@ var MbeditorApp = function MbeditorApp() {
             !toolbarIconOnly && " Git"
           )
         ),
+        conflictedFiles.length > 0 && React.createElement(
+          React.Fragment,
+          null,
+          React.createElement("div", { className: "statusbar-sep" }),
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "statusbar-btn mbeditor-conflict-chip",
+              title: "Open the first of " + conflictedFiles.length + " conflicted file" + (conflictedFiles.length === 1 ? "" : "s"),
+              onClick: function () { openConflictedFileAt(0); }
+            },
+            React.createElement("i", { className: "fas fa-exclamation-circle" }),
+            // The count always renders, even icon-only: it is the chip's
+            // content, not a label. A bare warning icon says less than nothing.
+            " " + conflictedFiles.length,
+            !toolbarIconOnly && (conflictedFiles.length === 1 ? " conflict" : " conflicts")
+          ),
+          conflictedFiles.length > 1 && React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "statusbar-btn",
+              title: "Open the next conflicted file",
+              onClick: function () { openConflictedFileAt(conflictFileIndex + 1); }
+            },
+            React.createElement("i", { className: "fas fa-arrow-right" })
+          )
+        ),
         // Collaboration trouble chip. Deliberately not shown when everything is
         // healthy and you are simply alone — that was the whole point of hiding
         // the solo chip. It appears only when a condition pairing needs has
@@ -4737,45 +5141,48 @@ var MbeditorApp = function MbeditorApp() {
           React.Fragment,
           null,
           React.createElement("div", { className: "statusbar-sep" }),
-          collabPeerIds.map(function (cid) {
-            var peer = collabRoster[cid];
-            var file = peer.current_file;
-            var name = peer.name || 'Anonymous';
-            var colour = peer.colour || '#888888';
-            var following = followedClientId === cid;
-            // Solid dot: they are in the file you are looking at, so their caret
-            // is on screen. Hollow ring: they are somewhere else and there is
-            // nothing to see — without this the chip looked identical either way
-            // and a peer's caret just vanished with no explanation.
-            var elsewhere = file !== presenceFile;
-            return React.createElement(
-              "button",
-              {
-                key: cid,
-                type: "button",
-                className: "statusbar-btn",
-                style: following
-                  ? { background: 'color-mix(in srgb, ' + colour + ' 28%, transparent)' }
-                  : undefined,
-                onMouseEnter: function (e) { openCollabHover(cid, e); },
-                onMouseLeave: function () { setCollabHover(null); },
-                onClick: function () { toggleFollow(cid); }
-              },
-              React.createElement("i", {
-                className: (following ? "fas fa-eye" : (elsewhere ? "far fa-circle" : "fas fa-circle")) +
-                  " collab-pulse",
-                style: { color: colour, fontSize: "0.7em", marginRight: "2px" }
-              }),
-              collabPeerLabels && (" " + name),
-              // Where they went, when they are not where you are. Basename only —
-              // the chip has ~110px to spend and the full path is in the tooltip.
-              collabPeerLabels && elsewhere && file && React.createElement(
-                "span",
-                { style: { opacity: 0.65, marginLeft: "4px" } },
-                file.split('/').pop()
-              )
-            );
-          })
+          React.createElement(
+            "div",
+            { className: "collab-avatar-stack" },
+            collabAvatarIds.map(function (cid) {
+              var info = collabPeerInfo(cid);
+              return React.createElement(
+                "button",
+                {
+                  key: cid,
+                  type: "button",
+                  className: "collab-avatar" +
+                    (info.following ? " collab-avatar-following" : "") +
+                    (info.elsewhere ? " collab-avatar-elsewhere" : ""),
+                  style: { background: info.colour },
+                  // The dot carries no glyph, so the name has to reach a
+                  // screen reader some other way.
+                  "aria-label": info.name,
+                  onMouseEnter: function (e) { openCollabHover(cid, e); },
+                  onMouseLeave: function () { setCollabHover(null); },
+                  onClick: function () { toggleFollow(cid); }
+                }
+              );
+            }),
+            collabOverflowIds.length > 0 && React.createElement(
+              "div",
+              { className: "collab-avatar-overflow" },
+              React.createElement(
+                "button",
+                {
+                  type: "button",
+                  className: "collab-avatar collab-avatar-more",
+                  onMouseEnter: function (e) { cancelOverflowClose(); setCollabOverflowAnchor(anchorFrom(e.currentTarget)); },
+                  onMouseLeave: scheduleOverflowClose,
+                  onClick: function (e) {
+                    var el = e.currentTarget;
+                    setCollabOverflowAnchor(function (prev) { return prev ? null : anchorFrom(el); });
+                  }
+                },
+                "+" + collabOverflowIds.length
+              )
+            )
+          )
         ),
         React.createElement("div", { className: "statusbar-sep" }),
         React.createElement(
@@ -4805,6 +5212,31 @@ var MbeditorApp = function MbeditorApp() {
         )
       )
     ),
+    collabOverflowOpen && React.createElement(
+      "div",
+      {
+        className: "collab-overflow-popover",
+        style: { top: collabOverflowAnchor.top + 'px', right: collabOverflowAnchor.right + 'px' },
+        onMouseEnter: cancelOverflowClose,
+        onMouseLeave: scheduleOverflowClose
+      },
+      collabOverflowIds.map(function (cid) {
+        var info = collabPeerInfo(cid);
+        return React.createElement(
+          "button",
+          {
+            key: cid,
+            type: "button",
+            className: "collab-overflow-row" + (info.following ? " is-following" : ""),
+            onClick: function () { toggleFollow(cid); }
+          },
+          React.createElement("span", { className: "collab-overflow-swatch", style: { background: info.colour } }),
+          React.createElement("span", { className: "collab-overflow-name" }, info.name),
+          React.createElement("span", { className: "collab-overflow-file" }, info.file ? info.file.split('/').pop() : 'No file open'),
+          info.following && React.createElement("i", { className: "fas fa-eye collab-overflow-eye" })
+        );
+      })
+    ),
     collabHover && (function () {
       var isMe = collabHover.cid === '__me__';
       var peer = isMe ? null : collabRoster[collabHover.cid];
@@ -4893,6 +5325,15 @@ var MbeditorApp = function MbeditorApp() {
       );
     })(),
     showHelp && React.createElement(ShortcutHelp, { onClose: function () { return setShowHelp(false); } }),
+    showSettings && React.createElement(window.SettingsModal || SettingsModal, {
+      editorPrefs: editorPrefs,
+      setEditorPrefs: setEditorPrefs,
+      rubocopAvailable: rubocopAvailable,
+      rubocopConfigPath: rubocopConfigPath,
+      onOpenRubocopConfig: function () { handleSelectFile(rubocopConfigPath, rubocopConfigPath.split('/').pop()); },
+      onReset: function () { setEditorPrefs(Object.assign({}, DEFAULT_EDITOR_PREFS)); },
+      onClose: function () { return setShowSettings(false); }
+    }),
     React.createElement(
       "div",
       { className: "ide-body", id: "ide-body-container" },
@@ -4937,7 +5378,7 @@ var MbeditorApp = function MbeditorApp() {
             "button",
             {
               type: "button",
-              className: "ide-activity-btn" + (activeTab && activeTab.isModelGraph ? ' active' : ''),
+              className: "ide-activity-btn" + (showModelGraphView ? ' active' : ''),
               title: "Model graph",
               onClick: function() { handleActivityBarClick('models'); }
             },
@@ -4951,16 +5392,16 @@ var MbeditorApp = function MbeditorApp() {
             "button",
             {
               type: "button",
-              className: "ide-activity-btn" + (activeTab && activeTab.isSettings ? ' active' : ''),
+              className: "ide-activity-btn" + (showSettings ? ' active' : ''),
               title: "Editor Preferences",
-              onClick: openSettingsTab
+              onClick: function() { handleActivityBarClick('settings'); }
             },
             React.createElement("i", { className: "fas fa-cog" })
           )
         )
       ),
-      /* Panel content — shown when not collapsed and not in zen mode */
-      !sidebarCollapsed && !zenMode && React.createElement(
+      /* Panel content — shown when not collapsed, not in zen mode, and not showing the model graph */
+      !sidebarCollapsed && !zenMode && !showModelGraphView && React.createElement(
         "div",
         { className: "ide-sidebar", style: { width: sidebarWidth + "px" } },
         React.createElement("div", { className: "sidebar-panel-title" },
@@ -4998,108 +5439,126 @@ var MbeditorApp = function MbeditorApp() {
             React.createElement(
               "div",
               { style: { marginBottom: "12px" } },
-              state.panes.map(function (pane) {
-                if (pane.tabs.length === 0) return null;
-                var isPane2 = pane.id === 2;
-                return React.createElement(
-                  "div",
-                  {
-                    key: pane.id,
-                    className: "open-editors-group",
-                    style: { marginBottom: pane.id === 1 && state.panes[1].tabs.length > 0 ? "10px" : "0" }
-                  },
-                  React.createElement(
+              (function () {
+                // VS Code drops the "GROUP N" sub-header when only one group
+                // is populated — it's only useful to tell groups apart.
+                var activePanes = state.panes.filter(function (p) { return p.tabs.length > 0; });
+                var showGroupHeaders = activePanes.length > 1;
+                return state.panes.map(function (pane) {
+                  if (pane.tabs.length === 0) return null;
+                  var isPane2 = pane.id === 2;
+                  return React.createElement(
                     "div",
-                    { className: "ide-sidebar-header open-editors-group-header" },
-                    React.createElement(
-                      "span",
-                      { className: "open-editors-group-title" },
-                      "GROUP ",
-                      pane.id
+                    {
+                      key: pane.id,
+                      className: "open-editors-group",
+                      style: { marginBottom: pane.id === 1 && state.panes[1].tabs.length > 0 ? "10px" : "0" }
+                    },
+                    showGroupHeaders && React.createElement(
+                      "div",
+                      { className: "ide-sidebar-header open-editors-group-header" },
+                      React.createElement(
+                        "span",
+                        { className: "open-editors-group-title" },
+                        "GROUP ",
+                        pane.id
+                      ),
+                      React.createElement(
+                        SectionActionGroup,
+                        { ariaLabel: "Group " + pane.id + " actions", className: "collapsible-actions open-editors-group-actions" },
+                        React.createElement(SidebarActionButton, {
+                          title: "Close all editors in Group " + pane.id,
+                          ariaLabel: "Close all editors in Group " + pane.id,
+                          iconClass: "far fa-window-close",
+                          onClick: function (e) {
+                            e.stopPropagation();handleCloseEditorsInGroup(pane.id);
+                          }
+                        })
+                      )
                     ),
                     React.createElement(
-                      SectionActionGroup,
-                      { ariaLabel: "Group " + pane.id + " actions", className: "collapsible-actions open-editors-group-actions" },
-                      React.createElement(SidebarActionButton, {
-                        title: "Close all editors in Group " + pane.id,
-                        ariaLabel: "Close all editors in Group " + pane.id,
-                        iconClass: "far fa-window-close",
-                        onClick: function (e) {
-                          e.stopPropagation();handleCloseEditorsInGroup(pane.id);
-                        }
-                      })
-                    )
-                  ),
-                  React.createElement(
-                    "div",
-                    { className: "file-tree" },
-                    pane.tabs.map(function (tab) {
-                      return React.createElement(
-                        "div",
-                        {
-                          key: tab.id,
-                          className: "tree-item " + (pane.activeTabId === tab.id && state.focusedPaneId === pane.id ? "active" : ""),
-                          // The name ellipsises in a narrow sidebar, so the row
-                          // carries the full path the way file-tree rows do.
-                          title: tab.path || tab.name,
-                          onClick: function () {
-                            if (tab.path && !tab.path.startsWith('mbeditor://') && tab.path !== '__settings__') {
-                              handleNodeSelect({ path: tab.path, name: tab.name, type: 'file' });
-                            }
-                            TabManager.focusPane(pane.id);TabManager.switchTab(pane.id, tab.id);
-                          }
-                        },
-                        React.createElement("i", { className: "tree-item-icon " + (window.getFileIcon ? window.getFileIcon(tab.name) : 'far fa-file-code') + " tree-file-icon" }),
-                        React.createElement(
-                          "div",
-                          // minWidth:0 on both the row's name cell and the label
-                          // itself: without it a flex item refuses to shrink
-                          // below its content, so a long filename pushed out
-                          // under the (formerly absolute) action buttons.
-                          { className: "tree-item-name", style: { display: 'flex', alignItems: 'center', minWidth: 0 } },
-                          React.createElement(
-                            "span",
-                            { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 } },
-                            tab.name
-                          ),
-                          tab.dirty && React.createElement("i", { className: "fas fa-circle", style: { fontSize: '5px', color: '#e3d286', marginLeft: '6px', marginTop: '1px', flexShrink: 0 } })
-                        ),
-                        React.createElement(
+                      "div",
+                      { className: "file-tree" },
+                      pane.tabs.map(function (tab) {
+                        var isActive = pane.activeTabId === tab.id && state.focusedPaneId === pane.id;
+                        var dir = tab.path ? tab.path.split('/').slice(0, -1).join('/') : '';
+                        return React.createElement(
                           "div",
-                          // In flow, not absolute — the buttons now claim their
-                          // own width so the name truncates instead of running
-                          // underneath them.
-                          { className: "tab-actions", style: { display: 'flex', alignItems: 'center', flexShrink: 0, marginLeft: 'auto' } },
+                          {
+                            key: tab.id,
+                            className: "tree-item open-editors-item " + (isActive ? "active" : ""),
+                            // The name ellipsises in a narrow sidebar, so the row
+                            // carries the full path the way file-tree rows do.
+                            title: tab.path || tab.name,
+                            onClick: function () {
+                              if (tab.path && !tab.path.startsWith('mbeditor://')) {
+                                handleNodeSelect({ path: tab.path, name: tab.name, type: 'file' });
+                              }
+                              TabManager.focusPane(pane.id);TabManager.switchTab(pane.id, tab.id);
+                            }
+                          },
+                          React.createElement("i", { className: "tree-item-icon " + (window.getFileIcon ? window.getFileIcon(tab.name) : 'far fa-file-code') + " tree-file-icon" }),
                           React.createElement(
                             "div",
-                            { className: "tab-split", onClick: function (e) {
-                                e.stopPropagation();TabManager.moveTabToPane(pane.id, pane.id === 1 ? 2 : 1, tab.id);
-                              }, style: { padding: '0 4px', cursor: 'pointer', opacity: 0.6 }, title: "Move to Group " + (pane.id === 1 ? 2 : 1) },
-                            React.createElement("i", { className: isPane2 ? "fas fa-chevron-left" : "fas fa-chevron-right" })
+                            // minWidth:0 on both the row's name cell and the label
+                            // itself: without it a flex item refuses to shrink
+                            // below its content, so a long filename pushed out
+                            // under the (formerly absolute) action buttons.
+                            { className: "tree-item-name", style: { display: 'flex', alignItems: 'center', minWidth: 0 } },
+                            React.createElement(
+                              "span",
+                              { className: "open-editors-name", style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0, flexShrink: 0 } },
+                              tab.name
+                            ),
+                            dir && React.createElement(
+                              "span",
+                              { className: "open-editors-dir" },
+                              dir
+                            )
                           ),
                           React.createElement(
                             "div",
-                            { className: "tab-close", onClick: function (e) {
-                                e.stopPropagation();requestCloseTab(pane.id, tab.id);
-                              }, style: { padding: '0 4px', cursor: 'pointer', opacity: 0.6 },
-                              // See TabBar: role="button" would pick up Pico's
-                              // button skin from the host app and square this off.
-                              title: "Close " + tab.name + (tab.dirty ? " (unsaved changes)" : "") },
-                            React.createElement("i", { className: "fas fa-times" })
+                            // In flow, not absolute — the buttons now claim their
+                            // own width so the name truncates instead of running
+                            // underneath them.
+                            { className: "tab-actions", style: { display: 'flex', alignItems: 'center', flexShrink: 0, marginLeft: 'auto' } },
+                            React.createElement(
+                              "div",
+                              { className: "tab-split", onClick: function (e) {
+                                  e.stopPropagation();TabManager.moveTabToPane(pane.id, pane.id === 1 ? 2 : 1, tab.id);
+                                }, style: { padding: '0 4px', cursor: 'pointer' }, title: "Move to Group " + (pane.id === 1 ? 2 : 1) },
+                              React.createElement("i", { className: isPane2 ? "fas fa-chevron-left" : "fas fa-chevron-right" })
+                            ),
+                            React.createElement(
+                              "div",
+                              { className: "open-editors-close-slot" },
+                              tab.dirty && React.createElement("i", { className: "fas fa-circle open-editors-dirty-dot", 'aria-hidden': 'true' }),
+                              React.createElement(
+                                "button",
+                                { type: "button", className: "tab-close", onClick: function (e) {
+                                    e.stopPropagation();requestCloseTab(pane.id, tab.id);
+                                  }, style: { padding: '0 4px' },
+                                  title: "Close " + tab.name + (tab.dirty ? " (unsaved changes)" : ""),
+                                  'aria-label': "Close " + tab.name + (tab.dirty ? " (unsaved changes)" : "") },
+                                React.createElement("i", { className: "fas fa-times" })
+                              )
+                            )
                           )
-                        )
-                      );
-                    })
-                  )
-                );
-              })
+                        );
+                      })
+                    )
+                  );
+                });
+              })()
             )
           )
           ),
-          state.panes.flatMap(function (p) { return p.tabs; }).length > 0 && React.createElement(
-            "div",
-            { className: "open-editors-resize-handle", onMouseDown: startOpenEditorsResize }
-          ),
+          state.panes.flatMap(function (p) { return p.tabs; }).length > 0 && React.createElement((window.Gutter || Gutter), {
+            orientation: 'horizontal',
+            label: "Resize open editors list",
+            active: activeResizeMode === 'openeditors',
+            onDragStart: startOpenEditorsResize
+          }),
           React.createElement(
             "div",
             { className: "ide-sidebar-scrollable" },
@@ -5107,10 +5566,7 @@ var MbeditorApp = function MbeditorApp() {
               CollapsibleSection,
               {
                 title: projectSectionTitle,
-                isCollapsed: collapsedSections.projects,
-                onToggle: function (isCollapsed) {
-                  return handleToggleSection('projects', isCollapsed);
-              },
+                collapsible: false,
               actions: React.createElement(
                 SectionActionGroup,
                 { ariaLabel: "Project actions" },
@@ -5145,10 +5601,15 @@ var MbeditorApp = function MbeditorApp() {
                   disabled: !!loading.createDir
                 }),
                 React.createElement(SidebarActionButton, {
-                  title: "Upload files",
+                  title: "Upload files to the workspace root",
                   iconClass: 'fas fa-upload',
+                  // Defaults to the workspace root, not whatever happens to be
+                  // selected in the tree: an upload that silently follows the
+                  // selection lands files somewhere the user was not looking,
+                  // and the count reads as a success either way. The context
+                  // menu's "Upload Files Here..." is the way to target a folder.
                   onClick: function () {
-                    return openImportDialog(selectedTreeNode);
+                    return openImportDialog(null);
                   }
                 }),
                 React.createElement(SidebarActionButton, {
@@ -5178,6 +5639,7 @@ var MbeditorApp = function MbeditorApp() {
               activePath: editorPrefs.autoRevealInExplorer !== false ? (activeTab && activeTab.path) : null,
               selectedPaths: selectedPaths,
               anchorPath: selectedTreePath,
+              revealTarget: revealTarget,
               onNodeSelect: handleNodeSelect,
               onMultiSelect: handleMultiSelect,
               onMove: handleMoveNodes,
@@ -5516,18 +5978,32 @@ var MbeditorApp = function MbeditorApp() {
           })()
         )
       ),
-      /* Sidebar resize divider — only when panel is open */
-      !sidebarCollapsed && !zenMode && React.createElement("div", {
-        className: "panel-divider sidebar-divider " + (activeResizeMode === 'sidebar' ? 'active' : ''),
-        onMouseDown: startSidebarResize,
-        role: "separator",
-        "aria-orientation": "vertical",
-        "aria-label": "Resize explorer panel"
+      // Collapsed: the same gutter is a handle. Drag it right and the
+      // explorer snaps open; there is no intermediate width to preview.
+      sidebarCollapsed && !zenMode && !showModelGraphView && React.createElement((window.Gutter || Gutter), {
+        orientation: 'vertical',
+        label: "Drag right to open the explorer",
+        onSnap: function () { setSidebarCollapsed(false); }
       }),
-      // Column wrapping the split panes and the bottom drawers. ide-main is a
-      // row of panes, so the drawers need a vertical parent to push against;
-      // as absolute overlays they covered the editor instead.
-      React.createElement(
+      /* Sidebar resize gutter — only when panel is open */
+      !sidebarCollapsed && !zenMode && !showModelGraphView && React.createElement((window.Gutter || Gutter), {
+        orientation: 'vertical',
+        label: "Resize explorer panel",
+        active: activeResizeMode === 'sidebar',
+        onDragStart: startSidebarResize
+      }),
+      // The graph replaces the whole column — no tab bar, no panes, no drawers —
+      // rather than living inside ide-main, so it gets the full center width.
+      showModelGraphView ? React.createElement(
+        "div",
+        { className: "ide-model-graph-view" },
+        React.createElement(ModelGraph, {
+          graph: modelGraph,
+          loading: modelGraphLoading,
+          onRefresh: function () { loadModelGraph(true); },
+          onOpenModel: function (model) { openSchemaModal(model.name); }
+        })
+      ) : React.createElement(
       "div",
       { className: "ide-center-column" },
       React.createElement(
@@ -5625,13 +6101,6 @@ var MbeditorApp = function MbeditorApp() {
                   commits: pActiveTab.commits || [],
                   onSelectCommit: handleSelectCommit
                 });
-              } else if (pActiveTab.isModelGraph) {
-                content = React.createElement(ModelGraph, {
-                  graph: modelGraph,
-                  loading: modelGraphLoading,
-                  onRefresh: function () { loadModelGraph(true); },
-                  onOpenModel: function (model) { openSchemaModal(model.name); }
-                });
               } else if (pActiveTab.isChangelog) {
                 content = React.createElement(ChangelogView, {
                   changelogState: changelogState,
@@ -5644,597 +6113,6 @@ var MbeditorApp = function MbeditorApp() {
                     }
                   }
                 });
-              } else if (pActiveTab.isSettings) {
-                content = React.createElement(
-                  'div',
-                  { className: 'ide-settings-tab-content' },
-                  React.createElement(
-                    'div',
-                    { className: 'ide-settings-body' },
-
-                    /* ── Appearance ──────────────────────────────── */
-                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Appearance'),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Color theme for the editor' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Theme'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.theme || 'vs-dark',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { theme: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'vs-dark' }, 'Dark'),
-                        React.createElement('option', { value: 'vs' }, 'Light'),
-                        React.createElement('option', { value: 'hc-black' }, 'HC Dark'),
-                        React.createElement('option', { value: 'hc-light' }, 'HC Light'),
-                        React.createElement('option', { value: 'dracula' }, 'Dracula'),
-                        React.createElement('option', { value: 'night-owl' }, 'Night Owl'),
-                        React.createElement('option', { value: 'monokai' }, 'Monokai'),
-                        React.createElement('option', { value: 'nord' }, 'Nord'),
-                        React.createElement('option', { value: 'github-dark' }, 'GitHub Dark'),
-                        React.createElement('option', { value: 'tomorrow-night' }, 'Tomorrow Night'),
-                        React.createElement('option', { value: 'github-light' }, 'GitHub Light')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Editor font size in pixels (8–32)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Font size'),
-                      React.createElement('input', {
-                        key: String(editorPrefs.fontSize || 13),
-                        type: 'number', min: '8', max: '32', step: '1',
-                        className: 'ide-settings-input',
-                        defaultValue: editorPrefs.fontSize || 13,
-                        onChange: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (v >= 8 && v <= 32) setEditorPrefs(function(p) { return Object.assign({}, p, { fontSize: v }); });
-                        },
-                        onBlur: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (isNaN(v) || v < 8 || v > 32) e.target.value = String(editorPrefs.fontSize || 13);
-                        }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row-full', title: 'Font stack used in the editor — the first font available on your system is used' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Font family'),
-                      React.createElement('input', {
-                        type: 'text',
-                        className: 'ide-settings-input ide-settings-input-wide',
-                        value: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
-                        onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { fontFamily: e.target.value }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Row height in pixels. 0 = auto (roughly font size × 1.5)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Line height (0=auto)'),
-                      React.createElement('input', {
-                        key: String(editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0),
-                        type: 'number', min: '0', max: '100', step: '1',
-                        className: 'ide-settings-input',
-                        defaultValue: editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0,
-                        onChange: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (!isNaN(v) && v >= 0 && v <= 100) setEditorPrefs(function(p) { return Object.assign({}, p, { lineHeight: v }); });
-                        },
-                        onBlur: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (isNaN(v) || v < 0 || v > 100) e.target.value = String(editorPrefs.lineHeight != null ? editorPrefs.lineHeight : 0);
-                        }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Extra space between characters in pixels. 0 = default' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Letter spacing (px)'),
-                      React.createElement('input', {
-                        key: String(editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0),
-                        type: 'number', min: '-5', max: '20', step: '0.5',
-                        className: 'ide-settings-input',
-                        defaultValue: editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0,
-                        onChange: function(e) {
-                          var v = parseFloat(e.target.value);
-                          if (!isNaN(v) && v >= -5 && v <= 20) setEditorPrefs(function(p) { return Object.assign({}, p, { letterSpacing: v }); });
-                        },
-                        onBlur: function(e) {
-                          var v = parseFloat(e.target.value);
-                          if (isNaN(v) || v < -5 || v > 20) e.target.value = String(editorPrefs.letterSpacing != null ? editorPrefs.letterSpacing : 0);
-                        }
-                      })
-                    ),
-
-                    /* ── Indentation (unified editor + Prettier) ── */
-                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Indentation'),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Number of spaces per indentation level (also sets Prettier tab width)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Tab size'),
-                      React.createElement('input', {
-                        key: String(editorPrefs.tabSize || 4),
-                        type: 'number', min: '1', max: '8', step: '1',
-                        className: 'ide-settings-input',
-                        defaultValue: editorPrefs.tabSize || 4,
-                        onChange: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (v >= 1 && v <= 8) setEditorPrefs(function(p) { return Object.assign({}, p, { tabSize: v }); });
-                        },
-                        onBlur: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (isNaN(v) || v < 1 || v > 8) e.target.value = String(editorPrefs.tabSize || 4);
-                        }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Insert spaces instead of tab characters when pressing Tab' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Use spaces'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.insertSpaces),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { insertSpaces: v }); }); }
-                      })
-                    ),
-
-                    /* ── Editor ──────────────────────────────────── */
-                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Editor'),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'How long lines are handled — Off: scroll horizontally, On: wrap at viewport width, Column: wrap at a fixed column' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Word wrap'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.wordWrap || 'off',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { wordWrap: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'off' }, 'Off'),
-                        React.createElement('option', { value: 'on' }, 'On'),
-                        React.createElement('option', { value: 'wordWrapColumn' }, 'Column')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Show line numbers in the gutter — On, Off, or Relative (useful with Vim mode)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Line numbers'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.lineNumbers || 'on',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { lineNumbers: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'on' }, 'On'),
-                        React.createElement('option', { value: 'off' }, 'Off'),
-                        React.createElement('option', { value: 'relative' }, 'Relative')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Render whitespace characters visually — None, Selection only, Boundary (leading/trailing), or All' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Whitespace'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.renderWhitespace || 'none',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { renderWhitespace: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'none' }, 'None'),
-                        React.createElement('option', { value: 'selection' }, 'Selection'),
-                        React.createElement('option', { value: 'boundary' }, 'Boundary'),
-                        React.createElement('option', { value: 'all' }, 'All')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show a scaled-down overview of the file on the right edge of the editor' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Minimap'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.minimap),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { minimap: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Allow scrolling past the last line so it can be positioned at the top of the viewport' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Scroll past end'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.scrollBeyondLastLine),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { scrollBeyondLastLine: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Colorize matching bracket pairs with distinct colors to make nesting easier to read' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Bracket colors'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.bracketPairColorization),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { bracketPairColorization: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Enable Vim keybindings (Normal/Insert/Visual modes). Press Escape to return to Normal mode.' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Vim mode'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.vimMode),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { vimMode: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'When to insert a matching closing bracket automatically' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto-close brackets'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.autoClosingBrackets || 'always',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoClosingBrackets: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'always' }, 'Always'),
-                        React.createElement('option', { value: 'languageDefined' }, 'Per language rules'),
-                        React.createElement('option', { value: 'beforeWhitespace' }, 'Only before whitespace'),
-                        React.createElement('option', { value: 'never' }, 'Never')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'When to insert a matching closing quote automatically' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto-close quotes'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.autoClosingQuotes || 'always',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoClosingQuotes: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'always' }, 'Always'),
-                        React.createElement('option', { value: 'languageDefined' }, 'Per language rules'),
-                        React.createElement('option', { value: 'beforeWhitespace' }, 'Only before whitespace'),
-                        React.createElement('option', { value: 'never' }, 'Never')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'What to highlight on the current editor line' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Line highlight'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.renderLineHighlight || 'none',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { renderLineHighlight: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'none' }, 'None'),
-                        React.createElement('option', { value: 'gutter' }, 'Line number only'),
-                        React.createElement('option', { value: 'line' }, 'Current line background'),
-                        React.createElement('option', { value: 'all' }, 'Line number + background')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Shape of the text cursor in the editor' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Cursor style'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.cursorStyle || 'line',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { cursorStyle: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'line' }, 'Line (|)'),
-                        React.createElement('option', { value: 'block' }, 'Block (filled)'),
-                        React.createElement('option', { value: 'underline' }, 'Underline (_)'),
-                        React.createElement('option', { value: 'line-thin' }, 'Line thin'),
-                        React.createElement('option', { value: 'block-outline' }, 'Block outline'),
-                        React.createElement('option', { value: 'underline-thin' }, 'Underline thin')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Cursor animation style — Blink (on/off), Smooth (fade), Phase (offset fade), Expand (grow), or Solid (no animation)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Cursor blinking'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.cursorBlinking || 'blink',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { cursorBlinking: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'blink' }, 'Blink (on/off)'),
-                        React.createElement('option', { value: 'smooth' }, 'Smooth (fade)'),
-                        React.createElement('option', { value: 'phase' }, 'Phase (offset fade)'),
-                        React.createElement('option', { value: 'expand' }, 'Expand (grow/shrink)'),
-                        React.createElement('option', { value: 'solid' }, 'Solid (no blink)')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show collapse arrows next to foldable regions (functions, classes, blocks)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Code folding'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.folding !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { folding: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Animate scrolling instead of jumping instantly' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Smooth scrolling'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.smoothScrolling),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { smoothScrolling: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Hold Ctrl (or Cmd) and scroll the mouse wheel to zoom the font size' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Ctrl+scroll to zoom'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.mouseWheelZoom),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { mouseWheelZoom: v }); }); }
-                      })
-                    ),
-
-                    /* ── Behaviour ───────────────────────────────── */
-                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Behaviour'),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'How aggressively the editor re-indents lines as you type' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Auto indent'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.autoIndent || 'full',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { autoIndent: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'none' }, 'None (disabled)'),
-                        React.createElement('option', { value: 'keep' }, 'Keep current level'),
-                        React.createElement('option', { value: 'brackets' }, 'Indent on { and ['),
-                        React.createElement('option', { value: 'advanced' }, 'Language indent rules'),
-                        React.createElement('option', { value: 'full' }, 'Full (language grammar)')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Whether pressing Enter accepts the highlighted autocomplete suggestion' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Accept suggestion on Enter'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.acceptSuggestionOnEnter || 'on',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { acceptSuggestionOnEnter: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'on' }, 'Always'),
-                        React.createElement('option', { value: 'smart' }, 'Only when navigated (↑↓)'),
-                        React.createElement('option', { value: 'off' }, 'Never (Tab only)')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Suggest completions based on words already present in open files' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Word-based suggestions'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.wordBasedSuggestions || 'matchingDocuments',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { wordBasedSuggestions: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'off' }, 'Off'),
-                        React.createElement('option', { value: 'currentDocument' }, 'Current file only'),
-                        React.createElement('option', { value: 'matchingDocuments' }, 'Same language files'),
-                        React.createElement('option', { value: 'allDocuments' }, 'All open files')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Re-indent and auto-close blocks as you type (e.g. after pressing Enter inside {})' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Format on type'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.formatOnType === true,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { formatOnType: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Format the file before every save — RuboCop -A for Ruby, Prettier for JS/JSX/CSS/HTML/Markdown' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Format on save'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.formatOnSave === true,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { formatOnSave: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show autocomplete suggestions while typing (not just on trigger characters like .)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Quick suggestions'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.quickSuggestions !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { quickSuggestions: v }); }); }
-                      })
-                    ),
-
-                    /* ── Formatting (Prettier) ───────────────────── */
-                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Formatting'),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Prettier: maximum line length before wrapping (40–200)' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Print width'),
-                      React.createElement('input', {
-                        key: String(editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80),
-                        type: 'number', min: '40', max: '200', step: '1',
-                        className: 'ide-settings-input',
-                        defaultValue: editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80,
-                        onChange: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (v >= 40 && v <= 200) setEditorPrefs(function(p) { return Object.assign({}, p, { prettierPrintWidth: v }); });
-                        },
-                        onBlur: function(e) {
-                          var v = parseInt(e.target.value, 10);
-                          if (isNaN(v) || v < 40 || v > 200) e.target.value = String(editorPrefs.prettierPrintWidth != null ? editorPrefs.prettierPrintWidth : 80);
-                        }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Prettier: add trailing commas in multi-line expressions — All (ES2017+), ES5 (objects/arrays only), or None' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Trailing commas'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.prettierTrailingComma || 'all',
-                          onChange: function(e) { setEditorPrefs(function(p) { return Object.assign({}, p, { prettierTrailingComma: e.target.value }); }); }
-                        },
-                        React.createElement('option', { value: 'all' }, 'All'),
-                        React.createElement('option', { value: 'es5' }, 'ES5'),
-                        React.createElement('option', { value: 'none' }, 'None')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Prettier: add semicolons at the end of statements' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Semicolons'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.prettierSemi !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { prettierSemi: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: "Prettier: use single quotes instead of double quotes for strings" },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Single quotes'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!editorPrefs.prettierSingleQuote,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { prettierSingleQuote: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Prettier: add spaces inside object literal braces, e.g. { a: 1 } vs {a: 1}' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Bracket spacing'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.prettierBracketSpacing !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { prettierBracketSpacing: v }); }); }
-                      })
-                    ),
-
-                    /* ── Interface ───────────────────────────────── */
-                    React.createElement('div', { className: 'ide-settings-section-header' }, 'Interface'),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Automatically scroll the file explorer to reveal and highlight the file you are editing' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Explorer follows active file'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.autoRevealInExplorer),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { autoRevealInExplorer: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Jump to a file in the explorer by typing its name when the sidebar is focused' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Explorer type-ahead'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.fileTreeTypeahead !== false),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { fileTreeTypeahead: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show hidden files and directories (those starting with a dot, e.g. .env, .gitignore) in the file explorer' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Show dotfiles'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.showDotFiles),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { showDotFiles: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half', title: 'Scroll: tabs overflow horizontally with a scrollbar; Wrap: tabs flow onto multiple rows' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Tab bar layout'),
-                      React.createElement(
-                        'select', {
-                          value: editorPrefs.tabDisplayMode || 'scroll',
-                          onChange: function(e) { var v = e.target.value; setEditorPrefs(function(p) { return Object.assign({}, p, { tabDisplayMode: v }); }); }
-                        },
-                        React.createElement('option', { value: 'scroll' }, 'Scroll'),
-                        React.createElement('option', { value: 'wrap' }, 'Wrap (multi-row)')
-                      )
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Include folder names in the Quick Open picker (Ctrl+P / Cmd+P) results, not just files' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Quick Open: show folders'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: !!(editorPrefs.quickOpenShowFolders),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { quickOpenShowFolders: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Hide toolbar button labels and show only icons, giving more horizontal space' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Toolbar: icons only'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        // The stored preference, not the derived value: at a
-                        // narrow width the box would otherwise show as checked
-                        // and unchecking it would appear to do nothing.
-                        checked: !!(editorPrefs.toolbarIconOnly),
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { toolbarIconOnly: v }); }); }
-                      })
-                    ),
-
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Keep the search/replace text when switching between files in the editor' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Persist find state across files'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.persistFindState !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { persistFindState: v }); }); }
-                      })
-                    ),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Save which files are open per branch and restore them when switching branches. Disable to always start with a clean slate when switching.' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Restore tabs on branch switch'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.branchStateRestore !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { branchStateRestore: v }); }); }
-                      })
-                    ),
-
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Show the verb and path that route to each controller action after its def line, and mark public actions nothing routes to' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Controller route hints'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.routeHints !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { routeHints: v }); }); }
-                      })
-                    ),
-
-                    /* ── RuboCop ─────────────────────────────────── */
-                    React.createElement('div', { className: 'ide-settings-section-header' }, 'RuboCop'),
-                    React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check', title: 'Run RuboCop in the background and show lint warnings/errors as markers in the editor gutter' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Enable RuboCop linting'),
-                      React.createElement('input', {
-                        type: 'checkbox',
-                        className: 'ide-settings-checkbox',
-                        checked: editorPrefs.rubocopLintEnabled !== false,
-                        onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { rubocopLintEnabled: v }); }); }
-                      })
-                    ),
-                    rubocopAvailable && rubocopConfigPath ? React.createElement(
-                      'div', { className: 'ide-settings-row ide-settings-row-link' },
-                      React.createElement('span', { className: 'ide-settings-label' }, 'Config file'),
-                      React.createElement(
-                        'button', {
-                          type: 'button',
-                          className: 'ide-settings-config-link',
-                          title: 'Open ' + rubocopConfigPath,
-                          onClick: function() { handleSelectFile(rubocopConfigPath, rubocopConfigPath.split('/').pop()); }
-                        },
-                        React.createElement('i', { className: 'fas fa-file-alt', style: { marginRight: 5 } }),
-                        rubocopConfigPath
-                      )
-                    ) : null,
-                    React.createElement(
-                      'button',
-                      {
-                        className: 'ide-settings-reset-btn',
-                        type: 'button',
-                        title: 'Restore every editor preference on this page to its default',
-                        onClick: function() { setEditorPrefs(Object.assign({}, DEFAULT_EDITOR_PREFS)); }
-                      },
-                      React.createElement('i', { className: 'fas fa-undo', style: { marginRight: 6 } }),
-                      'Reset to defaults'
-                    )
-                  )
-                );
               } else if (pActiveTab.isDiff) {
                 var _t = editorPrefs.theme || 'vs-dark';
                 var isDiffDark = _t !== 'vs' && _t !== 'hc-light' && _t !== 'github-light';
@@ -6283,9 +6161,12 @@ var MbeditorApp = function MbeditorApp() {
           return React.createElement(
             React.Fragment,
             { key: pane.id },
-            idx === 1 && isSplit && React.createElement("div", {
-              className: "panel-divider pane-divider " + (activeResizeMode === 'pane' ? 'active' : ''),
-              onMouseDown: startPaneResize
+            idx === 1 && isSplit && React.createElement((window.Gutter || Gutter), {
+              orientation: 'vertical',
+              className: 'ide-gutter-pane',
+              label: "Resize editor groups",
+              active: activeResizeMode === 'pane',
+              onDragStart: startPaneResize
             }),
             React.createElement(
               "div",
@@ -6293,10 +6174,6 @@ var MbeditorApp = function MbeditorApp() {
                 className: "ide-pane " + (isFocused ? 'focused' : '') + " " + (isDropTarget ? 'drop-target' : ''),
                 style: { flexBasis: flexBasis, flexShrink: 0, flexGrow: 0, display: 'flex', flexDirection: 'column', minWidth: 0 },
                 onClickCapture: function (e) {
-                  // Do not steal click events from controls inside the Settings tab.
-                  // Focusing the pane in capture phase can rerender before checkbox
-                  // change events are processed, making toggles appear stuck.
-                  if (e.target && e.target.closest && e.target.closest('.ide-settings-tab-content')) return;
                   return TabManager.focusPane(pane.id);
                 },
                 onDragOver: function (e) {
@@ -6438,10 +6315,26 @@ var MbeditorApp = function MbeditorApp() {
           );
         })
       ),
+      showLogPanel && !zenMode && React.createElement((window.Gutter || Gutter), {
+        orientation: 'horizontal',
+        label: "Resize log drawer",
+        active: activeResizeMode === 'log',
+        onDragStart: startDrawerResize('log', logHeight, 'mbeditorLogHeight')
+      }),
       showLogPanel && !zenMode && React.createElement(window.LogPanel || LogPanel, {
+        height: logHeight,
         onClose: function () { setShowLogPanel(false); }
       }),
+      // With the drawer closed, the gutter above the status bar is a handle:
+      // drag it up to open Problems at the dragged height.
+      showProblemsPanel && !zenMode && React.createElement((window.Gutter || Gutter), {
+        orientation: 'horizontal',
+        label: "Resize problems drawer",
+        active: activeResizeMode === 'problems',
+        onDragStart: startDrawerResize('problems', problemsHeight, 'mbeditorProblemsHeight')
+      }),
       showProblemsPanel && !zenMode && React.createElement(window.ProblemsPanel || ProblemsPanel, {
+        height: problemsHeight,
         onClose: function () { setShowProblemsPanel(false); },
         onOpenFile: function (path, line, col) {
           handleSelectFile(path, path.split('/').pop(), line, col);
@@ -6456,14 +6349,20 @@ var MbeditorApp = function MbeditorApp() {
       ),
 
       // Right-side Git panel (children of ide-body, alongside sidebar and ide-main)
-      showGitPanel && !zenMode && React.createElement("div", {
-        className: "panel-divider gitpanel-divider " + (activeResizeMode === 'gitpanel' ? 'active' : ''),
-        onMouseDown: startGitPanelResize,
-        role: "separator",
-        "aria-orientation": "vertical",
-        "aria-label": "Resize git panel"
+      !showGitPanel && !zenMode && !showModelGraphView && React.createElement((window.Gutter || Gutter), {
+        orientation: 'vertical',
+        label: "Drag left to open the git panel",
+        snapDirection: -1,
+        onSnap: function () { setShowGitPanel(true); }
       }),
-      showGitPanel && !zenMode && React.createElement(
+      showGitPanel && !zenMode && !showModelGraphView && React.createElement((window.Gutter || Gutter), {
+        orientation: 'vertical',
+        className: 'ide-gutter-gitpanel',
+        label: "Resize git panel",
+        active: activeResizeMode === 'gitpanel',
+        onDragStart: startGitPanelResize
+      }),
+      showGitPanel && !zenMode && !showModelGraphView && React.createElement(
         "div",
         { className: "ide-git-right-panel", style: { width: gitPanelWidth + "px" } },
         React.createElement(window.GitPanel || GitPanel, {
@@ -6479,6 +6378,19 @@ var MbeditorApp = function MbeditorApp() {
         })
       ),
     ),
+    // ponytail: opens on release, no live preview; track the drag if that grates.
+    !showProblemsPanel && !zenMode && !showModelGraphView && React.createElement((window.Gutter || Gutter), {
+      orientation: 'horizontal',
+      className: 'ide-gutter-drawer-open',
+      label: "Drag up to open Problems",
+      snapThreshold: 40,
+      onSnap: function (dragged) {
+        var h = Math.max(DRAWER_MIN_HEIGHT, dragged);
+        try { window.localStorage.setItem('mbeditorProblemsHeight', String(h)); } catch (err) {}
+        setProblemsHeight(h);
+        setShowProblemsPanel(true);
+      }
+    }),
     React.createElement(
       "div",
       { className: "ide-statusbar" },
@@ -6515,6 +6427,15 @@ var MbeditorApp = function MbeditorApp() {
         React.createElement("i", { className: "fas fa-exclamation-triangle statusbar-problems-warning-icon" }),
         React.createElement("span", { className: "statusbar-problems-count" }, problemCounts.warnings)
       ),
+      migrationsPending && React.createElement(
+        "div",
+        {
+          className: "statusbar-migration",
+          title: "Pending migrations \u2014 run `rails db:migrate`. Editing still works in the meantime."
+        },
+        React.createElement("i", { className: "fas fa-database" }),
+        " Migrations pending"
+      ),
       !serverOnline && (function () {
         var dirtyCount = state.panes.reduce(function (acc, p) {
           return acc + p.tabs.filter(function (t) { return t.dirty; }).length;
@@ -6574,6 +6495,7 @@ var MbeditorApp = function MbeditorApp() {
         },
         React.createElement("i", { className: "fas fa-paragraph" })
       ),
+      React.createElement(CursorPosition, null),
       activeEOL && React.createElement(
         "button",
         {
@@ -6786,6 +6708,7 @@ var MbeditorApp = function MbeditorApp() {
         "div",
         {
           className: "context-menu",
+          ref: contextMenuRef,
           style: { left: contextMenu.x, top: contextMenu.y },
           onClick: function (e) {
             return e.stopPropagation();
@@ -6830,16 +6753,16 @@ var MbeditorApp = function MbeditorApp() {
               return handleContextMenuAction('delete');
             } },
           React.createElement("i", { className: "far fa-trash-alt context-menu-icon" }),
-          " Delete"
+          " " + deleteMenuLabel(contextMenu.node)
         ),
         React.createElement("div", { className: "context-menu-divider" }),
-        contextMenu.node && contextMenu.node.type === 'file' && React.createElement(
+        contextMenu.node && React.createElement(
           "div",
           { className: "context-menu-item", onClick: function () {
               return handleContextMenuAction('download');
             } },
           React.createElement("i", { className: "fas fa-download context-menu-icon" }),
-          " Download"
+          " " + downloadMenuLabel(contextMenu.node)
         ),
         React.createElement(
           "div",
@@ -7033,4 +6956,6 @@ var MbeditorApp = function MbeditorApp() {
 };
 
 window.MbeditorApp = MbeditorApp;
+// Test-only: lets the system test seed/inspect the test-result cache directly.
+window.__mbeditorTestCache = { save: saveCachedTestResult, prefix: TEST_CACHE_PREFIX };
 /* TITLE BAR */ /* SIDEBAR */ /* EDITOR AREA */ /* STATUS BAR */ /* Right-click context menu */