mbeditor 0.13.0 → 0.14.0

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

@@ -0,0 +1,163 @@
+/* ── Liquid Glass chrome (opt-in) ─────────────────────────────────────────────
+ *
+ * Scoped entirely under html[data-glass], set alongside data-theme by the same
+ * effect in MbeditorApp.js. It is a layer over whichever theme is active, not a
+ * theme of its own, so every colour here is derived from the --ide-* tokens
+ * with color-mix — hardcoding a palette would have made it a twelfth theme that
+ * silently replaced the user's chosen one.
+ *
+ * The functional layer (title bar, activity bar, sidebar, tabs, status bar) is
+ * glass. The content layer — Monaco — stays solid: legibility beats the effect,
+ * and a blurred backdrop under a text editor costs a re-composite per repaint.
+ * ─────────────────────────────────────────────────────────────────────────── */
+html[data-glass] {
+  --g-surface:     color-mix(in srgb, var(--ide-panel-bg) 62%, transparent);
+  --g-surface-2:   color-mix(in srgb, var(--ide-panel-bg) 44%, transparent);
+  --g-lift:        color-mix(in srgb, var(--ide-hover-bg) 82%, transparent);
+  --g-hover:       color-mix(in srgb, var(--ide-text) 12%, transparent);
+  --g-edge:        color-mix(in srgb, var(--ide-text) 14%, transparent);
+  --g-edge-strong: color-mix(in srgb, var(--ide-text) 28%, transparent);
+  --g-shadow:      0 1px 2px rgba(0,0,0,0.28), 0 8px 28px rgba(0,0,0,0.26);
+  --g-blur:        blur(20px) saturate(180%);
+
+  /* The field the glass refracts. Two accent-tinted pools over the theme's own
+     background, so every theme keeps its own hue instead of turning navy. */
+  --g-bg:
+    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--ide-accent) 34%, transparent) 0%, transparent 58%),
+    radial-gradient(120% 110% at 82% 100%, color-mix(in srgb, var(--ide-accent-fg) 26%, transparent) 0%, transparent 60%),
+    var(--ide-bg);
+}
+
+html[data-glass] .ide-shell {
+  background: var(--g-bg) fixed;
+  padding: 6px 3px;
+  gap: 6px;
+}
+
+html[data-glass] .ide-activity-bar,
+html[data-glass] .ide-sidebar,
+html[data-glass] .ide-git-right-panel,
+html[data-glass] .ide-main,
+html[data-glass] .ide-log-drawer,
+html[data-glass] .ide-problems-drawer,
+html[data-glass] .ide-statusbar {
+  backdrop-filter: var(--g-blur);
+  -webkit-backdrop-filter: var(--g-blur);
+  background: var(--g-surface);
+  border: 1px solid var(--g-edge);
+  box-shadow: var(--g-shadow);
+  border-radius: 12px;
+  /* overflow stays hidden: it is what clips the children to the rounded
+     corners. The prototype set the body to `overflow: visible` so the card
+     shadows could spill, and that silently removed the scroll container the
+     search results live in. A clipped shadow is the cheaper loss. */
+  overflow: hidden;
+}
+
+/* The centre column is only a layout box: the editor and each bottom drawer
+   are separate cards with a gutter between them, like VS Code's panel. */
+/* No flex gap: the 6px Gutter between the editor and a drawer is the gap. */
+html[data-glass] .ide-center-column { gap: 0; background: transparent; }
+html[data-glass] .ide-log-drawer,
+html[data-glass] .ide-problems-drawer { border-top: 1px solid var(--g-edge); }
+
+/* The activity bar and the sidebar are one card with a seam, not two cards
+   butting rounded corners together — there is no gutter between them to fill. */
+html[data-glass] .ide-activity-bar { border-radius: 12px 0 0 12px; border-right: 1px solid var(--g-edge); }
+html[data-glass] .ide-body:not(:has(.ide-sidebar)) .ide-activity-bar { border-radius: 12px; }
+html[data-glass] .ide-sidebar { border-radius: 0 12px 12px 0; border-left: none; }
+
+/* ── Title bar ────────────────────────────────────────────────────────────── */
+/* The title bar is not a card: it sits flat on the backdrop like VS Code's,
+   so the first card row starts under a plain strip rather than a second box.
+   It carries no fill at all: a filled strip stops short of the window edges
+   where the cards below it are inset, and reads as a floating box. The blur
+   stays, and is what keeps the icons and the theme swatches off the raw
+   accent-tinted gradient without painting a surface. */
+html[data-glass] .ide-titlebar {
+  background: transparent;
+  backdrop-filter: var(--g-blur);
+  -webkit-backdrop-filter: var(--g-blur);
+  border: none;
+  box-shadow: none;
+  height: 35px;
+  margin: -6px 0 -6px;
+  padding: 0 8px;
+}
+html[data-glass] .ide-titlebar-icon { color: var(--ide-accent-fg); }
+html[data-glass] .ide-titlebar-title { color: var(--ide-text); font-weight: 600; }
+html[data-glass] .ide-titlebar-search {
+  background: var(--g-surface-2);
+  border: 1px solid var(--g-edge);
+}
+html[data-glass] .ide-titlebar-search:hover { background: var(--g-hover); color: var(--ide-text); }
+
+/* ── The gutter ───────────────────────────────────────────────────────────── */
+/* Same 6px as everywhere else — a wider one reads as a gap in the layout
+   rather than a handle. The 3-dot grip comes from editor.css. */
+html[data-glass] .ide-gutter { background: transparent; border: none; }
+html[data-glass] .ide-gutter:hover,
+html[data-glass] .ide-gutter.active { background: var(--g-hover); }
+
+/* ── Tabs: same chips as Modern, on a transparent strip ───────────────────── */
+html[data-glass] .tab-bar { background: transparent; border-bottom: 1px solid var(--g-edge); }
+html[data-glass] .tab-item:hover { background: var(--g-hover); }
+html[data-glass] .tab-item.active { background: var(--g-lift); }
+
+/* ── Editor: the content layer stays solid ────────────────────────────────── */
+html[data-glass] .ide-editor-toolbar { background: transparent; border-bottom: 1px solid var(--g-edge); }
+html[data-glass] .ide-icon-btn:hover { background: var(--g-hover); }
+html[data-glass] .ide-editor-wrapper { background: var(--ide-bg); }
+html[data-glass] .ide-editor-wrapper .monaco-editor,
+html[data-glass] .ide-editor-wrapper .monaco-editor .overflow-guard,
+html[data-glass] .ide-editor-wrapper .monaco-editor-background,
+html[data-glass] .ide-editor-wrapper .monaco-editor .margin { background-color: var(--ide-bg) !important; }
+
+/* ── Status bar ───────────────────────────────────────────────────────────── */
+/* Taller than Modern's 22px so the chips have room; the 6px gutter above it
+   stays, matching the explorer gutter, and it eats 2px of shell padding below. */
+html[data-glass] .ide-statusbar { border-top: 1px solid var(--g-edge); height: 28px; margin: 0 0 -2px; }
+/* The drawer-open handle lies over the 6px gutter between the editor card and
+   the status bar rather than adding a strip of its own above it. */
+/* Sits in the shell's own 6px gap between the body and the status bar. */
+html[data-glass] .ide-gutter-drawer-open { margin: -6px 0; }
+/* .statusbar-version carries .statusbar-btn too, so one rule covers both. */
+html[data-glass] .statusbar-btn { border-radius: 999px; padding: 0 9px; }
+html[data-glass] .statusbar-btn:hover { background: var(--g-hover); }
+html[data-glass] .statusbar-sep { background: var(--g-edge); }
+
+/* ── Panels and inputs ────────────────────────────────────────────────────── */
+html[data-glass] .search-panel { background: transparent; }
+/* A sticky header is the one surface in the sidebar that cannot be glass: the
+   tree scrolls underneath it, so at 62% the rows showed straight through the
+   header's own label and buttons. Opaque against the sidebar it sits in. */
+html[data-glass] .ide-sidebar-scrollable .collapsible-header { background: var(--ide-panel-bg); }
+html[data-glass] #mbeditor-root :is(input[type="text"], input[type="search"], input[type="number"], textarea, select),
+html[data-glass] .search-input {
+  background: var(--g-surface-2);
+  border: 1px solid var(--g-edge);
+  border-radius: 10px;
+}
+
+/* ── Quick open ───────────────────────────────────────────────────────────── */
+/* The frosted box itself is the default look now (editor.css) regardless of
+   the glass setting — only the capsule-row treatment is glass-specific. */
+html[data-glass] .quick-open-overlay { background: color-mix(in srgb, var(--ide-bg) 30%, transparent); }
+html[data-glass] .quick-open-result { border-radius: 999px; margin: 0 6px; }
+html[data-glass] .quick-open-result:hover { background: var(--g-hover); }
+
+/* Reduced transparency: the same layout with solid fills. The blur is the
+   expensive part and the part that hurts, so it goes first. */
+@media (prefers-reduced-transparency: reduce) {
+  html[data-glass] {
+    --g-surface: var(--ide-panel-bg);
+    --g-surface-2: var(--ide-input-bg);
+    --g-lift: var(--ide-hover-bg);
+    --g-hover: var(--ide-hover-bg);
+    --g-bg: var(--ide-bg);
+  }
+  html[data-glass] * {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+}

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

@@ -7,33 +7,47 @@
  *   document.documentElement.setAttribute('data-theme', editorPrefs.theme)
  * ──────────────────────────────────────────────────────────────────────────── */
 
-/* ══ DEFAULT / vs-dark ══════════════════════════════════════════════════════ */
+/* ══ DEFAULT / vs-dark — VS Code "Dark Modern" ══════════════════════════════
+ * Values are Dark Modern's, with two raised for WCAG AA: --ide-text-muted
+ * (#9d9d9d, ≥5.2:1 on every surface it lands on, including the inactive tab)
+ * and --ide-border-input (#808080, 3.29:1 on the input fill — Dark Modern's
+ * own #3c3c3c is 1.18:1 and effectively invisible).
+ * --ide-accent is the chrome blue; --ide-accent-fg is the lighter foreground
+ * blue, because #0078d4 as text on #1f1f1f is only 3.64:1.
+ * ──────────────────────────────────────────────────────────────────────────── */
 :root,
 [data-theme="vs-dark"] {
   color-scheme: dark;
-  --status-hover-bg:    rgba(255,255,255,0.08);
-  --ide-accent-text:    #ffffff;
+  --status-hover-bg:    rgba(255,255,255,0.10);
+  /* Chrome foreground: the title bar and status bar are panel-coloured in
+     Dark Modern, not accent-filled, so this is a text colour, not "on blue". */
+  --ide-accent-text:    #cccccc;
+  /* Status bar while migrations are pending. Both halves are per-theme:
+   * --ide-warning is authored as a foreground colour, so several themes
+   * pick a dark ochre that is unreadable as a bar background. */
+  --ide-statusbar-warn-bg:   #cca700;
+  --ide-statusbar-warn-text: #1e1e1e;
 
   /* Backgrounds */
-  --ide-bg:             #1e1e1e;
-  --ide-panel-bg:       #252526;
-  --ide-panel-bg-alt:   #202124;
-  --ide-hover-bg:       #2a2d2e;
-  --ide-active-bg:      #094771;
-  --ide-input-bg:       #3c3c3c;
+  --ide-bg:             #1f1f1f;
+  --ide-panel-bg:       #181818;
+  --ide-panel-bg-alt:   #202020;
+  --ide-hover-bg:       #2a2a2a;
+  --ide-active-bg:      #04395e;
+  --ide-input-bg:       #313131;
 
   /* Borders */
-  --ide-border:         #3c3c3c;
-  --ide-border-input:   #555555;
+  --ide-border:         #2b2b2b;
+  --ide-border-input:   #808080;
 
   /* Text */
   --ide-text:           #cccccc;
   --ide-text-dim:       #bbbbbb;
-  --ide-text-muted:     #888888;
+  --ide-text-muted:     #9d9d9d;
 
   /* Accent */
-  --ide-accent:         #007acc;
-  --ide-accent-fg:      #4ec9b0;
+  --ide-accent:         #0078d4;
+  --ide-accent-fg:      #4daafc;
 
   /* Status */
   --ide-success:        #89d185;
@@ -41,37 +55,43 @@
   --ide-warning:        #f9a825;
 
   /* Misc */
-  --ide-scrollbar:      #424242;
+  --ide-scrollbar:      #3c3c3c;
   --ide-graph-line:     #555555;
 }
 
-/* ══ LIGHT / vs ═════════════════════════════════════════════════════════════ */
+/* ══ LIGHT / vs — VS Code "Light Modern" ════════════════════════════════════
+ * Same treatment as Dark Modern: --ide-text-muted #646464 (≥4.8:1 on bg,
+ * panel, hover and the inactive tab), --ide-border-input #8a8a8a (3.45:1 on
+ * white), and warning/success darkened to clear 4.5:1 on white.
+ * ──────────────────────────────────────────────────────────────────────────── */
 [data-theme="vs"] {
   color-scheme: light;
-  --ide-accent-text:    #ffffff;
-  --status-hover-bg:    rgba(0,0,0,0.06);
+  --ide-accent-text:    #3b3b3b;
+  --status-hover-bg:    rgba(0,0,0,0.08);
+  --ide-statusbar-warn-bg:   #e9a700;
+  --ide-statusbar-warn-text: #1f1f1f;
   --ide-bg:             #ffffff;
-  --ide-panel-bg:       #f3f3f3;
-  --ide-panel-bg-alt:   #ececec;
+  --ide-panel-bg:       #f8f8f8;
+  --ide-panel-bg-alt:   #f0f0f0;
   --ide-hover-bg:       #e8e8e8;
-  --ide-active-bg:      #d4e6f5;
+  --ide-active-bg:      #e4e6f1;
   --ide-input-bg:       #ffffff;
 
-  --ide-border:         #cecece;
-  --ide-border-input:   #bdbdbd;
+  --ide-border:         #e5e5e5;
+  --ide-border-input:   #8a8a8a;
 
-  --ide-text:           #333333;
+  --ide-text:           #3b3b3b;
   --ide-text-dim:       #616161;
-  --ide-text-muted:     #999999;
+  --ide-text-muted:     #646464;
 
-  --ide-accent:         #007acc;
-  --ide-accent-fg:      #0070c1;
+  --ide-accent:         #005fb8;
+  --ide-accent-fg:      #005fb8;
 
-  --ide-success:        #388a34;
+  --ide-success:        #2e7d31;
   --ide-danger:         #d32f2f;
-  --ide-warning:        #b5890a;
+  --ide-warning:        #8a6800;
 
-  --ide-scrollbar:      #c0c0c0;
+  --ide-scrollbar:      #cecece;
   --ide-graph-line:     #bdbdbd;
 }
 
@@ -79,6 +99,8 @@
 [data-theme="hc-black"] {
   color-scheme: dark;
   --ide-accent-text:    #000000;
+  --ide-statusbar-warn-bg:   #ffd700;
+  --ide-statusbar-warn-text: #000000;
   --status-hover-bg:    rgba(255,255,255,0.12);
   --ide-bg:             #000000;
   --ide-panel-bg:       #0a0a0a;
@@ -109,6 +131,8 @@
 [data-theme="hc-light"] {
   color-scheme: light;
   --ide-accent-text:    #ffffff;
+  --ide-statusbar-warn-bg:   #7d4f01;
+  --ide-statusbar-warn-text: #ffffff;
   --status-hover-bg:    rgba(0,0,0,0.06);
   --ide-bg:             #ffffff;
   --ide-panel-bg:       #f8f8f8;
@@ -139,6 +163,8 @@
 [data-theme="dracula"] {
   color-scheme: dark;
   --ide-accent-text:    #ffffff;
+  --ide-statusbar-warn-bg:   #ffb86c;
+  --ide-statusbar-warn-text: #282a36;
   --status-hover-bg:    rgba(255,255,255,0.08);
   --ide-bg:             #282a36;
   --ide-panel-bg:       #21222c;
@@ -169,6 +195,8 @@
 [data-theme="night-owl"] {
   color-scheme: dark;
   --ide-accent-text:    #ffffff;
+  --ide-statusbar-warn-bg:   #ffcb8b;
+  --ide-statusbar-warn-text: #011627;
   --status-hover-bg:    rgba(255,255,255,0.08);
   --ide-bg:             #011627;
   --ide-panel-bg:       #01111d;
@@ -199,6 +227,8 @@
 [data-theme="monokai"] {
   color-scheme: dark;
   --ide-accent-text:    #000000;
+  --ide-statusbar-warn-bg:   #fd971f;
+  --ide-statusbar-warn-text: #272822;
   --status-hover-bg:    rgba(255,255,255,0.08);
   --ide-bg:             #272822;
   --ide-panel-bg:       #1e1f1c;
@@ -229,6 +259,8 @@
 [data-theme="nord"] {
   color-scheme: dark;
   --ide-accent-text:    #000000;
+  --ide-statusbar-warn-bg:   #ebcb8b;
+  --ide-statusbar-warn-text: #2e3440;
   --status-hover-bg:    rgba(255,255,255,0.08);
   --ide-bg:             #2e3440;
   --ide-panel-bg:       #252a34;
@@ -259,6 +291,8 @@
 [data-theme="github-dark"] {
   color-scheme: dark;
   --ide-accent-text:    #ffffff;
+  --ide-statusbar-warn-bg:   #d29922;
+  --ide-statusbar-warn-text: #0d1117;
   --status-hover-bg:    rgba(255,255,255,0.08);
   --ide-bg:             #0d1117;
   --ide-panel-bg:       #161b22;
@@ -289,6 +323,8 @@
 [data-theme="tomorrow-night"] {
   color-scheme: dark;
   --ide-accent-text:    #ffffff;
+  --ide-statusbar-warn-bg:   #de935f;
+  --ide-statusbar-warn-text: #1d1f21;
   --status-hover-bg:    rgba(255,255,255,0.08);
   --ide-bg:             #1d1f21;
   --ide-panel-bg:       #161719;
@@ -319,6 +355,8 @@
 [data-theme="github-light"] {
   color-scheme: light;
   --ide-accent-text:    #ffffff;
+  --ide-statusbar-warn-bg:   #9a6700;
+  --ide-statusbar-warn-text: #ffffff;
   --status-hover-bg:    rgba(0,0,0,0.06);
   --ide-bg:             #ffffff;
   --ide-panel-bg:       #f6f8fa;
@@ -483,3 +521,25 @@
 :root[data-theme="vs"],
 :root[data-theme="hc-light"],
 :root[data-theme="github-light"] { color-scheme: light; }
+
+/* ══ CHROME SURFACE TOKENS ══════════════════════════════════════════════════
+ * The title bar and status bar are accent-filled in the nine legacy themes and
+ * panel-coloured in the two Modern ones, so the status bar reads its fill from
+ * a token rather than from --ide-accent directly. --ide-on-accent is the text
+ * colour for the few things that really do sit on an accent fill (badges,
+ * primary buttons); it tracks --ide-accent-text everywhere except Modern,
+ * where --ide-accent-text became a chrome text colour rather than "on blue".
+ *
+ * Specificity: :root and :root[data-theme=…] tie on the rule below only
+ * because the Modern block comes last; keep that order.
+ * ─────────────────────────────────────────────────────────────────────────── */
+:root {
+  --ide-statusbar-bg:   var(--ide-accent);
+  --ide-on-accent:      var(--ide-accent-text);
+}
+
+:root[data-theme="vs-dark"],
+:root[data-theme="vs"] {
+  --ide-statusbar-bg:   var(--ide-panel-bg);
+  --ide-on-accent:      #ffffff;
+}

data/app/channels/mbeditor/collaboration_channel.rb

@@ -21,27 +21,40 @@ module Mbeditor
       return reject if @path.empty? && respond_to?(:reject, true)
 
       stream_from stream_name if respond_to?(:stream_from)
+      CollaborationDocStore.join(room_key)
+      @joined = true
       transmit_initial_state
     end
 
     def unsubscribed
-      # no-op
+      CollaborationDocStore.leave(room_key) if @joined
+      @joined = false
     end
 
     def doc_update(data)
       bytes = data["update"]
       return if bytes.nil?
 
-      CollaborationDocStore.record_update(room_key, bytes)
-      relay("type" => "doc_update", "update" => bytes)
+      seq = CollaborationDocStore.record_update(room_key, bytes)
+      relay("type" => "doc_update", "update" => bytes, "seq" => seq)
     end
 
     def snapshot(data)
       bytes = data["snapshot"]
       return if bytes.nil?
 
-      CollaborationDocStore.replace_snapshot(room_key, bytes)
-      relay("type" => "snapshot", "snapshot" => bytes)
+      applied_seq = data["applied_seq"]
+      CollaborationDocStore.replace_snapshot(room_key, bytes, applied_seq: applied_seq)
+      relay("type" => "snapshot", "snapshot" => bytes, "applied_seq" => applied_seq)
+    end
+
+    # A client whose delta replay was incomplete (missing dependencies after the
+    # buffer overflowed, or a room restarted from scratch) asks the room for a
+    # full snapshot. It is relayed to the other subscribers; any bound peer
+    # answers with its own state via #snapshot. The requester attaches once that
+    # lands (see CollaborationService).
+    def request_snapshot(_data = nil)
+      relay("type" => "request_snapshot")
     end
 
     def awareness(data)
@@ -66,7 +79,13 @@ module Mbeditor
       return unless respond_to?(:transmit, true)
 
       state = CollaborationDocStore.state_for(room_key)
-      transmit({ "type" => "sync", "snapshot" => state[:snapshot], "deltas" => state[:deltas] })
+      # Exactly one client per empty room is told to seed it from disk; see
+      # CollaborationDocStore.claim_seed. Everyone else waits for that content.
+      # delta_seqs lets the joiner track how far the replay reaches, so its own
+      # later snapshot can tell the server which deltas to keep.
+      transmit({ "type" => "sync", "snapshot" => state[:snapshot], "deltas" => state[:deltas],
+                 "delta_seqs" => state[:delta_seqs], "snapshot_seq" => state[:snapshot_seq],
+                 "seed" => CollaborationDocStore.claim_seed(room_key) })
     end
 
     # A room is identified by workspace *and* relative path. Keying on the path

data/app/controllers/mbeditor/application_controller.rb

@@ -1,9 +1,17 @@
 # frozen_string_literal: true
 
-require "open3"
-require "pathname"
-
 module Mbeditor
+  # No `rescue_from StandardError` here, and the repeated
+  # `rescue StandardError => e; render json: { error: e.message },
+  # status: :unprocessable_content` at the foot of ~29 actions is deliberate,
+  # not something waiting to be dried up. Most actions in this engine have no
+  # rescue at all and rely on an unhandled error surfacing as a real 500:
+  # resilient_routing_test.rb asserts exactly that, to prove ResilientRouter
+  # sits below Rails' own exception middleware. A blanket handler swallows that
+  # signal for 18 actions here plus `tail` in LogsController. Collapsing it to
+  # one handler plus a per-controller allowlist was tried and reverted: it saved
+  # 21 lines, moved each action's error behaviour a thousand lines away from the
+  # action, and left the same action names duplicated in the allowlist.
   class ApplicationController < ActionController::Base
     protect_from_forgery with: :exception
     # Before the auth hook, and on every controller: a disallowed environment is
@@ -12,6 +20,9 @@ module Mbeditor
     # missed it entirely and served the environment's log file anywhere.
     before_action :ensure_allowed_environment!
     before_action :run_authentication
+    # Registered after the two gates above so it times the action itself, not
+    # the environment check or the host app's authenticate_with proc.
+    around_action :audit_request
 
     private
 
@@ -32,6 +43,18 @@ module Mbeditor
       render plain: 'Not found', status: :not_found unless allowed.include?(Rails.env.to_sym)
     end
 
+    def audit_request
+      started = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+      yield
+    ensure
+      # One record per request: `action` is a fixed method name of this
+      # controller, never request data; `ms` wall time; `status` the HTTP code.
+      AuditLog.record(:request,
+                      action: action_name.to_sym,
+                      ms: ((Process.clock_gettime(Process::CLOCK_MONOTONIC) - started) * 1000).round,
+                      status: response.status)
+    end
+
     def workspace_root
       WorkspaceRootResolver.call
     end