mbeditor 0.11.0 → 0.12.0

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

@@ -11,6 +11,27 @@ var useState = _React.useState;
 var useEffect = _React.useEffect;
 var useRef = _React.useRef;
 
+// Functional setTreeData updater shared by every path that re-fetches the tree
+// (WebSocket push, the 10s poll, the manual refresh button).
+//
+// Returning prevData when nothing changed is the whole point: the fetched array
+// is always a fresh object, so returning it unconditionally makes React commit
+// on every tick and defeats FileTreeMemo's `prev.items === next.items` check —
+// a full app re-render every 10 seconds, forever, with the tree untouched.
+//
+// The comparison is a deep one. An earlier version hashed only the top-level
+// entry names, which missed every file added or removed inside a directory:
+// the re-render happened anyway, and the quick-open index was never rebuilt.
+// JSON.stringify over the whole tree measures 0.33 ms for ~1600 nodes, well
+// under the render it saves.
+function _treeUpdater(newData) {
+  return function (prevData) {
+    if (JSON.stringify(newData) === JSON.stringify(prevData)) return prevData;
+    SearchService.buildIndex(newData);
+    return newData;
+  };
+}
+
 var SIDEBAR_MIN_WIDTH = 280;
 var SIDEBAR_MAX_WIDTH = 560;
 var EDITOR_MIN_WIDTH = 320;
@@ -356,6 +377,11 @@ var MbeditorApp = function MbeditorApp() {
   var schemaModal = _useStateSchemaModal2[0];
   var setSchemaModal = _useStateSchemaModal2[1];
 
+  var _useStateImportConflict = useState(null);
+  var _useStateImportConflict2 = _slicedToArray(_useStateImportConflict, 2);
+  var importConflict = _useStateImportConflict2[0];
+  var setImportConflict = _useStateImportConflict2[1];
+
   var _useStateSchemaLoading = useState(null);
   var _useStateSchemaLoading2 = _slicedToArray(_useStateSchemaLoading, 2);
   var schemaLoadingLabel = _useStateSchemaLoading2[0];
@@ -451,6 +477,54 @@ var MbeditorApp = function MbeditorApp() {
   var problemCounts = _useStateProblemCounts2[0];
   var setProblemCounts = _useStateProblemCounts2[1];
 
+  // Below this the toolbar's labelled buttons no longer fit beside the title
+  // and the file search, and start pushing each other out of the bar.
+  var TOOLBAR_LABEL_MIN_WIDTH = 1180;
+
+  // matchMedia rather than a resize listener: the browser only tells us when
+  // the answer actually changes, so there is nothing to throttle.
+  var _useStateNarrow = useState(function () {
+    return typeof window.matchMedia === 'function' &&
+      window.matchMedia('(max-width: ' + TOOLBAR_LABEL_MIN_WIDTH + 'px)').matches;
+  });
+  var _useStateNarrow2 = _slicedToArray(_useStateNarrow, 2);
+  var narrowToolbar = _useStateNarrow2[0];
+  var setNarrowToolbar = _useStateNarrow2[1];
+
+  useEffect(function () {
+    if (typeof window.matchMedia !== 'function') return;
+    var mq = window.matchMedia('(max-width: ' + TOOLBAR_LABEL_MIN_WIDTH + 'px)');
+    var onChange = function (e) { setNarrowToolbar(e.matches); };
+    setNarrowToolbar(mq.matches);
+    // addEventListener on MediaQueryList is the modern spelling; addListener
+    // is kept for older Safari, which mbeditor still runs in.
+    if (mq.addEventListener) mq.addEventListener('change', onChange);
+    else mq.addListener(onChange);
+    return function () {
+      if (mq.removeEventListener) mq.removeEventListener('change', onChange);
+      else mq.removeListener(onChange);
+    };
+  }, []);
+
+  // Model graph. Built lazily — generating it eager-loads the host app — and
+  // only when the Models tab is opened.
+  var _useStateModelGraph = useState(null);
+  var _useStateModelGraph2 = _slicedToArray(_useStateModelGraph, 2);
+  var modelGraph = _useStateModelGraph2[0];
+  var setModelGraph = _useStateModelGraph2[1];
+
+  var _useStateModelGraphLoading = useState(false);
+  var _useStateModelGraphLoading2 = _slicedToArray(_useStateModelGraphLoading, 2);
+  var modelGraphLoading = _useStateModelGraphLoading2[0];
+  var setModelGraphLoading = _useStateModelGraphLoading2[1];
+
+  // ruby-lsp status for the status-bar chip. 'off' means never available here,
+  // 'degraded' means we backed off after a failure, 'ok' means it's answering.
+  var _useStateLspHealth = useState({ status: 'off', reason: null });
+  var _useStateLspHealth2 = _slicedToArray(_useStateLspHealth, 2);
+  var lspHealth = _useStateLspHealth2[0];
+  var setLspHealth = _useStateLspHealth2[1];
+
   var _useState18g = useState(320);
   var _useState18g2 = _slicedToArray(_useState18g, 2);
   var gitPanelWidth = _useState18g2[0];
@@ -541,6 +615,10 @@ var MbeditorApp = function MbeditorApp() {
   var editorPrefs = _useState18p2[0];
   var setEditorPrefs = _useState18p2[1];
 
+  // Icon-only toolbar: on by preference, or automatically once the window is
+  // too narrow for the labels to fit beside the title and file search.
+  var toolbarIconOnly = editorPrefs.toolbarIconOnly || narrowToolbar;
+
   var _useState19 = useState({
     openEditors: false,
     projects: false
@@ -597,8 +675,44 @@ var MbeditorApp = function MbeditorApp() {
   var setCustomPaths = _useStateCP2[1];
   var customPathsRef = useRef([]);
   customPathsRef.current = customPaths;
+  // Whether to show the presence chips at all. Read at render rather than held in
+  // state: cable availability changes on handshake and on every reconnect, so a
+  // stored copy is stale the moment it is written. This only decides whether a
+  // chip paints — the protocol itself is gated on the roster.
+  var collabEnabled = typeof WebSocketService !== 'undefined' &&
+    typeof WebSocketService.isCableAvailable === 'function' &&
+    WebSocketService.isCableAvailable();
+  var _useStateIdent = useState(
+    typeof CollaborationIdentity !== 'undefined' ? CollaborationIdentity.get() : null
+  );
+  var _useStateIdent2 = _slicedToArray(_useStateIdent, 2);
+  var collabIdentity = _useStateIdent2[0];
+  var setCollabIdentity = _useStateIdent2[1];
+  // Presence roster: other connected participants, keyed by client_id →
+  // { name, colour, current_file }. Fed by the global presence stream; rendered
+  // as click-to-jump chips in the status bar.
+  var _useStateRoster = useState({});
+  var _useStateRoster2 = _slicedToArray(_useStateRoster, 2);
+  var collabRoster = _useStateRoster2[0];
+  var setCollabRoster = _useStateRoster2[1];
+
+  // Follow mode (slice 8): the presence client_id of the participant whose file +
+  // viewport we're tracking, or null when navigating independently. Toggled from a
+  // roster chip. The file-open is driven by the effect below; the scroll-tracking
+  // lives in CollaborationService.setFollow().
+  var _useStateFollow = useState(null);
+  var _useStateFollow2 = _slicedToArray(_useStateFollow, 2);
+  var followedClientId = _useStateFollow2[0];
+  var setFollowedClientId = _useStateFollow2[1];
   var recentSavesRef = useRef({});
   var isSavingRef = useRef(false);
+  // True once the saved session has finished loading into the panes. Anything
+  // that opens a tab on startup must wait for this, or the restore overwrites it.
+  var _useStateSR = useState(false);
+  var _useStateSR2 = _slicedToArray(_useStateSR, 2);
+  var sessionRestored = _useStateSR2[0];
+  var setSessionRestored = _useStateSR2[1];
+  var pendingChangelogRef = useRef(false);
   // path -> the file's content as last seen ON DISK (newline-normalised).
   // External-change detection compares disk-to-disk; comparing disk to the
   // buffer flags every dirty tab, which is just the definition of "dirty".
@@ -716,6 +830,112 @@ var MbeditorApp = function MbeditorApp() {
     return path && (path.endsWith('.rb') || path.endsWith('.gemspec') || path.endsWith('Rakefile') || path.endsWith('Gemfile'));
   };
 
+  // editor_plugins.js owns the ruby-lsp health flags; this app never writes
+  // them directly. Tolerates the plugins file not having loaded yet.
+  var noteLspFailure = function noteLspFailure(err) {
+    if (window.MbeditorEditorPlugins && MbeditorEditorPlugins.noteLspFailure) {
+      MbeditorEditorPlugins.noteLspFailure(err);
+    }
+  };
+
+  // Opens the schema modal for a model. Shared by the Rails panel's schema
+  // button and the model diagram, so both show the same thing.
+  var openSchemaModal = function openSchemaModal(label) {
+    if (schemaLoadingLabel === label) return;
+    setSchemaLoadingLabel(label);
+    FileService.getModelSchema(label.replace(/\s+/g, '')).then(function (data) {
+      setSchemaLoadingLabel(null);
+      setSchemaModal(data && data.columns
+        ? { label: label, data: data }
+        : { label: label, error: 'No schema found for ' + label });
+    })["catch"](function (err) {
+      setSchemaLoadingLabel(null);
+      var msg = (err && err.response && err.response.data && err.response.data.error) ||
+        'No db/schema.rb found or table not defined';
+      setSchemaModal({ label: label, error: msg });
+    });
+  };
+
+  // The server caches on a fingerprint of app/models and db/migrate mtimes, so
+  // re-requesting on every tab visit is cheap and picks up a saved model or a
+  // new migration without any invalidation wiring here.
+  var loadModelGraph = function loadModelGraph(force) {
+    if (!FileService.getModelGraph) return;
+    setModelGraphLoading(true);
+    FileService.getModelGraph(force).then(function (data) {
+      setModelGraph(data);
+    })["catch"](function (err) {
+      setModelGraph({
+        ok: false,
+        error: (err && err.response && err.response.data && err.response.data.error) ||
+          'Could not load the model graph.'
+      });
+    })["finally"](function () { setModelGraphLoading(false); });
+  };
+
+  useEffect(function () {
+    if (activeSidebarTab !== 'models' || sidebarCollapsed) return;
+    loadModelGraph(false);
+  }, [activeSidebarTab, sidebarCollapsed]);
+
+  var readLspHealth = function readLspHealth() {
+    if (!window.MBEDITOR_RUBY_LSP_AVAILABLE) {
+      return { status: 'off', reason: window.MBEDITOR_RUBY_LSP_REASON || null };
+    }
+    if (window.MbeditorEditorPlugins && MbeditorEditorPlugins.lspBackedOff()) {
+      return { status: 'degraded', reason: window.MBEDITOR_RUBY_LSP_REASON || null };
+    }
+    return { status: 'ok', reason: null };
+  };
+
+  // The backoff expires on a wall-clock deadline rather than a timer, so the
+  // chip also re-reads on a slow interval — otherwise it would sit on
+  // 'degraded' until the next failure or restart click.
+  //
+  // readLspHealth() builds a fresh object every call, so handing it straight to
+  // setLspHealth re-rendered the whole app every 10 seconds whether or not the
+  // health had changed — React bails on Object.is, and two object literals are
+  // never identical. Compare the fields and keep the previous object when they
+  // match. (Same shape of bug as the file-tree poll; see _treeUpdater.)
+  useEffect(function () {
+    var sync = function () {
+      setLspHealth(function (prev) {
+        var next = readLspHealth();
+        if (prev && prev.status === next.status && prev.reason === next.reason) return prev;
+        return next;
+      });
+    };
+    sync();
+    window.addEventListener('mbeditor:lsp-health', sync);
+    var tick = setInterval(sync, 10000);
+    return function () {
+      window.removeEventListener('mbeditor:lsp-health', sync);
+      clearInterval(tick);
+    };
+  }, []);
+
+  var restartRubyLsp = function restartRubyLsp() {
+    if (!FileService.rubyLspRequest) return;
+    EditorStore.setStatus('Restarting ruby-lsp…', 'info');
+    FileService.rubyLspRequest('restart', '', '', 1, 1).then(function (data) {
+      var ok = data && data.available && data.state !== 'failed';
+      if (ok) {
+        window.MBEDITOR_RUBY_LSP_AVAILABLE = true;
+        window.MBEDITOR_RUBY_LSP_DISABLED_UNTIL = 0;
+        window.MBEDITOR_RUBY_LSP_REASON = null;
+      } else {
+        window.MBEDITOR_RUBY_LSP_REASON =
+          (data && (data.reason || data.error)) || 'ruby-lsp did not come back';
+      }
+      EditorStore.setStatus(ok ? 'ruby-lsp restarted' : 'ruby-lsp unavailable', ok ? 'success' : 'warning');
+      setLspHealth(readLspHealth());
+    })["catch"](function (err) {
+      noteLspFailure(err);
+      EditorStore.setStatus('Could not restart ruby-lsp', 'error');
+      setLspHealth(readLspHealth());
+    });
+  };
+
   var applyMarkersForTab = function applyMarkersForTab(paneId, tabId, nextMarkers) {
     var currentPane = EditorStore.getState().panes.find(function (p) {
       return p.id === paneId;
@@ -748,14 +968,15 @@ var MbeditorApp = function MbeditorApp() {
     // Anything short of a usable answer falls through to the HTTP lint for
     // this call, so behaviour without ruby-lsp is unchanged.
     var lintRequest;
-    if (window.MBEDITOR_RUBY_LSP_AVAILABLE && isRubyPath(tab.path) && FileService.lspDiagnostics) {
+    var lspUsable = window.MBEDITOR_RUBY_LSP_AVAILABLE &&
+      !(window.MbeditorEditorPlugins && MbeditorEditorPlugins.lspBackedOff());
+    if (lspUsable && isRubyPath(tab.path) && FileService.lspDiagnostics) {
       lintRequest = FileService.lspDiagnostics(tab.path, tab.content).then(function (res) {
         if (res && res.markers && !res.fallback && !res.error) return res;
+        noteLspFailure({ lspData: res || {} });
         return FileService.lintFile(tab.path, tab.content);
       })["catch"](function (err) {
-        if (err && err.response && err.response.status === 422) {
-          window.MBEDITOR_RUBY_LSP_AVAILABLE = false;
-        }
+        noteLspFailure(err);
         return FileService.lintFile(tab.path, tab.content);
       });
     } else {
@@ -939,6 +1160,9 @@ var MbeditorApp = function MbeditorApp() {
         if (t.isCombinedDiff || (t.path || '').startsWith('combined-diff://') || (t.path || '').startsWith('diff://')) {
           return Promise.resolve({ content: '' });
         }
+        if (t.isModelGraph || t.path === 'mbeditor://model-graph') {
+          return Promise.resolve({ content: '' });
+        }
         var sourcePath = t.isPreview || /::preview$/.test(t.path || '') ? t.previewFor || (t.path || '').replace(/::preview$/, '') : t.path;
         return FileService.getFile(sourcePath, { allowMissing: true }).then(function (data) {
           return {
@@ -962,7 +1186,7 @@ var MbeditorApp = function MbeditorApp() {
           p.tabs.forEach(function (t) {
             var res = results[resIdx++];
             var isPlainFile = t.path && !t.isDiff && !t.isCombinedDiff && !t.isSettings &&
-              !t.isChangelog && !t.isPreview &&
+              !t.isChangelog && !t.isPreview && !t.isModelGraph &&
               !/^(diff|combined-diff):\/\//.test(t.path) && !/::preview$/.test(t.path);
             if (isPlainFile) {
               if (seenPaths[t.path]) return;
@@ -971,7 +1195,11 @@ var MbeditorApp = function MbeditorApp() {
             tabs.push(_extends({}, t, {
               content: res.content,
               externalContentVersion: (t.externalContentVersion || 0) + 1
-            }, res._isDiffResult ? { diffOriginal: res.diffOriginal, diffModified: res.diffModified } : {},
+            },
+            // A state saved before this tab type existed carries the path but
+            // not the flag, and would restore as a missing file.
+            t.path === 'mbeditor://model-graph' ? { isModelGraph: true } : {},
+            res._isDiffResult ? { diffOriginal: res.diffOriginal, diffModified: res.diffModified } : {},
             typeof res.fileNotFound === 'boolean' ? { fileNotFound: res.fileNotFound, dirty: res.fileNotFound ? false : t.dirty } : {},
             res.image === true ? { isImage: true } : {}));
           });
@@ -1045,7 +1273,8 @@ var MbeditorApp = function MbeditorApp() {
         }
         return loadPaneState(panesToLoad, focusedPaneId);
       });
-    });
+    })["catch"](function () { /* fall through to marking restore done */ })
+      .then(function () { setSessionRestored(true); });
 
     // Watch for git branch changes and swap per-branch tab state
     var unsubBranch = EditorStore.subscribeToSlice(['gitBranch'], function (st) {
@@ -1081,7 +1310,7 @@ var MbeditorApp = function MbeditorApp() {
           return {
             id: p.id,
             activeTabId: p.activeTabId,
-            tabs: p.tabs.filter(function (t) { return !t.isCombinedDiff; }).map(function (t) {
+            tabs: p.tabs.filter(function (t) { return !t.isCombinedDiff && !t.isModelGraph; }).map(function (t) {
               return {
                 id: t.id, path: t.path, name: t.name, dirty: t.dirty, viewState: t.viewState,
                 isSettings: !!t.isSettings, isPreview: !!t.isPreview, previewFor: t.previewFor || null,
@@ -1419,12 +1648,7 @@ var MbeditorApp = function MbeditorApp() {
       if (document.hidden) return;
       GitService.fetchStatus()["catch"](function () {});
       FileService.getTree().then(function (data) {
-        var newData = data || [];
-        setTreeData(function (prevData) {
-          var sig = function(d) { return d.length + ':' + d.map(function(n) { return n.name; }).join(','); };
-          if (sig(newData) !== sig(prevData)) SearchService.buildIndex(newData);
-          return newData;
-        });
+        setTreeData(_treeUpdater(data || []));
         checkOpenTabsForExternalChanges();
       })["catch"](function () {});
       if (payload && payload.paths && searchQueryRef.current && searchPanelVisibleRef.current) {
@@ -1436,6 +1660,41 @@ var MbeditorApp = function MbeditorApp() {
     return function () { WebSocketService.offFilesChanged(handleFilesChanged); };
   }, []);
 
+  // WebSocket push — when a peer saves a collaboratively-bound file, the CRDT has
+  // already kept our buffer byte-identical, so the single on-disk write is enough
+  // for everyone. Reset that tab's clean baseline and clear its dirty indicator
+  // without touching disk or undo history. Gated on the file being collab-bound:
+  // for non-collab tabs a peer's save is an external change handled by the
+  // files_changed path above (which respects local unsaved edits).
+  useEffect(function () {
+    function handleFileSaved(data) {
+      var path = data && data.path;
+      if (!path) return;
+      if (typeof CollaborationService === 'undefined' || !CollaborationService.isBound(path)) return;
+
+      var st = EditorStore.getState();
+      var changed = false;
+      var newPanes = st.panes.map(function (p) {
+        return Object.assign({}, p, {
+          tabs: p.tabs.map(function (t) {
+            if (t.path !== path || !t.dirty) return t;
+            changed = true;
+            return Object.assign({}, t, { dirty: false, cleanContent: t.content });
+          })
+        });
+      });
+      if (changed) EditorStore.setState({ panes: newPanes });
+
+      // Reset the AVI clean baseline so undo past this peer's save shows dirty correctly.
+      var _modelEntry = window.__mbeditorModels && window.__mbeditorModels[path];
+      if (_modelEntry && _modelEntry.model && !_modelEntry.model.isDisposed()) {
+        _modelEntry.cleanVersionId = _modelEntry.model.getAlternativeVersionId();
+      }
+    }
+    WebSocketService.onFileSaved(handleFileSaved);
+    return function () { WebSocketService.offFileSaved(handleFileSaved); };
+  }, []);
+
   function checkOpenTabsForExternalChanges() {
     var st = EditorStore.getState();
     var allTabs = st.panes.reduce(function (acc, p) {
@@ -1456,6 +1715,16 @@ var MbeditorApp = function MbeditorApp() {
     fileTabs.forEach(function (pt) {
       var savedAt = recentSavesRef.current[pt.tab.path];
       if (savedAt && Date.now() - savedAt < 3000) return;
+      // A collaboratively-bound file's live buffer is the shared CRDT, kept
+      // converged across peers and reconciled with disk on save (file_saved).
+      // Re-applying an external on-disk snapshot over it would silently clobber
+      // everyone's shared state, so skip detection here — the CRDT is authoritative
+      // while peers are editing. Intentional local edits (Format/Load) still flow
+      // through the binding and are unaffected.
+      if (typeof CollaborationService !== 'undefined' &&
+          CollaborationService.isAttached(pt.tab.path)) {
+        return;
+      }
       FileService.getFile(pt.tab.path, { allowMissing: true }).then(function (data) {
         if (!data || typeof data.content !== 'string') return;
         var serverNorm = data.content.replace(/\r\n/g, '\n');
@@ -1524,17 +1793,13 @@ var MbeditorApp = function MbeditorApp() {
   // broadcasts from mbeditor's own mutation endpoints, so a connected socket
   // meant external changes were never picked up at all. The push remains the
   // instant path for our own writes; this is what catches everything else.
-  // Uses functional setTreeData to skip the re-render when nothing has changed.
+  // _treeUpdater keeps the previous array when nothing changed, so a quiet
+  // workspace costs one fetch and no re-render at all.
   useEffect(function () {
     var intervalId = setInterval(function () {
       if (document.hidden) return;
       FileService.getTree().then(function (data) {
-        var newData = data || [];
-        setTreeData(function (prevData) {
-          var sig = function(d) { return d.length + ':' + d.map(function(n) { return n.name; }).join(','); };
-          if (sig(newData) !== sig(prevData)) SearchService.buildIndex(newData);
-          return newData;
-        });
+        setTreeData(_treeUpdater(data || []));
       }).catch(function () {}); // silently ignore auto-refresh errors
     }, 10000);
     return function () { clearInterval(intervalId); };
@@ -1796,7 +2061,7 @@ var MbeditorApp = function MbeditorApp() {
         return {
           id: p.id,
           activeTabId: p.activeTabId,
-          tabs: p.tabs.filter(function(t) { return !t.isCombinedDiff; }).map(function (t) {
+          tabs: p.tabs.filter(function(t) { return !t.isCombinedDiff && !t.isModelGraph; }).map(function (t) {
             return {
               id: t.id,
               path: t.path,
@@ -1848,22 +2113,50 @@ var MbeditorApp = function MbeditorApp() {
   useEffect(function() {
     FileService.getClientConfig().then(function(cfg) {
       setCustomPaths(Array.isArray(cfg.related_files_custom_paths) ? cfg.related_files_custom_paths : []);
+      // Host-app override for the collaboration display name (user_name_callback).
+      // Null/blank falls back to the browser-generated, user-editable name.
+      if (typeof CollaborationIdentity !== 'undefined') {
+        CollaborationIdentity.setServerName(cfg.user_name);
+      }
     })['catch'](function() {});
   }, []);
 
+  // Keep the presence chip in sync with name edits / host overrides.
+  useEffect(function() {
+    if (typeof CollaborationIdentity === 'undefined') return;
+    setCollabIdentity(CollaborationIdentity.get());
+    return CollaborationIdentity.onChange(function(id) { setCollabIdentity(id); });
+  }, []);
+
   // Version-update detection: open the changelog tab automatically when the
   // gem version has changed since last time the editor was opened.
+  //
+  // Gated on sessionRestored rather than a timer. Restoring the saved session
+  // replaces every pane wholesale, so a changelog tab opened before that lands
+  // is silently thrown away — which is exactly what happened whenever the
+  // restore took longer than the old 800 ms guess (a big session, a slow or
+  // remote host). Sequencing after the restore removes the race instead of
+  // making the guess bigger.
+  //
+  // The seen-version write is deliberately NOT gated: it records that this
+  // build has been seen, and re-showing the changelog on every reload until
+  // the restore happens to succeed would be worse than missing it once.
   useEffect(function() {
     var SEEN_KEY = 'mbeditor_seen_version';
     var current = document.body.dataset.mbeditorVersion || '';
+    if (!current) return;
     var seen = localStorage.getItem(SEEN_KEY) || '';
-    if (current && seen && seen !== current) {
-      // Delay slightly so the editor finishes restoring saved tabs first
-      setTimeout(function() { openChangelogTab(); }, 800);
-    }
-    if (current) localStorage.setItem(SEEN_KEY, current);
+    localStorage.setItem(SEEN_KEY, current);
+    if (!seen || seen === current) return;
+    pendingChangelogRef.current = true;
   }, []);
 
+  useEffect(function() {
+    if (!sessionRestored || !pendingChangelogRef.current) return;
+    pendingChangelogRef.current = false;
+    openChangelogTab();
+  }, [sessionRestored]);
+
   var resourceLabelFromPath = function(p) {
     if (!p) return null;
 
@@ -1994,6 +2287,239 @@ var MbeditorApp = function MbeditorApp() {
     return t.id === focusedPane.activeTabId;
   });
 
+  // ── Collaboration presence (slice 7) ──────────────────────────────────────
+  // Only real, openable files belong in presence — virtual tabs (diffs, previews,
+  // settings/changelog) are reported as "no file" so a peer's chip stays blank
+  // rather than pointing at something click-to-jump can't open.
+  var _presenceFileFor = function (tab) {
+    if (!tab || !tab.path) return null;
+    var p = tab.path;
+    if (tab.isDiff || tab.isCombinedDiff || tab.isCommitGraph || tab.isPreview || tab.isSettings || tab.isChangelog) return null;
+    if (p.indexOf('diff://') === 0 || p.indexOf('combined-diff://') === 0 || p.indexOf('mbeditor://') === 0) return null;
+    if (p.indexOf('::preview') !== -1 || p === '__settings__') return null;
+    return p;
+  };
+  var presenceFile = _presenceFileFor(activeTab);
+
+  // Latest heartbeat payload, read by the throttled sender and the late-join
+  // re-announce so both always relay our current identity + file.
+  // Round-trip time to the cable, in ms. Our heartbeat comes back on the same
+  // stream, so timing it needs no clock comparison and no extra ping traffic. We
+  // publish the result in the next heartbeat; a peer's hover card therefore shows
+  // *their* server RTT, which is the number that explains why their edits lag.
+  //
+  // Matched by sequence number, not just "our entry appeared". Every participant's
+  // heartbeat rebroadcasts the whole roster, so our entry comes back on other
+  // people's beats too — timing against those measured the gap since our last send
+  // instead of the round trip, and read as seconds.
+  var presenceSentAtRef = useRef(0);
+  var presenceSeqRef = useRef(0);
+  var measuredSeqRef = useRef(-1);
+  var ownRttRef = useRef(null);
+  // Peer RTT + local arrival time, kept in a ref rather than roster state on
+  // purpose: both change on every heartbeat, and folding them into the compared
+  // roster fields would reinstate the 5s idle re-render this branch just removed.
+  // The hover card reads them when it opens instead, and ticks only while open.
+  var peerStatsRef = useRef({});
+
+  var presencePayloadRef = useRef(null);
+  presencePayloadRef.current = collabIdentity ? {
+    client_id:    collabIdentity.clientId,
+    name:         collabIdentity.name,
+    colour:       collabIdentity.color,
+    current_file: presenceFile,
+    rtt:          ownRttRef.current,
+    seed:         collabIdentity.seed
+  } : null;
+
+  var _sendPresenceNow = function () {
+    if (!presencePayloadRef.current) return;
+    presenceSentAtRef.current = Date.now();
+    presenceSeqRef.current += 1;
+    WebSocketService.perform(
+      'presence',
+      Object.assign({}, presencePayloadRef.current, { seq: presenceSeqRef.current })
+    );
+  };
+  // Throttle heartbeats (presence is coarse — not cursor-level), trailing edge so
+  // the final file/identity always lands.
+  var sendPresenceRef = useRef(null);
+  if (!sendPresenceRef.current) {
+    sendPresenceRef.current = (window._ && window._.throttle)
+      ? window._.throttle(_sendPresenceNow, 1000, { leading: true, trailing: true })
+      : _sendPresenceNow;
+  }
+
+  // Heartbeat: announce ourselves when the active file or our identity changes,
+  // plus a keepalive that refreshes peers who joined in between.
+  //
+  // Deliberately NOT gated on cable availability. Whether cable is up is not
+  // knowable at any single moment worth latching: the handshake completes after
+  // the /workspace fetch that first reads it, and reconnects flip it again. Any
+  // boolean captured for this decision goes stale and silently strands the page in
+  // single-user mode. WebSocketService.perform() already no-ops while
+  // disconnected, so an ungated heartbeat costs one dead call every 5s and starts
+  // working the instant the socket does.
+  useEffect(function () {
+    sendPresenceRef.current();
+    var id = setInterval(function () { sendPresenceRef.current(); }, 5000);
+    return function () { clearInterval(id); };
+  }, [presenceFile, collabIdentity ? collabIdentity.clientId : null,
+      collabIdentity ? collabIdentity.name : null, collabIdentity ? collabIdentity.color : null]);
+
+  // Roster sync. The server sends the complete roster on every change and we
+  // replace ours with it, rather than merging per-participant here/leave events.
+  // Merging could not self-correct: one missed leave left a peer in the roster
+  // permanently, and since the roster gates collaboration, that one phantom kept
+  // persistent undo off and external-change detection suppressed for the whole
+  // session. A dropped message now costs one stale interval instead.
+  // Subscribed for the life of the app, for the same reason the heartbeat is:
+  // no message arrives without a cable, so there is nothing to gate, and gating it
+  // on a latched boolean is what left presence unsubscribed when the handshake
+  // landed after startup.
+  useEffect(function () {
+    var handler = function (data) {
+      var roster = data && data.roster;
+      if (!roster) return;
+      var me = (typeof CollaborationIdentity !== 'undefined') ? CollaborationIdentity.get().clientId : null;
+
+      // The first broadcast carrying our newest seq is the one our own heartbeat
+      // caused — the server records then broadcasts in the same call. Later
+      // broadcasts repeat that seq, hence measuring once per sequence number.
+      var mineEcho = me && roster[me];
+      if (mineEcho && presenceSentAtRef.current &&
+          mineEcho.seq === presenceSeqRef.current &&
+          measuredSeqRef.current !== presenceSeqRef.current) {
+        measuredSeqRef.current = presenceSeqRef.current;
+        ownRttRef.current = Date.now() - presenceSentAtRef.current;
+      }
+
+      // rtt and idle change every broadcast, so they stay out of the compared
+      // state entirely — folding them in would re-render the app every 5s to keep
+      // a hover card fresh that nobody is looking at. The card reads this ref.
+      var next = {};
+      var stats = {};
+      Object.keys(roster).forEach(function (cid) {
+        if (cid === me) return;
+        var p = roster[cid];
+        // Validated once, here, rather than at each of the places that paints it.
+        next[cid] = {
+          name: p.name,
+          colour: CollaborationIdentity.safeColor(p.colour),
+          current_file: p.current_file,
+          seed: p.seed
+        };
+        stats[cid] = { rtt: p.rtt, idle: p.idle };
+      });
+      peerStatsRef.current = stats;
+
+      // Re-evaluated on every roster message rather than only when the peer count
+      // transitions, so availability recovers on its own after a reconnect. The
+      // service compares the computed value, so a no-change call costs nothing.
+      if (typeof CollaborationService !== 'undefined') {
+        CollaborationService.setPeerPresent(Object.keys(next).length > 0);
+      }
+
+      // Stop following someone who is no longer here.
+      setFollowedClientId(function (cur) {
+        if (cur && !next[cur]) {
+          if (typeof CollaborationService !== 'undefined') CollaborationService.clearFollow();
+          return null;
+        }
+        return cur;
+      });
+
+      setCollabRoster(function (prev) {
+        var prevIds = Object.keys(prev);
+        var nextIds = Object.keys(next);
+        var same = prevIds.length === nextIds.length && nextIds.every(function (cid) {
+          var a = prev[cid], b = next[cid];
+          return a && a.name === b.name && a.colour === b.colour &&
+                 a.current_file === b.current_file && a.seed === b.seed;
+        });
+        return same ? prev : next;
+      });
+    };
+    WebSocketService.onPresence(handler);
+    return function () { WebSocketService.offPresence(handler); };
+  }, []);
+
+  // The roster is the only "is anyone actually pairing with me?" signal, so it is
+  // what gates collaboration. Cable availability alone is not enough: it is up in
+  // a normal dev setup, and gating on it silently disabled persistent undo and
+  // external-change detection for solo users. The service is told about the roster
+  // from the presence handler above, not from an effect here, so it hears about
+  // every message rather than only about a change in the participant count.
+  var collabPeerIds = Object.keys(collabRoster);
+
+  // A labelled peer chip costs ~110px (name + filename), and the titlebar button
+  // cluster does not shrink or wrap: past three peers it squeezes the search pill
+  // to its floor and then pushes Help / Install off the right edge. Drop to bare
+  // colour dots instead of hiding peers behind a "+N more" summary — a dot is
+  // ~20px, so ten peers still fit, every chip stays clickable to follow, and the
+  // solid/hollow ring keeps working. The name and file live in the tooltip.
+  var COLLAB_LABEL_LIMIT = 3;
+  var collabPeerLabels = !toolbarIconOnly && collabPeerIds.length <= COLLAB_LABEL_LIMIT;
+
+  // Colour is minted from a hash before any peer is known, so it has to be
+  // reconciled against the roster once one exists. Runs on every roster change;
+  // reconcileColor no-ops unless we actually clash and lose the tie-break, so the
+  // usual case costs one array map and no state write.
+  useEffect(function () {
+    if (typeof CollaborationIdentity === 'undefined') return;
+    CollaborationIdentity.reconcileColor(collabPeerIds.map(function (cid) {
+      return { clientId: cid, color: collabRoster[cid].colour, seed: collabRoster[cid].seed };
+    }));
+  }, [collabRoster]);
+
+  // Hover card. Anchored from the chip's own rect, right-aligned because these
+  // chips sit against the right edge of the titlebar and a left-anchored card
+  // would run off screen.
+  var _useStateHover = useState(null);
+  var _useStateHover2 = _slicedToArray(_useStateHover, 2);
+  var collabHover = _useStateHover2[0];
+  var setCollabHover = _useStateHover2[1];
+
+  var openCollabHover = function (cid, e) {
+    var r = e.currentTarget.getBoundingClientRect();
+    setCollabHover({ cid: cid, top: r.bottom + 4, right: window.innerWidth - r.right });
+  };
+
+  // Latency and last-seen only need to tick while the card is actually on screen,
+  // so the interval lives and dies with it. Idle cost stays zero.
+  var _useStateHoverTick = useState(0);
+  var _useStateHoverTick2 = _slicedToArray(_useStateHoverTick, 2);
+  var setCollabHoverTick = _useStateHoverTick2[1];
+  useEffect(function () {
+    if (!collabHover) return;
+    var id = setInterval(function () { setCollabHoverTick(function (n) { return n + 1; }); }, 1000);
+    return function () { clearInterval(id); };
+  }, [collabHover]);
+
+  // Follow mode (slice 8): toggle tracking a roster participant. Following sets up
+  // the viewport scroll-tracking in CollaborationService; the file-open is handled
+  // by the effect below (it also re-fires when the followed peer switches files).
+  var followedFile = (followedClientId && collabRoster[followedClientId])
+    ? collabRoster[followedClientId].current_file : null;
+  var toggleFollow = function (cid) {
+    if (followedClientId === cid) {
+      setFollowedClientId(null);
+      if (typeof CollaborationService !== 'undefined') CollaborationService.clearFollow();
+    } else {
+      setFollowedClientId(cid);
+      if (typeof CollaborationService !== 'undefined') CollaborationService.setFollow(cid);
+    }
+  };
+
+  // While following, open/focus whatever file the followed participant currently
+  // has open, and re-open when they switch files. Viewport tracking within that
+  // file is handled by CollaborationService once both peers share the room.
+  useEffect(function () {
+    if (!followedClientId || !followedFile) return;
+    if (activeTab && activeTab.path === followedFile) return;
+    handleSelectFile(followedFile, followedFile.split('/').pop());
+  }, [followedClientId, followedFile]);
+
   // Phase 7: Per-file last-commit info shown in the status bar
   var _useState31 = useState(null);
   var _useState32 = _slicedToArray(_useState31, 2);
@@ -2191,6 +2717,10 @@ var MbeditorApp = function MbeditorApp() {
       if (_modelEntry && _modelEntry.model && !_modelEntry.model.isDisposed()) {
         _modelEntry.cleanVersionId = _modelEntry.model.getAlternativeVersionId();
       }
+      // Collab: push a fresh snapshot so the server compacts the buffered deltas.
+      if (typeof CollaborationService !== 'undefined' && CollaborationService.isBound(tab.path)) {
+        CollaborationService.pushSnapshot(tab.path);
+      }
       EditorStore.setStatus("Saved", "success");
       _clearDraft(tab.path);
       if (typeof HistoryService !== 'undefined') {
@@ -2397,12 +2927,7 @@ var MbeditorApp = function MbeditorApp() {
     });
     GitService.fetchStatus()["catch"](function () {});
     FileService.getTree().then(function (data) {
-      var newData = data || [];
-      setTreeData(function (prevData) {
-        if (JSON.stringify(newData) === JSON.stringify(prevData)) return prevData;
-        SearchService.buildIndex(newData);
-        return newData;
-      });
+      setTreeData(_treeUpdater(data || []));
       checkOpenTabsForExternalChanges();
       EditorStore.setStatus("Workspace refreshed", "success");
     })["catch"](function (err) {
@@ -2414,6 +2939,34 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
+  // The toolbar button and Monaco's own Format Document must not disagree
+  // about what "formatted" means, so both go through ruby-lsp when it can
+  // answer and fall back to /format when it can't — the same order the
+  // formatting provider uses. Returns { content: } either way, since the
+  // button also wants to diff the result and flash the changed lines.
+  var formatRubySource = function formatRubySource(path, code) {
+    var viaLsp = window.MBEDITOR_RUBY_LSP_AVAILABLE &&
+      !(window.MbeditorEditorPlugins && MbeditorEditorPlugins.lspBackedOff()) &&
+      isRubyPath(path);
+    if (!viaLsp) return FileService.formatFile(path, code);
+
+    return FileService.rubyLspRequest('formatting', path, code, 1, 1, { timeout: 15000 })
+      .then(function (data) {
+        var edits = data && data.result;
+        // ruby-lsp answers a whole-document replacement, or null when RuboCop's
+        // autocorrect cannot converge — in which case /format's `rubocop -A`
+        // pass still gets a turn.
+        if (Array.isArray(edits) && edits.length === 1 && typeof edits[0].newText === 'string') {
+          return { content: edits[0].newText };
+        }
+        if (data) noteLspFailure({ lspData: data });
+        return FileService.formatFile(path, code);
+      })["catch"](function (err) {
+        noteLspFailure(err);
+        return FileService.formatFile(path, code);
+      });
+  };
+
   var handleFormat = function handleFormat() {
     if (!activeTab) return;
 
@@ -2435,7 +2988,7 @@ var MbeditorApp = function MbeditorApp() {
         var detectedWidth = detectIndentWidth(originalContent);
         if (detectedWidth > 0) codeToFormat = spacesToTabs(originalContent, detectedWidth);
       }
-      FileService.formatFile(activeTab.path, codeToFormat).then(function (res) {
+      formatRubySource(activeTab.path, codeToFormat).then(function (res) {
         if (res.content) {
           // Update content and mark dirty — user decides when to save.
           // The executeEdits path in EditorPanel preserves the undo stack.
@@ -2891,6 +3444,98 @@ var MbeditorApp = function MbeditorApp() {
     });
   };
 
+  var finishImport = function finishImport(result) {
+    var imported = (result.imported || []).length;
+    var skipped  = (result.conflicts || []).length;
+    var failed   = (result.errors || []).length;
+
+    var parts = [imported + ' file' + (imported === 1 ? '' : 's') + ' imported'];
+    if (skipped > 0) parts.push(skipped + ' skipped');
+    if (failed > 0) parts.push(failed + ' failed');
+
+    var level = failed === 0 ? 'success' : (imported === 0 ? 'error' : 'warning');
+    EditorStore.setStatus(parts.join(', ') + '.', level);
+
+    if (imported > 0) {
+      refreshProjectTree().then(function() { GitService.fetchStatus(); });
+    }
+  };
+
+  // A file dropped anywhere that isn't a drop target makes the browser
+  // navigate away and open it, which loses the editor and every unsaved
+  // buffer with it. Swallow those at the window so a near-miss is a no-op
+  // rather than a disaster. Real targets stopPropagation before this runs.
+  useEffect(function () {
+    var swallow = function (e) {
+      var types = (e.dataTransfer && e.dataTransfer.types) || [];
+      if (Array.prototype.indexOf.call(types, 'Files') === -1) return;
+      e.preventDefault();
+      // dragover is left alone beyond preventDefault: setting dropEffect here
+      // would override the 'copy' cursor the tree sets on a valid folder.
+      if (e.type === 'drop') e.dataTransfer.dropEffect = 'none';
+    };
+    window.addEventListener('dragover', swallow);
+    window.addEventListener('drop', swallow);
+    return function () {
+      window.removeEventListener('dragover', swallow);
+      window.removeEventListener('drop', swallow);
+    };
+  }, []);
+
+  // Files dragged in from outside the browser. Pass one reports conflicts
+  // without touching them; if there are any, the modal collects a resolution
+  // and pass two re-sends just those entries.
+  var handleImportFiles = function handleImportFiles(entries, targetFolderPath, meta) {
+    if (meta && meta.truncated) {
+      EditorStore.setStatus('That drop holds more than ' + FileImport.MAX_ENTRIES +
+        ' files — only the first ' + FileImport.MAX_ENTRIES + ' will be imported.', 'warning');
+    } else if (meta && meta.foldersSkipped) {
+      EditorStore.setStatus('This browser cannot read dropped folders — only loose files were imported.', 'warning');
+    } else {
+      EditorStore.setStatus('Importing ' + entries.length + ' file' +
+        (entries.length === 1 ? '' : 's') + '...', 'info');
+    }
+
+    return FileService.importFiles(FileImport.buildFormData(entries, targetFolderPath, 'ask'))
+      .then(function(result) {
+        if (result.conflicts && result.conflicts.length > 0) {
+          setImportConflict({ result: result, entries: entries, targetFolderPath: targetFolderPath });
+        } else {
+          finishImport(result);
+        }
+      })['catch'](function(err) {
+        var message = err && err.response && err.response.data && err.response.data.error || err.message;
+        EditorStore.setStatus('Import failed: ' + message, 'error');
+      });
+  };
+
+  var resolveImportConflict = function resolveImportConflict(mode) {
+    var pending = importConflict;
+    setImportConflict(null);
+    if (!pending) return;
+
+    if (mode === 'skip') { finishImport(pending.result); return; }
+
+    var retry = FileImport.conflictedEntries(
+      pending.entries,
+      pending.targetFolderPath,
+      pending.result.conflicts
+    );
+    if (retry.length === 0) { finishImport(pending.result); return; }
+
+    FileService.importFiles(FileImport.buildFormData(retry, pending.targetFolderPath, mode))
+      .then(function(second) {
+        finishImport({
+          imported: (pending.result.imported || []).concat(second.imported || []),
+          conflicts: [],
+          errors: (pending.result.errors || []).concat(second.errors || [])
+        });
+      })['catch'](function(err) {
+        var message = err && err.response && err.response.data && err.response.data.error || err.message;
+        EditorStore.setStatus('Import failed: ' + message, 'error');
+      });
+  };
+
   var openContextMenu = function openContextMenu(e, node) {
     setContextMenu({ x: e.clientX, y: e.clientY, node: node });
     handleNodeSelect(node);
@@ -2957,6 +3602,12 @@ var MbeditorApp = function MbeditorApp() {
       openSettingsTab();
       return;
     }
+    // The model graph is a view, not a panel: it takes over the central area
+    // and needs the width. There is no sidebar half to show.
+    if (tab === 'models') {
+      openModelGraphTab();
+      return;
+    }
     if (!sidebarCollapsed && activeSidebarTab === tab) {
       setSidebarCollapsed(true);
     } else {
@@ -3382,6 +4033,48 @@ var MbeditorApp = function MbeditorApp() {
     EditorStore.setState({ panes: newPanes2, focusedPaneId: paneId, activeTabId: '__settings__' });
   }
 
+  // The diagram lives in an editor tab, not the sidebar: a layered graph is
+  // inherently wide and a ~300px panel can only ever show its first column.
+  // The sidebar tab is the entry point and the searchable model list.
+  var MODEL_GRAPH_TAB_ID = 'mbeditor://model-graph';
+  function openModelGraphTab() {
+    var st = EditorStore.getState();
+    var paneId = st.focusedPaneId;
+
+    var existing = null;
+    st.panes.forEach(function (p) {
+      if (!existing && p.tabs.some(function (t) { return t.id === MODEL_GRAPH_TAB_ID; })) {
+        existing = p.id;
+      }
+    });
+    if (existing) {
+      EditorStore.setState({
+        panes: st.panes.map(function (p) {
+          return p.id === existing ? Object.assign({}, p, { activeTabId: MODEL_GRAPH_TAB_ID }) : p;
+        }),
+        focusedPaneId: existing
+      });
+      return;
+    }
+
+    var pane = st.panes.find(function (p) { return p.id === paneId; }) || st.panes[0];
+    if (!pane) return;
+
+    var newTab = {
+      id: MODEL_GRAPH_TAB_ID, path: MODEL_GRAPH_TAB_ID, name: 'Model Graph',
+      dirty: false, content: '', isModelGraph: true
+    };
+    EditorStore.setState({
+      panes: st.panes.map(function (p) {
+        return p.id === pane.id
+          ? Object.assign({}, p, { tabs: p.tabs.concat(newTab), activeTabId: MODEL_GRAPH_TAB_ID })
+          : p;
+      }),
+      focusedPaneId: pane.id
+    });
+    loadModelGraph(false);
+  }
+
   var CHANGELOG_TAB_ID = 'mbeditor://changelog';
   function openChangelogTab() {
     var st = EditorStore.getState();
@@ -3472,7 +4165,7 @@ var MbeditorApp = function MbeditorApp() {
               return activeTab && handleSave(focusedPane.id, activeTab);
             }, disabled: loading.save || !activeTab || !activeTab.dirty, 'aria-busy': !!loading.save },
           !loading.save && React.createElement("i", { className: "fas fa-save" }),
-          !editorPrefs.toolbarIconOnly && !loading.save && " Save",
+          !toolbarIconOnly && !loading.save && " Save",
           !loading.save && activeTab && activeTab.dirty ? " ●" : ""
         ),
         React.createElement(
@@ -3487,7 +4180,7 @@ var MbeditorApp = function MbeditorApp() {
             { className: "fas fa-save", style: { position: 'relative' } },
             React.createElement("i", { className: "fas fa-save", style: { position: 'absolute', top: '-2px', left: '3px', fontSize: '9px', opacity: 0.8 } })
           ),
-          !editorPrefs.toolbarIconOnly && !loading.saveAll && " Save All"
+          !toolbarIconOnly && !loading.saveAll && " Save All"
         ),
         React.createElement("div", { className: "statusbar-sep" }),
         React.createElement(
@@ -3497,13 +4190,13 @@ var MbeditorApp = function MbeditorApp() {
             "button",
             { className: "statusbar-btn", onClick: function() { var ed = window.__mbeditorActiveEditor; if (ed) ed.trigger('keyboard', 'undo', null); }, disabled: !activeTab || !state.canUndo, title: "Undo (Ctrl+Z)" },
             React.createElement("i", { className: "fas fa-undo" }),
-            !editorPrefs.toolbarIconOnly && " Undo"
+            !toolbarIconOnly && " Undo"
           ),
           React.createElement(
             "button",
             { className: "statusbar-btn", onClick: function() { var ed = window.__mbeditorActiveEditor; if (ed) ed.trigger('keyboard', 'redo', null); }, disabled: !activeTab || !state.canRedo, title: "Redo (Ctrl+Y)" },
             React.createElement("i", { className: "fas fa-redo" }),
-            !editorPrefs.toolbarIconOnly && " Redo"
+            !toolbarIconOnly && " Redo"
           )
         ),
         React.createElement("div", { className: "statusbar-sep" }),
@@ -3511,7 +4204,7 @@ var MbeditorApp = function MbeditorApp() {
           "button",
           { className: "statusbar-btn", onClick: handleFormat, disabled: loading.format || !canLintAndFormat, 'aria-busy': !!loading.format },
           !loading.format && React.createElement("i", { className: "fas fa-magic" }),
-          !editorPrefs.toolbarIconOnly && !loading.format && " Format"
+          !toolbarIconOnly && !loading.format && " Format"
         ),
         hasGitBranch && React.createElement(
           React.Fragment,
@@ -3521,15 +4214,79 @@ var MbeditorApp = function MbeditorApp() {
             "button",
             { type: "button", className: "statusbar-btn", onClick: toggleGitPanel },
             React.createElement("i", { className: "fas fa-code-branch" }),
-            !editorPrefs.toolbarIconOnly && " Git"
+            !toolbarIconOnly && " Git"
           )
         ),
+        collabEnabled && collabIdentity && React.createElement(
+          React.Fragment,
+          null,
+          React.createElement("div", { className: "statusbar-sep" }),
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "statusbar-btn",
+              onMouseEnter: function (e) { openCollabHover('__me__', e); },
+              onMouseLeave: function () { setCollabHover(null); },
+              onClick: function () { CollaborationIdentity.editName(); }
+            },
+            React.createElement("i", {
+              className: "fas fa-circle collab-pulse",
+              style: { color: collabIdentity.color, fontSize: "0.7em", marginRight: "2px" }
+            }),
+            !toolbarIconOnly && (" " + collabIdentity.name)
+          )
+        ),
+        collabEnabled && collabPeerIds.length > 0 && React.createElement(
+          React.Fragment,
+          null,
+          React.createElement("div", { className: "statusbar-sep" }),
+          collabPeerIds.map(function (cid) {
+            var peer = collabRoster[cid];
+            var file = peer.current_file;
+            var name = peer.name || 'Anonymous';
+            var colour = peer.colour || '#888888';
+            var following = followedClientId === cid;
+            // Solid dot: they are in the file you are looking at, so their caret
+            // is on screen. Hollow ring: they are somewhere else and there is
+            // nothing to see — without this the chip looked identical either way
+            // and a peer's caret just vanished with no explanation.
+            var elsewhere = file !== presenceFile;
+            return React.createElement(
+              "button",
+              {
+                key: cid,
+                type: "button",
+                className: "statusbar-btn",
+                style: following
+                  ? { background: 'color-mix(in srgb, ' + colour + ' 28%, transparent)' }
+                  : undefined,
+                onMouseEnter: function (e) { openCollabHover(cid, e); },
+                onMouseLeave: function () { setCollabHover(null); },
+                onClick: function () { toggleFollow(cid); }
+              },
+              React.createElement("i", {
+                className: (following ? "fas fa-eye" : (elsewhere ? "far fa-circle" : "fas fa-circle")) +
+                  " collab-pulse",
+                style: { color: colour, fontSize: "0.7em", marginRight: "2px" }
+              }),
+              collabPeerLabels && (" " + name),
+              // Where they went, when they are not where you are. Basename only —
+              // the chip has ~110px to spend and the full path is in the tooltip.
+              collabPeerLabels && elsewhere && file && React.createElement(
+                "span",
+                { style: { opacity: 0.65, marginLeft: "4px" } },
+                file.split('/').pop()
+              )
+            );
+          })
+        ),
         React.createElement("div", { className: "statusbar-sep" }),
         React.createElement(
           "button",
           { type: "button", className: "statusbar-btn", onClick: function () { return setShowHelp(true); }, title: "Keyboard shortcuts & help" },
           React.createElement("i", { className: "fas fa-keyboard" }),
-          !editorPrefs.toolbarIconOnly && " Help"
+          !toolbarIconOnly && " Help"
         ),
         pwaInstallPrompt && React.createElement(
           React.Fragment,
@@ -3547,11 +4304,55 @@ var MbeditorApp = function MbeditorApp() {
               }
             },
             React.createElement("i", { className: "fas fa-download" }),
-            !editorPrefs.toolbarIconOnly && " Install"
+            !toolbarIconOnly && " Install"
           )
         )
       )
     ),
+    collabHover && (function () {
+      var isMe = collabHover.cid === '__me__';
+      var peer = isMe ? null : collabRoster[collabHover.cid];
+      // The peer can leave between hover and paint — the roster is the authority.
+      if (!isMe && !peer) return null;
+
+      var stats = isMe ? { rtt: ownRttRef.current } : (peerStatsRef.current[collabHover.cid] || {});
+      var name = isMe ? collabIdentity.name : (peer.name || 'Anonymous');
+      var colour = isMe ? collabIdentity.color : (peer.colour || '#888888');
+      var file = isMe ? presenceFile : peer.current_file;
+      // Server-measured against a monotonic clock, so it is not our arrival time
+      // and no clock skew enters into it.
+      var idle = typeof stats.idle === 'number' ? stats.idle : null;
+
+      return React.createElement(
+        'div',
+        { className: 'collab-hovercard', style: { top: collabHover.top + 'px', right: collabHover.right + 'px' } },
+        React.createElement(
+          'div',
+          { className: 'collab-hovercard-name' },
+          React.createElement('span', { className: 'collab-hovercard-swatch', style: { background: colour } }),
+          name,
+          isMe && React.createElement('span', { style: { opacity: 0.6, fontWeight: 400 } }, ' (you)')
+        ),
+        React.createElement('div', { className: 'collab-hovercard-row' }, file || 'No file open'),
+        typeof stats.rtt === 'number' && React.createElement(
+          'div', { className: 'collab-hovercard-row' }, 'Latency ' + Math.round(stats.rtt) + ' ms'
+        ),
+        // Everyone in the roster is connected — the server evicts on disconnect —
+        // so this is not a liveness warning. It says their heartbeat has slowed,
+        // which is what a browser does to a backgrounded tab's timers, and is why
+        // their caret may be behind. Silent under 20s, where it would only ever
+        // read "5s ago".
+        idle !== null && idle >= 20 && React.createElement(
+          'div', { className: 'collab-hovercard-row' }, 'Idle ' + idle + 's'
+        ),
+        React.createElement(
+          'div',
+          { className: 'collab-hovercard-hint' },
+          isMe ? 'Click to change your name'
+               : (followedClientId === collabHover.cid ? 'Click to stop following' : 'Click to follow')
+        )
+      );
+    })(),
     showHelp && React.createElement(ShortcutHelp, { onClose: function () { return setShowHelp(false); } }),
     React.createElement(
       "div",
@@ -3592,6 +4393,16 @@ var MbeditorApp = function MbeditorApp() {
               onClick: function() { handleActivityBarClick('rails'); }
             },
             React.createElement("i", { className: "far fa-gem" })
+          ),
+          React.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ide-activity-btn" + (activeTab && activeTab.isModelGraph ? ' active' : ''),
+              title: "Model graph",
+              onClick: function() { handleActivityBarClick('models'); }
+            },
+            React.createElement("i", { className: "fas fa-project-diagram" })
           )
         ),
         React.createElement(
@@ -3811,6 +4622,7 @@ var MbeditorApp = function MbeditorApp() {
               onNodeSelect: handleNodeSelect,
               onMultiSelect: handleMultiSelect,
               onMove: handleMoveNodes,
+              onImportFiles: handleImportFiles,
               gitFiles: state.gitFiles,
               expandedDirs: expandedDirs,
               onExpandedDirsChange: setExpandedDirs,
@@ -4032,25 +4844,7 @@ var MbeditorApp = function MbeditorApp() {
                   title: 'View database schema for ' + label,
                   onClick: (function(lbl) { return function(e) {
                     e.stopPropagation();
-                    if (schemaLoadingLabel === lbl) return;
-                    setSchemaLoadingLabel(lbl);
-                    var modelName = lbl.replace(/\s+/g, '');
-                    FileService.getModelSchema(modelName)
-                      .then(function(data) {
-                        setSchemaLoadingLabel(null);
-                        if (data && data.columns) {
-                          setSchemaModal({ label: lbl, data: data });
-                        } else {
-                          setSchemaModal({ label: lbl, error: 'No schema found for ' + lbl });
-                        }
-                      })
-                      ['catch'](function(err) {
-                        setSchemaLoadingLabel(null);
-                        var msg = (err && err.response && err.response.data && err.response.data.error)
-                          ? err.response.data.error
-                          : 'No db/schema.rb found or table not defined';
-                        setSchemaModal({ label: lbl, error: msg });
-                      });
+                    openSchemaModal(lbl);
                   }; })(label)
                 },
                 React.createElement('i', {
@@ -4112,12 +4906,18 @@ var MbeditorApp = function MbeditorApp() {
         "aria-orientation": "vertical",
         "aria-label": "Resize explorer panel"
       }),
+      // Column wrapping the split panes and the bottom drawers. ide-main is a
+      // row of panes, so the drawers need a vertical parent to push against;
+      // as absolute overlays they covered the editor instead.
+      React.createElement(
+      "div",
+      { className: "ide-center-column" },
       React.createElement(
         "div",
         {
           id: "ide-main-split-container",
           className: "ide-main",
-          style: { position: 'relative', display: 'flex', flexDirection: 'row', width: '100%', height: '100%', cursor: activeResizeMode === 'pane' ? 'col-resize' : 'default', userSelect: activeResizeMode ? 'none' : 'auto' },
+          style: { position: 'relative', display: 'flex', flexDirection: 'row', width: '100%', flex: '1 1 auto', minHeight: 0, cursor: activeResizeMode === 'pane' ? 'col-resize' : 'default', userSelect: activeResizeMode ? 'none' : 'auto' },
           onDragOverCapture: function (e) {
             if (!draggedTab) return;
             e.preventDefault();
@@ -4207,6 +5007,13 @@ var MbeditorApp = function MbeditorApp() {
                   commits: pActiveTab.commits || [],
                   onSelectCommit: handleSelectCommit
                 });
+              } else if (pActiveTab.isModelGraph) {
+                content = React.createElement(ModelGraph, {
+                  graph: modelGraph,
+                  loading: modelGraphLoading,
+                  onRefresh: function () { loadModelGraph(true); },
+                  onOpenModel: function (model) { openSchemaModal(model.name); }
+                });
               } else if (pActiveTab.isChangelog) {
                 content = React.createElement(ChangelogView, {
                   changelogState: changelogState,
@@ -4741,6 +5548,9 @@ var MbeditorApp = function MbeditorApp() {
                       React.createElement('input', {
                         type: 'checkbox',
                         className: 'ide-settings-checkbox',
+                        // The stored preference, not the derived value: at a
+                        // narrow width the box would otherwise show as checked
+                        // and unchecking it would appear to do nothing.
                         checked: !!(editorPrefs.toolbarIconOnly),
                         onChange: function(e) { var v = e.target.checked; setEditorPrefs(function(p) { return Object.assign({}, p, { toolbarIconOnly: v }); }); }
                       })
@@ -5011,6 +5821,16 @@ 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);
+        }
+      })
+      ),
 
       // Right-side Git panel (children of ide-body, alongside sidebar and ide-main)
       showGitPanel && !zenMode && React.createElement("div", {
@@ -5035,15 +5855,6 @@ var MbeditorApp = function MbeditorApp() {
           onSelectCommit: handleSelectCommit
         })
       ),
-      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(
       "div",
@@ -5084,6 +5895,27 @@ var MbeditorApp = function MbeditorApp() {
         }),
         React.createElement("span", { className: "statusbar-problems-count" }, problemCounts.warnings)
       ),
+      // ruby-lsp indicator. Hidden entirely when ruby-lsp was never available
+      // and nothing has gone wrong — a permanent "off" badge in a project with
+      // no Ruby is noise. A healthy server gets a quiet icon; a degraded one
+      // gets an amber chip you can click to restart.
+      (lspHealth.status !== 'off' || lspHealth.reason) && React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "statusbar-btn statusbar-lsp statusbar-lsp-" + lspHealth.status,
+          onClick: restartRubyLsp,
+          title: lspHealth.status === 'ok'
+            ? 'ruby-lsp is running — click to restart'
+            : 'ruby-lsp unavailable' + (lspHealth.reason ? ': ' + lspHealth.reason : '') +
+              '. Falling back to search-based lookups. Click to retry.'
+        },
+        React.createElement("i", {
+          className: "fas " + (lspHealth.status === 'ok' ? 'fa-gem' : 'fa-plug'),
+          "aria-hidden": "true"
+        }),
+        lspHealth.status !== 'ok' && React.createElement("span", null, " ruby-lsp")
+      ),
       !serverOnline && (function () {
         var dirtyCount = state.panes.reduce(function (acc, p) {
           return acc + p.tabs.filter(function (t) { return t.dirty; }).length;
@@ -5477,6 +6309,13 @@ var MbeditorApp = function MbeditorApp() {
       )
     ),
 
+    /* ── Import conflict modal ─────────────────────────────────────────── */
+    importConflict && React.createElement(ImportConflictModal, {
+      conflicts: importConflict.result.conflicts,
+      errors: importConflict.result.errors,
+      onResolve: resolveImportConflict
+    }),
+
     /* ── Schema modal ──────────────────────────────────────────────────── */
     schemaModal && React.createElement(
       'div',
@@ -5570,4 +6409,4 @@ var MbeditorApp = function MbeditorApp() {
 };
 
 window.MbeditorApp = MbeditorApp;
-/* TITLE BAR */ /* SIDEBAR */ /* EDITOR AREA */ /* STATUS BAR */ /* Right-click context menu */
+/* TITLE BAR */ /* SIDEBAR */ /* EDITOR AREA */ /* STATUS BAR */ /* Right-click context menu */