mbeditor 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 706d2307424a25e3a1b19683326d62de74d98568f755971d6eeb592ad5bae1a4
-  data.tar.gz: 8cfb289f2cc0fd18eb2e8c55ae3a2f766712d68231e695b2e02a1e7778207c2d
+  metadata.gz: 2f9731ab7001f6b719f901bfa718ca47ae3ea9d38134a03a3602bdf31bcb6100
+  data.tar.gz: 8883cc001b712a8ce976a3bdd4b639e6c92fab9db54b1e1f0950204c104a2975
 SHA512:
-  metadata.gz: 8b691b32511249206e9af0e7ceeb6b26f9cf5bf63cd4b035e8b7fa9411ba05480b4c8795cdcf7a20ffefd536803a61e79c84edb7874fad7d7308aa4dca622b2f
-  data.tar.gz: 41c25d7ad6113629fd50267ceff4e9f07490627f9fc2a8eba2fc2804743e8ba7e3c3c6bedc30c4a225e6a177c3354b1282a88df874086bf2e969bced2d20ea65
+  metadata.gz: ac7a9e30ed4bf071f2759281bc49c2225680133e3e8a93c1ce9f997092fd4525e29a3d54d788526b3abe18b6fd7b8ae6e8a08e25cbe5a0d6286b2a9f1e916dbe
+  data.tar.gz: 8bd58a3d638f4738e1848c0c157e88ac44a3a5b571f8c8409bed4df79c06d94e529c41c51e9322ef8a30a0a737f062bcd0f67cb4991c344c1bffb8534ec52e8d

data/README.md

@@ -10,6 +10,7 @@ Mbeditor (Mini Browser Editor) is a mountable Rails engine that adds a browser-b
 - File tree and project search
 - Git panel with working tree changes, unpushed file changes, and branch commit titles
 - Optional RuboCop lint and format endpoints (uses host app RuboCop)
+- Optional test runner with inline failure markers and a dedicated results panel (Minitest and RSpec)
 
 ## Security Warning
 Mbeditor exposes read and write access to your Rails application directory over HTTP. It is intended only for local development.
@@ -53,6 +54,11 @@ Mbeditor.configure do |config|
   config.excluded_paths = %w[.git tmp log node_modules .bundle coverage vendor/bundle]
   config.rubocop_command = "bundle exec rubocop"
 
+  # Optional test runner (Minitest or RSpec)
+  # config.test_framework = :minitest   # :minitest or :rspec — auto-detected when nil
+  # config.test_command   = "bundle exec rails test"  # defaults to bin/rails test or bundle exec ruby -Itest
+  # config.test_timeout   = 60
+
   # Optional Redmine integration
   # config.redmine_enabled = true
   # config.redmine_url = "https://redmine.example.com/"
@@ -66,10 +72,32 @@ Available options:
 - `workspace_root` sets the root directory exposed by Mbeditor. Default: `Rails.root` from the host app.
 - `excluded_paths` hides files and directories from the tree and path-based operations. Entries without `/` match names anywhere in the workspace path; entries with `/` match relative paths and their descendants. Default: `%w[.git tmp log node_modules .bundle coverage vendor/bundle]`.
 - `rubocop_command` sets the command used for inline Ruby linting and formatting. Default: `"rubocop"`.
+- `test_framework` sets the test framework. `:minitest` or `:rspec`. Auto-detected from file suffix, `.rspec`, or `test`/`spec` directory when `nil`. Default: `nil`.
+- `test_command` overrides the full command used to run a test file. When `nil`, the engine picks `bin/rails test` (Minitest) or `bin/rspec` / `bundle exec rspec` (RSpec). Default: `nil`.
+- `test_timeout` sets the maximum seconds a test run may take before being killed. Default: `60`.
 - `redmine_enabled` enables issue lookup integration. Default: `false`.
 - `redmine_url` sets the Redmine base URL. Required when `redmine_enabled` is `true`.
 - `redmine_api_key` sets the Redmine API key. Required when `redmine_enabled` is `true`.
 
+## Test Runner
+
+The Test button appears in the editor toolbar for any `.rb` file when a `test/` or `spec/` directory exists in the workspace root. Clicking it:
+
+1. Resolves the active source file to its matching test file using standard Rails conventions (`app/models/user.rb` → `test/models/user_test.rb`). If the open file is already a test file, it runs that file directly.
+2. Runs the test file using the configured command in a subprocess with a timeout.
+3. Shows a **Test Results** panel with pass/fail counts, per-test status icons, and error messages.
+4. Optionally overlays inline failure markers in the Monaco editor (separate from RuboCop markers — the two never interfere). Use the marker icon in the panel header to toggle them.
+
+**Framework auto-detection order:**
+1. File suffix: `_spec.rb` → RSpec, `_test.rb` → Minitest
+2. `.rspec` file present → RSpec
+3. `spec/` directory present → RSpec
+4. `test/` directory present → Minitest
+
+**Default commands** (when `test_command` is not set):
+- Minitest: `bin/rails test <file>` if `bin/rails` exists, otherwise `bundle exec ruby -Itest <file>`
+- RSpec: `bin/rspec <file>` if `bin/rspec` exists, otherwise `bundle exec rspec --format json <file>`
+
 ## Keyboard Shortcuts
 
 | Shortcut | Action |
@@ -86,8 +114,9 @@ The gem keeps host/tooling responsibilities in the host app:
 - `rubocop` and `rubocop-rails` gems (optional, required for Ruby lint/format endpoints)
 - `haml_lint` gem (optional, required for HAML lint — add to your app's Gemfile if needed)
 - `git` installed in environment (for Git panel data)
+- `minitest` or `rspec` in the host app's bundle (required for the test runner)
 
-All lint tools are auto-detected at startup. The engine gracefully disables lint features if the tools are not available. Neither `rubocop` nor `haml_lint` are runtime dependencies of the gem itself — they are discovered from the host app's environment.
+All lint and test tools are auto-detected at runtime. The engine gracefully disables features if the tools are not available. Neither `rubocop`, `haml_lint`, nor any test framework are runtime dependencies of the gem itself — they are discovered from the host app's environment.
 
 ### Syntax Highlighting Support
 Monaco runtime assets are served from the engine route namespace (`/mbeditor/monaco-editor/*` and `/mbeditor/monaco_worker.js`).

data/app/assets/javascripts/mbeditor/application.js

@@ -11,6 +11,7 @@
 //= require mbeditor/components/CombinedDiffViewer
 //= require mbeditor/components/CommitGraph
 //= require mbeditor/components/FileHistoryPanel
+//= require mbeditor/components/TestResultsPanel
 //= require mbeditor/components/CodeReviewPanel
 //= require mbeditor/components/EditorPanel
 //= require mbeditor/components/FileTree

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

@@ -6,6 +6,7 @@ var DiffViewer = function DiffViewer(_ref) {
   var modified = _ref.modified;
   var isDark = _ref.isDark;
   var onClose = _ref.onClose;
+  var editorPrefs = _ref.editorPrefs || {};
   // If path is a diff:// URI (diff://baseSha..headSha/actual/file.rb), extract
   // just the file path portion for display so the title bar shows a clean name.
   var _rawDisplayPath = _ref.displayPath || path;
@@ -36,8 +37,9 @@ var DiffViewer = function DiffViewer(_ref) {
       ignoreTrimWhitespace: false,
       minimap: { enabled: false },
       scrollBeyondLastLine: false,
-      fontFamily: "'JetBrains Mono', 'Fira Code', 'Menlo', 'Consolas', monospace",
-      fontSize: 13
+      fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', 'Menlo', 'Consolas', monospace",
+      fontSize: editorPrefs.fontSize || 13,
+      wordWrap: editorPrefs.wordWrap || 'off'
     });
 
     diffEditor.setModel({
@@ -63,6 +65,16 @@ var DiffViewer = function DiffViewer(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [original, modified, displayPath, isDark]);
 
+  // Update font/wrap options live when editorPrefs changes, without recreating the editor
+  React.useEffect(function () {
+    if (!editorRef.current) return;
+    editorRef.current.updateOptions({
+      fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', 'Menlo', 'Consolas', monospace",
+      fontSize: editorPrefs.fontSize || 13,
+      wordWrap: editorPrefs.wordWrap || 'off'
+    });
+  }, [editorPrefs]);
+
   var handleNextDiff = function handleNextDiff() {
     if (!editorRef.current) return;
     var changes = editorRef.current.getLineChanges() || [];

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

@@ -15,7 +15,14 @@ var EditorPanel = function EditorPanel(_ref) {
   var onContentChange = _ref.onContentChange;
   var markers = _ref.markers;
   var gitAvailable = _ref.gitAvailable === true;
+  var testAvailable = _ref.testAvailable === true;
   var onFormat = _ref.onFormat;
+  var onRunTest = _ref.onRunTest;
+  var onShowHistory = _ref.onShowHistory;
+  var testResult = _ref.testResult;
+  var testPanelFile = _ref.testPanelFile;
+  var testLoading = _ref.testLoading;
+  var testInlineVisible = _ref.testInlineVisible;
   var editorPrefs = _ref.editorPrefs || {};
 
   var editorRef = useRef(null);
@@ -44,10 +51,28 @@ var EditorPanel = function EditorPanel(_ref) {
 
   var blameDecorationsRef = useRef([]);
   var blameZoneIdsRef = useRef([]);
+  var testDecorationIdsRef = useRef([]);
+  var testZoneIdsRef = useRef([]);
+
+  var _useState9 = useState(false);
+  var _useState10 = _slicedToArray(_useState9, 2);
+  var editorReady = _useState10[0];
+  var setEditorReady = _useState10[1];
 
   var onFormatRef = useRef(onFormat);
   onFormatRef.current = onFormat;
 
+  var clearTestZones = function clearTestZones(editor) {
+    if (!editor) return;
+    if (testZoneIdsRef.current.length === 0) return;
+    editor.changeViewZones(function(accessor) {
+      testZoneIdsRef.current.forEach(function(zoneId) {
+        accessor.removeZone(zoneId);
+      });
+    });
+    testZoneIdsRef.current = [];
+  };
+
   var clearBlameZones = function clearBlameZones(editor) {
     if (!editor) return;
     if (blameZoneIdsRef.current.length === 0) return;
@@ -124,14 +149,17 @@ var EditorPanel = function EditorPanel(_ref) {
       language: language,
       theme: editorPrefs.theme || 'vs-dark',
       automaticLayout: true,
-      minimap: { enabled: false },
+      minimap: { enabled: !!(editorPrefs.minimap) },
       renderLineHighlight: 'none',
-      bracketPairColorization: { enabled: true },
+      bracketPairColorization: { enabled: editorPrefs.bracketPairColorization !== false },
       fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
       fontSize: editorPrefs.fontSize || 13,
       tabSize: editorPrefs.tabSize || 4,
       insertSpaces: typeof editorPrefs.insertSpaces === 'boolean' ? editorPrefs.insertSpaces : false,
-      wordWrap: 'on',
+      wordWrap: editorPrefs.wordWrap || 'off',
+      lineNumbers: editorPrefs.lineNumbers || 'on',
+      renderWhitespace: editorPrefs.renderWhitespace || 'none',
+      scrollBeyondLastLine: !!(editorPrefs.scrollBeyondLastLine),
       linkedEditing: true, // Enables Auto-Rename Tag natively!
       fixedOverflowWidgets: true,
       hover: { above: false },
@@ -148,6 +176,7 @@ var EditorPanel = function EditorPanel(_ref) {
 
     monacoRef.current = editor;
     window.__mbeditorActiveEditor = editor;
+    setEditorReady(true);
 
     // Stash the workspace-relative path on the model so code-action providers
     // can identify which file they are operating on without needing React state.
@@ -184,7 +213,9 @@ var EditorPanel = function EditorPanel(_ref) {
 
     return function () {
       blameDecorationsRef.current = editor.deltaDecorations(blameDecorationsRef.current, []);
+      testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
       clearBlameZones(editor);
+      clearTestZones(editor);
       TabManager.saveTabViewState(tab.id, editor.saveViewState());
       if (window.__mbeditorActiveEditor === editor) {
         window.__mbeditorActiveEditor = null;
@@ -237,11 +268,35 @@ var EditorPanel = function EditorPanel(_ref) {
         fontSize: editorPrefs.fontSize || 13,
         fontFamily: editorPrefs.fontFamily || "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
         tabSize: editorPrefs.tabSize || 4,
-        insertSpaces: typeof editorPrefs.insertSpaces === 'boolean' ? editorPrefs.insertSpaces : false
+        insertSpaces: typeof editorPrefs.insertSpaces === 'boolean' ? editorPrefs.insertSpaces : false,
+        wordWrap: editorPrefs.wordWrap || 'off',
+        lineNumbers: editorPrefs.lineNumbers || 'on',
+        renderWhitespace: editorPrefs.renderWhitespace || 'none',
+        minimap: { enabled: !!(editorPrefs.minimap) },
+        scrollBeyondLastLine: !!(editorPrefs.scrollBeyondLastLine),
+        bracketPairColorization: { enabled: editorPrefs.bracketPairColorization !== false }
       });
     }
   }, [editorPrefs]);
 
+  // Ctrl-hold → column selection mode (like Notepad++)
+  useEffect(function () {
+    var editor = monacoRef.current;
+    if (!editor) return;
+    var onKeyDown = function(e) {
+      if (e.ctrlKey || e.metaKey) editor.updateOptions({ columnSelection: true });
+    };
+    var onKeyUp = function(e) {
+      if (!e.ctrlKey && !e.metaKey) editor.updateOptions({ columnSelection: false });
+    };
+    var onBlur = editor.onDidBlurEditorText(function() {
+      editor.updateOptions({ columnSelection: false });
+    });
+    var kdDisposable = editor.onKeyDown(onKeyDown);
+    var kuDisposable = editor.onKeyUp(onKeyUp);
+    return function() { kdDisposable.dispose(); kuDisposable.dispose(); onBlur.dispose(); };
+  }, [tab.id]);
+
   // Jump to line if specified
   useEffect(function () {
     if (tab.gotoLine && monacoRef.current) {
@@ -289,15 +344,16 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [markers, tab.id]);
 
-  // Reset blame state when file path changes
+  // Reset blame + test decorations when file path changes
   useEffect(function () {
     setBlameData(null);
     setIsBlameLoading(false);
 
-    // Clear stale blame render when switching files.
     if (monacoRef.current && monacoRef.current.getModel()) {
       clearBlameZones(monacoRef.current);
+      clearTestZones(monacoRef.current);
       blameDecorationsRef.current = monacoRef.current.deltaDecorations(blameDecorationsRef.current, []);
+      testDecorationIdsRef.current = monacoRef.current.deltaDecorations(testDecorationIdsRef.current, []);
     }
   }, [tab.path]);
 
@@ -413,6 +469,144 @@ var EditorPanel = function EditorPanel(_ref) {
   // Include tab.content so blame re-renders once async file contents finish loading.
   }, [blameData, isBlameVisible, tab.id, tab.content]);
 
+  // Check whether the current tab is the source file for the test that was run.
+  // e.g. testPanelFile = "test/controllers/theme_controller_test.rb"
+  //      tab.path      = "app/controllers/theme_controller.rb"
+  var isSourceForTest = function(tabPath, testFilePath) {
+    if (!tabPath || !testFilePath) return false;
+    var norm = function(p) { return p.replace(/^\/+/, ''); };
+    // Direct match (viewing the test file itself)
+    if (norm(tabPath) === norm(testFilePath)) return true;
+    // Derive the expected source path from the test file path
+    var derived = norm(testFilePath)
+      .replace(/^test\//, '').replace(/^spec\//, '')
+      .replace(/_test\.rb$/, '.rb').replace(/_spec\.rb$/, '.rb');
+    var src = norm(tabPath).replace(/^app\//, '');
+    return src === derived;
+  };
+
+  // Map a test method name to the best-matching line in the source file.
+  // Extracts keywords from the test name and scores each source line.
+  var mapTestToSourceLine = function(testName, sourceContent) {
+    var name = (testName || '').replace(/^test_/, '').replace(/^(it |should )/, '');
+    var tokens = name.split('_').filter(function(t) { return t.length > 1; });
+    if (tokens.length === 0) return 1;
+
+    var lines = sourceContent.split('\n');
+    var bestLine = 1;
+    var bestScore = 0;
+
+    lines.forEach(function(line, idx) {
+      var lineNum = idx + 1;
+      var lower = line.toLowerCase();
+      var score = 0;
+      tokens.forEach(function(tok) {
+        if (lower.indexOf(tok.toLowerCase()) !== -1) score++;
+      });
+      // Prefer def/attr/constant lines
+      if (score > 0 && (/\bdef\b/.test(lower) || /\battr_/.test(lower) || /^  [A-Z]/.test(line))) {
+        score += 0.5;
+      }
+      if (score > bestScore) { bestScore = score; bestLine = lineNum; }
+    });
+
+    return bestLine;
+  };
+
+  // Render test result annotations above source lines (same pattern as blame zones).
+  useEffect(function () {
+    if (!monacoRef.current || !window.monaco) return;
+
+    var editor = monacoRef.current;
+    var model = editor.getModel();
+    var lineCount = model ? model.getLineCount() : 0;
+
+    var showHere = testPanelFile && tab.path && isSourceForTest(tab.path, testPanelFile);
+
+    if (!testResult || !testInlineVisible || !showHere) {
+      clearTestZones(editor);
+      testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
+      return;
+    }
+
+    try {
+      clearTestZones(editor);
+      testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
+
+      var normPath = function(p) { return p ? p.replace(/^\/+/, '') : ''; };
+      var viewingTestFile = normPath(tab.path) === normPath(testPanelFile);
+
+      var tests = testResult.tests || [];
+      var testsWithStatus = tests.filter(function (t) {
+        return t.status === 'pass' || t.status === 'fail' || t.status === 'error';
+      });
+
+      if (testsWithStatus.length === 0) return;
+
+      // Determine line number for each test
+      var sourceContent = tab.content || '';
+      var mapped = testsWithStatus.map(function(t) {
+        var line;
+        if (viewingTestFile && t.line && t.line >= 1 && t.line <= lineCount) {
+          line = t.line;
+        } else {
+          line = mapTestToSourceLine(t.name, sourceContent);
+        }
+        return { name: t.name, status: t.status, message: t.message, line: line };
+      });
+
+      // Sort by line so zones appear in order
+      mapped.sort(function(a, b) { return a.line - b.line; });
+
+      var zoneIds = [];
+      var decorations = [];
+
+      editor.changeViewZones(function(accessor) {
+        mapped.forEach(function(t) {
+          if (t.line < 1 || t.line > lineCount) return;
+
+          var isPassing = t.status === 'pass';
+          var icon = isPassing ? '\u2713' : '\u2717';
+          var label = icon + '  ' + (t.name || 'Test');
+          if (!isPassing && t.message) {
+            label += ' \u2014 ' + t.message.split('\n')[0];
+          }
+
+          var header = document.createElement('div');
+          header.className = isPassing
+            ? 'ide-test-zone-header ide-test-zone-pass'
+            : 'ide-test-zone-header ide-test-zone-fail';
+          header.textContent = label;
+
+          var zoneId = accessor.addZone({
+            afterLineNumber: t.line > 1 ? t.line - 1 : 0,
+            heightInLines: 1,
+            domNode: header,
+            suppressMouseDown: true
+          });
+          zoneIds.push(zoneId);
+
+          decorations.push({
+            range: new window.monaco.Range(t.line, 1, t.line, 1),
+            options: {
+              isWholeLine: true,
+              className: isPassing ? 'ide-test-line-pass' : 'ide-test-line-fail',
+              stickiness: 1
+            }
+          });
+        });
+      });
+
+      testZoneIdsRef.current = zoneIds;
+      testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, decorations);
+    } catch (err) {
+      clearTestZones(editor);
+      testDecorationIdsRef.current = editor.deltaDecorations(testDecorationIdsRef.current, []);
+    }
+
+  // Include tab.content so zones re-render once async file content loads (same as blame).
+  }, [testResult, testInlineVisible, testPanelFile, tab.id, tab.path, tab.content]);
+
   var sourceTab = tab.isPreview ? findTabByPath(tab.previewFor) : null;
   var markdownContent = tab.isPreview ? sourceTab && sourceTab.content || tab.content || '' : tab.content || '';
 
@@ -443,7 +637,8 @@ var EditorPanel = function EditorPanel(_ref) {
       path: tab.repoPath || tab.path,
       original: tab.diffOriginal || "",
       modified: tab.diffModified || "",
-      isDark: isDiffDark
+      isDark: isDiffDark,
+      editorPrefs: editorPrefs
     });
   }
 
@@ -474,10 +669,21 @@ var EditorPanel = function EditorPanel(_ref) {
   return React.createElement(
     'div',
     { className: 'ide-editor-wrapper', style: { display: 'flex', flexDirection: 'column', height: '100%' } },
-    gitAvailable && React.createElement(
+    (gitAvailable || testAvailable) && React.createElement(
       'div',
-      { className: 'ide-editor-toolbar', style: { display: 'flex', justifyContent: 'flex-end', padding: '4px 8px', background: '#252526', borderBottom: '1px solid #3c3c3c' } },
-      React.createElement(
+      { className: 'ide-editor-toolbar', style: { display: 'flex', justifyContent: 'flex-end', padding: '4px 8px', background: '#252526', borderBottom: '1px solid #3c3c3c', gap: '4px' } },
+      gitAvailable && tab.path && React.createElement(
+        'button',
+        {
+          className: 'ide-icon-btn',
+          onClick: function() { if (onShowHistory) onShowHistory(tab.path); },
+          title: 'File History',
+          style: { fontSize: '12px', padding: '2px 6px', opacity: 0.6, background: 'transparent', border: 'none', color: '#ccc', cursor: 'pointer', borderRadius: '3px' }
+        },
+        React.createElement('i', { className: 'fas fa-history', style: { marginRight: '6px' } }),
+        'History'
+      ),
+      gitAvailable && React.createElement(
         'button',
         {
           className: 'ide-icon-btn ' + (isBlameVisible ? 'active' : ''),
@@ -489,6 +695,18 @@ var EditorPanel = function EditorPanel(_ref) {
         },
         React.createElement('i', { className: 'fas fa-shoe-prints', style: { marginRight: '6px' } }),
         isBlameLoading ? 'Loading...' : 'Blame'
+      ),
+      testAvailable && tab.path && tab.path.endsWith('.rb') && React.createElement(
+        'button',
+        {
+          className: 'ide-icon-btn',
+          onClick: function() { if (onRunTest) onRunTest(); },
+          disabled: testLoading,
+          title: 'Run Tests',
+          style: { fontSize: '12px', padding: '2px 6px', opacity: testLoading ? 1 : 0.6, background: 'transparent', border: 'none', color: '#ccc', cursor: testLoading ? 'wait' : 'pointer', borderRadius: '3px' }
+        },
+        React.createElement('i', { className: testLoading ? 'fas fa-spinner fa-spin' : 'fas fa-flask', style: { marginRight: '6px' } }),
+        testLoading ? 'Running...' : 'Test'
       )
     ),
     React.createElement('div', { ref: editorRef, className: 'monaco-container', style: { flex: 1, minHeight: 0 } })

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

@@ -35,8 +35,12 @@ var FileHistoryPanel = function FileHistoryPanel(_ref) {
   }, [path]);
 
   return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement('div', { className: 'ide-modal-backdrop', onClick: onClose }),
+    React.createElement(
     'div',
-    { className: 'ide-file-history' },
+    { className: 'ide-modal-panel' },
     React.createElement(
       'div',
       { className: 'ide-file-history-header' },
@@ -106,6 +110,7 @@ var FileHistoryPanel = function FileHistoryPanel(_ref) {
         })
       )
     )
+  )
   );
 };
 

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

@@ -39,6 +39,17 @@ var FileTree = function FileTree(_ref) {
 
   var inlineRef = useRef(null);
   var committedRef = useRef(false);
+  var containerRef = useRef(null);
+
+  // Scroll the highlighted node into view when selectedPath changes (e.g. Find in Explorer)
+  useEffect(function () {
+    if (!selectedPath || !containerRef.current) return;
+    var timer = setTimeout(function () {
+      var el = containerRef.current && containerRef.current.querySelector('.tree-item.selected');
+      if (el) el.scrollIntoView({ block: 'nearest' });
+    }, 60);
+    return function () { clearTimeout(timer); };
+  }, [selectedPath]);
 
   var renameSelectionEnd = function renameSelectionEnd(name) {
     var value = String(name || '');
@@ -278,7 +289,7 @@ var FileTree = function FileTree(_ref) {
 
   return React.createElement(
     'div',
-    { className: 'file-tree-root' },
+    { className: 'file-tree-root', ref: containerRef },
     renderTree(items, '')
   );
 };