mbeditor 0.1.5 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 414b42474453e80d58cfafbab5db7d5381dd8ebb22ba1e852a10e720eb246d8a
-  data.tar.gz: 0fbaffaedc1aed6196589975816fb9b009df7f4a810dcc41e3aa428d8e19ee37
+  metadata.gz: 2f9731ab7001f6b719f901bfa718ca47ae3ea9d38134a03a3602bdf31bcb6100
+  data.tar.gz: 8883cc001b712a8ce976a3bdd4b639e6c92fab9db54b1e1f0950204c104a2975
 SHA512:
-  metadata.gz: 4bab09aab7ae92d7835838d3c4b240915d0c3ff0c3fc32516a69bdad24430246c86c0da3f508946e9c738ca94a0966d7457903ba9095000a4f01643ca298dbe7
-  data.tar.gz: 522f1e56c9c280ccf9078f9f960ad1c3e3f1d1f99fafc2e9d80c18d539cd6ba409d18cb596b434037e551403623b74c54c7f2f4dfe8c03c90760eebe8b51862c
+  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.
@@ -47,12 +48,17 @@ mount Mbeditor::Engine, at: "/mbeditor"
 Use a single initializer to set the engine options you need:
 
 ```ruby
-MBEditor.configure do |config|
+Mbeditor.configure do |config|
   config.allowed_environments = [:development]
   # config.workspace_root = Rails.root
   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,17 +72,51 @@ 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 |
+|----------|--------|
+| `Ctrl+P` | Quick-open file by name |
+| `Ctrl+S` | Save the active file |
+| `Ctrl+Shift+S` | Save all dirty files |
+| `Alt+Shift+F` | Format the active file |
+| `Ctrl+Shift+G` | Toggle the git panel |
+| `Ctrl+Z` / `Ctrl+Y` | Undo / Redo (Monaco built-in) |
+
 ## Host Requirements (Optional)
 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`).
@@ -99,6 +139,10 @@ The gem includes syntax highlighting for common Rails and React development file
 
 These language modules are packaged locally with the gem for true offline operation. No network fallback is needed—all highlighting works without internet connectivity.
 
+## Asset Pipeline
+
+Mbeditor requires **Sprockets** (`sprockets-rails >= 3.4`). Host apps using **Propshaft** as their asset pipeline are not supported — the engine depends on Sprockets directives to load its JavaScript and CSS assets.
+
 ## Development
 
 A minimal dummy Rails app is included for local development and testing:

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,9 +15,19 @@ 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);
   var monacoRef = useRef(null);
+  var latestContentRef = useRef('');
 
   var _useState = useState('');
   var _useState2 = _slicedToArray(_useState, 2);
@@ -41,6 +51,27 @@ 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;
@@ -116,16 +147,19 @@ var EditorPanel = function EditorPanel(_ref) {
     var editor = window.monaco.editor.create(editorRef.current, {
       value: tab.content,
       language: language,
-      theme: 'vs-dark',
+      theme: editorPrefs.theme || 'vs-dark',
       automaticLayout: true,
-      minimap: { enabled: false },
+      minimap: { enabled: !!(editorPrefs.minimap) },
       renderLineHighlight: 'none',
-      bracketPairColorization: { enabled: true },
-      fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace",
-      fontSize: 13,
-      tabSize: 4,
-      insertSpaces: true,
-      wordWrap: 'on',
+      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: 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 },
@@ -142,8 +176,22 @@ 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.
     var modelObj = editor.getModel();
+    if (modelObj) modelObj._mbeditorPath = tab.path;
+
+    var formatActionDisposable = editor.addAction({
+      id: 'mbeditor.formatDocument',
+      label: 'Format Document',
+      contextMenuGroupId: '1_modification',
+      contextMenuOrder: 1.5,
+      run: function() {
+        if (onFormatRef.current) onFormatRef.current();
+      }
+    });
 
     var editorPluginDisposable = null;
     if (window.MbeditorEditorPlugins && window.MbeditorEditorPlugins.attachEditorFeatures) {
@@ -153,7 +201,7 @@ var EditorPanel = function EditorPanel(_ref) {
     // Change listener
     var contentDisposable = modelObj.onDidChangeContent(function (e) {
       var val = editor.getValue();
-      var currentContent = monacoRef.current._latestContent || '';
+      var currentContent = latestContentRef.current;
 
       // Normalize before comparing to prevent false positive dirty edits
       var vNorm = val.replace(/\r\n/g, '\n');
@@ -165,12 +213,15 @@ 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;
       }
       if (editorPluginDisposable) editorPluginDisposable.dispose();
+      formatActionDisposable.dispose();
       contentDisposable.dispose();
       editor.dispose();
     };
@@ -179,7 +230,7 @@ var EditorPanel = function EditorPanel(_ref) {
   // Listen for external content changes (e.g. after Format/Save/Load)
   useEffect(function () {
     var editor = monacoRef.current;
-    if (editor) editor._latestContent = tab.content; // update ref for closure
+    if (editor) latestContentRef.current = tab.content; // keep ref in sync for closure
 
     if (editor && editor.getValue() !== tab.content) {
       if (typeof tab.content !== 'string') return;
@@ -207,6 +258,45 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [tab.content]);
 
+  // Apply editorPrefs changes to a running editor without remounting
+  useEffect(function () {
+    if (!window.monaco) return;
+    var theme = editorPrefs.theme || 'vs-dark';
+    window.monaco.editor.setTheme(theme);
+    if (monacoRef.current) {
+      monacoRef.current.updateOptions({
+        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,
+        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) {
@@ -230,8 +320,13 @@ var EditorPanel = function EditorPanel(_ref) {
       var model = monacoRef.current.getModel();
       if (model) {
         var monacoMarkers = markers.map(function (m) {
+          var sev = m.severity === 'error'
+            ? window.monaco.MarkerSeverity.Error
+            : window.monaco.MarkerSeverity.Warning;
           return {
-            severity: m.severity === 'error' ? window.monaco.MarkerSeverity.Error : window.monaco.MarkerSeverity.Warning,
+            severity: sev,
+            source: 'rubocop',
+            code: m.copName || '',
             message: m.message,
             startLineNumber: m.startLine,
             startColumn: m.startCol,
@@ -240,19 +335,25 @@ var EditorPanel = function EditorPanel(_ref) {
           };
         });
         window.monaco.editor.setModelMarkers(model, 'rubocop', monacoMarkers);
+        // Track which cops are autocorrectable so the quick-fix provider can
+        // skip lightbulbs for cops that can never be machine-fixed.
+        model._mbeditorCorrectableCops = new Set(
+          markers.filter(function(m) { return m.correctable && m.copName; }).map(function(m) { return m.copName; })
+        );
       }
     }
   }, [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]);
 
@@ -368,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 || '';
 
@@ -393,12 +632,13 @@ var EditorPanel = function EditorPanel(_ref) {
   }, [markdownContent, isMarkdown]);
 
   if (tab.isDiff) {
-    var isDiffDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches || true;
+    var isDiffDark = (editorPrefs.theme || 'vs-dark') !== 'vs' && (editorPrefs.theme || 'vs-dark') !== 'hc-light';
     return React.createElement(window.DiffViewer || DiffViewer, {
       path: tab.repoPath || tab.path,
       original: tab.diffOriginal || "",
       modified: tab.diffModified || "",
-      isDark: isDiffDark
+      isDark: isDiffDark,
+      editorPrefs: editorPrefs
     });
   }
 
@@ -429,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' : ''),
@@ -444,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, '')
   );
 };