mbeditor 0.11.0 → 0.12.0

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

@@ -266,6 +266,12 @@ html, body, #mbeditor-root {
 .tree-item.selected { box-shadow: inset 0 0 0 1px rgba(120, 180, 224, 0.5); background: rgba(120, 180, 224, 0.08); }
 .tree-item.active.selected { box-shadow: inset 0 0 0 1px rgba(140, 210, 255, 0.8); }
 .tree-item.drag-over { background: rgba(100, 160, 220, 0.25); box-shadow: inset 0 0 0 1px rgba(100, 160, 220, 0.7); }
+/* External file drop (import) — green, to read as "add" rather than "move" */
+.tree-item.drag-over-external { background: rgba(120, 200, 140, 0.22); box-shadow: inset 0 0 0 1px rgba(120, 200, 140, 0.75); }
+/* Goes on the whole scrollable explorer panel, not just .file-tree-root: that
+   element stops at its last row, so outlining it would mark only part of the
+   area that actually accepts the drop. */
+.drag-over-external-root { box-shadow: inset 0 0 0 2px rgba(120, 200, 140, 0.6); }
 .tree-item.modified { color: var(--ide-warning); }
 
 /* Inline create row (VS Code-style new file/folder input) */
@@ -315,6 +321,16 @@ html, body, #mbeditor-root {
 .yml-icon { color: #cb171e !important; }
 
 /* ── Main Editor Area ────────────────────────────────────── */
+/* Editor column: the split panes on top, any open bottom drawers beneath. */
+.ide-center-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .ide-main {
   flex: 1;
   display: flex;
@@ -852,6 +868,51 @@ html, body, #mbeditor-root {
 
 .statusbar-sep { width: 1px; height: 14px; background: color-mix(in srgb, var(--ide-accent-text) 20%, transparent); margin: 0 2px; }
 
+/* ── Collaboration presence ────────────────────────────────────────────────
+   A participant is in the roster only while their heartbeat keeps arriving, so
+   roster membership is liveness — the pulse needs no separate timer, and a peer
+   whose connection drops stops pulsing by disappearing. Slow and shallow on
+   purpose: this sits in the titlebar for the whole session, so anything faster
+   or higher-contrast reads as an alert. */
+@keyframes mbeditor-collab-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.4; }
+}
+.collab-pulse { animation: mbeditor-collab-pulse 2.6s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .collab-pulse { animation: none; }
+}
+
+/* Own popover rather than a title attribute: native tooltips wait ~1s before
+   appearing, cannot show the colour swatch, and collapse the newlines this
+   content needs. Fixed positioning is anchored from the chip's rect at hover
+   time — the titlebar never scrolls, so there is nothing to keep in sync. */
+.collab-hovercard {
+  position: fixed;
+  z-index: 4000;
+  min-width: 180px;
+  max-width: 320px;
+  padding: 8px 10px;
+  background: var(--ide-panel-bg);
+  border: 1px solid var(--ide-border);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--ide-text);
+  pointer-events: none;
+}
+.collab-hovercard-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.collab-hovercard-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.collab-hovercard-row { color: var(--ide-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.collab-hovercard-hint { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--ide-border); color: var(--ide-text-muted); }
+
 .statusbar-msg {
   margin-left: auto;
   color: var(--ide-accent-text);
@@ -1298,6 +1359,49 @@ html, body, #mbeditor-root {
   padding: 0 0 12px;
   flex: 1;
 }
+/* Import conflict modal — reuses the schema-modal shell */
+.import-conflict-modal { min-width: 380px; }
+.import-conflict-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 240px;
+  overflow-y: auto;
+  font-family: var(--ide-mono-font, monospace);
+  font-size: 12px;
+}
+.import-conflict-list li {
+  padding: 3px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.import-conflict-errors {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--ide-border, #3c3c3c);
+  color: var(--ide-error, #f48771);
+}
+.import-conflict-errors-title { font-size: 12px; margin-bottom: 4px; }
+.import-conflict-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--ide-border, #3c3c3c);
+  flex-shrink: 0;
+}
+.import-conflict-btn {
+  background: var(--ide-input-bg, #3c3c3c);
+  color: var(--ide-text, #d4d4d4);
+  border: 1px solid var(--ide-border, #3c3c3c);
+  border-radius: 3px;
+  padding: 5px 12px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.import-conflict-btn:hover { background: var(--ide-hover-bg, #4a4a4a); }
+.import-conflict-btn-danger { border-color: var(--ide-error, #f48771); color: var(--ide-error, #f48771); }
 .schema-table {
   width: 100%;
   border-collapse: collapse;
@@ -2779,17 +2883,16 @@ button:not(.pico-btn) { margin-bottom: 0; }
 }
 
 /* ── Rails log drawer ─────────────────────────────────────────────────────── */
+/* Flow siblings of the editor inside .ide-center-column, not overlays: an
+   open drawer shrinks the editor rather than covering the code you are
+   reading. Both can be open at once and simply stack. */
 .ide-log-drawer {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 22px; /* sit above the status bar */
+  flex: none;
   height: 240px; /* default; overridden by the drag-resized inline height */
   display: flex;
   flex-direction: column;
   background: var(--ide-panel-bg, #1e1e1e);
   border-top: 1px solid var(--ide-border, #333);
-  z-index: 40;
 }
 .ide-log-resize {
   flex: 0 0 auto;
@@ -2860,16 +2963,12 @@ button:not(.pico-btn) { margin-bottom: 0; }
    Same geometry as the log drawer so the two read as one family; only the
    body differs, being a list of clickable diagnostics rather than raw text. */
 .ide-problems-drawer {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 22px; /* sit above the status bar */
+  flex: none;
   height: 240px; /* default; overridden by the drag-resized inline height */
   display: flex;
   flex-direction: column;
   background: var(--ide-panel-bg, #1e1e1e);
   border-top: 1px solid var(--ide-border, #333);
-  z-index: 41; /* above the log drawer when both are open */
 }
 .ide-problems-resize {
   flex: 0 0 auto;
@@ -2948,6 +3047,7 @@ button:not(.pico-btn) { margin-bottom: 0; }
 .ide-problems-icon { flex-shrink: 0; }
 .ide-problems-item-error .ide-problems-icon { color: var(--ide-danger); }
 .ide-problems-item-warning .ide-problems-icon { color: var(--ide-warning); }
+.ide-problems-item-info .ide-problems-icon { color: var(--ide-accent, #3794ff); }
 .ide-problems-msg { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* The offending source line, dimmed so it reads as context rather than as part
    of the message. It is the one part of the row allowed to shrink, so a long
@@ -2968,6 +3068,20 @@ button:not(.pico-btn) { margin-bottom: 0; }
   font-size: 10px;
   text-transform: lowercase;
 }
+/* The cop name, linking out to its RuboCop docs page. Underlined only on hover
+   so a list of rows doesn't read as a wall of links. */
+.ide-problems-docs {
+  flex-shrink: 0;
+  color: var(--ide-text-muted, #858585);
+  font-size: 11px;
+  font-family: var(--ide-mono, monospace);
+  text-decoration: none;
+}
+.ide-problems-docs:hover,
+.ide-problems-docs:focus-visible {
+  color: var(--ide-accent, #3794ff);
+  text-decoration: underline;
+}
 .ide-problems-loc {
   flex-shrink: 0;
   margin-left: auto;
@@ -2975,6 +3089,155 @@ button:not(.pico-btn) { margin-bottom: 0; }
   font-size: 11px;
 }
 
+/* ── Model graph ──────────────────────────────────────────────────────────
+   An SVG ER diagram of the app's ActiveRecord models. The panel is narrow, so
+   the SVG scrolls in both directions rather than being scaled down to
+   illegibility. */
+.ide-model-graph { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
+.ide-model-graph-empty {
+  padding: 16px;
+  color: var(--ide-text-muted, #858585);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.ide-model-graph-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--ide-border, #333);
+  color: var(--ide-text-muted, #858585);
+  font-size: 11px;
+}
+.ide-model-graph-warn { color: var(--ide-warning); }
+/* One `margin-left: auto` on the group, not on each button — putting it on
+   every button pushes each one to the far right independently and strands them
+   at opposite ends of the toolbar. */
+.ide-model-graph-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+.ide-model-graph-search {
+  width: 150px;
+  padding: 3px 6px;
+  background: var(--ide-input-bg, #3c3c3c);
+  border: 1px solid var(--ide-border, #3c3c3c);
+  border-radius: 3px;
+  color: var(--ide-fg, #d4d4d4);
+  font-size: 11px;
+}
+.ide-model-graph-search:focus { outline: none; border-color: var(--ide-accent, #3794ff); }
+.ide-model-graph-btn {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 2px 6px;
+}
+.ide-model-graph-btn:hover { color: var(--ide-fg, #d4d4d4); }
+/* The SVG fills the pane; panning and zooming happen on an inner <g>, so
+   there is no scroll container to fight with the drag. */
+.ide-model-graph-svg {
+  display: block;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  cursor: grab;
+  user-select: none;
+}
+.ide-model-graph-svg.mg-dragging { cursor: grabbing; }
+.ide-model-graph-hint {
+  margin-left: 12px;
+  opacity: 0.7;
+  font-size: 10px;
+}
+
+.mg-node { cursor: pointer; }
+.mg-node .mg-box {
+  fill: var(--ide-panel-bg, #252526);
+  stroke: var(--ide-border, #3c3c3c);
+  stroke-width: 1;
+}
+.mg-box-header { fill: var(--ide-hover-bg, #2d2d2d); stroke: none; }
+.mg-node:hover .mg-box { stroke: var(--ide-accent, #3794ff); }
+/* The model the search just centred on — findable once it gets there. */
+.mg-focused .mg-box { stroke: var(--ide-accent, #3794ff); stroke-width: 2; }
+.mg-name {
+  fill: var(--ide-fg, #d4d4d4);
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--ide-mono, monospace);
+}
+.mg-table { fill: var(--ide-text-muted, #858585); font-size: 9px; }
+.mg-field {
+  fill: var(--ide-fg, #d4d4d4);
+  font-size: 10px;
+  font-family: var(--ide-mono, monospace);
+}
+.mg-field-type { fill: var(--ide-text-muted, #858585); font-size: 9px; font-family: var(--ide-mono, monospace); }
+.mg-field-more { fill: var(--ide-text-muted, #858585); font-size: 9px; font-style: italic; }
+
+.mg-edge { fill: none; stroke-width: 1.2; pointer-events: none; }
+/* The hover target. A 1.2px stroke is its own hit area, so without this wider
+   transparent twin the lines are effectively un-hoverable. */
+.mg-edge-hit {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 14;
+  pointer-events: stroke;
+  cursor: help;
+}
+.mg-edge-hovered { stroke-width: 2.5; stroke: var(--ide-accent, #3794ff); }
+
+/* Relation tooltip. Rendered rather than using SVG <title> so it appears at
+   once and can show cardinality and the through: hop on separate lines. */
+.mg-tooltip {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+  max-width: 240px;
+  padding: 6px 9px;
+  background: var(--ide-panel-bg, #252526);
+  border: 1px solid var(--ide-accent, #3794ff);
+  border-radius: 4px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+  font-size: 11px;
+  line-height: 1.45;
+}
+.mg-tooltip-title { color: var(--ide-fg, #d4d4d4); font-weight: 600; }
+.mg-tooltip-macro { color: var(--ide-accent, #3794ff); font-family: var(--ide-mono, monospace); }
+.mg-tooltip-meta { color: var(--ide-text-muted, #858585); }
+.mg-arrow-head { fill: var(--ide-text-muted, #858585); }
+/* belongs_to is the edge that gives the graph its direction, so it reads
+   strongest; the rest are the same relationship seen from the other side. */
+.mg-edge-belongs  { stroke: var(--ide-accent, #3794ff); }
+.mg-edge-has-many { stroke: var(--ide-text-muted, #858585); stroke-dasharray: 4 3; }
+.mg-edge-has-one  { stroke: var(--ide-text-muted, #858585); }
+.mg-edge-habtm    { stroke: var(--ide-warning); stroke-dasharray: 2 3; }
+
+/* A git hint that reports a problem rather than context. */
+.git-hint-warn { color: var(--ide-warning); }
+
+/* Host-app exceptions, above the marker list. Each backtrace frame is a button
+   that opens the file — only in-workspace frames ever reach the client. */
+.ide-problems-exceptions .ide-problems-file-name { color: var(--ide-danger); }
+.ide-problems-clear { margin-left: auto; }
+.ide-problems-exception { margin-bottom: 6px; }
+.ide-problems-exception-head { cursor: default; }
+.ide-problems-exception-head .ide-problems-msg { white-space: normal; }
+.ide-problems-frame { padding-left: 28px; }
+.ide-problems-frame .ide-problems-code { opacity: 1; }
+
+/* Status-bar ruby-lsp indicator. Healthy is a dim icon you can ignore;
+   degraded/off is amber with a label, because that one you should read. */
+.statusbar-lsp { display: inline-flex; align-items: center; gap: 4px; }
+.statusbar-lsp-ok { opacity: 0.45; }
+.statusbar-lsp-ok:hover { opacity: 1; }
+.statusbar-lsp-degraded,
+.statusbar-lsp-off { color: var(--ide-warning); }
+
 /* Status-bar problems indicator: bug count then warning count, VS Code style. */
 .statusbar-problems { display: inline-flex; align-items: center; gap: 4px; }
 .statusbar-problems-error-icon { color: var(--ide-danger); }

data/app/channels/mbeditor/channel_authentication.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+require "action_dispatch"
+
+module Mbeditor
+  # Runs the configured `authenticate_with` hook on the WebSocket handshake (at
+  # channel subscribe) and rejects the subscription when it denies. This is the
+  # same proc the engine runs as a controller `before_action`; on the cable side
+  # there is no controller, so it is evaluated against a probe that mirrors the
+  # surface the hook relies on (`session`, `cookies`, `redirect_to`/`render`/
+  # `head`). A hook that halts — or raises — denies the socket (fail-closed).
+  #
+  # The probe reads cookies/session from the upgrade request env when available;
+  # because the cable mount can bypass host middleware, hooks that depend on
+  # request-scoped state may see less than they do over HTTP. Restricting network
+  # exposure (trusted tunnel / LAN) and securing the host's ActionCable connection
+  # remain the primary controls — see the README pairing section.
+  module ChannelAuthentication
+    # True when the connection is allowed (or no hook is configured); otherwise
+    # rejects the subscription and returns false.
+    def mbeditor_authenticated?
+      hook = Mbeditor.configuration.authenticate_with
+      return true unless hook
+
+      probe = AuthProbe.new(mbeditor_connection_env)
+      probe.instance_exec(&hook)
+      return true unless probe.denied?
+
+      mbeditor_reject_subscription
+      false
+    rescue StandardError
+      mbeditor_reject_subscription
+      false
+    end
+
+    private
+
+    def mbeditor_connection_env
+      connection.env
+    rescue StandardError
+      {}
+    end
+
+    def mbeditor_reject_subscription
+      reject if respond_to?(:reject, true)
+    end
+
+    # Minimal controller-like context for evaluating `authenticate_with` off the
+    # cable connection. Any render/redirect/head marks the request as denied,
+    # mirroring a controller's `performed?` halt semantics.
+    class AuthProbe
+      def initialize(env)
+        @request = ActionDispatch::Request.new(env || {})
+        @denied = false
+      end
+
+      def session
+        @request.session
+      end
+
+      def cookies
+        @request.cookie_jar
+      end
+
+      def request
+        @request
+      end
+
+      def params
+        @request.params
+      end
+
+      def redirect_to(*, **)
+        @denied = true
+      end
+
+      def render(*, **)
+        @denied = true
+      end
+
+      def head(*, **)
+        @denied = true
+      end
+
+      def performed?
+        @denied
+      end
+
+      def denied?
+        @denied
+      end
+    end
+  end
+end

data/app/channels/mbeditor/collaboration_channel.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+require "digest"
+
+module Mbeditor
+  # Per-file relay edge for realtime collaborative editing. The channel never
+  # interprets the opaque Yjs bytes it carries — it persists them through
+  # CollaborationDocStore and relays them to the other subscribers on a stream
+  # keyed by a digest of the workspace-relative path. It degrades gracefully
+  # when ActionCable is absent, matching the EditorChannel conditional-base
+  # pattern.
+  class CollaborationChannel < (defined?(ActionCable::Channel::Base) ? ActionCable::Channel::Base : Object)
+    include ChannelAuthentication
+
+    STREAM_PREFIX = "mbeditor_collab"
+
+    def subscribed
+      return unless mbeditor_authenticated?
+
+      @path = params[:path].to_s
+      return reject if @path.empty? && respond_to?(:reject, true)
+
+      stream_from stream_name if respond_to?(:stream_from)
+      transmit_initial_state
+    end
+
+    def unsubscribed
+      # no-op
+    end
+
+    def doc_update(data)
+      bytes = data["update"]
+      return if bytes.nil?
+
+      CollaborationDocStore.record_update(room_key, bytes)
+      relay("type" => "doc_update", "update" => bytes)
+    end
+
+    def snapshot(data)
+      bytes = data["snapshot"]
+      return if bytes.nil?
+
+      CollaborationDocStore.replace_snapshot(room_key, bytes)
+      relay("type" => "snapshot", "snapshot" => bytes)
+    end
+
+    def awareness(data)
+      bytes = data["awareness"]
+      return if bytes.nil?
+
+      relay("type" => "awareness", "awareness" => bytes)
+    end
+
+    private
+
+    def relay(payload)
+      return unless defined?(ActionCable) && ActionCable.respond_to?(:server)
+
+      ActionCable.server.broadcast(stream_name, payload)
+    rescue StandardError
+      # A relay failure (cable down / not mounted) must never crash the socket
+      # or undo the persistence that already happened.
+    end
+
+    def transmit_initial_state
+      return unless respond_to?(:transmit, true)
+
+      state = CollaborationDocStore.state_for(room_key)
+      transmit({ "type" => "sync", "snapshot" => state[:snapshot], "deltas" => state[:deltas] })
+    end
+
+    # A room is identified by workspace *and* relative path. Keying on the path
+    # alone means two workspaces that both contain "README.md" share one buffer,
+    # so pointing `workspace_root` at a different project seeds its file with the
+    # previous project's content. The NUL separator cannot occur in either part.
+    def room_key
+      @room_key ||= "#{WorkspaceRootResolver.call}\0#{@path}"
+    end
+
+    def stream_name
+      "#{STREAM_PREFIX}:#{Digest::SHA256.hexdigest(room_key)}"
+    end
+  end
+end

data/app/channels/mbeditor/editor_channel.rb

@@ -7,8 +7,16 @@ module Mbeditor
   CableBaseClass = defined?(ActionCable::Channel::Base) ? ActionCable::Channel::Base : Object
 
   class EditorChannel < CableBaseClass
+    include ChannelAuthentication
+
     def subscribed
+      return unless mbeditor_authenticated?
+
       stream_from "mbeditor_editor" if respond_to?(:stream_from)
+      # Hand the joiner the current roster straight away. Without it they would
+      # only learn about a peer who happens to heartbeat after they connected,
+      # and would show an empty participant list until then.
+      transmit(presence_payload) if respond_to?(:transmit, true)
     end
 
     # Push newly appended log lines to this subscriber ~once a second while the
@@ -17,7 +25,26 @@ module Mbeditor
     periodically :push_log_lines, every: 1 if respond_to?(:periodically)
 
     def unsubscribed
-      # no-op
+      # Action Cable calls this on a clean close *and* on its own connection
+      # timeout, which is what makes the registry authoritative: a participant
+      # cannot linger past their socket.
+      return if @presence_client_id.nil?
+
+      PresenceRegistry.remove(@presence_client_id)
+      relay(presence_payload)
+    end
+
+    # Presence heartbeat: record this participant and broadcast the whole roster.
+    #
+    # Whole roster, not just the sender: clients replace theirs outright, so they
+    # cannot accumulate a participant the server has already dropped. That is the
+    # one guarantee per-participant events could not give, and it also removes the
+    # client-side merge, the leave handling and the greet-a-new-peer re-announce
+    # that used to stand in for it.
+    def presence(data)
+      @presence_client_id = data["client_id"]
+      PresenceRegistry.record(@presence_client_id, data)
+      relay(presence_payload)
     end
 
     def save_state(data)
@@ -51,6 +78,18 @@ module Mbeditor
 
     private
 
+    def presence_payload
+      { "type" => "presence", "roster" => PresenceRegistry.roster }
+    end
+
+    def relay(payload)
+      return unless defined?(ActionCable) && ActionCable.respond_to?(:server)
+
+      ActionCable.server.broadcast("mbeditor_editor", payload)
+    rescue StandardError
+      # Never let a relay failure crash the WebSocket connection.
+    end
+
     def push_log_lines
       return unless @log_watching
 

data/app/controllers/mbeditor/application_controller.rb

@@ -45,7 +45,11 @@ module Mbeditor
       return nil unless SafePath.within?(root, full)
 
       full
-    rescue Errno::EACCES
+    rescue Errno::EACCES, ArgumentError
+      # ArgumentError: File.expand_path rejects a null byte in the path. Every
+      # caller already treats nil as "refuse this path", so a rejected path
+      # becomes a clean 4xx instead of escaping as a 500 — and in a batch
+      # operation like #import it stays scoped to the one bad entry.
       nil
     end