mbeditor 0.8.1 → 0.10.0

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",
         {

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

@@ -0,0 +1,217 @@
+'use strict';
+
+// ProblemsPanel — bottom drawer listing the diagnostics Monaco is holding for
+// the files you have open: rubocop and ruby-lsp for Ruby, the TypeScript
+// worker's syntax errors for JS/JSX, and anything else that writes markers.
+//
+// Scope is deliberately "open tabs", not the workspace: markers only exist for
+// models Monaco has loaded, so a count over anything wider would be a lie.
+// Closing a tab drops its problems, same as VS Code with an unopened file.
+var ProblemsPanel = (function () {
+  var SEVERITY_ERROR = 8;
+  var SEVERITY_WARNING = 4;
+  // Long enough to recognise the statement, short enough not to push the
+  // location off the end of the row.
+  var CODE_PREVIEW_LIMIT = 120;
+
+  // The offending source line, trimmed, for display beside the message. Markers
+  // can outlive the edit that invalidated them by a frame, so a line number
+  // past the end of the buffer yields nothing rather than throwing.
+  function codePreview(model, lineNumber) {
+    if (!lineNumber || lineNumber < 1 || lineNumber > model.getLineCount()) return '';
+
+    var text = model.getLineContent(lineNumber).trim();
+    return text.length > CODE_PREVIEW_LIMIT ? text.slice(0, CODE_PREVIEW_LIMIT) + '…' : text;
+  }
+
+  // Reading markers means walking every model, so callers that only want the
+  // counts share this one pass. Exposed on the component for the status bar.
+  function collect() {
+    var monaco = window.monaco;
+    if (!monaco || !monaco.editor) return { errors: [], warnings: [], byFile: [] };
+
+    var errors = [];
+    var warnings = [];
+    var byFile = [];
+
+    monaco.editor.getModels().forEach(function (model) {
+      var path = model._mbeditorPath;
+      if (!path || model.isDisposed()) return;
+
+      var markers = monaco.editor.getModelMarkers({ resource: model.uri }).filter(function (m) {
+        return m.severity === SEVERITY_ERROR || m.severity === SEVERITY_WARNING;
+      });
+      if (markers.length === 0) return;
+
+      markers.sort(function (a, b) { return a.startLineNumber - b.startLineNumber; });
+
+      // Carry the source line alongside the marker: read here, while the model
+      // is in hand, rather than looking the model up again at render time.
+      var entries = markers.map(function (m) {
+        (m.severity === SEVERITY_ERROR ? errors : warnings).push(m);
+        return { marker: m, code: codePreview(model, m.startLineNumber) };
+      });
+
+      byFile.push({ path: path, markers: entries });
+    });
+
+    byFile.sort(function (a, b) { return a.path < b.path ? -1 : a.path > b.path ? 1 : 0; });
+    return { errors: errors, warnings: warnings, byFile: byFile };
+  }
+
+  function counts() {
+    var all = collect();
+    return { errors: all.errors.length, warnings: all.warnings.length };
+  }
+
+  var Panel = function ProblemsPanelComponent(_ref) {
+    var onClose = _ref.onClose;
+    var onOpenFile = _ref.onOpenFile;
+
+    var _problems = React.useState(collect);
+    var problems = _problems[0], setProblems = _problems[1];
+    var _filter = React.useState('');
+    var filter = _filter[0], setFilter = _filter[1];
+
+    var MIN_HEIGHT = 120;
+    var _height = React.useState(function () {
+      var saved = parseInt(window.localStorage.getItem('mbeditorProblemsHeight'), 10);
+      return (saved && saved >= MIN_HEIGHT) ? saved : 240;
+    });
+    var height = _height[0], setHeight = _height[1];
+    var heightRef = React.useRef(height);
+    heightRef.current = height;
+
+    // Same delta-based resize as the log drawer.
+    var onResizeMouseDown = function (e) {
+      e.preventDefault();
+      var startY = e.clientY;
+      var startHeight = heightRef.current;
+      var onMove = function (ev) {
+        var vh = window.innerHeight || document.documentElement.clientHeight || 0;
+        var maxH = vh > 0 ? Math.round(vh * 0.85) : Infinity;
+        setHeight(Math.min(maxH, Math.max(MIN_HEIGHT, startHeight + (startY - ev.clientY))));
+      };
+      var onUp = function () {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        window.localStorage.setItem('mbeditorProblemsHeight', String(heightRef.current));
+      };
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    };
+
+    React.useEffect(function () {
+      if (!window.monaco || !window.monaco.editor) return;
+      var refresh = function () { setProblems(collect()); };
+      var sub = window.monaco.editor.onDidChangeMarkers(refresh);
+      refresh();
+      return function () { sub.dispose(); };
+    }, []);
+
+    var needle = filter.trim().toLowerCase();
+    var shown = needle
+      ? problems.byFile.map(function (entry) {
+          return {
+            path: entry.path,
+            markers: entry.markers.filter(function (item) {
+              return (item.marker.message + ' ' + item.code + ' ' + entry.path)
+                .toLowerCase().indexOf(needle) !== -1;
+            })
+          };
+        }).filter(function (entry) { return entry.markers.length > 0; })
+      : problems.byFile;
+
+    var total = problems.errors.length + problems.warnings.length;
+
+    return React.createElement(
+      'div',
+      { className: 'ide-problems-drawer', style: { height: height + 'px' } },
+      React.createElement('div', {
+        className: 'ide-problems-resize',
+        title: 'Drag to resize',
+        onMouseDown: onResizeMouseDown
+      }),
+      React.createElement(
+        'div',
+        { className: 'ide-problems-header' },
+        React.createElement('i', { className: 'fas fa-bug' }),
+        React.createElement('span', { className: 'ide-problems-title' }, 'Problems'),
+        React.createElement(
+          'span',
+          { className: 'ide-problems-summary' },
+          problems.errors.length + ' error' + (problems.errors.length === 1 ? '' : 's') +
+            ', ' + problems.warnings.length + ' warning' + (problems.warnings.length === 1 ? '' : 's') +
+            ' in open files'
+        ),
+        React.createElement('input', {
+          className: 'ide-problems-filter',
+          type: 'text',
+          placeholder: 'Filter…',
+          value: filter,
+          onChange: function (e) { setFilter(e.target.value); }
+        }),
+        React.createElement('button', {
+          type: 'button', className: 'ide-problems-btn',
+          title: 'Close', onClick: onClose
+        }, React.createElement('i', { className: 'fas fa-times' }))
+      ),
+      React.createElement(
+        'div',
+        { className: 'ide-problems-body' },
+        total === 0
+          ? React.createElement('div', { className: 'ide-problems-empty' }, 'No problems in the open files')
+          : shown.length === 0
+            ? React.createElement('div', { className: 'ide-problems-empty' }, 'No problems match the filter')
+            : shown.map(function (entry) {
+                return React.createElement(
+                  'div',
+                  { className: 'ide-problems-file', key: entry.path },
+                  React.createElement(
+                    'div',
+                    { className: 'ide-problems-file-name' },
+                    entry.path,
+                    React.createElement('span', { className: 'ide-problems-file-count' }, entry.markers.length)
+                  ),
+                  entry.markers.map(function (item, index) {
+                    var marker = item.marker;
+                    var isError = marker.severity === SEVERITY_ERROR;
+                    return React.createElement(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'ide-problems-item ide-problems-item-' + (isError ? 'error' : 'warning'),
+                        key: entry.path + ':' + marker.startLineNumber + ':' + index,
+                        'aria-label': (isError ? 'Error' : 'Warning') + ': ' + marker.message +
+                          ', ' + entry.path + ' line ' + marker.startLineNumber +
+                          (item.code ? ', source: ' + item.code : ''),
+                        onClick: function () {
+                          if (onOpenFile) onOpenFile(entry.path, marker.startLineNumber, marker.startColumn);
+                        }
+                      },
+                      React.createElement('i', {
+                        className: 'fas ' + (isError ? 'fa-bug' : 'fa-exclamation-triangle') + ' ide-problems-icon',
+                        'aria-hidden': 'true'
+                      }),
+                      React.createElement('span', { className: 'ide-problems-msg' }, marker.message),
+                      item.code && React.createElement('code', { className: 'ide-problems-code' }, item.code),
+                      marker.source && React.createElement('span', { className: 'ide-problems-source' }, marker.source),
+                      React.createElement(
+                        'span',
+                        { className: 'ide-problems-loc' },
+                        '[' + marker.startLineNumber + ', ' + marker.startColumn + ']'
+                      )
+                    );
+                  })
+                );
+              })
+      )
+    );
+  };
+
+  Panel.collect = collect;
+  Panel.counts = counts;
+  return Panel;
+})();
+
+window.ProblemsPanel = ProblemsPanel;

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

@@ -94,6 +94,20 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     return 50;
   }
 
+  // Recently opened files, most recent first, as a path -> rank lookup. Built
+  // once per query rather than per comparison, since the sort calls this for
+  // every pair.
+  function recentRanks() {
+    var ranks = {};
+    var recent = (typeof TabManager !== 'undefined' && TabManager.getRecentFiles)
+      ? TabManager.getRecentFiles() : [];
+    recent.forEach(function (entry, index) {
+      var path = typeof entry === 'string' ? entry : (entry && entry.path);
+      if (path && !(path in ranks)) ranks[path] = index;
+    });
+    return ranks;
+  }
+
   // Match relevance within a priority tier: exact basename > prefix > substring > other.
   function getMatchRelevance(result, q) {
     if (!q) return 3;
@@ -128,13 +142,30 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     var res = SearchService.searchFiles(query);
     // Filter by type: always include files; include dirs only when showFolders is on
     var filtered = showFolders ? res : res.filter(function(r) { return r.type !== 'dir'; });
-    // Sort: files always beat dirs; within the same tier exact basename > prefix > substring > other.
-    // JS sort is stable in modern engines so MiniSearch relevance score order is the tiebreaker
-    // when match relevance is equal.
+    // Sort, in order of precedence:
+    //   1. match quality — exact basename > prefix > substring > other, so a
+    //      worse match can never jump the queue however recently it was opened
+    //   2. how recently the file was opened, most recent first
+    //   3. the static file-type tier (controller > model > … > noise)
+    //
+    // Recency sits above the type tier deliberately: when two files match a
+    // query equally well, the one you were just working in is almost always
+    // the one you meant, and that beats a guess made from the directory name.
+    // Files never opened all tie here and fall through to the type tier, which
+    // is what orders the bulk of a cold result list.
+    //
+    // Directories keep their +100 penalty inside the type tier so files still
+    // come first. JS sort is stable in modern engines, so MiniSearch's own
+    // relevance order remains the final tiebreaker.
+    var ranks = recentRanks();
+    var NEVER_OPENED = Infinity;
     filtered.sort(function(a, b) {
       var aRelevance = getMatchRelevance(a, query);
       var bRelevance = getMatchRelevance(b, query);
       if (aRelevance !== bRelevance) return aRelevance - bRelevance;
+      var aRecent = a.path in ranks ? ranks[a.path] : NEVER_OPENED;
+      var bRecent = b.path in ranks ? ranks[b.path] : NEVER_OPENED;
+      if (aRecent !== bRecent) return aRecent - bRecent;
       var aPriority = getFilePriority(a.path) + (a.type === 'dir' ? 100 : 0);
       var bPriority = getFilePriority(b.path) + (b.type === 'dir' ? 100 : 0);
       return aPriority - bPriority;