mbeditor 0.8.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f74579627da44a31db150cb5de08c5060ccad0a68e9ac47603039b84849fff2
-  data.tar.gz: d2fa6b611b1a1804e26748281f367bd3f2dfc20796d0459defb9b05d65583fa1
+  metadata.gz: 1fe258515a6f0945da8bfcbfbe85197262af224c054924367597d97d370530e2
+  data.tar.gz: d3f65b3c351fef56291170d9401103d9b73d4b3a7ebad24885713b8deef5df85
 SHA512:
-  metadata.gz: ab9d1c840c0153f07f3f1989874bca8025d59921615597be5eae9ba83b5eb9c536a554d50bb934c4d2c6202d8d89b119179241cba67c4c21bdf81f98491546d3
-  data.tar.gz: e5328c15e5c250c55a0d02eba2a38e2d752bf8c813d9e740181cd3e0ff86e5d79fa1bfb2e5cb5ad566328cd6b17b23faf2952edc0eed4564ec1311b86ef649f3
+  metadata.gz: 4de0d8f9374a370f4df1339166ff648013dafb07b23eeba6936f3ebf1d492c831905d7143d5ece2ece4e397f4f4b314b7461e496cec00003c507db5701347604
+  data.tar.gz: 17c4ef992175fc0a5fd8f18102214ac46cce75963ba7d06661f3ffac66eb7e7d55e69bef6c6f71e3ddb9999839c78fd9a2668abb99397442ac7bfb68da6ee561

data/CHANGELOG.md

@@ -5,6 +5,91 @@ 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
+- **Test-aware Ruby Outline** — the editor now recognises Minitest and RSpec
+  suites, tests, and helper methods in `_test.rb` and `_spec.rb` files. It
+  reads the unsaved Monaco buffer, preserves nested suite depth and method
+  visibility, supports keyboard navigation, and safely reports truncation or
+  parser failures without disrupting the editor.
+- **Ruby test-DSL highlighting** — Minitest/RSpec declarations, hooks, and
+  helpers now receive structural Monaco tokens while Ruby files retain the
+  existing `ruby` language identity and integrations.
+
+### Security
+- **Dangling symlink containment** — every editor and Git path check now
+  rejects dangling symlinks that resolve outside the workspace or repository,
+  closing a write-through escape for create, save, rename, and directory
+  operations.
+- **Filesystem-aware exclusions** — exclusion matching now normalizes Unicode
+  spellings and folds case only on case-insensitive filesystems, preventing
+  case or normalization variants from reaching excluded directories such as
+  `.git`.
+
+### Changed
+- Generated `graphify-out/` artifacts are ignored by Git.
+
+---
+
 ## [0.8.1] - 2026-07-22
 
 ### Fixed

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

@@ -11,6 +11,8 @@
 //= require mbeditor/tab_manager
 //= 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
@@ -20,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([]);
@@ -88,33 +89,46 @@ var EditorPanel = function EditorPanel(_ref) {
   var methodsList = _useState14[0];
   var setMethodsList = _useState14[1];
 
-  var _useState15 = useState(null);
+  var _useState15 = useState(false);
   var _useState16 = _slicedToArray(_useState15, 2);
-  var methodsDropdownPos = _useState16[0];
-  var setMethodsDropdownPos = _useState16[1];
+  var methodsTruncated = _useState16[0];
+  var setMethodsTruncated = _useState16[1];
 
-  var methodsBtnRef = useRef(null);
-
-  // Local pagination state — initialized from tab props; updated on page navigation
-  var _useState17 = useState(tab.startLine || 0);
+  var _useState17 = useState(false);
   var _useState18 = _slicedToArray(_useState17, 2);
-  var pageStartLine = _useState18[0];
-  var setPageStartLine = _useState18[1];
+  var methodsUnavailable = _useState18[0];
+  var setMethodsUnavailable = _useState18[1];
 
-  var _useState19 = useState(tab.lineCount || 0);
+  var _useState19 = useState(null);
   var _useState20 = _slicedToArray(_useState19, 2);
-  var pageLineCount = _useState20[0];
-  var setPageLineCount = _useState20[1];
+  var methodsDropdownPos = _useState20[0];
+  var setMethodsDropdownPos = _useState20[1];
+
+  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);
 
-  var _useState21 = useState(tab.totalLines || 0);
+  // Local pagination state — initialized from tab props; updated on page navigation
+  var _useState21 = useState(tab.startLine || 0);
   var _useState22 = _slicedToArray(_useState21, 2);
-  var pageTotalLines = _useState22[0];
-  var setPageTotalLines = _useState22[1];
+  var pageStartLine = _useState22[0];
+  var setPageStartLine = _useState22[1];
 
-  var _useState23 = useState(tab.totalBytes || 0);
+  var _useState23 = useState(tab.lineCount || 0);
   var _useState24 = _slicedToArray(_useState23, 2);
-  var pageTotalBytes = _useState24[0];
-  var setPageTotalBytes = _useState24[1];
+  var pageLineCount = _useState24[0];
+  var setPageLineCount = _useState24[1];
+
+  var _useState25 = useState(tab.totalLines || 0);
+  var _useState26 = _slicedToArray(_useState25, 2);
+  var pageTotalLines = _useState26[0];
+  var setPageTotalLines = _useState26[1];
+
+  var _useState27 = useState(tab.totalBytes || 0);
+  var _useState28 = _slicedToArray(_useState27, 2);
+  var pageTotalBytes = _useState28[0];
+  var setPageTotalBytes = _useState28[1];
 
   var onFormatRef = useRef(onFormat);
   onFormatRef.current = onFormat;
@@ -1270,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) {
@@ -1601,6 +1689,15 @@ 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 &&
+      typeof window.RubyOutline.isTestPath === 'function' && window.RubyOutline.isTestPath(tab.path);
+  } catch (err) {
+    isTestOutline = false;
+  }
 
   useEffect(function () {
     if (isMarkdown && window.marked) {
@@ -1638,8 +1735,8 @@ var EditorPanel = function EditorPanel(_ref) {
     if (!methodsOpen) return;
     function handleClickOutside(e) {
       var btn = methodsBtnRef.current;
-      // Close if click is not on the button (the dropdown uses onMouseDown with preventDefault)
-      if (btn && !btn.contains(e.target)) {
+      var dropdown = methodsDropdownRef.current;
+      if (btn && !btn.contains(e.target) && (!dropdown || !dropdown.contains(e.target))) {
         setMethodsOpen(false);
       }
     }
@@ -1667,20 +1764,41 @@ var EditorPanel = function EditorPanel(_ref) {
     });
   }
 
-  // Parse all method definitions from the current Monaco model
-  function parseRubyMethods(model) {
-    var methods = [];
+  // Parse the current Monaco buffer so unsaved Ruby test declarations appear too.
+  function parseRubyOutline(model, path) {
     var lineCount = model.getLineCount();
-    var DEF_RE = /^\s*def\s+(self\.)?([a-zA-Z_][a-zA-Z0-9_?!=]*)/;
+    var lines = [];
     for (var i = 1; i <= lineCount; i++) {
-      var line = model.getLineContent(i);
-      var m = DEF_RE.exec(line);
-      if (m) {
-        var selfPrefix = m[1] ? 'self.' : '';
-        methods.push({ line: i, name: selfPrefix + m[2] });
-      }
+      lines.push(model.getLineContent(i));
     }
-    return methods;
+    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) {
@@ -1822,27 +1940,60 @@ 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();
-              setMethodsList(model ? parseRubyMethods(model) : []);
+            // 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: 'Jump to Method'
+          title: isTestOutline ? 'Jump to Outline' : 'Jump to Method'
         },
         React.createElement('i', { className: 'fas fa-list-ul', style: { marginRight: editorPrefs.toolbarIconOnly ? 0 : '5px', flexShrink: 0 } }),
-        !editorPrefs.toolbarIconOnly && React.createElement('span', { className: 'ide-toolbar-label' }, 'Methods')
+        !editorPrefs.toolbarIconOnly && React.createElement('span', { className: 'ide-toolbar-label' }, isTestOutline ? 'Outline' : 'Methods')
       ),
       gitAvailable && React.createElement(
         'button',
@@ -2029,31 +2180,101 @@ var EditorPanel = function EditorPanel(_ref) {
     methodsOpen && methodsDropdownPos && React.createElement(
       'div',
       {
+        ref: methodsDropdownRef,
         className: 'ide-methods-dropdown',
         style: { position: 'fixed', top: methodsDropdownPos.top + 'px', right: methodsDropdownPos.right + 'px', left: 'auto', zIndex: 9900 }
       },
-      methodsList.length === 0
-        ? React.createElement('div', { className: 'ide-methods-dropdown-empty' }, 'No methods found')
-        : methodsList.map(function(m) {
-            return React.createElement(
-              'div',
-              {
-                key: m.line,
-                className: 'ide-methods-dropdown-item',
-                onMouseDown: function(e) {
-                  e.preventDefault();
-                  setMethodsOpen(false);
-                  if (monacoRef.current) {
-                    monacoRef.current.revealLineInCenter(m.line);
-                    monacoRef.current.setPosition({ lineNumber: m.line, column: 1 });
-                    monacoRef.current.focus();
+      methodsUnavailable
+        ? React.createElement('div', { className: 'ide-methods-dropdown-message' }, 'Outline unavailable')
+        : methodsList.length === 0
+          ? React.createElement('div', { className: 'ide-methods-dropdown-empty' }, isTestOutline ? 'No outline entries found' : 'No methods found')
+          : (function() {
+              var rows = [];
+              var visibility = null;
+              var visibilityStartLine = null;
+              var visibilityRows = [];
+              var icons = { method: 'fa-code', suite: 'fa-layer-group', test: 'fa-flask' };
+
+              function activateEntry(entry) {
+                setMethodsOpen(false);
+                if (monacoRef.current) {
+                  monacoRef.current.revealLineInCenter(entry.line);
+                  monacoRef.current.setPosition({ lineNumber: entry.line, column: 1 });
+                  monacoRef.current.focus();
+                }
+              }
+
+              function flushVisibilityRows() {
+                if (visibilityRows.length === 0) return;
+                rows.push(React.createElement(
+                  'div',
+                  {
+                    key: 'visibility-group-' + visibilityStartLine,
+                    className: 'ide-methods-dropdown-visibility-group'
+                  },
+                  React.createElement(
+                    'div',
+                    { className: 'ide-methods-dropdown-visibility' },
+                    visibility
+                  ),
+                  visibilityRows
+                ));
+                visibility = null;
+                visibilityStartLine = null;
+                visibilityRows = [];
+              }
+
+              methodsList.forEach(function(entry, entryIndex) {
+                var depth = typeof entry.depth === 'number' ? entry.depth : 0;
+                var row = React.createElement(
+                  'button',
+                  {
+                    // 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-outline-depth': depth,
+                    'aria-label': entry.name + ', line ' + entry.line,
+                    tabIndex: 0,
+                    autoFocus: entryIndex === 0,
+                    style: { paddingLeft: (12 + depth * 14) + 'px' },
+                    onClick: function() {
+                      activateEntry(entry);
+                    }
+                  },
+                  React.createElement('span', { className: 'ide-methods-dropdown-line' }, entry.line),
+                  React.createElement('i', {
+                    className: 'fas ' + (icons[entry.kind] || icons.method) + ' ide-outline-entry-icon',
+                    'aria-hidden': 'true'
+                  }),
+                  React.createElement('span', { className: 'ide-outline-entry-name' }, entry.name)
+                );
+
+                if (entry.kind === 'method' && entry.visibility) {
+                  if (visibility !== entry.visibility) {
+                    flushVisibilityRows();
+                    visibility = entry.visibility;
+                    visibilityStartLine = entry.line;
                   }
+                  visibilityRows.push(row);
+                } else {
+                  flushVisibilityRows();
+                  rows.push(row);
                 }
-              },
-              React.createElement('span', { className: 'ide-methods-dropdown-line' }, m.line),
-              m.name
-            );
-          })
+              });
+              flushVisibilityRows();
+
+              if (methodsTruncated) {
+                rows.push(React.createElement(
+                  'div',
+                  { key: 'truncated', className: 'ide-methods-dropdown-message' },
+                  'Results truncated at 5,000 entries'
+                ));
+              }
+              return rows;
+            })()
     ),
     React.createElement('div', { ref: vimStatusRef, className: 'vim-statusbar', style: { display: editorPrefs.vimMode ? 'flex' : 'none', height: '22px', alignItems: 'center', padding: '0 10px', fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, monospace", fontSize: '12px', background: 'var(--ide-statusbar-bg, #1e1e2e)', color: 'var(--ide-statusbar-fg, #9cdcfe)', borderTop: '1px solid var(--ide-border, #3e3e3e)', flexShrink: 0, userSelect: 'none', letterSpacing: '0.02em' } })
   );
@@ -2073,4 +2294,4 @@ window.EditorPanel = React.memo(EditorPanel, function(prev, next) {
     prev.testInlineVisible === next.testInlineVisible &&
     prev.editorPrefs === next.editorPrefs &&
     prev.monacoReady === next.monacoReady;
-});
+});