mbeditor 0.9.0 → 0.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2612297fd4760bf7660ab89589c549ff6a815df395e4f57fb48d6f60c1c519b8
-  data.tar.gz: d9bf030f5f056754bfe8c633253aba3013c7405aaba259628c0e7aa5e7b19aff
+  metadata.gz: 47a8199a082957d396dce3cfa9de010ece11a11b2b938cf0cf81adfa6dd171f1
+  data.tar.gz: 30dfee949bc6d06245c6bd1ba5b682431b36b064e0ad510b0dac44b320c5a287
 SHA512:
-  metadata.gz: 8660eda73b4cb4e3d38ab7c820286a363340e6a65592e66817c5b0594374e60532769c06999fb9a099b6082ee99f4fd1f604ec6116908f63317daed1153780d7
-  data.tar.gz: b27df09cb524a48508285abe5892b8f261f44efaa471fe580a839be1e3f2064d385848aa4e2b488af812d88b3181ee9f51e26c3e3cb84bc79353c619184ddd80
+  metadata.gz: 81c342ce0dc3f80c44259ae3a130710013dcb81f45052d4cc4488d2a7dc112f7decc6b5d67f3f6aaa81cbcd7ef391d82136ee1adccdd369b369c7cfcd4d6afa7
+  data.tar.gz: b201dda9b9fe55e9f44981725788b1587bc052f940652e8eb7d86a8dcc3d17c45bb0984f71cd3bbbd9f3a001b3b0125ac09a9e53eedd3e580eab96a445be6a17

data/CHANGELOG.md

@@ -5,6 +5,101 @@ 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.1] - 2026-07-27
+
+### Removed
+- **The `listen`-based file watcher, and with it `config.watch_files`.**
+  0.10.0 enabled a workspace watcher by default. On Linux each watched
+  directory costs an inotify watch from `fs.inotify.max_user_watches`, a
+  *per-user* budget shared with everything else watching files — including the
+  host app's own code reloader and any other gem using `listen`. Exhausting it
+  raises `iNotify max watches exceeded`, and because `listen` reports some of
+  those failures from its own background thread, mbeditor could not even
+  rescue them. Claiming a share of a scarce OS resource by default was the
+  wrong trade for a development tool, and raising the limit needs root, which
+  a developer may not have.
+
+  Nothing is lost: external changes are picked up by polling, which is how the
+  editor already tracked git state. If you set `config.watch_files`, remove it
+  — it is now ignored.
+
+### Fixed
+- **The file tree never refreshed for changes made outside the editor.** Its
+  10-second poll returned early whenever the Action Cable socket was connected,
+  on the reasoning that the push covered it — but the server only broadcasts
+  from mbeditor's own mutation endpoints. With a socket connected, which is the
+  normal case, an external `git checkout` or generator run was never picked up.
+  The poll now always runs; the push remains the instant path for our own
+  writes. This is the bug the 0.10.0 watcher was compensating for.
+- **Git line-number tinting went stale for external changes**, for the same
+  reason, and its refresh timer was being cleared and recreated on every
+  re-render so it never survived long enough to fire. It now polls on its own
+  timer and on window focus, matching the file tree.
+- **Watched paths were dropped when the workspace was reached through a
+  symlink** (macOS `/var` → `/private/var`, or a symlinked checkout), because
+  reported paths resolve to the real path and no longer matched the configured
+  root.
+
+---
+
+## [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,6 +9,10 @@ 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)
@@ -202,85 +206,6 @@ The gem keeps host/tooling responsibilities in the host app:
 
 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.
 
-### Ruby language server (Optional)
-
-Add [ruby-lsp](https://github.com/Shopify/ruby-lsp) to the host app's
-development group and mbeditor uses it automatically for Ruby
-go-to-definition, hover, completion, and diagnostics:
-
-```ruby
-gem "ruby-lsp", require: false, group: :development
-gem "ruby-lsp-rails", require: false, group: :development  # Rails-aware results
-```
-
-`ruby-lsp-rails` needs no mbeditor configuration — ruby-lsp loads it as an
-addon, so associations, model attributes, and route helpers start resolving on
-their own.
-
-What changes when it's present:
-
-- **Diagnostics.** Ruby files are checked by ruby-lsp instead of booting
-  RuboCop over HTTP on every debounce, so you also get Prism syntax errors and
-  warnings alongside RuboCop offenses. Quick-fix lightbulbs still work for
-  correctable cops. Very large files fall back to syntax-only diagnostics.
-- **Definitions, hover, completion.** Answered from the language server's index
-  rather than a workspace grep, including your unsaved buffer contents.
-
-Everything degrades on its own: if ruby-lsp is missing, times out (its first
-index of a large app takes a while), or crashes, that request falls back to the
-built-in grep/Ripper services. ERB templates always use the built-in services —
-ruby-lsp cannot parse ERB.
-
-### Realtime via Action Cable (Optional)
-
-Mbeditor works without Action Cable. If Action Cable is unavailable, unreachable, or returns transient errors, the editor automatically falls back to polling.
-
-To enable realtime features in a host app:
-
-1. Ensure Action Cable is enabled in the host app (for apps that do not load it by default, add the framework/gem explicitly).
-2. Mount cable in host routes:
-
-```ruby
-mount ActionCable.server => '/cable'
-```
-
-3. Make Action Cable JavaScript available to the page (for asset-pipeline apps, `actioncable.js` is typically sufficient).
-
-If any of these are missing, mbeditor still runs in polling mode.
-
-### Syntax Highlighting Support
-Monaco runtime assets are served from the engine route namespace (`/mbeditor/monaco-editor/*` and `/mbeditor/monaco_worker.js`).
-The gem includes syntax highlighting for common Rails and React development file types:
-
-**Web & Template Languages:**
-- **Ruby** (.rb, Gemfile, gemspec, Rakefile)
-- **HTML** 
-- **ERB** (.html.erb, .erb) — dedicated ERB grammar, plus Ruby intellisense
-  inside `<% %>` tags: hover, completion, go-to-definition (Ctrl/Cmd+click or
-  F12) and auto-`end`, all inert in the surrounding HTML. ERB uses the built-in
-  workspace services rather than ruby-lsp, which cannot parse ERB.
-- **HAML** (.haml) — plaintext syntax highlighting (no dedicated HAML grammar in Monaco; haml-lint provides inline error markers when available)
-- **CSS** and **SCSS** stylesheets
-
-**JavaScript & React:**
-- **JavaScript / JSX** (.js, .jsx, .js.jsx) — Monaco's TypeScript worker runs in
-  checked-JS mode with JSX enabled. Built for the Sprockets world where every
-  top-level `var`/`function`/`class` (and `window.X =` assignment) is a global:
-  the editor scans the workspace once at boot (`GET /js_globals`) and declares
-  all of them as ambient globals, so cross-file component references need no
-  `import` and produce no "Cannot find name" diagnostics. The list refreshes
-  automatically when files change. Runtime-only globals the static scan can't
-  see (e.g. `Routes`, `I18n`) can be declared via
-  `config.js_global_identifiers = %w[Routes I18n]`.
-  Known limits: everything is typed `any` (no cross-file type inference), and
-  genuinely undefined names are shown as warnings, not errors.
-- **TypeScript** (.ts, .tsx)
-
-**Configuration & Documentation:**
-- **YAML** (.yml, .yaml)
-- **Markdown** (.md)
-
-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
 

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,10 @@ var EditorPanel = function EditorPanel(_ref) {
   var setIsBlameLoading = _useState8[1];
 
   var blameDecorationsRef = useRef([]);
+  var gitLineDecorationsRef = useRef([]);
+  // Latest git line-diff refresh, read by the poll effect so its interval does
+  // not have to be torn down whenever the active tab changes.
+  var gitLineRefreshRef = useRef(null);
   var blameZoneIdsRef = useRef([]);
   var testDecorationIdsRef = useRef([]);
   var testZoneIdsRef = useRef([]);
@@ -105,6 +109,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 +1287,115 @@ 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 on the signals wired up at the end of this effect.
+
+  // Poll cadence for the tint, matching the file tree's. Slower to react than a
+  // filesystem watcher would be, at the cost of one `git diff -U0` on one file
+  // per visible pane — against a resource nothing else is competing for, rather
+  // than a share of the kernel's inotify budget.
+  var GIT_LINE_POLL_MS = 10000;
+
+  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();
+
+    // Publish the current refresh for the poll below, which lives in its own
+    // effect so a re-render of this one cannot restart its clock.
+    gitLineRefreshRef.current = refresh;
+
+    // Immediate path for writes mbeditor made itself.
+    var hasSocket = typeof WebSocketService !== 'undefined' && WebSocketService.onFilesChanged;
+    var onChanged = hasSocket ? function () { refresh(); } : null;
+    if (onChanged) WebSocketService.onFilesChanged(onChanged);
+
+    return function () {
+      cancelled = true;
+      gitLineRefreshRef.current = null;
+      if (onChanged && WebSocketService.offFilesChanged) WebSocketService.offFilesChanged(onChanged);
+      clear();
+    };
+  }, [tab.path, tab.externalContentVersion, tab.isDiff, tab.isCombinedDiff, gitAvailable]);
+
+  // The poll for changes made outside the editor — a terminal commit or branch
+  // switch alters the diff without touching this buffer.
+  //
+  // Deliberately its own effect with no dependencies. Held inside the effect
+  // above, the interval was cleared and recreated on every re-render of that
+  // one and never survived long enough to fire, so the tint only ever updated
+  // via the WebSocket — i.e. never for external changes, which is the whole
+  // point of it. Reading the refresh through a ref keeps this clock running
+  // across tab switches.
+  useEffect(function () {
+    var tick = function () {
+      if (document.hidden) return;
+      if (gitLineRefreshRef.current) gitLineRefreshRef.current();
+    };
+    var intervalId = setInterval(tick, GIT_LINE_POLL_MS);
+    window.addEventListener('focus', tick);
+    return function () {
+      clearInterval(intervalId);
+      window.removeEventListener('focus', tick);
+    };
+  }, []);
+
   // Handle Blame data fetching
   useEffect(function () {
     if (!isBlameVisible) {
@@ -1612,6 +1727,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 +1812,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 +1978,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 +2267,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;