rails_error_dashboard 0.9.1 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 57296ebd76d5c90e1605cf26e0946418332a109b6a8e06e47764d0679d580180
-  data.tar.gz: c7c013e699b365aa6fe3ec520d57261eb9e81beabe32ae60e040e4dec60632f2
+  metadata.gz: defed3f836bc0e812c76abfb81b95e5e3f229e5338bfa40cde4604643eb95582
+  data.tar.gz: 7657043dbf617694e5318a5b0e2829ecca78ade0c67412ede16fbecabc696c36
 SHA512:
-  metadata.gz: eacb14ac3148b50729be1a2028df13699feab0c80bdd8d52094d275eabe55f159ed6d68bec6b6b6b8b7642bcb46fa9e0b27c1c23138da1cca277044de5dc1b26
-  data.tar.gz: 9ba438dd2e6efbe417a26846cc2c8e3784e568ba2f4c471ea92c25258a782ab7265d5cb27e488760d8871764a270e5299de76057c799c3a3220450b410c50f06
+  metadata.gz: 79992d38956c257a116c1cfcb153429cbf3a082892bc71664c20ba57e801ba33325ae69f43bd0ef8404a3cd08a6d5df9727a989a0f8977826786a179ad70b448
+  data.tar.gz: 3bbcc477eff8db567415c727037a58d7e27bd8e01ad602674beb05cd6891f75bb06e665273698fed1b49c20806e4f07dbea586647583f6b7da3052a744d58fae

data/README.md

@@ -23,7 +23,7 @@ gem 'rails_error_dashboard'
 
 **[rails-error-dashboard.anjan.dev](https://rails-error-dashboard.anjan.dev)** — Username: `gandalf` · Password: `youshallnotpass`
 
-> **Beta Software** — Functional and tested (2,700+ tests passing), but the API may change before v1.0. Supports Rails 7.0-8.1 and Ruby 3.2-4.0.
+> **Beta Software** — Functional and tested (4,200+ tests passing), but the API may change before v1.0. Supports Rails 7.0-8.1 and Ruby 3.2-4.0.
 
 ### Screenshots
 
@@ -372,7 +372,7 @@ config.llm_model = "gpt-5"
 <details>
 <summary><strong>Notifications — Slack, Discord, PagerDuty, Email, Webhooks</strong></summary>
 
-Multi-channel alerting with severity filters, per-error cooldown, and milestone threshold alerts to prevent alert fatigue.
+Multi-channel alerting with severity filters, per-error cooldown, milestone threshold alerts, and a per-environment allowlist (`config.notification_environments = %w[production]`) so a staging deploy never pages anyone.
 
 ```ruby
 config.enable_slack_notifications = true
@@ -382,6 +382,19 @@ config.slack_webhook_url = ENV['SLACK_WEBHOOK_URL']
 [Notification setup guide →](docs/guides/NOTIFICATIONS.md)
 </details>
 
+<details>
+<summary><strong>Environment Awareness — Filter, Badge, Notify per Environment</strong></summary>
+
+Every error records the environment it came from — `production`, `staging`, `uat`, `preprod`, any name your deploys use. The errors index filters by it, rows and the detail page carry a badge, the analytics page breaks errors down by environment, and every notification names it. The same error in staging and production is two rows with independent status, so resolving one never hides the other.
+
+```ruby
+config.environment = ENV.fetch("ERROR_DASHBOARD_ENVIRONMENT", Rails.env)  # free-form, defaults to Rails.env
+config.notification_environments = %w[production]                         # nil = notify everywhere
+```
+
+Errors captured before v0.11.0 show no badge until they recur (the next occurrence claims the row) or you run `rails rails_error_dashboard:backfill_environments`.
+</details>
+
 <details>
 <summary><strong>Advanced Analytics</strong></summary>
 
@@ -709,7 +722,7 @@ Built with **CQRS (Command/Query Responsibility Segregation)**:
 
 ## Testing
 
-2,600+ tests covering unit, integration, and browser-based system tests.
+4,200+ tests covering unit, integration, and browser-based system tests.
 
 ```bash
 bundle exec rspec                              # Full suite

data/app/controllers/rails_error_dashboard/errors_controller.rb

@@ -11,6 +11,7 @@ module RailsErrorDashboard
       error_type
       unresolved
       platform
+      environment
       application_id
       search
       severity
@@ -94,6 +95,7 @@ module RailsErrorDashboard
       filter_options = Queries::FilterOptions.call(application_id: @current_application_id)
       @error_types = filter_options[:error_types]
       @platforms = filter_options[:platforms]
+      @environments = filter_options[:environments]
       @assignees = filter_options[:assignees]
     end
 
@@ -242,6 +244,7 @@ module RailsErrorDashboard
       @errors_over_time = analytics[:errors_over_time]
       @errors_by_type = analytics[:errors_by_type]
       @errors_by_platform = analytics[:errors_by_platform]
+      @errors_by_environment = analytics[:errors_by_environment]
       @errors_by_hour = analytics[:errors_by_hour]
       @top_users = analytics[:top_users]
       @resolution_rate = analytics[:resolution_rate]
@@ -535,6 +538,12 @@ module RailsErrorDashboard
       @unique_rules = all_events.size
       @total_events = all_events.sum { |e| e[:count] }
       @unique_ips = all_events.flat_map { |e| e[:ips] }.uniq.size
+      # Events matched by a recognised AI agent. Counts requests, not addresses —
+      # one agent rotates through many IPs, so unique_ips overstates it (#170).
+      @ai_events = all_events.sum { |e| e[:ai_count].to_i }
+      # Counts the tracker's LRU eviction dropped; shown so the totals above are
+      # never silently understated.
+      @overflow_count = result[:overflow_count].to_i
 
       @pagy, @events = pagy(:offset, all_events, limit: params[:per_page] || 25)
     end

data/app/helpers/rails_error_dashboard/i18n_helper.rb

@@ -150,5 +150,31 @@ module RailsErrorDashboard
     rescue StandardError
       "%B %d, %Y %I:%M:%S %p"
     end
+
+    # A finished, localized date string for somewhere the browser will not
+    # re-render it.
+    #
+    # Almost every timestamp on the dashboard goes out as a <span data-format>
+    # that formatDateTime() localizes client-side. Chart labels cannot: they
+    # are serialized into a JS array and handed to Chart.js as plain strings,
+    # so whatever the server writes is what the axis shows. Calling strftime
+    # directly there is what put English month names on every locale's charts
+    # (#178) — Ruby's strftime is not locale-aware.
+    #
+    # Same formatter the mailers and the Slack/Discord payloads use, so a chart
+    # axis and an email agree about what a date looks like.
+    #
+    # @param time [Time, Date, nil]
+    # @param pattern [String] a strftime pattern
+    # @return [String] "" for nil — an axis label must never read "undefined"
+    def red_chart_date(time, pattern)
+      return "" if time.nil?
+
+      time = time.to_time if time.respond_to?(:to_time) && !time.is_a?(Time)
+      Services::LocalizedTimeFormatter.call(time, pattern: pattern, locale: red_locale)
+    rescue StandardError
+      # A chart with an English axis beats a chart that fails to render.
+      time.respond_to?(:strftime) ? time.strftime(pattern) : time.to_s
+    end
   end
 end

data/app/jobs/rails_error_dashboard/rack_attack_flush_job.rb

@@ -22,9 +22,13 @@ module RailsErrorDashboard
         # Mode 1: Persist provided snapshot (dispatched from tracker flush)
         Commands::FlushRackAttackEvents.call(counts: counts)
       else
-        # Mode 2: Flush current thread's buffer (scheduled cron safety net).
-        # sync: true because we are already off the request path.
-        Services::RackAttackTracker.flush!(sync: true)
+        # Mode 2: Flush EVERY live thread's buffer (scheduled cron safety net).
+        #
+        # This used to call flush!, which only ever sees Thread.current — the
+        # job worker's own buffer, which is always empty. The counts live on the
+        # Puma threads that served the requests, so the documented safety net
+        # swept nothing. flush_all_threads! is what makes the promise true.
+        Services::RackAttackTracker.flush_all_threads!
       end
     end
   end

data/app/mailers/rails_error_dashboard/error_notification_mailer.rb

@@ -20,12 +20,19 @@ module RailsErrorDashboard
     # The subject is assembled from a key rather than interpolated inline, so a
     # locale can reorder or drop the emoji. error_type and message are verbatim
     # error content and are never translated.
+    #
+    # An error that carries an environment uses subject_with_environment; a
+    # legacy row keeps the pre-0.11 subject so existing mail filters still match.
     def subject_for(error_log, locale)
+      environment = error_log.respond_to?(:environment) ? error_log.environment : nil
+      key = environment.present? ? "red.mailers.error_alert.subject_with_environment" : "red.mailers.error_alert.subject"
+
       I18nStore.translate(
-        "red.mailers.error_alert.subject",
+        key,
         locale: locale,
         application: error_log.application&.name ||
           I18nStore.translate("red.mailers.shared.unknown_application", locale: locale),
+        environment: environment,
         error_type: error_log.error_type,
         message: truncate_subject(error_log.message)
       )

data/app/models/rails_error_dashboard/error_log.rb

@@ -61,6 +61,7 @@ module RailsErrorDashboard
     scope :by_error_type, ->(type) { where(error_type: type) }
     scope :by_type, ->(type) { where(error_type: type) }
     scope :by_platform, ->(platform) { where(platform: platform) }
+    scope :by_environment, ->(environment) { where(environment: environment) }
     scope :last_24_hours, -> { where("occurred_at >= ?", 24.hours.ago) }
     scope :last_week, -> { where("occurred_at >= ?", 1.week.ago) }
 

data/app/models/rails_error_dashboard/rack_attack_event.rb

@@ -12,8 +12,12 @@ module RailsErrorDashboard
   class RackAttackEvent < ErrorLogsRecord
     self.table_name = "rails_error_dashboard_rack_attack_events"
 
-    # Event types emitted by Rack::Attack (v5.0+)
-    MATCH_TYPES = %w[throttle blocklist track safelist].freeze
+    # Event types emitted by Rack::Attack (v5.0+), plus "overflow" — not a
+    # Rack::Attack event at all, but a synthetic bucket holding counts dropped
+    # by the tracker's LRU eviction so totals stay truthful. Overflow rows are
+    # excluded from the per-rule listing and surfaced separately.
+    MATCH_TYPES = %w[throttle blocklist track safelist overflow].freeze
+    OVERFLOW_MATCH_TYPE = "overflow"
 
     belongs_to :application, optional: true
 

data/app/views/layouts/rails_error_dashboard.html.erb

@@ -660,7 +660,16 @@ dd { color: var(--text-primary); }
   height: 48px; flex-shrink: 0;
   background: var(--surface-primary);
   border-bottom: 1px solid var(--border-primary);
+  /* A flex item's default min-width is auto, meaning "never shrink below my
+     content". Both navbar groups therefore kept their full intrinsic width on a
+     narrow screen and pushed the right-hand controls past the viewport — the
+     dashboard scrolled sideways at 375px in EVERY locale, English included.
+     min-width:0 lets them shrink; overflow:hidden keeps whatever still cannot
+     fit from extending the page rather than being clipped inside the bar. */
+  min-width: 0;
+  overflow: hidden;
 }
+.red-navbar > * { min-width: 0; }
 .red-search-input {
   width: 240px; padding: 5px 10px 5px 30px; font-size: 13px;
   border: 1px solid var(--border-primary); border-radius: var(--radius-sm);
@@ -720,6 +729,21 @@ dd { color: var(--text-primary); }
   .red-sidebar.collapsed { display: none; }
 }
 
+/* Stat grids
+   These were inline `grid-template-columns: repeat(N, 1fr)`, which cannot carry
+   a media query, so three or four cards stayed side by side at 375px and pushed
+   the page to 488px — it scrolled sideways on a phone in EVERY locale, English
+   worst of all. auto-fit + minmax lets the row reflow to two columns and then
+   one, and minmax's 0 floor stops a long word forcing a track wider than the
+   screen. */
+.red-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
+}
+.red-stat-grid > * { min-width: 0; }
+
 /* Error detail responsive grid */
 .red-detail-grid { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-4); }
 @media (max-width: 1023.98px) { .red-detail-grid { grid-template-columns: 1fr; } }
@@ -729,7 +753,13 @@ dd { color: var(--text-primary); }
   padding: 3px 10px; font-size: 11px; font-weight: 600;
   border-radius: var(--radius-full);
   text-transform: uppercase; letter-spacing: 0.05em;
+  white-space: nowrap;
 }
+/* Below the sidebar breakpoint the navbar has to fit a menu button, search,
+   language picker, shortcuts, theme toggle and the env badge. The badge is
+   decoration — the environment is also on the overview page — so it is the
+   first thing dropped rather than letting it push the page sideways. */
+@media (max-width: 575.98px) { .red-env-badge { display: none; } }
 
 /* Kbd shortcut */
 kbd {
@@ -1751,6 +1781,51 @@ document.addEventListener('DOMContentLoaded', function() {
       .replace('%H',pad(h)).replace('%I',pad(h12)).replace('%M',pad(mi)).replace('%S',pad(s)).replace('%p',ampm).replace('%P',ampm.toLowerCase());
   }
 
+  // Chart.js renders date axes through chartjs-adapter-date-fns, whose bundle
+  // ships English locale data only. Loading eleven date-fns locales from a CDN
+  // to fix that would be absurd when RED already carries localized month and
+  // day names in red.js.* for formatDateTime(). So the adapter's format() is
+  // redirected through the same vocabulary the rest of the dashboard uses, and
+  // a chart axis, a page timestamp and an email now agree.
+  //
+  // Only the tokens the adapter's own format table can emit are mapped:
+  //   datetime "MMM d, yyyy, h:mm:ss aaaa"   millisecond "h:mm:ss.SSS aaaa"
+  //   second "h:mm:ss aaaa"  minute "h:mm aaaa"  hour "ha"  day "MMM d"
+  //   week "PP"  month "MMM yyyy"  quarter "qqq - yyyy"  year "yyyy"
+  // Anything else — a caller-supplied pattern, a future adapter version — is
+  // handed back to the original implementation rather than half-translated.
+  function installRedChartDateAdapter() {
+    if (typeof Chart === 'undefined' || !Chart._adapters || !Chart._adapters._date) return;
+    var proto = Chart._adapters._date.prototype;
+    if (!proto || typeof proto.format !== 'function' || proto._redPatched) return;
+
+    // date-fns token -> strftime, for the patterns the adapter actually uses.
+    var TOKENS = {
+      'MMM d, yyyy, h:mm:ss aaaa': '%b %d, %Y, %I:%M:%S %p',
+      'h:mm:ss.SSS aaaa': '%I:%M:%S %p',
+      'h:mm:ss aaaa': '%I:%M:%S %p',
+      'h:mm aaaa': '%I:%M %p',
+      'ha': '%I %p',
+      'MMM d': '%b %d',
+      'PP': '%b %d, %Y',
+      'MMM yyyy': '%b %Y',
+      'yyyy': '%Y'
+    };
+
+    var original = proto.format;
+    proto.format = function(time, fmt) {
+      try {
+        var strf = TOKENS[fmt];
+        if (strf) return formatDateTime(new Date(time), strf);
+      } catch (e) {
+        // Fall through — a chart with English axes beats a chart that throws.
+      }
+      return original.call(this, time, fmt);
+    };
+    proto._redPatched = true;
+  }
+
+
   function getTimezoneAbbreviation(date) {
     // RED's locale set and the browser's Intl data need not agree, so an
     // unsupported tag throws RangeError here rather than degrading. Catch it
@@ -1801,6 +1876,16 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   convertToLocalTime();
+
+  // Localize Chart.js date axes. Kept out of the block above on purpose: that
+  // region is extracted and run in bare node by js_date_parity_spec, where
+  // `document` is a stub, so it must contain definitions only — no top-level
+  // browser calls. The adapter is patched on the prototype, so charts drawn
+  // later pick it up; chartkick:load re-asserts for page scripts whose own
+  // DOMContentLoaded handler beat this one, and _redPatched makes that a no-op.
+  installRedChartDateAdapter();
+  document.addEventListener('chartkick:load', installRedChartDateAdapter);
+
   if (typeof Turbo !== 'undefined') {
     document.addEventListener('turbo:load', convertToLocalTime);
     document.addEventListener('turbo:frame-load', convertToLocalTime);

data/app/views/rails_error_dashboard/error_notification_mailer/error_alert.html.erb

@@ -148,6 +148,11 @@
           </div>
         <% end %>
 
+        <% if @error_log.respond_to?(:environment) && @error_log.environment.present? %>
+          <div class="label"><%= red_t("red.mailers.error_alert.labels.environment") %>:</div>
+          <div class="value"><strong><%= @error_log.environment %></strong></div>
+        <% end %>
+
         <div class="label"><%= red_t("red.mailers.error_alert.labels.occurred_at") %>:</div>
         <div class="value"><%= red_mail_time(@error_log.occurred_at) %></div>
 

data/app/views/rails_error_dashboard/error_notification_mailer/error_alert.text.erb

@@ -10,6 +10,7 @@
 <%= red_mail_t("red.mailers.error_alert.labels.application") %>: <%= @error_log.application&.name || red_mail_t("red.mailers.shared.unknown_application") %>
 <%= red_mail_t("red.mailers.error_alert.labels.error_type") %>: <%= @error_log.error_type %>
 <% if @error_log.platform.present? %><%= red_mail_t("red.mailers.error_alert.labels.platform") %>: <%= @error_log.platform %><% end %>
+<% if @error_log.respond_to?(:environment) && @error_log.environment.present? %><%= red_mail_t("red.mailers.error_alert.labels.environment") %>: <%= @error_log.environment %><% end %>
 <%= red_mail_t("red.mailers.error_alert.labels.occurred_at") %>: <%= red_mail_time(@error_log.occurred_at) %>
 <% if @error_log.user_id.present? %><%= red_mail_t("red.mailers.error_alert.labels.user_id") %>: <%= @error_log.user_id %><% end %>
 <% if @error_log.ip_address.present? %><%= red_mail_t("red.mailers.error_alert.labels.ip_address") %>: <%= @error_log.ip_address %><% end %>

data/app/views/rails_error_dashboard/errors/_error_row.html.erb

@@ -99,4 +99,12 @@
       <% end %>
     </td>
   <% end %>
+  <% if local_assigns[:show_environment] %>
+    <%# Environment names are free-form data (production, staging, uat...) and are never translated. %>
+    <td style="padding: var(--space-3) var(--space-4); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<%= error.environment %>">
+      <% if error.environment.present? %>
+        <span class="badge badge-api" data-environment-badge="<%= error.environment %>"><i class="bi bi-hdd-stack"></i> <%= error.environment %></span>
+      <% end %>
+    </td>
+  <% end %>
 </tr>

data/app/views/rails_error_dashboard/errors/_sidebar_metadata.html.erb

@@ -70,6 +70,15 @@
             <% end %>
           </div>
 
+          <% if error.respond_to?(:environment) && error.environment.present? %>
+            <div class="mb-3">
+              <small class="metadata-label d-block mb-1"><%= red_t("red.errors.sidebar.environment") %></small>
+              <%= link_to errors_path(environment: error.environment, unresolved: '0'), class: "text-decoration-none", title: red_t("red.errors.sidebar.view_all_environment", environment: error.environment) do %>
+                <span class="badge badge-api" data-environment-badge="<%= error.environment %>"><i class="bi bi-hdd-stack"></i> <%= error.environment %></span>
+              <% end %>
+            </div>
+          <% end %>
+
           <div class="mb-3">
             <small class="metadata-label d-block mb-1"><%= red_t("red.errors.sidebar.user") %></small>
             <% if error.respond_to?(:user) && error.user %>

data/app/views/rails_error_dashboard/errors/analytics.html.erb

@@ -45,7 +45,7 @@
   </div>
 
   <!-- Summary Stats -->
-  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6);">
+  <div class="red-stat-grid">
     <div class="card stat-card" style="border-left: 3px solid var(--accent); padding: var(--space-5) var(--space-6);">
       <div class="stat-label" style="margin-bottom: 4px;"><%= red_t("red.analytics.overview.stats.total_errors") %></div>
       <span class="stat-value"><%= @error_stats[:total] %></span>
@@ -75,8 +75,6 @@
             curve: false,
             points: true,
             height: "300px",
-            xtitle: "Date",
-            ytitle: "Number of Errors",
             library: {
               scales: {
                 x: {
@@ -157,6 +155,56 @@
     </div>
   <% end %>
 
+  <%# Errors by environment: same shape as the platform chart, shown only when
+      there is something to compare. Environment names are data, not text to
+      translate; NULL rows (captured before the column existed) are :unknown. %>
+  <% environment_counts = (@errors_by_environment || {}).transform_keys { |env| env == :unknown ? red_t("red.analytics.overview.environment_chart.unknown") : env } %>
+  <% if environment_counts.size > 1 %>
+    <div class="row g-4 mb-4">
+      <div class="col-md-12">
+        <div class="card">
+          <div class="card-header">
+            <h5 class="mb-0"><i class="bi bi-hdd-stack"></i> <%= red_t("red.analytics.overview.environment_chart.title") %></h5>
+          </div>
+          <div class="card-body">
+            <div id="errors-by-environment-chart"></div>
+            <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
+              document.addEventListener('DOMContentLoaded', function() {
+                const colors = window.getChartColors();
+                const environmentColors = ["#EF4444", "#F59E0B", "#2563EB", "#10B981", "#8B5CF6", "#6B7280"];
+
+                new Chartkick.PieChart("errors-by-environment-chart", <%= raw environment_counts.to_json %>, {
+                  colors: environmentColors,
+                  height: "300px",
+                  legend: "bottom",
+                  donut: true,
+                  library: {
+                    plugins: {
+                      legend: {
+                        labels: {
+                          color: colors.textColor,
+                          font: { size: 12, weight: 'bold' }
+                        }
+                      }
+                    }
+                  }
+                });
+              });
+            </script>
+          </div>
+          <div class="card-footer border-top-0">
+            <div class="d-flex gap-2 flex-wrap">
+              <small class="text-muted me-2"><%= red_t("red.analytics.overview.environment_chart.quick_links") %></small>
+              <% (@errors_by_environment || {}).keys.reject { |env| env == :unknown }.each do |environment| %>
+                <%= link_to environment, errors_path(environment: environment, unresolved: '0'), class: "btn btn-sm btn-outline-secondary" %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
   <!-- Charts Row 2 -->
   <div class="row g-4 mb-4">
     <div class="col-md-12">
@@ -172,18 +220,19 @@
               new Chartkick.BarChart("errors-by-type-chart", <%= raw @errors_by_type.to_json %>, {
                 color: "#EF4444",
                 height: "400px",
-                xtitle: "Error Type",
-                ytitle: "Count",
                 library: {
                   scales: {
+                    // Chartkick's BarChart is horizontal (it sets indexAxis:"y"),
+                    // so the categories sit on y and the counts on x — the
+                    // opposite of the ColumnCharts on this page. #178.
                     x: {
                       ticks: { color: colors.textColor },
-                      title: { color: colors.textColor, display: true, text: '<%= red_js_t("red.ui_js.charts.axis_error_type") %>' },
+                      title: { color: colors.textColor, display: true, text: '<%= red_js_t("red.ui_js.charts.axis_count") %>' },
                       grid: { color: colors.gridColor }
                     },
                     y: {
                       ticks: { color: colors.textColor },
-                      title: { color: colors.textColor, display: true, text: '<%= red_js_t("red.ui_js.charts.axis_count") %>' },
+                      title: { color: colors.textColor, display: true, text: '<%= red_js_t("red.ui_js.charts.axis_error_type") %>' },
                       grid: { color: colors.gridColor }
                     }
                   },
@@ -214,8 +263,6 @@
               new Chartkick.ColumnChart("errors-by-hour-chart", <%= raw @errors_by_hour.to_json %>, {
                 color: "#DC2626",
                 height: "300px",
-                xtitle: "Hour",
-                ytitle: "Number of Errors",
                 library: {
                   scales: {
                     x: {
@@ -422,8 +469,6 @@
                 new Chartkick.ColumnChart("errors-by-version-chart", versionData, {
                   colors: ["#8B5CF6", "#EF4444", "#F59E0B", "#10B981"],
                   height: "300px",
-                  xtitle: "Version",
-                  ytitle: "Error Count",
                   library: window.getChartLibraryOptions()
                 });
               });
@@ -558,7 +603,7 @@
                 const colors = window.getChartColors();
                 new Chartkick.BarChart("mttr-by-platform-chart",
                   <%= raw @mttr_by_platform.to_json %>, {
-                  suffix: " hours",
+                  suffix: '<%= red_js_t("red.ui_js.charts.suffix_hours") %>',
                   height: "200px",
                   colors: ["#8B5CF6"],
                   library: window.getChartLibraryOptions()
@@ -611,7 +656,7 @@
                 const colors = window.getChartColors();
                 new Chartkick.LineChart("mttr-trend-chart",
                   <%= raw @mttr_stats[:mttr_trend].to_json %>, {
-                  suffix: " hours",
+                  suffix: '<%= red_js_t("red.ui_js.charts.suffix_hours") %>',
                   height: "250px",
                   colors: ["#10B981"],
                   curve: false,

data/app/views/rails_error_dashboard/errors/correlation.html.erb

@@ -36,8 +36,8 @@
             <div class="display-6"><%= @period_comparison[:current_period][:count] %></div>
             <small class="text-muted">
               <%= red_t("red.analytics.correlation.trend_analysis.period_range",
-                         start: @period_comparison[:current_period][:start].strftime("%b %d"),
-                         end: @period_comparison[:current_period][:end].strftime("%b %d")) %>
+                         start: red_chart_date(@period_comparison[:current_period][:start], "%b %d"),
+                         end: red_chart_date(@period_comparison[:current_period][:end], "%b %d")) %>
             </small>
           </div>
           <div class="col-md-4">
@@ -45,8 +45,8 @@
             <div class="display-6"><%= @period_comparison[:previous_period][:count] %></div>
             <small class="text-muted">
               <%= red_t("red.analytics.correlation.trend_analysis.period_range",
-                         start: @period_comparison[:previous_period][:start].strftime("%b %d"),
-                         end: @period_comparison[:previous_period][:end].strftime("%b %d")) %>
+                         start: red_chart_date(@period_comparison[:previous_period][:start], "%b %d"),
+                         end: red_chart_date(@period_comparison[:previous_period][:end], "%b %d")) %>
             </small>
           </div>
           <div class="col-md-4">

data/app/views/rails_error_dashboard/errors/database_health_summary.html.erb

@@ -91,7 +91,7 @@
   <% if @live_health[:postgresql] %>
     <%# Summary cards for PostgreSQL %>
     <% total_db_size = (@host_tables + @gem_tables).sum { |t| t[:total_bytes] } %>
-    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-4);">
+    <div class="red-stat-grid" style="margin-bottom: var(--space-4);">
       <div class="card stat-card" style="padding: var(--space-4) var(--space-5); text-align: center;">
         <div class="stat-label" style="margin-bottom: 4px;"><%= red_t("red.health.database.summary.total_db_size") %></div>
         <div class="stat-value"><%= number_to_human_size(total_db_size) %></div>

data/app/views/rails_error_dashboard/errors/index.html.erb

@@ -157,6 +157,9 @@
       <% if @platforms.size > 1 %>
         <%= select_tag :platform, options_for_select([[red_t("red.errors.index.filters.all_platforms"), '']] + @platforms.map { |p| [p, p] }, params[:platform]), class: "form-select", style: "width: auto; min-width: 120px;" %>
       <% end %>
+      <% if @environments.size > 1 %>
+        <%= select_tag :environment, options_for_select([[red_t("red.errors.index.filters.all_environments"), '']] + @environments.map { |e| [e, e] }, params[:environment]), class: "form-select", style: "width: auto; min-width: 120px;" %>
+      <% end %>
       <%= select_tag :error_type, options_for_select([[red_t("red.errors.index.filters.all_types"), '']] + @error_types.map { |t| [t, t] }, params[:error_type]), class: "form-select", style: "width: auto; min-width: 120px;" %>
       <%
         # Built from the same keys the active chips read, so a label can never
@@ -217,6 +220,7 @@
       active_filters << { label: red_t("red.errors.index.filters.chips.application", value: app_name), param: :application_id } if app_name
     end
     active_filters << { label: red_t("red.errors.index.filters.chips.platform", value: params[:platform]), param: :platform } if params[:platform].present?
+    active_filters << { label: red_t("red.errors.index.filters.chips.environment", value: params[:environment]), param: :environment } if params[:environment].present?
     active_filters << { label: red_t("red.errors.index.filters.chips.error_type", value: params[:error_type]), param: :error_type } if params[:error_type].present?
     active_filters << { label: red_t("red.errors.index.filters.chips.severity", value: severity_label.call(params[:severity])), param: :severity } if params[:severity].present?
     active_filters << { label: red_t("red.errors.index.filters.chips.timeframe", value: timeframe_label.call(params[:timeframe])), param: :timeframe } if params[:timeframe].present?
@@ -287,11 +291,14 @@
               <% if @platforms.size > 1 %>
                 <th style="padding: var(--space-3) var(--space-4); width: 100px;"><%= red_t("red.errors.index.columns.platform") %></th>
               <% end %>
+              <% if @environments.size > 1 %>
+                <th style="padding: var(--space-3) var(--space-4); width: 110px;"><%= red_t("red.errors.index.columns.environment") %></th>
+              <% end %>
             </tr>
           </thead>
           <tbody id="error_list">
             <% @errors.each do |error| %>
-              <%= render "error_row", error: error, show_platform: @platforms.size > 1, show_application: (@applications.size > 1 && params[:application_id].blank?) %>
+              <%= render "error_row", error: error, show_platform: @platforms.size > 1, show_environment: @environments.size > 1, show_application: (@applications.size > 1 && params[:application_id].blank?) %>
             <% end %>
           </tbody>
         </table>

data/app/views/rails_error_dashboard/errors/overview.html.erb

@@ -32,7 +32,7 @@
     trend_values = @stats[:errors_trend_7d].values rescue []
     trend_max = [ trend_values.max || 1, 1 ].max
   %>
-  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6);">
+  <div class="red-stat-grid">
     <!-- Error Rate -->
     <div class="card stat-card" style="border-left: 3px solid var(--status-critical); padding: var(--space-5) var(--space-6);">
       <div class="stat-label" style="margin-bottom: 4px;"><%= red_t("red.errors.overview_page.error_rate") %></div>
@@ -89,7 +89,7 @@
   </div>
 
   <!-- Secondary Stats (3 cards) -->
-  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6);">
+  <div class="red-stat-grid">
     <!-- Affected Users -->
     <div class="card stat-card" style="padding: var(--space-5) var(--space-6);">
       <div class="stat-label" style="margin-bottom: 4px;"><%= red_t("red.errors.overview_page.affected_users") %></div>

data/app/views/rails_error_dashboard/errors/platform_comparison.html.erb

@@ -358,7 +358,7 @@
     new Chart(dailyTrendCtx, {
       type: 'line',
       data: {
-        labels: <%= raw @daily_trends.values.first&.keys&.map { |d| d.strftime('%b %d') }&.to_json || [].to_json %>,
+        labels: <%= raw @daily_trends.values.first&.keys&.map { |d| red_chart_date(d, '%b %d') }&.to_json || [].to_json %>,
         datasets: datasets
       },
       options: {