mbeditor 0.12.1 → 0.12.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6645751ebceaf2b9754d5aabb417549334518db35027e1bd6c08d9fede2d7a5
-  data.tar.gz: edb2a8a2696f5aac16fcdcd4bbbf728f5d05a7af14ffca326a59ec7c0d40b860
+  metadata.gz: a2d9c1ba81f945f5ce0772455f51e66a110fa43a1e24f62c96e6859312c4a968
+  data.tar.gz: d01eb3a6edd6e221e92c25e093c7c5944b32c50dafad6a4cacfa953e5c0b1925
 SHA512:
-  metadata.gz: 5f9d7559b69d80a1d8d9d094d5513a69048ce62ea385630ca59811e0dafd50ca65afa988e1f560cc32d78fc7b71dceedb78b30f1ba190e00b465d1026e3554d5
-  data.tar.gz: a8a3de31439ff3a937db30a04dbfd631694f50ccbcce4c3fb3571dfa66cd798cf8df29b45855467a9ff783a919893829472b241523d7230468944a3accad04f9
+  metadata.gz: f8c189fa9f7215d5a376ab321a10186645c6671a2c1de874c3f3b254e3ebebb20a2c102e0c5357fb0ee0183eb0c634d2f26c7f7860901cec8e941f56ca26bd75
+  data.tar.gz: d0f8bdb6abe76b88e8438c0f31e78055d49fe09dfb3c88df1031312c33985b8ad2906f72482cc32a7c986a4019dee19226e42c96fa6d99b52f1da1cdb4faa790

data/CHANGELOG.md

@@ -7,6 +7,56 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.12.2] - 2026-08-03
+
+### Added
+- **Inline route hints in controllers.** Every action in a controller file is
+  annotated with the verb and path that reach it — `GET /orders/:id` beside
+  `def show` — and a public action nothing routes to is flagged `no route`.
+  Hovering adds the named-route helper. Answering "is this actually reachable?"
+  previously meant reading `config/routes.rb` and expanding `resources` in your
+  head.
+
+  Routes come from the host app's own route set rather than by parsing
+  `config/routes.rb`. mbeditor runs inside the app, so the routes are already
+  built — and they are the only source that accounts for `resources` expansion,
+  `member`/`collection` blocks, scopes, constraints and mounted engines.
+
+- **`config.model_graph_max_models`** (default 1000, was a hard-coded 300).
+  A schema over the cap silently lost models and only said "(truncated)".
+
+### Changed
+- **Model boxes are sized to their contents** rather than all being one width,
+  so a long model or column name is no longer truncated while a model called
+  `Tag` wastes most of its box. Layer positions accumulate per layer, since a
+  fixed stride would let a wide box overlap the next layer.
+- **Cluster blocks are packed in two dimensions** instead of stacked in a single
+  column, which left a schema with one big core and several small islands
+  running off the bottom with the right-hand side empty.
+- **The dummy app now carries a real ActiveRecord schema** — 20 models and 44
+  associations covering a hub, a chain, a self-reference, a join table, a
+  polymorphic association and unconnected islands — so the model graph can be
+  demonstrated and tested against something representative.
+
+### Fixed
+- **mbeditor could stop a host app from booting.** The pending-migrations
+  middleware was installed whenever `ActiveRecord::Migration::CheckPending` was
+  defined, but Rails only puts that middleware in the stack when
+  `config.active_record.migration_error` is `:page_load`. Any app loading
+  ActiveRecord with a different setting raised "No such middleware to insert
+  before" during boot. It now tests the same condition Rails does.
+- **Long labels drew straight out past the edge of their model box.** SVG text
+  neither wraps nor ellipsises; labels are now measured against the font the
+  theme actually resolves and cut to fit.
+- **"no database connection" hung below the box it belonged to** — the box
+  height did not count that placeholder line.
+- **The model search is a real dropdown.** The native `<datalist>` rendered in
+  the browser's own chrome: unstyleable, and unable to show the table name and
+  column count beside each model. Arrow keys and Enter work as before.
+- **The titlebar wrapped to two lines in a narrow window**, pushing the toolbar
+  out of its 32px row. It no longer wraps, and below the width where the toolbar
+  drops its button labels the title gives way to the icon alone.
+
 ## [0.12.1] - 2026-08-03
 
 ### Added

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

@@ -90,6 +90,7 @@ var EditorPanel = function EditorPanel(_ref) {
 
   var blameDecorationsRef = useRef([]);
   var gitLineDecorationsRef = useRef([]);
+  var routeDecorationsRef = 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);
@@ -1530,6 +1531,83 @@ var EditorPanel = function EditorPanel(_ref) {
     }
   }, [isBlameVisible, tab.path, blameData, isBlameLoading]);
 
+  // Inline route hints for controllers.
+  //
+  // Every `def` in a controller gets the verb and path that reach it drawn after
+  // the line, and a public action nothing routes to is called out — the question
+  // "is this actually reachable?" otherwise means reading config/routes.rb and
+  // mentally expanding `resources`. Routes come from the host app's own route
+  // set, which is the only thing that knows how those expand.
+  //
+  // Decorations, not view zones: a hint belongs on the line, and a zone would
+  // push the code around every time a file was opened.
+  useEffect(function () {
+    var editor = monacoRef.current;
+    if (!editor || !window.monaco) return;
+
+    var clear = function () {
+      if (!routeDecorationsRef.current.length) return;
+      routeDecorationsRef.current = editor.deltaDecorations(routeDecorationsRef.current, []);
+    };
+
+    if (!tab.path || !/^app\/controllers\/.+_controller\.rb$/.test(tab.path)) {
+      clear();
+      return;
+    }
+
+    var cancelled = false;
+    FileService.getRoutes(tab.path).then(function (data) {
+      if (cancelled) return;
+      var actions = (data && data.actions) || {};
+      var model = editor.getModel();
+      if (!model) return;
+
+      var decorations = [];
+      var text = model.getValue().split('\n');
+      // Only methods above the first `private`/`protected` are candidates for a
+      // route; flagging a helper below it as unrouted would be noise.
+      var visibilityEnded = false;
+
+      text.forEach(function (line, i) {
+        if (/^\s*(private|protected)\s*$/.test(line)) { visibilityEnded = true; return; }
+        var m = line.match(/^\s*def\s+(?:self\.)?([a-zA-Z_][a-zA-Z0-9_]*[?!=]?)/);
+        if (!m) return;
+
+        var name = m[1];
+        var routes = actions[name];
+        var lineNo = i + 1;
+        var col = line.length + 1;
+
+        if (routes && routes.length) {
+          var label = routes.map(function (r) { return r.verb + ' ' + r.path; }).join('  ·  ');
+          decorations.push({
+            range: new window.monaco.Range(lineNo, col, lineNo, col),
+            options: {
+              after: { content: '  ' + label, inlineClassName: 'mbeditor-route-hint' },
+              hoverMessage: routes.map(function (r) {
+                return { value: '`' + r.verb + ' ' + r.path + '`' + (r.name ? ' — `' + r.name + '_path`' : '') };
+              }),
+              showIfCollapsed: true
+            }
+          });
+        } else if (!visibilityEnded && !/[?!=]$/.test(name) && name !== 'initialize') {
+          decorations.push({
+            range: new window.monaco.Range(lineNo, col, lineNo, col),
+            options: {
+              after: { content: '  no route', inlineClassName: 'mbeditor-route-hint-none' },
+              hoverMessage: [{ value: 'No route in this application dispatches to this action.' }],
+              showIfCollapsed: true
+            }
+          });
+        }
+      });
+
+      routeDecorationsRef.current = editor.deltaDecorations(routeDecorationsRef.current, decorations);
+    }).catch(function () { /* hints are additive; a failure just means none */ });
+
+    return function () { cancelled = true; clear(); };
+  }, [tab.path, tab.externalContentVersion, monacoReady]);
+
   // Render Blame block headers (author + summary) above contiguous commit regions.
   useEffect(function () {
     if (!monacoRef.current || !window.monaco || !isBlameVisible || !blameData) return;

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

@@ -14,7 +14,13 @@
 // carried no information at all. Only a layered layout derives position from
 // the associations themselves.
 var ModelGraph = (function () {
-  var NODE_W = 188;
+  // Boxes are sized to their contents rather than all being one width. A fixed
+  // 188px meant a model with a long name or long column names had its labels
+  // truncated while a model called Tag wasted most of its box. Clamped at both
+  // ends so one pathological name cannot stretch a whole layer.
+  var NODE_W_MIN = 168;
+  var NODE_W_MAX = 320;
+  var NODE_W = NODE_W_MIN;   // fallback for anything without a measured model
   var HEADER_H = 34;      // model name + table name
   var FIELD_H = 15;
   var MAX_FIELDS = 8;     // the rest are one click away in the schema modal
@@ -22,14 +28,79 @@ var ModelGraph = (function () {
   var LAYER_GAP = 110;    // horizontal space between layers
   var ORDER_PASSES = 4;   // median sweeps for crossing reduction
   var STRAIGHTEN_PASSES = 3;
-  var MAX_ASSOC_LISTED = 12;  // the card stays readable; the rest are counted
+  var MAX_ASSOC_LISTED = 12;
+  var MAX_SEARCH_RESULTS = 50;  // the card stays readable; the rest are counted
   var BLOCK_PAD = 26;     // breathing room inside a cluster's boundary
   var BLOCK_GAP = 56;     // space between neighbouring clusters
 
+  // SVG text neither wraps nor ellipsises: a long model or column name simply
+  // draws straight out past the edge of its box and over whatever is beside it.
+  // Measure with a cached canvas context and cut to fit — accurate for whatever
+  // font the theme actually resolves, unlike a characters-per-pixel guess.
+  var _measureCtx = null;
+  var _measureCache = {};
+
+  function textWidth(text, font) {
+    var key = font + '\u0000' + text;
+    if (_measureCache[key] !== undefined) return _measureCache[key];
+    if (!_measureCtx) {
+      if (typeof document === 'undefined') return text.length * 6;
+      _measureCtx = document.createElement('canvas').getContext('2d');
+    }
+    _measureCtx.font = font;
+    var w = _measureCtx.measureText(text).width;
+    // Unbounded growth would be a leak on a large schema; the cache only needs
+    // to cover one render's worth of labels.
+    if (Object.keys(_measureCache).length > 4000) _measureCache = {};
+    _measureCache[key] = w;
+    return w;
+  }
+
+  function fitText(text, maxWidth, font) {
+    text = String(text == null ? '' : text);
+    if (!text || textWidth(text, font) <= maxWidth) return text;
+    var lo = 0, hi = text.length;
+    while (lo < hi) {
+      var mid = Math.ceil((lo + hi) / 2);
+      if (textWidth(text.slice(0, mid) + '…', font) <= maxWidth) lo = mid; else hi = mid - 1;
+    }
+    return lo > 0 ? text.slice(0, lo) + '…' : '…';
+  }
+
+  // Must match the .mg-name / .mg-table / .mg-field rules in editor.css.
+  var FONT_NAME  = '600 12px ui-monospace, SFMono-Regular, Menlo, monospace';
+  var FONT_SMALL = '9px ui-monospace, SFMono-Regular, Menlo, monospace';
+  var FONT_FIELD = '10px ui-monospace, SFMono-Regular, Menlo, monospace';
+
+  function nodeWidth(model) {
+    if (model && model.__mgWidth) return model.__mgWidth;
+    if (!model) return NODE_W;
+
+    // Header: name plus the open-schema button, and the table/count line.
+    var need = textWidth(String(model.name || ''), FONT_NAME) + 20 + 26;
+    need = Math.max(need, textWidth(
+      (model.table || '—') + (model.columnCount ? ' · ' + model.columnCount + ' cols' : ''),
+      FONT_SMALL) + 20 + 26);
+
+    (model.columns || []).slice(0, MAX_FIELDS).forEach(function (c) {
+      // name on the left, type right-aligned, with a gap between them
+      need = Math.max(need,
+        textWidth(String(c.name || ''), FONT_FIELD) +
+        textWidth(String(c.type || ''), FONT_SMALL) + 32);
+    });
+
+    var w = Math.round(Math.min(NODE_W_MAX, Math.max(NODE_W_MIN, need)));
+    try { model.__mgWidth = w; } catch (e) { /* frozen payload — recompute */ }
+    return w;
+  }
+
   function nodeHeight(model) {
     var shown = Math.min((model.columns || []).length, MAX_FIELDS);
     var more = (model.columnCount || 0) > shown ? FIELD_H : 0;
-    return HEADER_H + shown * FIELD_H + more + 8;
+    // With no columns the box still draws one line — "no database connection" —
+    // and not counting it left that text hanging below the box it belongs to.
+    var placeholder = shown === 0 ? FIELD_H : 0;
+    return HEADER_H + shown * FIELD_H + more + placeholder + 8;
   }
 
   // Undirected adjacency: for placement, "A belongs_to B" and "B has_many A"
@@ -224,15 +295,27 @@ var ModelGraph = (function () {
     Object.keys(y).forEach(function (n) { minY = Math.min(minY, y[n]); });
     if (!isFinite(minY)) minY = 0;
 
+    // Layers are as wide as their widest box, and each starts where the previous
+    // one ended. A fixed stride assumed every box was NODE_W and would overlap
+    // the next layer as soon as one of them grew.
+    var layerX = [];
+    var cursorX = 0;
+    layers.forEach(function (names, li) {
+      layerX[li] = cursorX;
+      var widest = 0;
+      (names || []).forEach(function (n) { widest = Math.max(widest, nodeWidth(byName[n])); });
+      cursorX += (widest || NODE_W_MIN) + LAYER_GAP;
+    });
+
     var positions = {};
     var maxX = 0, maxY = 0;
     layers.forEach(function (names, li) {
       if (!names) return;
       names.forEach(function (n) {
-        var x = li * (NODE_W + LAYER_GAP);
+        var x = layerX[li];
         var yy = y[n] - minY;
         positions[n] = { x: x, y: yy, model: byName[n] };
-        maxX = Math.max(maxX, x + NODE_W);
+        maxX = Math.max(maxX, x + nodeWidth(byName[n]));
         maxY = Math.max(maxY, yy + nodeHeight(byName[n]));
       });
     });
@@ -273,10 +356,13 @@ var ModelGraph = (function () {
     var positions = {};
     var regions = [];
     var pad = 60;
-    var cursorY = pad;
-    var maxRight = pad;
 
-    components(allNames, adj).forEach(function (group) {
+    // Lay each component out first, then pack the finished blocks. Blocks used
+    // to be stacked in a single column, so a schema with a big connected core
+    // and a handful of one-model islands ran off the bottom of the canvas with
+    // the whole right-hand side empty. Shelf packing wraps them instead, which
+    // is both more compact and closer to how the eye scans a page.
+    var blocks = components(allNames, adj).map(function (group) {
       var inGroup = {};
       group.forEach(function (n) { inGroup[n] = true; });
       var groupEdges = dir.filter(function (e) { return inGroup[e.from] && inGroup[e.to]; });
@@ -299,39 +385,67 @@ var ModelGraph = (function () {
       orderLayers(layers, adjIn, adjOut);
       var laid = assignCoords(layers, byName, adjIn, adjOut);
 
-      Object.keys(laid.positions).forEach(function (n) {
-        var p = laid.positions[n];
-        positions[n] = { x: pad + p.x, y: cursorY + p.y, model: p.model };
+      return {
+        laid: laid,
+        group: group,
+        w: laid.width + BLOCK_PAD * 2,
+        h: laid.height + BLOCK_PAD * 2
+      };
+    });
+
+    // Wrap at whichever is wider: a roughly square canvas, or the widest single
+    // block (which can never be split).
+    var totalArea = blocks.reduce(function (a, b) { return a + b.w * b.h; }, 0);
+    var widest = blocks.reduce(function (a, b) { return Math.max(a, b.w); }, 0);
+    var targetW = Math.max(widest, Math.sqrt(totalArea * 1.6));
+
+    var shelfX = pad, shelfY = pad, shelfH = 0, maxRight = pad;
+
+    blocks.forEach(function (b) {
+      if (shelfX > pad && shelfX + b.w > pad + targetW) {
+        shelfX = pad;
+        shelfY += shelfH + BLOCK_GAP;
+        shelfH = 0;
+      }
+
+      Object.keys(b.laid.positions).forEach(function (n) {
+        var q = b.laid.positions[n];
+        positions[n] = {
+          x: shelfX + BLOCK_PAD + q.x,
+          y: shelfY + BLOCK_PAD + q.y,
+          model: q.model
+        };
       });
 
       regions.push({
-        x: pad - BLOCK_PAD, y: cursorY - BLOCK_PAD,
-        w: laid.width + BLOCK_PAD * 2, h: laid.height + BLOCK_PAD * 2,
-        label: group.length > 1 ? group.length + ' related models' : group[0]
+        x: shelfX, y: shelfY, w: b.w, h: b.h,
+        label: b.group.length > 1 ? b.group.length + ' related models' : b.group[0]
       });
 
-      maxRight = Math.max(maxRight, pad + laid.width);
-      cursorY += laid.height + BLOCK_GAP;
+      maxRight = Math.max(maxRight, shelfX + b.w);
+      shelfH = Math.max(shelfH, b.h);
+      shelfX += b.w + BLOCK_GAP;
     });
 
     return {
       positions: positions,
       regions: regions,
       width: maxRight + pad,
-      height: cursorY - BLOCK_GAP + pad
+      height: shelfY + shelfH + pad
     };
   }
 
   function anchors(a, b) {
     var ah = nodeHeight(a.model), bh = nodeHeight(b.model);
-    var acx = a.x + NODE_W / 2, acy = a.y + ah / 2;
-    var bcx = b.x + NODE_W / 2, bcy = b.y + bh / 2;
+    var aw = nodeWidth(a.model), bw = nodeWidth(b.model);
+    var acx = a.x + aw / 2, acy = a.y + ah / 2;
+    var bcx = b.x + bw / 2, bcy = b.y + bh / 2;
     var horizontal = Math.abs(bcx - acx) > Math.abs(bcy - acy);
 
     if (horizontal) {
       return bcx > acx
-        ? { x1: a.x + NODE_W, y1: acy, x2: b.x, y2: bcy, h: true }
-        : { x1: a.x, y1: acy, x2: b.x + NODE_W, y2: bcy, h: true };
+        ? { x1: a.x + aw, y1: acy, x2: b.x, y2: bcy, h: true }
+        : { x1: a.x, y1: acy, x2: b.x + bw, y2: bcy, h: true };
     }
     return bcy > acy
       ? { x1: acx, y1: a.y + ah, x2: bcx, y2: b.y, h: false }
@@ -409,6 +523,10 @@ var ModelGraph = (function () {
 
     var _search = React.useState('');
     var search = _search[0], setSearch = _search[1];
+    var _searchOpen = React.useState(false);
+    var searchOpen = _searchOpen[0], setSearchOpen = _searchOpen[1];
+    var _highlight = React.useState(0);
+    var highlight = _highlight[0], setHighlight = _highlight[1];
     var _focused = React.useState(null);
     var focused = _focused[0], setFocused = _focused[1];
     var _hovered = React.useState(null);
@@ -439,6 +557,21 @@ var ModelGraph = (function () {
       return byModel;
     }, [graph]);
 
+    // Prefix matches first, then anything containing the term — the ordering a
+    // name-completion list is expected to have. Capped so a large schema cannot
+    // render a list taller than the window.
+    var searchMatches = React.useMemo(function () {
+      var all = (graph && graph.models) || [];
+      var q = search.trim().toLowerCase();
+      if (!q) return all.slice(0, MAX_SEARCH_RESULTS);
+      var starts = [], contains = [];
+      all.forEach(function (m) {
+        var i = m.name.toLowerCase().indexOf(q);
+        if (i === 0) starts.push(m); else if (i > 0) contains.push(m);
+      });
+      return starts.concat(contains).slice(0, MAX_SEARCH_RESULTS);
+    }, [graph, search]);
+
     var hoverCardRef = React.useRef(null);
     var _modelHover = React.useState(null);
     var modelHover = _modelHover[0], setModelHover = _modelHover[1];
@@ -535,7 +668,7 @@ var ModelGraph = (function () {
         var k = v.k >= 1 ? v.k : Math.min(MAX_ZOOM, v.k + (1 - v.k) / 2);
         return {
           k: k,
-          x: rect.width / 2 - (pos.x + NODE_W / 2) * k,
+          x: rect.width / 2 - (pos.x + nodeWidth(pos.model) / 2) * k,
           y: rect.height / 2 - (pos.y + h / 2) * k
         };
       });
@@ -661,6 +794,7 @@ var ModelGraph = (function () {
             var fields = (m.columns || []).slice(0, MAX_FIELDS);
             var hidden = (m.columnCount || 0) - fields.length;
             var h = nodeHeight(m);
+            var w = nodeWidth(m);
             return React.createElement(
               'g',
               {
@@ -679,11 +813,14 @@ var ModelGraph = (function () {
                   centreRef.current(m.name);
                 }
               },
-              React.createElement('rect', { className: 'mg-box', width: NODE_W, height: h, rx: 4 }),
-              React.createElement('rect', { className: 'mg-box-header', width: NODE_W, height: HEADER_H, rx: 4 }),
-              React.createElement('text', { className: 'mg-name', x: 10, y: 15 }, m.name),
+              React.createElement('rect', { className: 'mg-box', width: w, height: h, rx: 4 }),
+              React.createElement('rect', { className: 'mg-box-header', width: w, height: HEADER_H, rx: 4 }),
+              // Budget stops short of the header button, which sits at w - 26.
+              React.createElement('text', { className: 'mg-name', x: 10, y: 15 },
+                fitText(m.name, w - 44, FONT_NAME)),
               React.createElement('text', { className: 'mg-table', x: 10, y: 27 },
-                (m.table || '—') + (m.columnCount ? ' · ' + m.columnCount + ' cols' : '')),
+                fitText((m.table || '—') + (m.columnCount ? ' · ' + m.columnCount + ' cols' : ''),
+                        w - 44, FONT_SMALL)),
               // Opening the full schema is now an explicit target rather than
               // anything-anywhere on the box, so clicking around to navigate
               // cannot keep throwing a modal at you.
@@ -699,20 +836,25 @@ var ModelGraph = (function () {
                 },
                 React.createElement('title', null, 'Open the full schema for ' + m.name),
                 React.createElement('rect', {
-                  className: 'mg-open-btn-bg', x: NODE_W - 26, y: 7, width: 19, height: 19, rx: 3
+                  className: 'mg-open-btn-bg', x: w - 26, y: 7, width: 19, height: 19, rx: 3
                 }),
                 // Three stacked bars — a table, matching what the button opens.
-                React.createElement('rect', { className: 'mg-open-btn-bar', x: NODE_W - 22, y: 11, width: 11, height: 2 }),
-                React.createElement('rect', { className: 'mg-open-btn-bar', x: NODE_W - 22, y: 15.5, width: 11, height: 2 }),
-                React.createElement('rect', { className: 'mg-open-btn-bar', x: NODE_W - 22, y: 20, width: 11, height: 2 })
+                React.createElement('rect', { className: 'mg-open-btn-bar', x: w - 22, y: 11, width: 11, height: 2 }),
+                React.createElement('rect', { className: 'mg-open-btn-bar', x: w - 22, y: 15.5, width: 11, height: 2 }),
+                React.createElement('rect', { className: 'mg-open-btn-bar', x: w - 22, y: 20, width: 11, height: 2 })
               ),
               fields.map(function (c, i) {
                 var y = HEADER_H + 11 + i * FIELD_H;
+                var typeW = Math.min(64, textWidth(String(c.type == null ? '' : c.type), FONT_SMALL));
                 return React.createElement(
                   React.Fragment,
                   { key: c.name },
-                  React.createElement('text', { className: 'mg-field', x: 10, y: y }, c.name),
-                  React.createElement('text', { className: 'mg-field-type', x: NODE_W - 10, y: y, textAnchor: 'end' }, c.type)
+                  // The type is right-aligned, so the name's budget is whatever
+                  // the type does not claim — otherwise the two met in the middle.
+                  React.createElement('text', { className: 'mg-field', x: 10, y: y },
+                    fitText(c.name, w - 28 - typeW, FONT_FIELD)),
+                  React.createElement('text', { className: 'mg-field-type', x: w - 10, y: y, textAnchor: 'end' },
+                    fitText(c.type, 64, FONT_SMALL))
                 );
               }),
               hidden > 0 && React.createElement('text', {
@@ -781,34 +923,66 @@ var ModelGraph = (function () {
         React.createElement(
           'div',
           { className: 'ide-model-graph-actions' },
-          // A native datalist rather than a bespoke dropdown: the browser gives
-          // us the filtering and keyboard handling for free.
-          React.createElement('input', {
-            className: 'ide-model-graph-search',
-            type: 'search',
-            list: 'mg-model-names',
-            placeholder: 'Centre on a model…',
-            value: search,
-            onChange: function (e) {
-              setSearch(e.target.value);
-              // Picking from the datalist fires change with the full name, so
-              // an exact hit centres immediately rather than needing Enter.
-              if (placed.positions[e.target.value]) centreOn(e.target.value);
-            },
-            onKeyDown: function (e) {
-              if (e.key !== 'Enter') return;
-              var match = models.filter(function (m) {
-                return m.name.toLowerCase().indexOf(e.target.value.trim().toLowerCase()) === 0;
-              })[0];
-              if (match) { setSearch(match.name); centreOn(match.name); }
-            }
-          }),
+          // A real dropdown rather than a native <datalist>. The datalist was
+          // chosen to get filtering and keyboard handling for free, but the
+          // browser renders it as an unstyleable list in the platform's own
+          // chrome — wrong font, wrong colours, and no way to show which model
+          // is in which cluster. This is a few more lines and looks like the
+          // rest of the editor.
           React.createElement(
-            'datalist',
-            { id: 'mg-model-names' },
-            models.map(function (m) {
-              return React.createElement('option', { key: m.name, value: m.name });
-            })
+            'div',
+            { className: 'mg-search-wrap' },
+            React.createElement('input', {
+              className: 'ide-model-graph-search',
+              type: 'text',
+              placeholder: 'Centre on a model…',
+              value: search,
+              onChange: function (e) { setSearch(e.target.value); setSearchOpen(true); setHighlight(0); },
+              onFocus: function () { setSearchOpen(true); },
+              // A click on an option would otherwise be lost: blur fires first
+              // and unmounts the list before mousedown lands.
+              onBlur: function () { window.setTimeout(function () { setSearchOpen(false); }, 120); },
+              onKeyDown: function (e) {
+                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                  e.preventDefault();
+                  setSearchOpen(true);
+                  setHighlight(function (h) {
+                    var next = h + (e.key === 'ArrowDown' ? 1 : -1);
+                    if (next < 0) return searchMatches.length - 1;
+                    if (next >= searchMatches.length) return 0;
+                    return next;
+                  });
+                  return;
+                }
+                if (e.key === 'Escape') { setSearchOpen(false); return; }
+                if (e.key !== 'Enter') return;
+                var pick = searchMatches[highlight] || searchMatches[0];
+                if (pick) { setSearch(pick.name); setSearchOpen(false); centreOn(pick.name); }
+              }
+            }),
+            searchOpen && searchMatches.length > 0 && React.createElement(
+              'ul',
+              { className: 'mg-search-list' },
+              searchMatches.map(function (m, i) {
+                return React.createElement(
+                  'li',
+                  {
+                    key: m.name,
+                    className: 'mg-search-option' + (i === highlight ? ' mg-search-option-active' : ''),
+                    onMouseEnter: function () { setHighlight(i); },
+                    onMouseDown: function (ev) {
+                      ev.preventDefault();   // keep focus so blur cannot beat us
+                      setSearch(m.name);
+                      setSearchOpen(false);
+                      centreOn(m.name);
+                    }
+                  },
+                  React.createElement('span', { className: 'mg-search-option-name' }, m.name),
+                  React.createElement('span', { className: 'mg-search-option-meta' },
+                    (m.table || '') + (m.columnCount ? ' · ' + m.columnCount + ' cols' : ''))
+                );
+              })
+            )
           ),
           React.createElement('button', {
             type: 'button', className: 'ide-model-graph-btn', title: 'Fit the whole graph',

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

@@ -117,6 +117,14 @@ var FileService = (function () {
     return axios.get(window.mbeditorBasePath() + '/ping', { timeout: 4000 }).then(function(res) { return res.data; });
   }
 
+  // Which routes reach each action in a controller. Returns { controller, actions }
+  // with an empty actions map for anything that is not a controller, so the
+  // caller does not have to know the naming convention.
+  function getRoutes(path) {
+    return axios.get(window.mbeditorBasePath() + '/routes?path=' + encodeURIComponent(path))
+      .then(function (res) { return res.data; });
+  }
+
   function getState() {
     return axios.get(window.mbeditorBasePath() + '/state').then(function(res) { return res.data; });
   }
@@ -336,6 +344,7 @@ var FileService = (function () {
     formatFile: formatFile,
     runTests: runTests,
     ping: ping,
+    getRoutes: getRoutes,
     getState: getState,
     saveState: saveState,
     getBranchState: getBranchState,

data/app/assets/stylesheets/mbeditor/editor.css

@@ -61,6 +61,17 @@ html, body, #mbeditor-root {
   font-size: 13px;
   color: var(--ide-text);
   font-weight: 500;
+  /* Never wrap: the titlebar is a fixed 32px row, so a second line pushed the
+     toolbar buttons out of it. */
+  white-space: nowrap;
+}
+
+/* Below the width where the toolbar drops its button labels, drop the title
+   too. The layers icon beside it already identifies the editor, and the host
+   and port are in the browser's own address bar. */
+@media (max-width: 1180px) {
+  .ide-titlebar-title { display: none; }
+  .ide-titlebar-icon { margin-right: 0; }
 }
 
 /* Fills the gap between the title and the button cluster. min-width: 0 lets it
@@ -3335,3 +3346,52 @@ input.ide-model-graph-search[type="search"] {
   background-image: none;
   padding-inline-start: 8px;
 }
+
+/* Model-graph search dropdown. Replaces a native <datalist>, which the browser
+   renders in its own chrome — unstyleable, and unable to show the table name
+   beside each model. */
+.mg-search-wrap { position: relative; display: inline-block; }
+.mg-search-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 40;
+  min-width: 220px;
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background: var(--ide-panel-bg, #252526);
+  border: 1px solid var(--ide-border, #3c3c3c);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
+}
+.mg-search-option {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 4px 10px;
+  font-size: 11px;
+  color: var(--ide-text, #d4d4d4);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.mg-search-option-active { background: var(--ide-accent, #3794ff); color: #fff; }
+.mg-search-option-name { font-family: var(--ide-mono, monospace); }
+.mg-search-option-meta { color: var(--ide-text-muted, #858585); font-size: 10px; }
+.mg-search-option-active .mg-search-option-meta { color: rgba(255, 255, 255, 0.75); }
+
+/* Inline route hints beside controller actions. Muted and italic so they read
+   as annotation rather than code — they sit on the same line as the `def`. */
+.mbeditor-route-hint {
+  color: var(--ide-text-muted, #858585) !important;
+  font-style: italic;
+  opacity: 0.85;
+}
+.mbeditor-route-hint-none {
+  color: var(--ide-warning, #cca700) !important;
+  font-style: italic;
+  opacity: 0.8;
+}

data/app/controllers/mbeditor/editors_controller.rb

@@ -1072,6 +1072,19 @@ module Mbeditor
       }
     end
 
+    # GET /mbeditor/routes?path=app/controllers/users_controller.rb
+    #
+    # Which routes reach each action in a controller, for the inline hints the
+    # editor draws beside every `def`. Returns {} for anything that is not a
+    # controller rather than erroring — the client asks for every Ruby file it
+    # opens and should not have to know the convention.
+    def routes
+      key = RouteService.controller_key(params[:path].to_s)
+      return render json: { controller: nil, actions: {} } unless key
+
+      render json: { controller: key, actions: RouteService.for_controller(key) }
+    end
+
     # GET /mbeditor/related_files?path=...
     def related_files
       path = resolve_path(params[:path])

data/app/services/mbeditor/model_graph_service.rb

@@ -22,7 +22,16 @@ module Mbeditor
       SolidQueue SolidCache SolidCable
     ].freeze
 
-    MAX_MODELS = 300
+    # Cap on models drawn. 300 was chosen before the layout could handle that
+    # many; a schema slightly over it silently lost models and only said
+    # "(truncated)". Raised, and configurable for anything larger — the cost of
+    # a bigger graph is now the browser's rendering, not the layout.
+    DEFAULT_MAX_MODELS = 1000
+
+    def self.max_models
+      value = Mbeditor.configuration.model_graph_max_models.to_i
+      value.positive? ? value : DEFAULT_MAX_MODELS
+    end
 
     # Only the first few columns travel: the diagram box shows that many and the
     # full list is a click away in the schema modal, which fetches its own data
@@ -86,7 +95,8 @@ module Mbeditor
         classes = model_classes
         return unavailable("No ActiveRecord models found in this application.") if classes.empty?
 
-        models = classes.first(MAX_MODELS).map { |klass| describe_model(klass, root) }
+        limit = max_models
+        models = classes.first(limit).map { |klass| describe_model(klass, root) }
         known = models.map { |m| m[:name] }.to_set
 
         {
@@ -95,7 +105,7 @@ module Mbeditor
           # Edges to classes outside the graph (a gem's model, or a typo in
           # class_name:) would render as arrows into nowhere.
           edges: models.flat_map { |m| m.delete(:edges) }.select { |e| known.include?(e[:to]) }.uniq,
-          truncated: classes.length > MAX_MODELS,
+          truncated: classes.length > limit,
           generatedAt: Time.now.utc.iso8601
         }
       rescue StandardError => e

data/app/services/mbeditor/route_service.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Mbeditor
+  # Which routes reach a controller's actions, for the inline hints shown beside
+  # each `def` in a controller file.
+  #
+  # Read from the host app's own route set rather than by parsing config/routes.rb.
+  # mbeditor runs inside the host app, so the routes are already built — and they
+  # are the only source that accounts for `resources` expansion, `member`/
+  # `collection` blocks, scopes, constraints, mounted engines and anything a
+  # routes file does in plain Ruby. Parsing the file would get all of that wrong.
+  module RouteService
+    module_function
+
+    # Actions with no route are worth calling out, but only for controllers Rails
+    # would actually dispatch to. These are the inherited ones every controller
+    # has and nobody routes.
+    NON_ACTION_METHODS = %w[
+      new inspect method_of to_s hash class dup freeze
+    ].freeze
+
+    # "app/controllers/admin/users_controller.rb" -> "admin/users", which is the
+    # key Rails stores in a route's defaults.
+    def controller_key(relative_path)
+      path = relative_path.to_s.sub(%r{\A/+}, "")
+      match = path.match(%r{\Aapp/controllers/(.+)_controller\.rb\z})
+      return nil unless match
+
+      match[1]
+    end
+
+    # => { "show" => [{ verb:, path:, name: }], ... }
+    def for_controller(key)
+      return {} if key.nil? || key.empty?
+      return {} unless defined?(Rails) && Rails.respond_to?(:application) && Rails.application
+
+      routes_for(key)
+    rescue StandardError
+      # A broken route set must not take the editor down with it — the file still
+      # opens, just without hints.
+      {}
+    end
+
+    def routes_for(key)
+      out = {}
+      Rails.application.routes.routes.each do |route|
+        defaults = route.defaults
+        next unless defaults[:controller] == key
+
+        action = defaults[:action].to_s
+        next if action.empty?
+
+        (out[action] ||= []) << {
+          verb: verb_for(route),
+          path: path_for(route),
+          name: route.name
+        }
+      end
+      out
+    end
+    private_class_method :routes_for
+
+    # Rails has moved this between a String and a Regexp across versions; both
+    # stringify usefully, but a Regexp needs its slashes stripped.
+    def verb_for(route)
+      verb = route.verb
+      verb = verb.source.gsub(%r{[$^]}, "") if verb.is_a?(Regexp)
+      verb = verb.to_s
+      verb.empty? ? "ANY" : verb
+    end
+    private_class_method :verb_for
+
+    # "(.:format)" is noise in a hint that has to fit on one line.
+    def path_for(route)
+      route.path.spec.to_s.sub(/\(\.:format\)\z/, "")
+    end
+    private_class_method :path_for
+  end
+end

data/lib/mbeditor/configuration.rb

@@ -12,7 +12,7 @@ module Mbeditor
                   :js_program, :js_program_exclude,
                   :js_syntax_check, :babel_standalone_path,
                   :ruby_lsp, :ruby_lsp_command, :ruby_lsp_timeout,
-                  :exception_capture,
+                  :exception_capture, :model_graph_max_models,
                   :search_respect_gitignore, :ripgrep_command
 
     def initialize
@@ -84,6 +84,9 @@ module Mbeditor
       # same exposure the log panel already has, since it tails the dev log.
       # Set to false to record nothing.
       @exception_capture = :auto
+      # Models drawn in the model graph before it reports itself truncated.
+      # nil uses ModelGraphService::DEFAULT_MAX_MODELS.
+      @model_graph_max_models = nil
       @mount_path = nil # explicit URL prefix override; nil falls through to detection/"/mbeditor"
       @resilient_routing = true # serve /mbeditor from middleware so the editor survives a broken host routes.rb; false is the escape hatch
     end

data/lib/mbeditor/engine.rb

@@ -54,9 +54,23 @@ module Mbeditor
       # Insert before CheckPending so our middleware wraps it and can rescue
       # the error it raises. Falls back silently if CheckPending is absent
       # (e.g. host app does not use ActiveRecord).
-      # Note: app.middleware is a MiddlewareStackProxy during initializers and
-      # does not support .to_a — rely solely on defined? to detect ActiveRecord.
-      if defined?(ActiveRecord::Migration::CheckPending)
+      #
+      # The constant being defined is not enough: Rails only puts CheckPending
+      # in the stack when config.active_record.migration_error is :page_load, so
+      # an app that loads ActiveRecord with any other setting has the constant
+      # but no middleware — and insert_before then raises "No such middleware",
+      # taking the host app's boot down with it. app.middleware is a
+      # MiddlewareStackProxy here and cannot be inspected, so the only way to
+      # know is to try it. Losing this middleware costs a friendlier pending-
+      # migration page, which is never worth failing to boot over.
+      # Rescuing the call is not an option: app.middleware is a
+      # MiddlewareStackProxy, so insert_before only records the operation and the
+      # "No such middleware" error surfaces later, during merge_into. Test the
+      # same condition Rails uses to add CheckPending in the first place.
+      migration_error = app.config.respond_to?(:active_record) &&
+                        app.config.active_record[:migration_error]
+
+      if defined?(ActiveRecord::Migration::CheckPending) && migration_error == :page_load
         app.middleware.insert_before ActiveRecord::Migration::CheckPending,
                                      Mbeditor::Rack::HandlePendingMigrations
       end

data/lib/mbeditor/route_map.rb

@@ -44,6 +44,7 @@ module Mbeditor
     get    'client_config',   to: 'editors#client_config'
     get    'related_files',   to: 'editors#related_files'
     get    'model_schema',    to: 'editors#model_schema'
+    get    'routes',          to: 'editors#routes'
     get    'changelog',       to: 'editors#changelog'
     get    'git_info',        to: 'editors#git_info'
     get    'git_status',      to: 'editors#git_status'

data/lib/mbeditor/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Mbeditor
-  VERSION = "0.12.1"
+  VERSION = "0.12.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mbeditor
 version: !ruby/object:Gem::Version
-  version: 0.12.1
+  version: 0.12.2
 platform: ruby
 authors:
 - Oliver Noonan
@@ -133,6 +133,7 @@ files:
 - app/services/mbeditor/rails_related_files_service.rb
 - app/services/mbeditor/redmine_service.rb
 - app/services/mbeditor/ri_definition_service.rb
+- app/services/mbeditor/route_service.rb
 - app/services/mbeditor/ruby_definition_service.rb
 - app/services/mbeditor/safe_path.rb
 - app/services/mbeditor/schema_service.rb