mbeditor 0.3.9 → 0.4.2

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

@@ -94,6 +94,17 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     return 50;
   }
 
+  // Match relevance within a priority tier: exact basename > prefix > substring > other.
+  function getMatchRelevance(result, q) {
+    if (!q) return 3;
+    var name = (result.name || (result.path || '').split('/').pop() || '').toLowerCase();
+    var lq = q.toLowerCase();
+    if (name === lq)            return 0;
+    if (name.slice(0, lq.length) === lq) return 1;
+    if (name.indexOf(lq) >= 0)  return 2;
+    return 3;
+  }
+
   var getQuickOpenIcon = function getQuickOpenIcon(path, name, type) {
     if (type === 'dir') {
       return React.createElement('i', { className: 'fas fa-folder quick-open-result-icon quick-open-folder-icon', 'aria-hidden': 'true' });
@@ -117,11 +128,16 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     var res = SearchService.searchFiles(query);
     // Filter by type: always include files; include dirs only when showFolders is on
     var filtered = showFolders ? res : res.filter(function(r) { return r.type !== 'dir'; });
-    // Stable priority sort: controller > model > helper > concern > view > job > other > noise.
-    // JS sort is stable in modern engines, so relative order within the same tier
-    // (i.e. MiniSearch relevance score) is preserved.
+    // Sort: files always beat dirs; within the same tier exact basename > prefix > substring > other.
+    // JS sort is stable in modern engines so MiniSearch relevance score order is the tiebreaker
+    // when match relevance is equal.
     filtered.sort(function(a, b) {
-      return getFilePriority(a.path) - getFilePriority(b.path);
+      var aRelevance = getMatchRelevance(a, query);
+      var bRelevance = getMatchRelevance(b, query);
+      if (aRelevance !== bRelevance) return aRelevance - bRelevance;
+      var aPriority = getFilePriority(a.path) + (a.type === 'dir' ? 100 : 0);
+      var bPriority = getFilePriority(b.path) + (b.type === 'dir' ? 100 : 0);
+      return aPriority - bPriority;
     });
     setResults(filtered.slice(0, 200));
     setSelectedIndex(0);

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

@@ -18,6 +18,7 @@ var TabBar = function TabBar(_ref) {
   var onHardenTab = _ref.onHardenTab;
   var onShowHistory = _ref.onShowHistory;
   var onRevealInExplorer = _ref.onRevealInExplorer;
+  var tabDisplayMode = _ref.tabDisplayMode || 'scroll';
 
   var containerRef = useRef(null);
 
@@ -87,8 +88,8 @@ var TabBar = function TabBar(_ref) {
     null,
     React.createElement(
     'div',
-    { className: 'tab-bar', ref: containerRef, onWheel: function (e) {
-        if (containerRef.current) {
+    { className: 'tab-bar tab-bar-' + tabDisplayMode, ref: containerRef, onWheel: function (e) {
+        if (tabDisplayMode !== 'wrap' && containerRef.current) {
           containerRef.current.scrollLeft += e.deltaY;
         }
       } },

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

@@ -31,6 +31,24 @@
     'or': true, not: true, require: true, include: true, extend: true
   };
 
+  // Ruby core / Kernel built-in methods that should never trigger a
+  // definition lookup — ctrl+click or F12 on these is a no-op.
+  var RUBY_CORE_METHODS = {
+    puts: true, print: true, p: true, pp: true, warn: true, printf: true,
+    fail: true, require_relative: true, prepend: true,
+    attr_accessor: true, attr_reader: true, attr_writer: true,
+    lambda: true, proc: true, 'loop': true, sleep: true,
+    exit: true, abort: true, rand: true, srand: true, gets: true,
+    sprintf: true, format: true, open: true,
+    Integer: true, Float: true, String: true, Array: true, Hash: true,
+    Rational: true, Complex: true,
+    readline: true, readlines: true,
+    system: true, exec: true, fork: true, spawn: true,
+    freeze: true, frozen: true, dup: true, clone: true, object_id: true,
+    respond_to: true, send: true, public_send: true, method: true,
+    tap: true, itself: true
+  };
+
   var globalsRegistered = false;
 
   function leadingWhitespace(line) {
@@ -287,6 +305,7 @@
         var wordInfo = model.getWordAtPosition(position);
         if (!wordInfo || !wordInfo.word || wordInfo.word.length < 2) return;
         if (RUBY_KEYWORDS[wordInfo.word]) return;
+        if (RUBY_CORE_METHODS[wordInfo.word]) return;
         if (typeof FileService === 'undefined' || !FileService.getDefinition) return;
 
         event.event.preventDefault();
@@ -315,6 +334,7 @@
           var wordInfo = model.getWordAtPosition(pos);
           if (!wordInfo || !wordInfo.word || wordInfo.word.length < 2) return;
           if (RUBY_KEYWORDS[wordInfo.word]) return;
+          if (RUBY_CORE_METHODS[wordInfo.word]) return;
           if (typeof FileService === 'undefined' || !FileService.getDefinition) return;
 
           FileService.getDefinition(wordInfo.word, 'ruby').then(function(data) {
@@ -707,6 +727,7 @@
         var word = wordInfo.word;
         if (!word || word.length < 2) return null;
         if (RUBY_KEYWORDS[word]) return null;
+        if (RUBY_CORE_METHODS[word]) return null;
         if (typeof FileService === 'undefined' || !FileService.getDefinition) return null;
 
         var currentFile = model._mbeditorPath || null;

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

@@ -93,6 +93,9 @@ var FileService = (function () {
   }
 
   function saveState(state) {
+    if (WebSocketService.isConnected() && WebSocketService.perform('save_state', { state: state })) {
+      return Promise.resolve({ ok: true });
+    }
     return axios.post(window.mbeditorBasePath() + '/state', { state: state }).then(function(res) { return res.data; });
   }
 
@@ -101,6 +104,9 @@ var FileService = (function () {
   }
 
   function saveBranchState(branch, state) {
+    if (WebSocketService.isConnected() && WebSocketService.perform('save_branch_state', { branch: branch, state: state })) {
+      return Promise.resolve({ ok: true });
+    }
     return axios.post(window.mbeditorBasePath() + '/branch_state', { branch: branch, state: state }).then(function(res) { return res.data; });
   }
 

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

@@ -43,7 +43,7 @@ var SearchService = (function () {
   // Returns merged results; MiniSearch scored entries come first.
   function searchFiles(query) {
     if (!query) return [];
-    var msResults = _miniSearch.search(query, { prefix: true, fuzzy: 0.2 });
+    var msResults = _miniSearch.search(query, { prefix: true, fuzzy: false, combineWith: 'AND' });
     // Substring fallback — catch anything MiniSearch missed
     var q = query.toLowerCase();
     var msIds = new Set(msResults.map(function(r) { return r.id; }));
@@ -59,13 +59,17 @@ var SearchService = (function () {
   // Fetch one page of project-wide full-text search results.
   // offset=0 replaces the EditorStore results list; offset>0 appends.
   // The server includes total_count only on offset=0 (fast rg --count pass).
-  function projectSearch(query, offset, limit) {
+  // options.regex=true enables regex mode on the server.
+  function projectSearch(query, offset, limit, options) {
     if (!query) return Promise.resolve({ results: [], hasMore: false, totalCount: 0 });
     var off = (typeof offset === 'number') ? offset : 0;
     var lim = (typeof limit  === 'number') ? limit  : SEARCH_PAGE_SIZE;
+    var useRegex = !!(options && options.regex);
+    var matchCase = !!(options && options.matchCase);
+    var wholeWord = !!(options && options.wholeWord);
 
     return axios.get(window.mbeditorBasePath() + '/search', {
-      params: { q: query, offset: off, limit: lim }
+      params: { q: query, offset: off, limit: lim, regex: useRegex ? 'true' : 'false', match_case: matchCase ? 'true' : 'false', whole_word: wholeWord ? 'true' : 'false' }
     }).then(function(res) {
         var data = res.data;
         var results    = Array.isArray(data) ? data : (data && data.results || []);

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

@@ -0,0 +1,126 @@
+// WebSocketService — wraps ActionCable when available.
+// Falls back gracefully when ActionCable is absent or the WebSocket connection
+// cannot be established (e.g. the host app does not mount /cable).
+//
+// The ping heartbeat is intentionally NOT routed through this service.
+// Polling keeps working as the authoritative "is the server reachable?" check
+// because WebSocket connections can survive DNS/network changes that would
+// otherwise prevent reconnection.
+var WebSocketService = (function () {
+  var _consumer = null;
+  var _subscription = null;
+  var _connected = false;
+  var _filesChangedCallbacks = [];
+
+  // ---------------------------------------------------------------------------
+  // Internal helpers
+  // ---------------------------------------------------------------------------
+
+  function _isActionCableAvailable() {
+    return typeof window.ActionCable !== 'undefined';
+  }
+
+  function _getConsumer() {
+    // Reuse an existing consumer the host app may have already created (App.cable
+    // is the Rails default).  Fall back to creating our own.
+    if (typeof window.App !== 'undefined' && window.App.cable) {
+      return window.App.cable;
+    }
+    var cableUrl = window.MBEDITOR_CABLE_URL || '/cable';
+    return window.ActionCable.createConsumer(cableUrl);
+  }
+
+  function _emitFilesChanged(data) {
+    _filesChangedCallbacks.forEach(function (fn) {
+      try { fn(data); } catch (e) { /* ignore */ }
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  // Call once after the workspace response is received.
+  // serverSupportsWs: boolean from workspace.actionCableEnabled
+  function connect(serverSupportsWs) {
+    if (!serverSupportsWs || !_isActionCableAvailable()) {
+      return; // polling remains the only refresh mechanism
+    }
+
+    try {
+      _consumer = _getConsumer();
+      _subscription = _consumer.subscriptions.create(
+        { channel: 'Mbeditor::EditorChannel' },
+        {
+          connected: function () {
+            _connected = true;
+          },
+          disconnected: function () {
+            _connected = false;
+          },
+          rejected: function () {
+            _connected = false;
+            // Channel was rejected — unsubscribe so we stop trying.
+            if (_subscription) {
+              _subscription.unsubscribe();
+              _subscription = null;
+            }
+          },
+          received: function (data) {
+            if (data && data.type === 'files_changed') {
+              _emitFilesChanged(data);
+            }
+          }
+        }
+      );
+    } catch (e) {
+      // Any setup error means we silently stay in polling-only mode.
+      _connected = false;
+      _subscription = null;
+    }
+  }
+
+  function disconnect() {
+    if (_subscription) {
+      _subscription.unsubscribe();
+      _subscription = null;
+    }
+    _connected = false;
+  }
+
+  // Returns true only when the WebSocket is currently live.
+  function isConnected() {
+    return _connected;
+  }
+
+  // Register a callback to be invoked when the server broadcasts files_changed.
+  function onFilesChanged(fn) {
+    _filesChangedCallbacks.push(fn);
+  }
+
+  // Remove a previously registered callback.
+  function offFilesChanged(fn) {
+    _filesChangedCallbacks = _filesChangedCallbacks.filter(function (f) { return f !== fn; });
+  }
+
+  // Send a server-side channel action (e.g. 'save_state').
+  // Returns true if the message was dispatched, false if not connected.
+  function perform(action, data) {
+    if (!_subscription || !_connected) return false;
+    try {
+      _subscription.perform(action, data);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  return {
+    connect: connect,
+    disconnect: disconnect,
+    isConnected: isConnected,
+    perform: perform,
+    onFilesChanged: onFilesChanged,
+    offFilesChanged: offFilesChanged
+  };
+})();

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

@@ -1,6 +1,13 @@
 /* ── Mini Browser Editor Global Styles ──────────────────── */
 *, *::before, *::after { box-sizing: border-box; }
 
+/* Suppress all focus outlines / coloured glows inside the IDE shell */
+#mbeditor-root *:focus,
+#mbeditor-root *:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 html, body, #mbeditor-root {
   margin: 0; padding: 0;
   width: 100%; height: 100%;
@@ -327,6 +334,18 @@ html, body, #mbeditor-root {
 .tab-bar::-webkit-scrollbar { height: 3px; }
 .tab-bar::-webkit-scrollbar-thumb { background: var(--ide-hover-bg); }
 
+/* Wrap (multi-row) tab layout */
+.tab-bar.tab-bar-wrap {
+  flex-wrap: wrap;
+  overflow-x: hidden;
+  overflow-y: visible;
+  height: auto;
+}
+.tab-bar.tab-bar-wrap .tab-item {
+  flex-shrink: 1;
+  flex-grow: 0;
+}
+
 .tab-item {
   display: flex;
   align-items: center;
@@ -792,7 +811,7 @@ html, body, #mbeditor-root {
 
 .statusbar-msg {
   margin-left: auto;
-  color: color-mix(in srgb, var(--ide-accent-text) 80%, transparent);
+  color: var(--ide-accent-text);
   font-size: 11px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -810,6 +829,14 @@ html, body, #mbeditor-root {
   padding-left: 8px;
 }
 
+.statusbar-eol-btn {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  opacity: 0.85;
+  padding: 0 6px;
+}
+
 /* ── Search Panel ─────────────────────────────────────────── */
 .search-panel {
   padding: 8px;
@@ -828,28 +855,64 @@ html, body, #mbeditor-root {
 }
 
 .search-input-shell {
-  flex: 1;
+  flex-shrink: 0;
   position: relative;
   display: flex;
   align-items: center;
   min-width: 0;
 }
 
+/* The input grows to fill; right padding makes room for adornments */
 .search-input-shell .search-input {
-  padding-right: 24px;
+  padding-right: 88px; /* 3 × 22px buttons + 4px clear + gaps */
 }
 
-/* search-clear-btn sits absolutely inside the input shell */
-.search-input-shell .search-clear-btn {
+/* Adornment container — absolutely positioned inside the shell */
+.search-input-adornments {
   position: absolute;
   right: 4px;
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  color: var(--ide-text-muted);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 1px;
+}
+
+/* Each small icon button inside the input */
+.search-adornment-btn {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 3px;
   background: transparent;
+  color: var(--ide-text-muted);
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.1s, background 0.1s, border-color 0.1s;
+}
+
+.search-adornment-btn:hover {
+  color: var(--ide-text);
+  background: var(--ide-hover-bg);
+}
+
+.search-adornment-btn.active {
+  color: var(--ide-accent-fg);
+  background: rgba(88, 166, 255, 0.15);
+  border-color: var(--ide-accent-fg);
 }
 
+.search-adornment-clear {
+  font-size: 10px;
+}
+
+/* ── old .search-options-row / .search-option-btn removed ── */
+
 /* Use .search-panel ancestor for higher specificity than button:not(.pico-btn) */
 .search-panel .search-btn {
   flex-shrink: 0;
@@ -891,11 +954,50 @@ html, body, #mbeditor-root {
   box-sizing: border-box;
 }
 .search-input::placeholder { color: var(--ide-text-muted); }
-.search-input:focus { border-color: var(--ide-accent-fg); }
+.search-input:focus { border-color: var(--ide-border-input); }
+
+/* ── Results area wrapper (positions the loading overlay) ── */
+.search-results-area {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
 
 .search-results {
   flex: 1;
   overflow-y: auto;
+  transition: filter 0.15s;
+}
+
+.search-results.search-results-blurred {
+  filter: blur(2px);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Centered circular loading overlay */
+.search-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.search-loading-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--ide-border-input);
+  border-top-color: var(--ide-accent-fg);
+  border-radius: 50%;
+  animation: search-spin 0.7s linear infinite;
+}
+
+@keyframes search-spin {
+  to { transform: rotate(360deg); }
 }
 
 .search-result-item {
@@ -1431,6 +1533,55 @@ html, body, #mbeditor-root {
   min-width: 0;
 }
 
+.ide-methods-dropdown {
+  background: #252526;
+  border: 1px solid #454545;
+  border-radius: 4px;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
+  min-width: 200px;
+  max-width: 340px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.ide-methods-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  cursor: pointer;
+  color: #ccc;
+  font-size: 12px;
+  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ide-methods-dropdown-item:hover {
+  background: #094771;
+  color: #fff;
+}
+
+.ide-methods-dropdown-line {
+  color: #858585;
+  font-size: 11px;
+  min-width: 28px;
+  text-align: right;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.ide-methods-dropdown-empty {
+  padding: 8px 12px;
+  color: #858585;
+  font-size: 12px;
+  font-style: italic;
+}
+
+
+
 .project-action-btn {
   width: 24px;
   height: 24px;
@@ -1683,6 +1834,70 @@ html, body, #mbeditor-root {
   to   { opacity: 1; transform: translateY(0); }
 }
 
+/* ── Draft restore dialog ───────────────────────────────────── */
+.ide-draft-restore-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ide-draft-restore-dialog {
+  background: var(--ide-panel-bg-alt);
+  border: 1px solid var(--ide-border-input);
+  border-radius: 8px;
+  padding: 20px 24px;
+  min-width: 320px;
+  max-width: 480px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+  color: var(--ide-text);
+  font-size: 13px;
+}
+.ide-draft-restore-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: var(--ide-warning, #e5c07b);
+}
+.ide-draft-restore-body { margin-bottom: 8px; color: var(--ide-text-muted); }
+.ide-draft-restore-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 16px 0;
+  max-height: 160px;
+  overflow-y: auto;
+}
+.ide-draft-restore-list li {
+  padding: 3px 0;
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--ide-accent-fg, #9cdcfe);
+}
+.ide-draft-restore-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.ide-draft-restore-btn {
+  padding: 5px 14px;
+  border-radius: 4px;
+  border: 1px solid var(--ide-border-input);
+  background: var(--ide-input-bg);
+  color: var(--ide-text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.ide-draft-restore-btn:hover { background: var(--ide-hover-bg); }
+.ide-draft-restore-btn-primary {
+  background: var(--ide-accent);
+  color: var(--ide-accent-text);
+  border-color: var(--ide-accent);
+}
+.ide-draft-restore-btn-primary:hover { opacity: 0.9; }
+
 /* ── Settings panel ─────────────────────────────────────────── */
 .ide-settings-panel { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
 .ide-settings-body { padding: 8px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-items: start; }

data/app/channels/mbeditor/editor_channel.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+require "fileutils"
+require "pathname"
+
+module Mbeditor
+  class EditorChannel < ActionCable::Channel::Base
+    STATE_MAX_BYTES    = 1 * 1024 * 1024
+    SAFE_BRANCH_NAME   = /\A[a-zA-Z0-9._\-\/]+\z/
+
+    def subscribed
+      stream_from "mbeditor_editor"
+    end
+
+    def unsubscribed
+      # no-op
+    end
+
+    # Called via WebSocketService.perform('save_state', { state: ... })
+    def save_state(data)
+      Rails.logger.silence do
+        payload = (data["state"] || data).to_json
+        return if payload.bytesize > STATE_MAX_BYTES
+
+        root = workspace_root
+        path = root.join("tmp", "mbeditor_workspace.json")
+        FileUtils.mkdir_p(root.join("tmp"))
+        File.open(path, File::RDWR | File::CREAT) do |f|
+          f.flock(File::LOCK_EX)
+          f.truncate(0)
+          f.rewind
+          f.write(payload)
+        end
+      end
+    rescue StandardError
+      # Never let a state-save failure crash the WebSocket connection
+    end
+
+    # Called via WebSocketService.perform('save_branch_state', { branch: ..., state: ... })
+    def save_branch_state(data)
+      Rails.logger.silence do
+        branch = data["branch"].to_s.strip
+        return unless branch.match?(SAFE_BRANCH_NAME)
+
+        state_data = data["state"]
+        payload_json = state_data.to_json
+        return if payload_json.bytesize > STATE_MAX_BYTES
+
+        root = workspace_root
+        path = root.join("tmp", "mbeditor_branch_states.json")
+        FileUtils.mkdir_p(root.join("tmp"))
+        File.open(path, File::RDWR | File::CREAT) do |f|
+          f.flock(File::LOCK_EX)
+          existing = f.size > 0 ? JSON.parse(f.read) : {}
+          existing[branch] = state_data
+          f.truncate(0)
+          f.rewind
+          f.write(existing.to_json)
+        end
+      end
+    rescue StandardError
+      # Never let a state-save failure crash the WebSocket connection
+    end
+
+    private
+
+    def workspace_root
+      configured = Mbeditor.configuration.workspace_root
+      return Pathname.new(configured.to_s) if configured.present?
+
+      # Fall back to git root, same logic as ApplicationController
+      rails_root = Rails.root.to_s
+      out, _err, status = Open3.capture3("git", "-C", rails_root, "rev-parse", "--show-toplevel")
+      Pathname.new(status.success? && out.strip.present? ? out.strip : rails_root)
+    rescue StandardError
+      Rails.root
+    end
+  end
+end