mbeditor 0.9.0 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2612297fd4760bf7660ab89589c549ff6a815df395e4f57fb48d6f60c1c519b8
-  data.tar.gz: d9bf030f5f056754bfe8c633253aba3013c7405aaba259628c0e7aa5e7b19aff
+  metadata.gz: 1fe258515a6f0945da8bfcbfbe85197262af224c054924367597d97d370530e2
+  data.tar.gz: d3f65b3c351fef56291170d9401103d9b73d4b3a7ebad24885713b8deef5df85
 SHA512:
-  metadata.gz: 8660eda73b4cb4e3d38ab7c820286a363340e6a65592e66817c5b0594374e60532769c06999fb9a099b6082ee99f4fd1f604ec6116908f63317daed1153780d7
-  data.tar.gz: b27df09cb524a48508285abe5892b8f261f44efaa471fe580a839be1e3f2064d385848aa4e2b488af812d88b3181ee9f51e26c3e3cb84bc79353c619184ddd80
+  metadata.gz: 4de0d8f9374a370f4df1339166ff648013dafb07b23eeba6936f3ebf1d492c831905d7143d5ece2ece4e397f4f4b314b7461e496cec00003c507db5701347604
+  data.tar.gz: 17c4ef992175fc0a5fd8f18102214ac46cce75963ba7d06661f3ffac66eb7e7d55e69bef6c6f71e3ddb9999839c78fd9a2668abb99397442ac7bfb68da6ee561

data/CHANGELOG.md

@@ -5,6 +5,64 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.10.0] - 2026-07-27
+
+### Added
+- **Git-status line numbers** — line numbers are tinted by what git thinks of
+  the line: green for added, orange for modified, red on the line a deleted
+  block sat after. Backed by a new `GET /mbeditor/git/line_diff` endpoint over
+  `git diff -U0`, and never a reason to fail a file load: a missing HEAD or a
+  non-repo simply leaves the numbers plain.
+- **Problems panel** — error and warning counts in the status bar open a
+  drawer listing every diagnostic across the open files, grouped by file with
+  the offending source line and click-to-navigate. Counts cover the open tabs,
+  which is where Monaco's markers live; RuboCop, ruby-lsp and the TypeScript
+  worker all feed it through one subscription.
+- **Outline for JS, JSX and TypeScript** — the Methods/Outline button now
+  works in those files, translating the TypeScript worker's own navigation
+  tree rather than adding a second lexer. Arrow functions and function
+  expressions assigned to variables are listed; data constants, object-literal
+  keys and anonymous callbacks are not.
+- **Colour-coded Rails log** — the log drawer distinguishes request
+  boundaries, controller dispatch, SQL, renders, redirects and failures, with
+  `Completed` lines coloured by status code.
+- **Optional workspace file watching** — with the host's
+  [`listen`](https://github.com/guard/listen) gem, changes made outside the
+  editor (a terminal `git checkout`, a generator, another editor) refresh the
+  file tree and git decorations instead of going stale. Absent the gem,
+  behaviour is unchanged. Configurable via `config.watch_files`.
+
+### Fixed
+- **ruby-lsp hover showed a dead link.** ruby-lsp renders its "Definitions"
+  line as VS Code `file://` links, which Monaco draws as links but nothing in
+  the browser can open, so clicking did nothing. In-workspace links are now
+  rewritten to a Monaco command that opens the file at the line; gem and
+  stdlib links, which the editor cannot open at all, degrade to plain code
+  spans. The `/module_members` breakdown is also restored beneath a constant
+  hover — ruby-lsp's constant hover never lists what the class or module
+  defines, so taking its output wholesale had dropped it.
+- **False-positive type errors in plain JS/JSX.** The editor kept a denylist
+  of TypeScript diagnostic codes to suppress; it had grown to eight and still
+  leaked (TS2322 on a spread carrying an extra prop). Untyped JS gives
+  TypeScript nothing to check against, and which way it guesses is arbitrary —
+  state seeded with `useState({})` errors on every key while the same object
+  from `JSON.parse` stays silent. JS/JSX now keeps only the checks that are
+  sound without annotations: syntax errors, `Cannot find name`, and unused
+  locals. `.ts`/`.tsx` keeps full checking, where the types are hand-written.
+
+### Changed
+- The **Logs** button moved from the top toolbar to the status bar.
+- **Quick-open ranks recently opened files** above the static file-type tier,
+  so a file you were just in outranks a never-opened controller. Match quality
+  still comes first, so a worse match cannot jump the queue.
+- The title-bar search field now fills 75% of the space between the title and
+  the toolbar buttons instead of a fixed 340px.
+- Test-suite compatibility fixes carried over from the unreleased 0.9.1/0.9.2
+  work: MiniRacer-dependent parser suites skip in minimal bundles, and the
+  Outline system tests exercise navigation through click semantics.
+
+---
+
 ## [0.9.0] - 2026-07-23
 
 ### Added

data/README.md

@@ -9,9 +9,14 @@ Mbeditor (Mini Browser Editor) is a mountable Rails engine that adds a browser-b
 - Two-pane tabbed editor with drag-to-move tabs
 - File tree and project search
 - Git panel with working tree changes, unpushed file changes, and branch commit titles
+- Line numbers tinted by git status — green for added lines, orange for modified, red where lines were removed
+- Problems panel with error/warning counts in the status bar, listing every diagnostic across the open files
+- Outline dropdown for Ruby (methods, and test/spec structure in test files) and for JS/JSX/TS
+- Colour-coded Rails log drawer
 - Optional RuboCop lint and format endpoints (uses host app RuboCop)
 - Optional Ruby language-server integration (definitions, hover, completion, diagnostics)
 - Optional test runner with inline failure markers and a dedicated results panel (Minitest and RSpec)
+- Optional workspace file watching, so changes made outside the editor refresh the tree and git decorations
 
 ## Security Warning
 Mbeditor exposes read and write access to your Rails application directory over HTTP. It is intended only for local development.
@@ -96,6 +101,7 @@ end
 | `ruby_lsp` | `:auto` | Use the host's [ruby-lsp](https://github.com/Shopify/ruby-lsp) for Ruby go-to-definition, hover, completion, and diagnostics when it's installed (a persistent process is managed per workspace). `false` disables. Without ruby-lsp everything degrades to the built-in grep/Ripper services — no behavior change. |
 | `ruby_lsp_command` | `nil` | Override the ruby-lsp launch command (String or Array). `nil` auto-resolves `bin/ruby-lsp` → installed gem → `bundle exec ruby-lsp`. |
 | `ruby_lsp_timeout` | `3` | Seconds per LSP request; on timeout (e.g. during initial indexing) the editor falls back to the built-in services for that request. |
+| `watch_files` | `:auto` | Watch the workspace for changes made outside the editor (a terminal `git checkout`, a generator, another editor) and push a refresh to open clients. Requires the host's [`listen`](https://github.com/guard/listen) gem; without it the editor behaves as before and only announces its own writes. `false` disables. |
 
 ### Authentication
 
@@ -199,9 +205,34 @@ The gem keeps host/tooling responsibilities in the host app:
 - `minitest` or `rspec` in the host app's bundle (required for the test runner)
 - `actioncable` framework/gem (optional, required only for realtime file-change push + websocket state saves)
 - `ruby-lsp` gem (optional — see below)
+- `listen` gem (optional — see below)
 
 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.
 
+### Workspace file watching (Optional)
+
+Add [`listen`](https://github.com/guard/listen) to the host app's development
+group and mbeditor watches the workspace for changes it did not make itself:
+
+```ruby
+group :development do
+  gem 'listen'
+end
+```
+
+Without it, only writes made *through* the editor announce themselves, so a
+`git checkout` or a generator run in a terminal leaves the file tree and the
+git line-number colours stale until you reopen the file. With it, those refresh
+on their own.
+
+The watcher runs only in `allowed_environments` and only in processes that
+serve requests, so rake tasks and consoles never start one. It respects
+`excluded_paths`, coalesces bursts (a branch switch is one refresh, not
+hundreds), and requires Action Cable to actually deliver the push. If it cannot
+start — inotify limits, permissions — it logs a warning and the editor carries
+on exactly as it would without the gem. Set `config.watch_files = false` to
+disable it even when `listen` is present.
+
 ### Ruby language server (Optional)
 
 Add [ruby-lsp](https://github.com/Shopify/ruby-lsp) to the host app's

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

@@ -12,6 +12,7 @@
 //= require mbeditor/color_provider
 //= require mbeditor/editor_plugins
 //= require mbeditor/ruby_outline
+//= require mbeditor/js_outline
 //= require mbeditor/components/CollapsibleSection
 //= require mbeditor/components/ShortcutHelp
 //= require mbeditor/components/DiffViewer
@@ -21,6 +22,7 @@
 //= require mbeditor/components/FileHistoryPanel
 //= require mbeditor/components/TestResultsPanel
 //= require mbeditor/components/LogPanel
+//= require mbeditor/components/ProblemsPanel
 //= require mbeditor/components/CodeReviewPanel
 //= require mbeditor/components/EditorPanel
 //= require mbeditor/components/FileTree

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

@@ -69,6 +69,7 @@ var EditorPanel = function EditorPanel(_ref) {
   var setIsBlameLoading = _useState8[1];
 
   var blameDecorationsRef = useRef([]);
+  var gitLineDecorationsRef = useRef([]);
   var blameZoneIdsRef = useRef([]);
   var testDecorationIdsRef = useRef([]);
   var testZoneIdsRef = useRef([]);
@@ -105,6 +106,8 @@ var EditorPanel = function EditorPanel(_ref) {
 
   var methodsBtnRef = useRef(null);
   var methodsDropdownRef = useRef(null);
+  // Discards a JS outline that resolves after the dropdown was closed or reopened.
+  var methodsRequestRef = useRef(0);
 
   // Local pagination state — initialized from tab props; updated on page navigation
   var _useState21 = useState(tab.startLine || 0);
@@ -1281,6 +1284,80 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [tab.path]);
 
+  // Tint line numbers by git status: green added, orange modified, red where
+  // lines were removed.
+  //
+  // The ranges come from `git diff -U0` against HEAD, so they describe the file
+  // as last written to disk. Monaco anchors decorations to the model and shifts
+  // them as you type, which keeps them roughly right mid-edit; the authoritative
+  // refresh happens when the file lands on disk and the server broadcasts it.
+  useEffect(function () {
+    if (!gitAvailable || !tab.path || tab.isDiff || tab.isCombinedDiff) return;
+
+    var cancelled = false;
+
+    function clear() {
+      if (!monacoRef.current || !monacoRef.current.getModel()) return;
+      gitLineDecorationsRef.current =
+        monacoRef.current.deltaDecorations(gitLineDecorationsRef.current, []);
+    }
+
+    function apply(data) {
+      var editor = monacoRef.current;
+      var model = editor && editor.getModel();
+      if (!model || !window.monaco) return;
+
+      var lineCount = model.getLineCount();
+      var decorations = [];
+
+      function push(ranges, className) {
+        (ranges || []).forEach(function (range) {
+          // A deletion above the first line is reported as line 0; mark line 1
+          // so the file's opening line carries the flag.
+          var start = Math.max(1, Math.min(range.start, lineCount));
+          var end = Math.max(start, Math.min(range.end, lineCount));
+          for (var line = start; line <= end; line++) {
+            decorations.push({
+              range: new window.monaco.Range(line, 1, line, 1),
+              options: { isWholeLine: true, lineNumberClassName: className }
+            });
+          }
+        });
+      }
+
+      push(data.added, 'mbeditor-gitline-added');
+      push(data.modified, 'mbeditor-gitline-modified');
+      push(data.deleted, 'mbeditor-gitline-deleted');
+
+      gitLineDecorationsRef.current =
+        editor.deltaDecorations(gitLineDecorationsRef.current, decorations);
+    }
+
+    function refresh() {
+      var path = tab.path;
+      GitService.fetchLineDiff(path).then(function (data) {
+        // The tab can be switched or closed while the request is in flight.
+        if (cancelled || !data || tab.path !== path) return;
+        apply(data);
+      }).catch(function () {
+        // Not a repo, file not readable, git missing — leave the numbers plain.
+        if (!cancelled) clear();
+      });
+    }
+
+    refresh();
+
+    var hasSocket = typeof WebSocketService !== 'undefined' && WebSocketService.onFilesChanged;
+    var onChanged = hasSocket ? function () { refresh(); } : null;
+    if (onChanged) WebSocketService.onFilesChanged(onChanged);
+
+    return function () {
+      cancelled = true;
+      if (onChanged && WebSocketService.offFilesChanged) WebSocketService.offFilesChanged(onChanged);
+      clear();
+    };
+  }, [tab.path, tab.externalContentVersion, tab.isDiff, tab.isCombinedDiff, gitAvailable]);
+
   // Handle Blame data fetching
   useEffect(function () {
     if (!isBlameVisible) {
@@ -1612,6 +1689,8 @@ var EditorPanel = function EditorPanel(_ref) {
   var fileBaseName = (tab.path || '').split('/').pop().toLowerCase();
   var isRubyFile = ext === 'rb' || ext === 'ruby' || ext === 'gemspec' || ext === 'rake' ||
     fileBaseName === 'gemfile' || fileBaseName === 'gemfile.lock' || fileBaseName === 'rakefile';
+  var isJsFile = ['js', 'jsx', 'mjs', 'cjs', 'ts', 'tsx'].indexOf(ext) !== -1;
+  var hasOutline = isRubyFile || isJsFile;
   var isTestOutline = false;
   try {
     isTestOutline = isRubyFile && window.RubyOutline &&
@@ -1695,6 +1774,33 @@ var EditorPanel = function EditorPanel(_ref) {
     return window.RubyOutline.parse(lines, { path: path });
   }
 
+  // The JS/TS outline comes from the TypeScript worker rather than a lexer of
+  // our own, which makes it async — the worker is where the parse already
+  // lives, and it tracks the live buffer, so unsaved edits are included.
+  function loadJsOutline(model) {
+    var ts = window.monaco && window.monaco.languages && window.monaco.languages.typescript;
+    if (!ts || !window.JsOutline) return Promise.reject(new Error('outline unavailable'));
+
+    var workerFor = model.getLanguageId() === 'typescript' ? ts.getTypeScriptWorker : ts.getJavaScriptWorker;
+    return workerFor().then(function (getWorker) {
+      return getWorker(model.uri);
+    }).then(function (client) {
+      return client.getNavigationTree(model.uri.toString());
+    }).then(function (tree) {
+      return window.JsOutline.fromNavigationTree(tree, {
+        lineAt: function (offset) { return model.getPositionAt(offset).lineNumber; },
+        textAt: function (offset, length) {
+          var start = model.getPositionAt(offset);
+          var end = model.getPositionAt(offset + length);
+          return model.getValueInRange({
+            startLineNumber: start.lineNumber, startColumn: start.column,
+            endLineNumber: end.lineNumber, endColumn: end.column
+          });
+        }
+      });
+    });
+  }
+
   if (tab.fileNotFound) {
     return React.createElement(
       'div',
@@ -1834,31 +1940,55 @@ var EditorPanel = function EditorPanel(_ref) {
         React.createElement('i', { className: 'fas fa-history', style: { marginRight: editorPrefs.toolbarIconOnly ? 0 : '5px', flexShrink: 0 } }),
         !editorPrefs.toolbarIconOnly && React.createElement('span', { className: 'ide-toolbar-label' }, 'History')
       ),
-      isRubyFile && React.createElement(
+      hasOutline && React.createElement(
         'button',
         {
           ref: methodsBtnRef,
           className: 'ide-icon-btn' + (methodsOpen ? ' active' : ''),
           onClick: function() {
-            var nextOpen = !methodsOpen;
-            if (nextOpen) {
-              var model = monacoRef.current && monacoRef.current.getModel();
-              try {
-                var result = model ? parseRubyOutline(model, tab.path) : { entries: [], truncated: false };
-                setMethodsList(result.entries || []);
-                setMethodsTruncated(!!result.truncated);
-                setMethodsUnavailable(false);
-              } catch (err) {
-                setMethodsList([]);
-                setMethodsTruncated(false);
-                setMethodsUnavailable(true);
-              }
+            // Bump first: a click that closes the dropdown must also cancel an
+            // outline request still in flight from the click that opened it.
+            var requestId = ++methodsRequestRef.current;
+            if (methodsOpen) {
+              setMethodsOpen(false);
+              return;
+            }
+
+            var model = monacoRef.current && monacoRef.current.getModel();
+
+            function openWith(entries, truncated, unavailable) {
+              setMethodsList(entries);
+              setMethodsTruncated(truncated);
+              setMethodsUnavailable(unavailable);
               if (methodsBtnRef.current) {
                 var rect = methodsBtnRef.current.getBoundingClientRect();
                 setMethodsDropdownPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
               }
+              setMethodsOpen(true);
+            }
+
+            if (isJsFile) {
+              // The worker has already parsed the open buffer for diagnostics,
+              // so this resolves in a few ms — opening only once it answers
+              // avoids flashing "No methods found" on the way.
+              (model ? loadJsOutline(model) : Promise.resolve({ entries: [], truncated: false }))
+                .then(function (result) {
+                  if (methodsRequestRef.current !== requestId) return;
+                  openWith(result.entries || [], !!result.truncated, false);
+                })
+                .catch(function () {
+                  if (methodsRequestRef.current !== requestId) return;
+                  openWith([], false, true);
+                });
+              return;
+            }
+
+            try {
+              var result = model ? parseRubyOutline(model, tab.path) : { entries: [], truncated: false };
+              openWith(result.entries || [], !!result.truncated, false);
+            } catch (err) {
+              openWith([], false, true);
             }
-            setMethodsOpen(nextOpen);
           },
           title: isTestOutline ? 'Jump to Outline' : 'Jump to Method'
         },
@@ -2099,7 +2229,9 @@ var EditorPanel = function EditorPanel(_ref) {
                 var row = React.createElement(
                   'button',
                   {
-                    key: entry.kind + '-' + entry.line,
+                    // Index-qualified: a JS class and its first member can share
+                    // a line, and kind+line alone would collide.
+                    key: entry.kind + '-' + entry.line + '-' + entryIndex,
                     type: 'button',
                     className: 'ide-methods-dropdown-item ide-outline-entry ide-outline-entry-' + entry.kind,
                     'data-outline-kind': entry.kind,

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

@@ -3,6 +3,49 @@
 // LogPanel — bottom drawer that renders the live Rails log. Auto-scrolls to the
 // tail, pauses auto-scroll when the user scrolls up, and supports a substring
 // filter and clear. Driven entirely by LogService.
+
+// Classify one Rails log line so CSS can colour it. First match wins, so the
+// order matters: "Completed 500" has to be read as an error before the generic
+// /error/ sweep at the bottom claims it, and a SQL line mentioning "error" in a
+// string literal must not turn the whole row red.
+//
+// Rails writes these lines without ANSI codes when the log goes to a file, so
+// there is nothing to parse — this is pattern matching on the text, and an
+// unrecognised line simply renders in the default colour.
+var LOG_LINE_RULES = [
+  // Request lifecycle. The status code decides the colour of a Completed line.
+  [/^Completed [45]\d\d\b/, 'error'],
+  [/^Completed 3\d\d\b/, 'muted'],
+  [/^Completed 2\d\d\b/, 'success'],
+  [/^Started [A-Z]+ /, 'request'],
+  [/^Processing by /, 'controller'],
+  [/^Redirected to /, 'muted'],
+  [/^\s*(Rendering|Rendered) /, 'render'],
+  // Queries: "User Load (0.3ms) SELECT ..." and its CACHE/TRANSACTION variants.
+  [/^\s*(CACHE\s+)?[\w:]+\s*(Load|Create|Update|Destroy|Exists\?|Count|Pluck|Sum|Delete)?\s*\(\d+(\.\d+)?ms\)\s+(SELECT|INSERT|UPDATE|DELETE|BEGIN|COMMIT|ROLLBACK|SAVEPOINT|RELEASE)\b/i, 'sql'],
+  [/^\s*(TRANSACTION|SQL)\s+\(/, 'sql'],
+  // Failures and noise.
+  [/^\s*(FATAL|ERROR)\b/, 'error'],
+  [/^\s*[\w/.]+:\d+:in [`']/, 'trace'],
+  [/DEPRECATION WARNING/, 'warn'],
+  [/^\s*(WARN|WARNING)\b/, 'warn'],
+  // Rails prints an unhandled exception as "Some::ConstantName (message):",
+  // which carries no Error/Exception in its name often enough to need its own
+  // rule (ActiveRecord::RecordNotFound, ActionController::RoutingError…).
+  [/^\s*[A-Z][A-Za-z0-9_]*(::[A-Z][A-Za-z0-9_]*)*\s+\(.*\):\s*$/, 'error'],
+  [/\b\w*(Error|Exception)\b\s*[:(]/, 'error'],
+  // mbeditor's own diagnostics, so they stand out from host app noise.
+  [/^\s*\[mbeditor\]/, 'mbeditor']
+];
+
+function classifyLogLine(line) {
+  var text = String(line == null ? '' : line);
+  for (var i = 0; i < LOG_LINE_RULES.length; i++) {
+    if (LOG_LINE_RULES[i][0].test(text)) return LOG_LINE_RULES[i][1];
+  }
+  return null;
+}
+
 var LogPanel = function LogPanel(_ref) {
   var onClose = _ref.onClose;
 
@@ -118,10 +161,16 @@ var LogPanel = function LogPanel(_ref) {
       'div',
       { className: 'ide-log-body', ref: bodyRef, onScroll: onScroll },
       shown.map(function (line, i) {
-        return React.createElement('div', { className: 'ide-log-line', key: i }, line);
+        var kind = classifyLogLine(line);
+        return React.createElement('div', {
+          className: 'ide-log-line' + (kind ? ' ide-log-line-' + kind : ''),
+          key: i
+        }, line);
       })
     )
   );
 };
 
+LogPanel.classifyLine = classifyLogLine;
+
 window.LogPanel = LogPanel;

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

@@ -440,6 +440,17 @@ var MbeditorApp = function MbeditorApp() {
   var showLogPanel = _useStateLog2[0];
   var setShowLogPanel = _useStateLog2[1];
 
+  var _useStateProblems = useState(false);
+  var _useStateProblems2 = _slicedToArray(_useStateProblems, 2);
+  var showProblemsPanel = _useStateProblems2[0];
+  var setShowProblemsPanel = _useStateProblems2[1];
+
+  // Error/warning tallies across the open tabs, mirrored into the status bar.
+  var _useStateProblemCounts = useState({ errors: 0, warnings: 0 });
+  var _useStateProblemCounts2 = _slicedToArray(_useStateProblemCounts, 2);
+  var problemCounts = _useStateProblemCounts2[0];
+  var setProblemCounts = _useStateProblemCounts2[1];
+
   var _useState18g = useState(320);
   var _useState18g2 = _slicedToArray(_useState18g, 2);
   var gitPanelWidth = _useState18g2[0];
@@ -1536,6 +1547,31 @@ var MbeditorApp = function MbeditorApp() {
     };
   }, []);
 
+  // Keep the status-bar error/warning tallies in step with Monaco's markers.
+  // Every diagnostic source in the editor — rubocop, ruby-lsp, the TypeScript
+  // worker — lands here, so one subscription covers all of them. Markers change
+  // on every keystroke for JS, so the recount is debounced.
+  useEffect(function () {
+    if (!monacoReady || !window.monaco || !window.monaco.editor || !window.ProblemsPanel) return;
+
+    var timer = null;
+    var recount = function () {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(function () {
+        timer = null;
+        setProblemCounts(window.ProblemsPanel.counts());
+      }, 250);
+    };
+
+    var sub = window.monaco.editor.onDidChangeMarkers(recount);
+    recount();
+
+    return function () {
+      if (timer) clearTimeout(timer);
+      sub.dispose();
+    };
+  }, [monacoReady]);
+
   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' });
@@ -2747,6 +2783,10 @@ var MbeditorApp = function MbeditorApp() {
     setShowLogPanel(function (prev) { return !prev; });
   };
 
+  var toggleProblemsPanel = function toggleProblemsPanel() {
+    setShowProblemsPanel(function (prev) { return !prev; });
+  };
+
   var toggleZenMode = function toggleZenMode() {
     setZenMode(function (prev) {
       var next = !prev;
@@ -3382,16 +3422,24 @@ var MbeditorApp = function MbeditorApp() {
         "Mini Browser Editor — ",
         window.location.host
       ),
+      // The slot claims all the room between the title and the buttons; the
+      // search pill then takes 75% of it, centred. Sizing the pill against a
+      // slot rather than against the title bar keeps it proportional to the
+      // actual gap as the toolbar's button labels grow and shrink.
       React.createElement(
-        'button',
-        {
-          type: 'button',
-          className: 'ide-titlebar-search',
-          title: 'Search files (Ctrl/Cmd+P)',
-          onClick: function () { setQuickOpen(true); }
-        },
-        React.createElement('i', { className: 'fas fa-search', style: { marginRight: '6px', opacity: 0.7 } }),
-        React.createElement('span', { className: 'ide-titlebar-search-text' }, 'Search files…')
+        'div',
+        { className: 'ide-titlebar-search-slot' },
+        React.createElement(
+          'button',
+          {
+            type: 'button',
+            className: 'ide-titlebar-search',
+            title: 'Search files (Ctrl/Cmd+P)',
+            onClick: function () { setQuickOpen(true); }
+          },
+          React.createElement('i', { className: 'fas fa-search', style: { marginRight: '6px', opacity: 0.7 } }),
+          React.createElement('span', { className: 'ide-titlebar-search-text' }, 'Search files…')
+        )
       ),
       React.createElement(
         "div",
@@ -3455,13 +3503,6 @@ var MbeditorApp = function MbeditorApp() {
           )
         ),
         React.createElement("div", { className: "statusbar-sep" }),
-        React.createElement(
-          "button",
-          { type: "button", className: "statusbar-btn", onClick: toggleLogPanel, title: "Toggle Rails log (Ctrl+Shift+L)" },
-          React.createElement("i", { className: "fas fa-stream" }),
-          !editorPrefs.toolbarIconOnly && " Logs"
-        ),
-        React.createElement("div", { className: "statusbar-sep" }),
         React.createElement(
           "button",
           { type: "button", className: "statusbar-btn", onClick: function () { return setShowHelp(true); }, title: "Keyboard shortcuts & help" },
@@ -4974,6 +5015,12 @@ var MbeditorApp = function MbeditorApp() {
       ),
       showLogPanel && !zenMode && React.createElement(window.LogPanel || LogPanel, {
         onClose: function () { setShowLogPanel(false); }
+      }),
+      showProblemsPanel && !zenMode && React.createElement(window.ProblemsPanel || ProblemsPanel, {
+        onClose: function () { setShowProblemsPanel(false); },
+        onOpenFile: function (path, line, col) {
+          handleSelectFile(path, path.split('/').pop(), line, col);
+        }
       })
     ),
     React.createElement(
@@ -4998,6 +5045,23 @@ var MbeditorApp = function MbeditorApp() {
           state.gitInfo.behind
         )
       ),
+      React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "statusbar-btn statusbar-problems" + (showProblemsPanel ? " active" : ""),
+          onClick: toggleProblemsPanel,
+          title: problemCounts.errors + " error(s), " + problemCounts.warnings +
+            " warning(s) in open files — click to open Problems"
+        },
+        React.createElement("i", { className: "fas fa-bug statusbar-problems-error-icon" }),
+        React.createElement("span", { className: "statusbar-problems-count" }, problemCounts.errors),
+        React.createElement("i", {
+          className: "fas fa-exclamation-triangle statusbar-problems-warning-icon",
+          style: { marginLeft: "8px" }
+        }),
+        React.createElement("span", { className: "statusbar-problems-count" }, problemCounts.warnings)
+      ),
       !serverOnline && (function () {
         var dirtyCount = state.panes.reduce(function (acc, p) {
           return acc + p.tabs.filter(function (t) { return t.dirty; }).length;
@@ -5027,6 +5091,17 @@ var MbeditorApp = function MbeditorApp() {
         { className: "statusbar-msg " + state.statusMessage.kind },
         state.statusMessage.text
       ),
+      React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "statusbar-btn statusbar-logs-btn" + (showLogPanel ? " active" : ""),
+          onClick: toggleLogPanel,
+          title: "Toggle Rails log (Ctrl+Shift+L)"
+        },
+        React.createElement("i", { className: "fas fa-stream" }),
+        " Logs"
+      ),
       activeEOL && React.createElement(
         "button",
         {