mbeditor 0.5.3 → 0.7.1

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

@@ -63,9 +63,51 @@ var DEFAULT_EDITOR_PREFS = {
   quickOpenShowFolders: false,
   tabDisplayMode: 'scroll',
   persistFindState: true,
-  showDotFiles: false
+  showDotFiles: false,
+  branchStateRestore: true
 };
 
+// Detect the minimum number of leading spaces used for indentation across all
+// indented lines in the code. Returns 0 if no space-indented lines are found
+// (e.g. file already uses tabs or has no indented lines).
+function detectIndentWidth(code) {
+  var min = Infinity;
+  code.split('\n').forEach(function(line) {
+    if (!line.trim()) return;
+    var m = line.match(/^( +)/);
+    if (m) min = Math.min(min, m[1].length);
+  });
+  return min === Infinity ? 0 : min;
+}
+
+// Convert leading space-based indentation to tabs using the detected unit size.
+function spacesToTabs(code, indentSize) {
+  var unit = ' '.repeat(indentSize);
+  return code.split('\n').map(function(line) {
+    var tabs = '';
+    while (line.startsWith(unit)) { tabs += '\t'; line = line.slice(unit.length); }
+    return tabs + line;
+  }).join('\n');
+}
+
+function diffLines(oldLines, newLines) {
+  var n = oldLines.length, m = newLines.length;
+  var dp = [];
+  for (var i = 0; i <= n; i++) { dp.push(new Array(m + 1).fill(0)); }
+  for (var i = 1; i <= n; i++) {
+    for (var j = 1; j <= m; j++) {
+      dp[i][j] = oldLines[i-1] === newLines[j-1] ? dp[i-1][j-1] + 1 : Math.max(dp[i-1][j], dp[i][j-1]);
+    }
+  }
+  var changed = [], i = n, j = m;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i-1] === newLines[j-1]) { i--; j--; }
+    else if (j > 0 && (i === 0 || dp[i][j-1] >= dp[i-1][j])) { changed.push(j); j--; }
+    else { i--; }
+  }
+  return changed;
+}
+
 var SidebarActionButton = function SidebarActionButton(_ref) {
   var title = _ref.title;
   var iconClass = _ref.iconClass;
@@ -111,6 +153,44 @@ var SectionActionGroup = function SectionActionGroup(_ref2) {
   );
 };
 
+function FileReloadBanner(_ref) {
+  var pendingReloads = _ref.pendingReloads;
+  var onSaveAndReload = _ref.onSaveAndReload;
+  var onDiscardAndReload = _ref.onDiscardAndReload;
+  var onKeepMine = _ref.onKeepMine;
+  if (!pendingReloads || pendingReloads.length === 0) return null;
+  return React.createElement(
+    'div', { className: 'mb-file-reload-banner' },
+    pendingReloads.map(function (r) {
+      return React.createElement(
+        'div', { key: r.paneId + ':' + r.tabId, className: 'mb-file-reload-item' },
+        React.createElement(
+          'span', { className: 'mb-file-reload-msg' },
+          React.createElement('i', { className: 'fas fa-sync-alt' }),
+          '  ',
+          React.createElement('strong', null, r.name),
+          '  was updated externally'
+        ),
+        React.createElement(
+          'div', { className: 'mb-file-reload-actions' },
+          React.createElement('button', {
+            className: 'mb-btn mb-btn-sm mb-btn-primary',
+            onClick: function () { onSaveAndReload(r); }
+          }, 'Save & Reload'),
+          React.createElement('button', {
+            className: 'mb-btn mb-btn-sm mb-btn-warning',
+            onClick: function () { onDiscardAndReload(r); }
+          }, 'Discard & Reload'),
+          React.createElement('button', {
+            className: 'mb-btn mb-btn-sm',
+            onClick: function () { onKeepMine(r); }
+          }, 'Keep Mine')
+        )
+      );
+    })
+  );
+}
+
 var MbeditorApp = function MbeditorApp() {
   var _useState = useState(EditorStore.getState());
 
@@ -246,6 +326,31 @@ var MbeditorApp = function MbeditorApp() {
   var sidebarCollapsed = _useStateSC2[0];
   var setSidebarCollapsed = _useStateSC2[1];
 
+  var _useStateRFMap = useState({});
+  var _useStateRFMap2 = _slicedToArray(_useStateRFMap, 2);
+  var railsFilesMap = _useStateRFMap2[0];
+  var setRailsFilesMap = _useStateRFMap2[1];
+
+  var _useStateRFC = useState({});
+  var _useStateRFC2 = _slicedToArray(_useStateRFC, 2);
+  var railsGroupsCollapsed = _useStateRFC2[0];
+  var setRailsGroupsCollapsed = _useStateRFC2[1];
+
+  var _useStateChangelog = useState(null); // null | { content, loading, error }
+  var _useStateChangelog2 = _slicedToArray(_useStateChangelog, 2);
+  var changelogState = _useStateChangelog2[0];
+  var setChangelogState = _useStateChangelog2[1];
+
+  var _useStateSchemaModal = useState(null);
+  var _useStateSchemaModal2 = _slicedToArray(_useStateSchemaModal, 2);
+  var schemaModal = _useStateSchemaModal2[0];
+  var setSchemaModal = _useStateSchemaModal2[1];
+
+  var _useStateSchemaLoading = useState(null);
+  var _useStateSchemaLoading2 = _slicedToArray(_useStateSchemaLoading, 2);
+  var schemaLoadingLabel = _useStateSchemaLoading2[0];
+  var setSchemaLoadingLabel = _useStateSchemaLoading2[1];
+
   var _useState9 = useState({});
 
   var _useState92 = _slicedToArray(_useState9, 2);
@@ -458,6 +563,16 @@ var MbeditorApp = function MbeditorApp() {
   var prevGitBranchRef = useRef(null);
   var isSwitchingBranchRef = useRef(false);
   var stateRestoredRef = useRef(false);
+  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 customPathsRef = useRef([]);
+  customPathsRef.current = customPaths;
+  var recentSavesRef = useRef({});
+  var isSavingRef = useRef(false);
 
   // ── Draft backup helpers ─────────────────────────────────────────────────
   var draftWriteTimerRef = useRef({});
@@ -468,7 +583,14 @@ var MbeditorApp = function MbeditorApp() {
     return 'mbeditor_draft\x00' + base + '\x00' + path;
   };
   var _saveDraftNow = function _saveDraftNow(path, content) {
-    try { localStorage.setItem(_draftKey(path), JSON.stringify({ content: content, ts: Date.now() })); } catch (e) {}
+    var doWrite = function() {
+      try { localStorage.setItem(_draftKey(path), JSON.stringify({ content: content, ts: Date.now() })); } catch (e) {}
+    };
+    if (typeof requestIdleCallback !== 'undefined') {
+      requestIdleCallback(doWrite, { timeout: 2000 });
+    } else {
+      doWrite();
+    }
   };
   var _clearDraft = function _clearDraft(path) {
     try { localStorage.removeItem(_draftKey(path)); } catch (e) {}
@@ -499,6 +621,11 @@ var MbeditorApp = function MbeditorApp() {
   var zenMode = _useStateZen2[0];
   var setZenMode = _useStateZen2[1];
 
+  var _useStateSB = useState(false);
+  var _useStateSB2 = _slicedToArray(_useStateSB, 2);
+  var isSwitchingBranch = _useStateSB2[0];
+  var setIsSwitchingBranch = _useStateSB2[1];
+
   var clamp = function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
   };
@@ -746,6 +873,9 @@ var MbeditorApp = function MbeditorApp() {
         if (t.isSettings || t.path === '__settings__') {
           return Promise.resolve({ content: '' });
         }
+        if (t.isChangelog || t.path === 'mbeditor://changelog') {
+          return Promise.resolve({ content: '' });
+        }
         if (t.isDiff && t.repoPath) {
           return GitService.fetchDiff(t.repoPath, t.diffBaseSha, t.diffHeadSha)
             .then(function (d) { return { content: 'Diff loaded', diffOriginal: d.original || '', diffModified: d.modified || '', _isDiffResult: true }; })
@@ -849,26 +979,33 @@ var MbeditorApp = function MbeditorApp() {
       if (!newBranch || newBranch === oldBranch) return;
       prevGitBranchRef.current = newBranch;
       if (!oldBranch || isSwitchingBranchRef.current) return;
+      // Ignore spurious branch changes triggered by saves (race condition)
+      if (isSavingRef.current) return;
 
       isSwitchingBranchRef.current = true;
+      setIsSwitchingBranch(true);
 
-      // Save pane state for old branch before switching
-      var cur = EditorStore.getState();
-      var lightweightPanes = cur.panes.map(function (p) {
-        return {
-          id: p.id,
-          activeTabId: p.activeTabId,
-          tabs: p.tabs.filter(function (t) { return !t.isCombinedDiff; }).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,
-              isDiff: !!t.isDiff, diffBaseSha: t.diffBaseSha || null, diffHeadSha: t.diffHeadSha || null,
-              repoPath: t.repoPath || null
-            };
-          })
-        };
-      });
-      FileService.saveBranchState(oldBranch, { panes: lightweightPanes, focusedPaneId: cur.focusedPaneId })["catch"](function () {});
+      var shouldRestore = (EditorStore.getState().editorPrefs || {}).branchStateRestore !== false;
+
+      if (shouldRestore) {
+        // Save pane state for old branch before switching
+        var cur = EditorStore.getState();
+        var lightweightPanes = cur.panes.map(function (p) {
+          return {
+            id: p.id,
+            activeTabId: p.activeTabId,
+            tabs: p.tabs.filter(function (t) { return !t.isCombinedDiff; }).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,
+                isDiff: !!t.isDiff, diffBaseSha: t.diffBaseSha || null, diffHeadSha: t.diffHeadSha || null,
+                repoPath: t.repoPath || null, isChangelog: !!t.isChangelog
+              };
+            })
+          };
+        });
+        FileService.saveBranchState(oldBranch, { panes: lightweightPanes, focusedPaneId: cur.focusedPaneId })["catch"](function () {});
+      }
 
       // Clear all open tabs for the new branch
       EditorStore.setState({
@@ -878,18 +1015,27 @@ var MbeditorApp = function MbeditorApp() {
       });
 
       // Load pane state for new branch (or start empty)
-      FileService.getBranchState(newBranch)["catch"](function () { return null; }).then(function (branchState) {
-        var hasBranchPanes = branchState && branchState.panes && branchState.panes.some(function (p) { return p.tabs && p.tabs.length > 0; });
-        if (hasBranchPanes) {
-          return loadPaneState(branchState.panes, branchState.focusedPaneId || 1);
-        }
-        return null;
-      }).then(function () {
+      var restorePromise;
+      if (shouldRestore) {
+        restorePromise = FileService.getBranchState(newBranch)["catch"](function () { return null; }).then(function (branchState) {
+          var hasBranchPanes = branchState && branchState.panes && branchState.panes.some(function (p) { return p.tabs && p.tabs.length > 0; });
+          if (hasBranchPanes) {
+            return loadPaneState(branchState.panes, branchState.focusedPaneId || 1);
+          }
+          return null;
+        });
+      } else {
+        restorePromise = Promise.resolve(null);
+      }
+
+      restorePromise.then(function () {
         // Prune states for deleted branches
         FileService.pruneBranchStates()["catch"](function () {});
         isSwitchingBranchRef.current = false;
+        setIsSwitchingBranch(false);
       })["catch"](function () {
         isSwitchingBranchRef.current = false;
+        setIsSwitchingBranch(false);
       });
     });
 
@@ -962,7 +1108,7 @@ var MbeditorApp = function MbeditorApp() {
           var rect = body.getBoundingClientRect();
           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;
+          var nextWidth = clientX - rect.left - SIDEBAR_COLLAPSED_WIDTH;
           setSidebarWidth(clamp(nextWidth, SIDEBAR_MIN_WIDTH, maxSidebarWidth));
         }
 
@@ -1006,8 +1152,46 @@ var MbeditorApp = function MbeditorApp() {
       }
     };
 
+    // Capture-phase listener for vim Ctrl+W window navigation.
+    // Runs before Monaco (and the browser) so neither can swallow the keystrokes.
+    // Phase 1 — Ctrl+W: prevent tab-close and arm the pending flag.
+    // Phase 2 — next key: act on it here (still capture phase) so Monaco-vim
+    //   cannot consume it as a word-motion or other binding.
+    var onCtrlWCapture = function(e) {
+      // Phase 2: a previous Ctrl+W is pending — consume the follow-up key.
+      if (ctrlWPendingRef.current) {
+        ctrlWPendingRef.current = false;
+        if (ctrlWTimeoutRef.current) { clearTimeout(ctrlWTimeoutRef.current); ctrlWTimeoutRef.current = null; }
+        var _st = EditorStore.getState();
+        var _cur = _st.focusedPaneId;
+        var _target;
+        if (e.key === '1') _target = 1;
+        else if (e.key === '2') _target = 2;
+        else if (e.key === 'h') _target = 1;
+        else _target = _cur === 1 ? 2 : 1; // w, l, Ctrl+W, or anything else → cycle
+        if (_target !== _cur) {
+          if (typeof TabManager !== 'undefined') TabManager.focusPane(_target);
+          window.dispatchEvent(new CustomEvent('mbeditor:focusPane', { detail: { paneId: _target } }));
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      // Phase 1: intercept Ctrl+W itself when vim mode is on.
+      if (e.metaKey || e.shiftKey || e.altKey) return;
+      if (!e.ctrlKey || (e.key !== 'w' && e.key !== 'W')) return;
+      var prefs = EditorStore.getState().editorPrefs;
+      if (!prefs || !prefs.vimMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (ctrlWTimeoutRef.current) clearTimeout(ctrlWTimeoutRef.current);
+      ctrlWPendingRef.current = true;
+      ctrlWTimeoutRef.current = setTimeout(function() { ctrlWPendingRef.current = false; }, 1500);
+    };
+
     window.addEventListener('keydown', onKeyDown);
     document.addEventListener('keydown', onZenCapture, true);
+    document.addEventListener('keydown', onCtrlWCapture, true);
     window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);
     return function () {
@@ -1018,8 +1202,10 @@ var MbeditorApp = function MbeditorApp() {
         cancelAnimationFrame(resizeRafRef.current);
         resizeRafRef.current = null;
       }
+      if (ctrlWTimeoutRef.current) { clearTimeout(ctrlWTimeoutRef.current); ctrlWTimeoutRef.current = null; }
       window.removeEventListener('keydown', onKeyDown);
       document.removeEventListener('keydown', onZenCapture, true);
+      document.removeEventListener('keydown', onCtrlWCapture, true);
       window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
       document.body.style.cursor = '';
@@ -1095,16 +1281,83 @@ var MbeditorApp = function MbeditorApp() {
       FileService.getTree().then(function (data) {
         var newData = data || [];
         setTreeData(function (prevData) {
-          if (JSON.stringify(newData) === JSON.stringify(prevData)) return prevData;
-          SearchService.buildIndex(newData);
+          var sig = function(d) { return d.length + ':' + d.map(function(n) { return n.name; }).join(','); };
+          if (sig(newData) !== sig(prevData)) SearchService.buildIndex(newData);
           return newData;
         });
+        checkOpenTabsForExternalChanges();
       })["catch"](function () {});
     }
     WebSocketService.onFilesChanged(handleFilesChanged);
     return function () { WebSocketService.offFilesChanged(handleFilesChanged); };
   }, []);
 
+  function checkOpenTabsForExternalChanges() {
+    var st = EditorStore.getState();
+    var allTabs = st.panes.reduce(function (acc, p) {
+      return acc.concat(p.tabs.map(function (t) { return { paneId: p.id, tab: t }; }));
+    }, []);
+    var fileTabs = allTabs.filter(function (pt) {
+      var path = pt.tab.path || '';
+      return path &&
+        !path.startsWith('mbeditor://') &&
+        !path.startsWith('diff://') &&
+        !path.startsWith('combined-diff://') &&
+        !pt.tab.isCombinedDiff &&
+        !pt.tab.isSettings &&
+        !pt.tab.isImage &&
+        !pt.tab.isDiff &&
+        typeof pt.tab.content === 'string';
+    });
+    fileTabs.forEach(function (pt) {
+      var savedAt = recentSavesRef.current[pt.tab.path];
+      if (savedAt && Date.now() - savedAt < 3000) return;
+      FileService.getFile(pt.tab.path, { allowMissing: true }).then(function (data) {
+        if (!data || typeof data.content !== 'string') return;
+        var serverNorm = data.content.replace(/\r\n/g, '\n');
+        var tabNorm = (pt.tab.content || '').replace(/\r\n/g, '\n');
+        if (serverNorm === tabNorm) return;
+        if (!pt.tab.dirty) {
+          EditorStore.setState({
+            panes: EditorStore.getState().panes.map(function (p) {
+              if (p.id !== pt.paneId) return p;
+              return Object.assign({}, p, {
+                tabs: p.tabs.map(function (t) {
+                  if (t.id !== pt.tab.id) return t;
+                  return Object.assign({}, t, {
+                    content: data.content,
+                    externalContentVersion: (t.externalContentVersion || 0) + 1
+                  });
+                })
+              });
+            })
+          });
+        } else {
+          // Re-verify the tab still exists before queuing
+          var currentState = EditorStore.getState();
+          var stillExists = currentState.panes.some(function (p) {
+            return p.id === pt.paneId && p.tabs.some(function (t) { return t.id === pt.tab.id; });
+          });
+          if (!stillExists) return;
+          var existing = EditorStore.getState().pendingReloads.find(function (r) {
+            return r.paneId === pt.paneId && r.tabId === pt.tab.id;
+          });
+          if (!existing) {
+            EditorStore.setState({
+              pendingReloads: EditorStore.getState().pendingReloads.concat([{
+                paneId: pt.paneId,
+                tabId: pt.tab.id,
+                path: pt.tab.path,
+                name: pt.tab.name,
+                serverContent: data.content
+              }])
+            });
+          }
+        }
+      })["catch"](function () {});
+    });
+  }
+
   // Auto-refresh the file tree every 10s to pick up external changes (new files, deletions, etc.)
   // When an ActionCable WebSocket is connected this acts only as a safety-net fallback —
   // the WebSocket push above handles immediate invalidation after mbeditor mutations.
@@ -1118,8 +1371,8 @@ var MbeditorApp = function MbeditorApp() {
       FileService.getTree().then(function (data) {
         var newData = data || [];
         setTreeData(function (prevData) {
-          if (JSON.stringify(newData) === JSON.stringify(prevData)) return prevData;
-          SearchService.buildIndex(newData);
+          var sig = function(d) { return d.length + ':' + d.map(function(n) { return n.name; }).join(','); };
+          if (sig(newData) !== sig(prevData)) SearchService.buildIndex(newData);
           return newData;
         });
       }).catch(function () {}); // silently ignore auto-refresh errors
@@ -1127,8 +1380,8 @@ var MbeditorApp = function MbeditorApp() {
     return function () { clearInterval(intervalId); };
   }, []);
 
-  var handleSelectFile = function handleSelectFile(path, name, line) {
-    TabManager.openTab(path, name, line);
+  var handleSelectFile = function handleSelectFile(path, name, line, col) {
+    TabManager.openTab(path, name, line, null, false, col);
     handleNodeSelect({ path: path, name: name || path.split('/').pop(), type: 'file' });
     setQuickOpen(false);
   };
@@ -1168,6 +1421,13 @@ 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; });
+          });
+        })
+      });
     }
   };
 
@@ -1189,7 +1449,10 @@ var MbeditorApp = function MbeditorApp() {
         return _extends({}, prev, { save: true });
       });
       EditorStore.setStatus("Saving " + tab.name + "...", "info");
+      isSavingRef.current = true;
       FileService.saveFile(tab.path, tab.content).then(function () {
+        recentSavesRef.current[tab.path] = Date.now();
+        setTimeout(function() { delete recentSavesRef.current[tab.path]; }, 3500);
         EditorStore.setStatus("Saved", "success");
         SearchService.invalidate();
         GitService.fetchStatus();
@@ -1199,9 +1462,17 @@ var MbeditorApp = function MbeditorApp() {
           _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; });
+            });
+          })
+        });
       })["catch"](function (err) {
         EditorStore.setStatus("Save failed: " + err.message, "error");
       })["finally"](function () {
+        isSavingRef.current = false;
         setLoading(function (prev) {
           return _extends({}, prev, { save: false });
         });
@@ -1210,6 +1481,13 @@ var MbeditorApp = function MbeditorApp() {
       });
     } 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; });
+          });
+        })
+      });
       setClosingTabId(null);
       setClosingPaneId(null);
     }
@@ -1311,6 +1589,142 @@ var MbeditorApp = function MbeditorApp() {
     return function() { window.removeEventListener('beforeinstallprompt', handler); };
   }, []);
 
+  useEffect(function() {
+    FileService.getClientConfig().then(function(cfg) {
+      setCustomPaths(Array.isArray(cfg.related_files_custom_paths) ? cfg.related_files_custom_paths : []);
+    })['catch'](function() {});
+  }, []);
+
+  // Version-update detection: open the changelog tab automatically when the
+  // gem version has changed since last time the editor was opened.
+  useEffect(function() {
+    var SEEN_KEY = 'mbeditor_seen_version';
+    var current = document.body.dataset.mbeditorVersion || '';
+    var seen = localStorage.getItem(SEEN_KEY) || '';
+    if (current && seen && seen !== current) {
+      // Delay slightly so the editor finishes restoring saved tabs first
+      setTimeout(function() { openChangelogTab(); }, 800);
+    }
+    if (current) localStorage.setItem(SEEN_KEY, current);
+  }, []);
+
+  var resourceLabelFromPath = function(p) {
+    if (!p) return null;
+    var parts = p.split('/');
+    var file = parts[parts.length - 1];
+    var name;
+    if (parts[0] === 'app') {
+      if (parts[1] === 'controllers') name = file.replace(/_controller\.rb$/, '');
+      else if (parts[1] === 'models') name = file.replace(/\.rb$/, '');
+      else if (parts[1] === 'views' && parts.length >= 4) name = parts[2];
+      else if (parts[1] === 'helpers') name = file.replace(/_helper\.rb$/, '');
+      else return null;
+    } else if (parts[0] === 'test' || parts[0] === 'spec') {
+      if (parts[1] === 'controllers') name = file.replace(/_controller_(test|spec)\.rb$/, '');
+      else if (parts[1] === 'models') name = file.replace(/_(test|spec)\.rb$/, '');
+      else return null;
+    } else {
+      // Check custom paths
+      var customPaths = customPathsRef.current;
+      for (var ci = 0; ci < customPaths.length; ci++) {
+        var base = customPaths[ci];
+        if (p.startsWith(base + '/')) {
+          var rest = p.slice(base.length + 1);
+          var resource = rest.split('/')[0].replace(/\.[^.]+$/, '');
+          if (resource) {
+            var seg = resource.replace(/_/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+            return seg;
+          }
+        }
+      }
+      return null;
+    }
+    var seg = (name || '').split('/').pop() || name || '';
+    // Normalize plural→singular so views/users and models/user share one group
+    seg = seg.replace(/ies$/, 'y')
+             .replace(/([^aeiou])es$/, '$1')
+             .replace(/([^s])s$/, '$1');
+    return seg.replace(/_/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+  };
+
+  var RAILS_MAX_RESOURCES = 10;
+
+  // Map resource label → representative path (capped at RAILS_MAX_RESOURCES, focused pane first)
+  var railsResourceDeps = (function() {
+    var deps = {};
+    var panesOrdered = state.panes.slice().sort(function(a, b) {
+      return a.id === state.focusedPaneId ? -1 : b.id === state.focusedPaneId ? 1 : 0;
+    });
+    panesOrdered.forEach(function(p) {
+      var tabs = p.tabs.slice().sort(function(a, b) {
+        return a.id === p.activeTabId ? -1 : b.id === p.activeTabId ? 1 : 0;
+      });
+      tabs.forEach(function(t) {
+        if (Object.keys(deps).length >= RAILS_MAX_RESOURCES) return;
+        if (!t.path || t.path === '__settings__' || t.path.startsWith('mbeditor://')) return;
+        var label = resourceLabelFromPath(t.path);
+        if (label && !deps[label]) deps[label] = t.path;
+      });
+    });
+    return deps;
+  })();
+  var railsResourceDepStr = Object.keys(railsResourceDeps).sort().join('|');
+
+  var railsOverflow = (function() {
+    var all = {};
+    state.panes.forEach(function(p) {
+      p.tabs.forEach(function(t) {
+        if (!t.path || t.path === '__settings__' || t.path.startsWith('mbeditor://')) return;
+        var label = resourceLabelFromPath(t.path);
+        if (label) all[label] = true;
+      });
+    });
+    return Math.max(0, Object.keys(all).length - Object.keys(railsResourceDeps).length);
+  })();
+
+  var dirtyPaths = (function() {
+    var set = {};
+    state.panes.forEach(function(p) {
+      p.tabs.forEach(function(t) {
+        if (t.dirty && t.path) set[t.path] = true;
+      });
+    });
+    return set;
+  })();
+
+  useEffect(function() {
+    if (activeSidebarTab !== 'rails') return;
+    var labels = Object.keys(railsResourceDeps);
+    if (labels.length === 0) { setRailsFilesMap({}); return; }
+    setRailsFilesMap(function(prev) {
+      var next = {};
+      labels.forEach(function(label) {
+        next[label] = prev[label] ? { files: prev[label].files, loading: true } : { files: null, loading: true };
+      });
+      return next;
+    });
+    labels.forEach(function(label) {
+      var path = railsResourceDeps[label];
+      FileService.getRelatedFiles(path).then(function(data) {
+        setRailsFilesMap(function(prev) {
+          if (!prev.hasOwnProperty(label)) return prev;
+          var next = Object.assign({}, prev);
+          var update = {};
+          update[label] = { files: data, loading: false };
+          return Object.assign(next, update);
+        });
+      })['catch'](function() {
+        setRailsFilesMap(function(prev) {
+          if (!prev.hasOwnProperty(label)) return prev;
+          var next = Object.assign({}, prev);
+          var update = {};
+          update[label] = { files: null, loading: false };
+          return Object.assign(next, update);
+        });
+      });
+    });
+  }, [activeSidebarTab, railsResourceDepStr]);
+
   var focusedPane = state.panes.find(function (p) {
     return p.id === state.focusedPaneId;
   }) || state.panes[0] || null;
@@ -1438,7 +1852,10 @@ var MbeditorApp = function MbeditorApp() {
       return _extends({}, prev, { save: true });
     });
     EditorStore.setStatus("Saving " + tab.name + "...", "info");
+    isSavingRef.current = true;
     FileService.saveFile(tab.path, tab.content).then(function () {
+      recentSavesRef.current[tab.path] = Date.now();
+      setTimeout(function() { delete recentSavesRef.current[tab.path]; }, 3500);
       var newPanes = EditorStore.getState().panes.map(function (p) {
         if (p.id === paneId) {
           return _extends({}, p, { tabs: p.tabs.map(function (t) {
@@ -1455,6 +1872,9 @@ var MbeditorApp = function MbeditorApp() {
       }
       EditorStore.setStatus("Saved", "success");
       _clearDraft(tab.path);
+      if (typeof HistoryService !== 'undefined') {
+        HistoryService.flushForPath(tab.path);
+      }
       SearchService.invalidate();
 
       // Hot reload for Markdown: sync preview tab after save
@@ -1466,12 +1886,76 @@ var MbeditorApp = function MbeditorApp() {
     })["catch"](function (err) {
       EditorStore.setStatus("Save failed: " + err.message, "error");
     })["finally"](function () {
+      isSavingRef.current = false;
       return setLoading(function (prev) {
         return _extends({}, prev, { save: false });
       });
     });
   };
 
+  function dismissPendingReload(reload) {
+    EditorStore.setState({
+      pendingReloads: EditorStore.getState().pendingReloads.filter(function (r) {
+        return !(r.paneId === reload.paneId && r.tabId === reload.tabId);
+      })
+    });
+  }
+
+  function handleSaveAndReload(reload) {
+    var st = EditorStore.getState();
+    var pane = st.panes.find(function (p) { return p.id === reload.paneId; });
+    var tab = pane && pane.tabs.find(function (t) { return t.id === reload.tabId; });
+    if (!tab) { dismissPendingReload(reload); return; }
+    isSavingRef.current = true;
+    FileService.saveFile(tab.path, tab.content).then(function () {
+      recentSavesRef.current[tab.path] = Date.now();
+      setTimeout(function() { delete recentSavesRef.current[tab.path]; }, 3500);
+      EditorStore.setState({
+        panes: EditorStore.getState().panes.map(function (p) {
+          if (p.id !== reload.paneId) return p;
+          return Object.assign({}, p, {
+            tabs: p.tabs.map(function (t) {
+              if (t.id !== reload.tabId) return t;
+              return Object.assign({}, t, {
+                content: tab.content,
+                dirty: false,
+                externalContentVersion: (t.externalContentVersion || 0) + 1
+              });
+            })
+          });
+        })
+      });
+      dismissPendingReload(reload);
+    })["catch"](function () {
+      EditorStore.setStatus('Save failed — cannot reload', 'error');
+    })["finally"](function () {
+      isSavingRef.current = false;
+    });
+  }
+
+  function handleDiscardAndReload(reload) {
+    EditorStore.setState({
+      panes: EditorStore.getState().panes.map(function (p) {
+        if (p.id !== reload.paneId) return p;
+        return Object.assign({}, p, {
+          tabs: p.tabs.map(function (t) {
+            if (t.id !== reload.tabId) return t;
+            return Object.assign({}, t, {
+              content: reload.serverContent,
+              dirty: false,
+              externalContentVersion: (t.externalContentVersion || 0) + 1
+            });
+          })
+        });
+      })
+    });
+    dismissPendingReload(reload);
+  }
+
+  function handleKeepMine(reload) {
+    dismissPendingReload(reload);
+  }
+
   var handleSaveAll = function handleSaveAll() {
     var dirtyTabs = state.panes.flatMap(function (p) {
       return p.tabs;
@@ -1484,10 +1968,16 @@ var MbeditorApp = function MbeditorApp() {
       return _extends({}, prev, { saveAll: true });
     });
     EditorStore.setStatus("Saving " + dirtyTabs.length + " files...", "info");
+    isSavingRef.current = true;
     var promises = dirtyTabs.map(function (tab) {
       return FileService.saveFile(tab.path, tab.content);
     });
     Promise.all(promises).then(function () {
+      var now = Date.now();
+      dirtyTabs.forEach(function(tab) {
+        recentSavesRef.current[tab.path] = now;
+        setTimeout(function() { delete recentSavesRef.current[tab.path]; }, 3500);
+      });
       var newPanes = EditorStore.getState().panes.map(function (p) {
         return _extends({}, p, { tabs: p.tabs.map(function (t) {
             return _extends({}, t, { dirty: false, cleanContent: t.content });
@@ -1508,6 +1998,7 @@ var MbeditorApp = function MbeditorApp() {
     })["catch"](function (err) {
       EditorStore.setStatus("Failed to save some files", "error");
     })["finally"](function () {
+      isSavingRef.current = false;
       return setLoading(function (prev) {
         return _extends({}, prev, { saveAll: false });
       });
@@ -1558,10 +2049,33 @@ var MbeditorApp = function MbeditorApp() {
     EditorStore.setStatus('Line endings changed to ' + newEOL, 'info');
   };
 
+  var handleRefreshWorkspace = function handleRefreshWorkspace() {
+    setLoading(function (prev) {
+      return _extends({}, prev, { refreshWorkspace: true });
+    });
+    GitService.fetchStatus()["catch"](function () {});
+    FileService.getTree().then(function (data) {
+      var newData = data || [];
+      setTreeData(function (prevData) {
+        if (JSON.stringify(newData) === JSON.stringify(prevData)) return prevData;
+        SearchService.buildIndex(newData);
+        return newData;
+      });
+      checkOpenTabsForExternalChanges();
+      EditorStore.setStatus("Workspace refreshed", "success");
+    })["catch"](function (err) {
+      EditorStore.setStatus("Failed to refresh workspace", "error");
+    })["finally"](function () {
+      setLoading(function (prev) {
+        return _extends({}, prev, { refreshWorkspace: false });
+      });
+    });
+  };
+
   var handleFormat = function handleFormat() {
     if (!activeTab) return;
 
-    var isRubyLang = activeTab.path.endsWith('.rb') || activeTab.path.endsWith('.gemspec') || activeTab.path.endsWith("Rakefile") || activeTab.path.endsWith("Gemfile");
+    var isRubyLang = activeTab.path.endsWith('.rb') || activeTab.path.endsWith('.rake') || activeTab.path.endsWith('.gemspec') || activeTab.path.endsWith("Rakefile") || activeTab.path.endsWith("Gemfile");
 
     if (isRubyLang && !rubocopAvailable) {
       EditorStore.setStatus("RuboCop is not available for this workspace.", "warning");
@@ -1573,7 +2087,13 @@ var MbeditorApp = function MbeditorApp() {
         return _extends({}, prev, { format: true });
       });
       EditorStore.setStatus("Formatting...", "info");
-      FileService.formatFile(activeTab.path, activeTab.content).then(function (res) {
+      var originalContent = activeTab.content;
+      var codeToFormat = originalContent;
+      if (editorPrefs.insertSpaces === false) {
+        var detectedWidth = detectIndentWidth(originalContent);
+        if (detectedWidth > 0) codeToFormat = spacesToTabs(originalContent, detectedWidth);
+      }
+      FileService.formatFile(activeTab.path, codeToFormat).then(function (res) {
         if (res.content) {
           // Update content and mark dirty — user decides when to save.
           // The executeEdits path in EditorPanel preserves the undo stack.
@@ -1584,6 +2104,19 @@ var MbeditorApp = function MbeditorApp() {
             return p;
           });
           EditorStore.setState({ panes: newPanes });
+
+          // Highlight changed lines briefly
+          var monacoEditor = window.__mbeditorActiveEditor;
+          if (monacoEditor && res.content !== originalContent) {
+            var changedLineNums = diffLines(originalContent.split('\n'), res.content.split('\n'));
+            if (changedLineNums.length > 0) {
+              var decorations = changedLineNums.map(function(ln) {
+                return { range: new monaco.Range(ln, 1, ln, 1), options: { isWholeLine: true, className: 'mbeditor-format-changed' } };
+              });
+              var ids = monacoEditor.deltaDecorations([], decorations);
+              setTimeout(function() { monacoEditor.deltaDecorations(ids, []); }, 3000);
+            }
+          }
         }
         EditorStore.setStatus("Formatted (Unsaved)", "success");
         GitService.fetchStatus();
@@ -2061,13 +2594,17 @@ var MbeditorApp = function MbeditorApp() {
     document.body.style.userSelect = 'none';
   };
 
-  var toggleSidebarCollapsed = function toggleSidebarCollapsed() {
-    setSidebarCollapsed(function (prev) { return !prev; });
-  };
-
-  var expandSidebarTo = function expandSidebarTo(tab) {
-    setActiveSidebarTab(tab);
-    setSidebarCollapsed(false);
+  var handleActivityBarClick = function handleActivityBarClick(tab) {
+    if (tab === 'settings') {
+      openSettingsTab();
+      return;
+    }
+    if (!sidebarCollapsed && activeSidebarTab === tab) {
+      setSidebarCollapsed(true);
+    } else {
+      setActiveSidebarTab(tab);
+      setSidebarCollapsed(false);
+    }
   };
 
   var openFileFromGitPanel = function openFileFromGitPanel(path, name) {
@@ -2483,6 +3020,45 @@ var MbeditorApp = function MbeditorApp() {
     EditorStore.setState({ panes: newPanes2, focusedPaneId: paneId, activeTabId: '__settings__' });
   }
 
+  var CHANGELOG_TAB_ID = 'mbeditor://changelog';
+  function openChangelogTab() {
+    var st = EditorStore.getState();
+    // Focus existing tab if already open
+    var foundPaneId = null, foundTab = null;
+    st.panes.forEach(function(p) {
+      if (!foundTab) {
+        var t = p.tabs.find(function(tab) { return tab.id === CHANGELOG_TAB_ID; });
+        if (t) { foundTab = t; foundPaneId = p.id; }
+      }
+    });
+    if (foundTab) {
+      var switchPanes = st.panes.map(function(p) {
+        if (p.id === foundPaneId) return Object.assign({}, p, { activeTabId: CHANGELOG_TAB_ID });
+        return p;
+      });
+      EditorStore.setState({ panes: switchPanes, focusedPaneId: foundPaneId });
+      return;
+    }
+    // Open in focused pane
+    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: CHANGELOG_TAB_ID, path: CHANGELOG_TAB_ID, name: "What's New", dirty: false, content: '', isChangelog: true };
+    var newPanes = st.panes.map(function(p) {
+      if (p.id === paneId) return Object.assign({}, p, { tabs: p.tabs.concat(newTab), activeTabId: CHANGELOG_TAB_ID });
+      return p;
+    });
+    EditorStore.setState({ panes: newPanes, focusedPaneId: paneId });
+    // Fetch content if not already loaded
+    if (!changelogState || changelogState.error) {
+      setChangelogState({ loading: true, content: null, error: null });
+      FileService.getChangelog()
+        .then(function(data) { setChangelogState({ loading: false, content: data.content || '', error: null }); })
+        ['catch'](function() { setChangelogState({ loading: false, content: null, error: 'Could not load changelog.' }); });
+    }
+  }
+
   return React.createElement(
     "div",
     { className: "ide-shell" },
@@ -2589,74 +3165,69 @@ var MbeditorApp = function MbeditorApp() {
     React.createElement(
       "div",
       { className: "ide-body", id: "ide-body-container" },
-      React.createElement(
+      /* Activity bar — always visible, 48px wide */
+      !zenMode && React.createElement(
         "div",
-        { className: "ide-sidebar" + (sidebarCollapsed ? " ide-sidebar-collapsed" : ""), style: { width: (sidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : sidebarWidth) + "px", display: zenMode ? 'none' : undefined } },
-        sidebarCollapsed
-          ? React.createElement(
-              "div",
-              { className: "sidebar-icon-strip" },
-              React.createElement(
-                "div",
-                { className: "sidebar-strip-top" },
-                React.createElement(
-                  "div",
-                  { className: "sidebar-nav-group", "data-group": "nav" },
-                  React.createElement(
-                    "button",
-                    { type: "button", className: "sidebar-strip-btn " + (activeSidebarTab === 'explorer' ? 'active' : ''), title: "Explorer", onClick: function () { return expandSidebarTo('explorer'); } },
-                    React.createElement("i", { className: "far fa-folder" })
-                  ),
-                  React.createElement(
-                    "button",
-                    { type: "button", className: "sidebar-strip-btn " + (activeSidebarTab === 'search' ? 'active' : ''), title: "Search", onClick: function () { return expandSidebarTo('search'); } },
-                    React.createElement("i", { className: "fas fa-search" })
-                  ),
-                  React.createElement(
-                    "button",
-                    { type: "button", className: "sidebar-strip-btn", title: "Editor Preferences", onClick: openSettingsTab },
-                    React.createElement("i", { className: "fas fa-cog" })
-                  )
-                )
-              ),
-              React.createElement(
-                "div",
-                { className: "sidebar-strip-bottom" },
-                React.createElement(
-                  "button",
-                  { type: "button", className: "sidebar-strip-btn", title: "Expand sidebar", onClick: toggleSidebarCollapsed },
-                  React.createElement("i", { className: "fas fa-chevron-right" })
-                )
-              )
-            )
-          : React.createElement(
-              React.Fragment,
-              null,
-              React.createElement(
-                "div",
-                { className: "ide-sidebar-tabs" },
-                React.createElement(
-                  "button",
-                  { type: "button", className: "ide-sidebar-tab " + (activeSidebarTab === 'explorer' ? 'active' : ''), onClick: function () { return setActiveSidebarTab('explorer'); } },
-                  "EXPLORER"
-                ),
-                React.createElement(
-                  "button",
-                  { type: "button", className: "ide-sidebar-tab " + (activeSidebarTab === 'search' ? 'active' : ''), onClick: function () { return setActiveSidebarTab('search'); } },
-                  "SEARCH"
-                ),
-                React.createElement(
-                  "button",
-                  { type: "button", className: "ide-sidebar-tab ide-sidebar-tab-icon", title: "Editor Preferences", onClick: openSettingsTab },
-                  React.createElement("i", { className: "fas fa-cog" })
-                ),
-                React.createElement(
-                  "button",
-                  { type: "button", className: "sidebar-strip-btn", title: "Collapse sidebar", onClick: toggleSidebarCollapsed },
-                  React.createElement("i", { className: "fas fa-chevron-left" })
-                )
-              ),
-              activeSidebarTab === 'explorer' && React.createElement(
+        { className: "ide-activity-bar" },
+        React.createElement(
+          "div",
+          { className: "ide-activity-bar-top" },
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-activity-btn" + (!sidebarCollapsed && activeSidebarTab === 'explorer' ? ' active' : ''),
+              title: "Explorer",
+              onClick: function() { handleActivityBarClick('explorer'); }
+            },
+            React.createElement("i", { className: "far fa-folder" })
+          ),
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-activity-btn" + (!sidebarCollapsed && activeSidebarTab === 'search' ? ' active' : ''),
+              title: "Search",
+              onClick: function() { handleActivityBarClick('search'); }
+            },
+            React.createElement("i", { className: "fas fa-search" })
+          ),
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-activity-btn" + (!sidebarCollapsed && activeSidebarTab === 'rails' ? ' active' : ''),
+              title: "Rails",
+              onClick: function() { handleActivityBarClick('rails'); }
+            },
+            React.createElement("i", { className: "far fa-gem" })
+          )
+        ),
+        React.createElement(
+          "div",
+          { className: "ide-activity-bar-bottom" },
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-activity-btn" + (activeTab && activeTab.isSettings ? ' active' : ''),
+              title: "Editor Preferences",
+              onClick: openSettingsTab
+            },
+            React.createElement("i", { className: "fas fa-cog" })
+          )
+        )
+      ),
+      /* Panel content — shown when not collapsed and not in zen mode */
+      !sidebarCollapsed && !zenMode && React.createElement(
+        "div",
+        { className: "ide-sidebar", style: { width: sidebarWidth + "px" } },
+        React.createElement("div", { className: "sidebar-panel-title" },
+          activeSidebarTab === 'explorer' ? 'Explorer' :
+          activeSidebarTab === 'search' ? 'Search' :
+          activeSidebarTab === 'rails' ? 'Rails' : ''
+        ),
+        activeSidebarTab === 'explorer' && React.createElement(
           "div",
           { className: "ide-sidebar-content" },
           React.createElement(
@@ -2789,6 +3360,13 @@ var MbeditorApp = function MbeditorApp() {
               actions: React.createElement(
                 SectionActionGroup,
                 { ariaLabel: "Project actions" },
+                React.createElement(SidebarActionButton, {
+                  title: "Refresh workspace",
+                  iconClass: "fas fa-sync-alt",
+                  ariaBusy: !!loading.refreshWorkspace,
+                  onClick: handleRefreshWorkspace,
+                  disabled: !!loading.refreshWorkspace
+                }),
                 React.createElement(SidebarActionButton, {
                   title: "Collapse all folders",
                   iconClass: "fas fa-compress-alt",
@@ -2986,7 +3564,7 @@ var MbeditorApp = function MbeditorApp() {
                       {
                         key: i,
                         className: "search-result-item",
-                        onClick: (function(r) { return function() { handleSelectFile(r.file, r.file.split('/').pop(), r.line); }; })(res)
+                        onClick: (function(r) { return function() { handleSelectFile(r.file, r.file.split('/').pop(), r.line, r.col); }; })(res)
                       },
                       React.createElement("i", { className: (window.getFileIcon ? window.getFileIcon(fileName) : 'far fa-file-code') + " search-result-icon" }),
                       React.createElement(
@@ -3014,10 +3592,120 @@ var MbeditorApp = function MbeditorApp() {
               )
             );
           })()
+        ),
+        activeSidebarTab === 'rails' && React.createElement(
+          "div",
+          { className: "rails-panel" },
+          (function() {
+            var labels = Object.keys(railsFilesMap).sort();
+            if (labels.length === 0) {
+              return React.createElement("div", { className: "rails-panel-empty" }, "Open a Rails file to see related files.");
+            }
+            var sections = labels.map(function(label) {
+              var entry = railsFilesMap[label];
+              var files = entry && entry.files;
+              var loading = entry && entry.loading;
+              if (loading && !files) {
+                return React.createElement("div", { key: label + '_loading', className: "rails-panel-loading" },
+                  React.createElement("i", { className: "fas fa-spinner fa-spin" }),
+                  " Loading…"
+                );
+              }
+              if (!files || Object.keys(files).length === 0) return null;
+              var allFiles = [];
+              ['model', 'controller', 'helper', 'concerns', 'tests', 'views'].forEach(function(key) {
+                var group = files[key];
+                if (group && group.length) allFiles = allFiles.concat(group);
+              });
+              var customGroups = files['custom'];
+              if (customGroups && typeof customGroups === 'object') {
+                Object.keys(customGroups).forEach(function(base) {
+                  var grpFiles = customGroups[base];
+                  if (grpFiles && grpFiles.length) allFiles = allFiles.concat(grpFiles);
+                });
+              }
+              if (allFiles.length === 0) return null;
+              var schemaBtn = React.createElement(
+                'button',
+                {
+                  className: 'rails-schema-btn' + (schemaLoadingLabel === label ? ' rails-schema-btn-loading' : ''),
+                  title: 'View database schema for ' + label,
+                  onClick: (function(lbl) { return function(e) {
+                    e.stopPropagation();
+                    if (schemaLoadingLabel === lbl) return;
+                    setSchemaLoadingLabel(lbl);
+                    var modelName = lbl.replace(/\s+/g, '');
+                    FileService.getModelSchema(modelName)
+                      .then(function(data) {
+                        setSchemaLoadingLabel(null);
+                        if (data && data.columns) {
+                          setSchemaModal({ label: lbl, data: data });
+                        } else {
+                          setSchemaModal({ label: lbl, error: 'No schema found for ' + lbl });
+                        }
+                      })
+                      ['catch'](function(err) {
+                        setSchemaLoadingLabel(null);
+                        var msg = (err && err.response && err.response.data && err.response.data.error)
+                          ? err.response.data.error
+                          : 'No db/schema.rb found or table not defined';
+                        setSchemaModal({ label: lbl, error: msg });
+                      });
+                  }; })(label)
+                },
+                React.createElement('i', {
+                  className: schemaLoadingLabel === label
+                    ? 'fas fa-spinner fa-spin'
+                    : 'fas fa-table'
+                })
+              );
+              return React.createElement(
+                CollapsibleSection,
+                {
+                  key: label,
+                  title: label.toUpperCase(),
+                  isCollapsed: !!railsGroupsCollapsed[label],
+                  actions: schemaBtn,
+                  onToggle: (function(captured) { return function(isCollapsed) {
+                    setRailsGroupsCollapsed(function(prev) {
+                      var next = Object.assign({}, prev);
+                      next[captured] = isCollapsed;
+                      return next;
+                    });
+                  }; })(label)
+                },
+                React.createElement(
+                  "div",
+                  null,
+                  allFiles.map(function(f) {
+                    return React.createElement(
+                      "div", {
+                        key: f.path,
+                        className: "rails-group-item",
+                        onClick: (function(file) { return function() { handleSelectFile(file.path, file.name); }; })(f),
+                        title: f.path
+                      },
+                      React.createElement("i", { className: "tree-item-icon " + (window.getFileIcon ? window.getFileIcon(f.name) : 'far fa-file-code') + " tree-file-icon" }),
+                      React.createElement("span", { className: "rails-group-item-name" }, f.name),
+                      f.kind && React.createElement("span", { className: "rails-group-item-kind" }, f.kind),
+                      dirtyPaths[f.path] && React.createElement("span", { className: "rails-group-item-dirty" }, "●")
+                    );
+                  })
+                )
+              );
+            });
+            if (railsOverflow > 0) {
+              sections = sections.concat([React.createElement(
+                "div", { key: '__overflow', className: "rails-panel-overflow" },
+                "+" + railsOverflow + " more — close tabs to show all"
+              )]);
+            }
+            return sections;
+          })()
         )
-      )
-    ),
-      React.createElement("div", {
+      ),
+      /* 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",
@@ -3029,7 +3717,7 @@ var MbeditorApp = function MbeditorApp() {
         {
           id: "ide-main-split-container",
           className: "ide-main",
-          style: { display: 'flex', flexDirection: 'row', width: '100%', height: '100%', cursor: activeResizeMode === 'pane' ? 'col-resize' : 'default', userSelect: activeResizeMode ? 'none' : 'auto' },
+          style: { position: 'relative', display: 'flex', flexDirection: 'row', width: '100%', height: '100%', cursor: activeResizeMode === 'pane' ? 'col-resize' : 'default', userSelect: activeResizeMode ? 'none' : 'auto' },
           onDragOverCapture: function (e) {
             if (!draggedTab) return;
             e.preventDefault();
@@ -3081,6 +3769,9 @@ var MbeditorApp = function MbeditorApp() {
             }
           }
         },
+        isSwitchingBranch && React.createElement('div', { className: 'branch-switch-overlay' },
+          React.createElement('span', null, 'Switching branch…')
+        ),
         state.panes.map(function (pane, idx) {
           // Show empty pane 2 as a drop zone only when the cursor is actively hovering
           // over its half of the editor content (dragOverPaneId === 2).
@@ -3116,6 +3807,18 @@ var MbeditorApp = function MbeditorApp() {
                   commits: pActiveTab.commits || [],
                   onSelectCommit: handleSelectCommit
                 });
+              } else if (pActiveTab.isChangelog) {
+                content = React.createElement(ChangelogView, {
+                  changelogState: changelogState,
+                  onLoad: function() {
+                    if (!changelogState || (!changelogState.content && !changelogState.loading && !changelogState.error)) {
+                      setChangelogState({ loading: true, content: null, error: null });
+                      FileService.getChangelog()
+                        .then(function(data) { setChangelogState({ loading: false, content: data.content || '', error: null }); })
+                        ['catch'](function() { setChangelogState({ loading: false, content: null, error: 'Could not load changelog.' }); });
+                    }
+                  }
+                });
               } else if (pActiveTab.isSettings) {
                 content = React.createElement(
                   'div',
@@ -3127,7 +3830,7 @@ var MbeditorApp = function MbeditorApp() {
                     /* ── Appearance ──────────────────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Appearance'),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3148,7 +3851,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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),
@@ -3166,7 +3869,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row-full' },
+                      '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',
@@ -3215,7 +3918,7 @@ var MbeditorApp = function MbeditorApp() {
                     /* ── Indentation (unified editor + Prettier) ── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Indentation'),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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),
@@ -3233,7 +3936,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3246,7 +3949,7 @@ var MbeditorApp = function MbeditorApp() {
                     /* ── Editor ──────────────────────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Editor'),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3259,7 +3962,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3272,7 +3975,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3286,7 +3989,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3296,7 +3999,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3306,7 +4009,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3316,7 +4019,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3368,7 +4071,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3384,7 +4087,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3507,7 +4210,7 @@ var MbeditorApp = function MbeditorApp() {
                     /* ── Formatting (Prettier) ───────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Formatting'),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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),
@@ -3525,7 +4228,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3538,7 +4241,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3548,7 +4251,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3558,7 +4261,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3571,7 +4274,7 @@ var MbeditorApp = function MbeditorApp() {
                     /* ── Interface ───────────────────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'Interface'),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3581,7 +4284,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3591,7 +4294,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3601,7 +4304,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-half' },
+                      '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', {
@@ -3613,7 +4316,7 @@ var MbeditorApp = function MbeditorApp() {
                       )
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3623,7 +4326,7 @@ var MbeditorApp = function MbeditorApp() {
                       })
                     ),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3634,7 +4337,7 @@ var MbeditorApp = function MbeditorApp() {
                     ),
 
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3643,11 +4346,21 @@ var MbeditorApp = function MbeditorApp() {
                         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 }); }); }
+                      })
+                    ),
 
                     /* ── RuboCop ─────────────────────────────────── */
                     React.createElement('div', { className: 'ide-settings-section-header' }, 'RuboCop'),
                     React.createElement(
-                      'label', { className: 'ide-settings-row ide-settings-row-check' },
+                      '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',
@@ -3775,6 +4488,12 @@ var MbeditorApp = function MbeditorApp() {
                 React.Fragment,
                 null,
                 renderTabBar(pane.id, pane.tabs, pane.activeTabId),
+                React.createElement(FileReloadBanner, {
+                  pendingReloads: (state.pendingReloads || []).filter(function (r) { return r.paneId === pane.id; }),
+                  onSaveAndReload: handleSaveAndReload,
+                  onDiscardAndReload: handleDiscardAndReload,
+                  onKeepMine: handleKeepMine
+                }),
                 React.createElement(
                   "div",
                   { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', visibility: activeResizeMode === 'pane' ? 'hidden' : 'visible' } },
@@ -3978,8 +4697,8 @@ var MbeditorApp = function MbeditorApp() {
         "ZEN"
       ),
       React.createElement(
-        "div",
-        { className: "statusbar-version" },
+        "button",
+        { type: "button", className: "statusbar-version statusbar-btn", onClick: openChangelogTab, title: "What's New — click to open changelog" },
         "v" + (document.body.dataset.mbeditorVersion || "")
       )
     ),
@@ -4289,6 +5008,96 @@ var MbeditorApp = function MbeditorApp() {
           )
         )
       )
+    ),
+
+    /* ── Schema modal ──────────────────────────────────────────────────── */
+    schemaModal && React.createElement(
+      'div',
+      {
+        className: 'schema-modal-overlay',
+        onClick: function() { setSchemaModal(null); }
+      },
+      React.createElement(
+        'div',
+        {
+          className: 'schema-modal',
+          onClick: function(e) { e.stopPropagation(); }
+        },
+        /* Header */
+        React.createElement(
+          'div', { className: 'schema-modal-header' },
+          React.createElement(
+            'div', { className: 'schema-modal-title' },
+            React.createElement('i', { className: 'fas fa-table', style: { marginRight: '8px', opacity: 0.7 } }),
+            schemaModal.label,
+            !schemaModal.error && schemaModal.data && React.createElement(
+              'span', { className: 'schema-modal-table-name' }, schemaModal.data.table
+            )
+          ),
+          React.createElement(
+            'button',
+            { className: 'schema-modal-close', onClick: function() { setSchemaModal(null); }, title: 'Close' },
+            React.createElement('i', { className: 'fas fa-times' })
+          )
+        ),
+        /* Body */
+        React.createElement(
+          'div', { className: 'schema-modal-body' },
+          schemaModal.error
+            ? React.createElement('div', { className: 'schema-modal-error' },
+                React.createElement('i', { className: 'fas fa-exclamation-circle', style: { marginRight: '8px' } }),
+                schemaModal.error
+              )
+            : [
+              /* Columns table */
+              React.createElement(
+                'table', { key: 'cols', className: 'schema-table' },
+                React.createElement(
+                  'thead', null,
+                  React.createElement(
+                    'tr', null,
+                    React.createElement('th', null, 'Column'),
+                    React.createElement('th', null, 'Type'),
+                    React.createElement('th', null, 'Options')
+                  )
+                ),
+                React.createElement(
+                  'tbody', null,
+                  schemaModal.data.columns.map(function(col) {
+                    var opts = [];
+                    if (col.null === false) opts.push('NOT NULL');
+                    if (col.default !== undefined && col.default !== null) opts.push('default: ' + col.default);
+                    if (col.limit) opts.push('limit: ' + col.limit);
+                    if (col.precision) opts.push('precision: ' + col.precision + (col.scale ? ', scale: ' + col.scale : ''));
+                    if (col.primary_key) opts.push('PK');
+                    return React.createElement(
+                      'tr', { key: col.name },
+                      React.createElement('td', { className: 'schema-col-name' }, col.name),
+                      React.createElement('td', { className: 'schema-col-type schema-type-' + col.type }, col.type),
+                      React.createElement('td', { className: 'schema-col-opts' }, opts.join(' · ') || '—')
+                    );
+                  })
+                )
+              ),
+              /* Indexes */
+              schemaModal.data.indexes && schemaModal.data.indexes.length > 0 && React.createElement(
+                'div', { key: 'idxs', className: 'schema-indexes' },
+                React.createElement('div', { className: 'schema-indexes-header' }, 'Indexes'),
+                schemaModal.data.indexes.map(function(idx, i) {
+                  return React.createElement(
+                    'div', { key: idx.name || i, className: 'schema-index-row' },
+                    React.createElement('span', { className: 'schema-index-cols' },
+                      React.createElement('i', { className: 'fas fa-key', style: { fontSize: '9px', marginRight: '5px', opacity: 0.5 } }),
+                      idx.columns.join(', ')
+                    ),
+                    idx.unique && React.createElement('span', { className: 'schema-index-unique' }, 'UNIQUE'),
+                    idx.name && React.createElement('span', { className: 'schema-index-name' }, idx.name)
+                  );
+                })
+              )
+            ]
+        )
+      )
     )
   );
 };