rails_error_dashboard 0.6.0 → 0.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aa8243a13e9eccf5cedcffea0600d19a904e7dbba1b372dd3c633fece3ab6674
-  data.tar.gz: 0aa65c2bfd6038ebd7d35901d8889a4e2ffc07bf653746a43650d7a9b6685257
+  metadata.gz: d065c1edba3f66205914ba82dbfc5aed936e0df62fd96df8f1dcd1667bc119af
+  data.tar.gz: dff67e2453ec7d33429b5a4c07754b1e7d9c3103946cd5fdcb6ed282a3a14bce
 SHA512:
-  metadata.gz: c85d90b5c8e36466306e9bda5466b8cce46e8dae335c218d946cfde374d1243835d5ec3eae9457fb75f80dfe48a339e71cef7f1b0439d2ccc1419a123e8fab94
-  data.tar.gz: 016bdd5a313427c5b07c72a1808262514e74159fb60761ff6903c6d64dc7c1127032df1f8c6ea5da64f858322be6ed734e249a3026a9d4b7dd5a0b8e50239628
+  metadata.gz: 14b55055cb0a3c765824778c82cb7d8f33cd2d4ad5c445ea2e568fc10c51aec611271e0610fa295c8318a4701bba6a051db5f313ee6f12b4d6ac04be331df85f
+  data.tar.gz: 0c154f205b6622ad747e3e037864b0e2bc2078f72098f71c2b26fb42d717a1b09a275e87ec29f2e34864684505b66b169f96efe8cc13910dc6a9f4c58fca5a4c

data/app/controllers/rails_error_dashboard/application_controller.rb

@@ -23,23 +23,27 @@ module RailsErrorDashboard
       Rails.logger.error("Params: #{params.inspect}")
       Rails.logger.error(exception.backtrace&.first(10)&.join("\n")) if exception.backtrace
 
-      # Render user-friendly error page
-      render plain: "The Error Dashboard encountered an issue displaying this page.\n\n" \
-                    "Your application is unaffected - this is only a dashboard display error.\n\n" \
-                    "Error: #{exception.message}\n\n" \
-                    "Check Rails logs for details: [RailsErrorDashboard]",
-             status: :internal_server_error,
-             layout: false
+      render_dashboard_error(
+        icon: "bi-exclamation-triangle",
+        icon_style: "background: var(--status-warning-bg); color: var(--status-warning);",
+        title: "Something went wrong",
+        message: "The Error Dashboard encountered an issue displaying this page. Your application is unaffected.",
+        detail: exception.message,
+        status: :internal_server_error
+      )
     end
 
     # Handle record not found — return 404 instead of 500
     rescue_from ActiveRecord::RecordNotFound do |exception|
       Rails.logger.warn("[RailsErrorDashboard] Record not found: #{exception.message}")
-      render plain: "The requested error was not found.\n\n" \
-                    "It may have been deleted or the ID is invalid.\n\n" \
-                    "Error: #{exception.message}",
-             status: :not_found,
-             layout: false
+
+      render_dashboard_error(
+        icon: "bi-search",
+        title: "The requested error was not found",
+        message: "It may have been deleted or the ID is invalid.",
+        detail: exception.message,
+        status: :not_found
+      )
     end
 
     # Handle Pagy pagination errors — redirect to page 1
@@ -47,5 +51,26 @@ module RailsErrorDashboard
       Rails.logger.warn("[RailsErrorDashboard] Pagination error: #{exception.message}")
       redirect_to request.path, status: :moved_permanently
     end
+
+    private
+
+    def render_dashboard_error(icon:, title:, message:, detail: nil, icon_style: nil, status: :internal_server_error)
+      set_common_view_variables
+      error_html = <<~ERB
+        <div class="red-empty-state" style="margin-top: var(--space-6);">
+          <div class="red-empty-state-icon"#{icon_style ? " style=\"#{icon_style}\"" : ""}><i class="bi #{icon}"></i></div>
+          <div class="red-empty-state-title">#{ERB::Util.html_escape(title)}</div>
+          <div class="red-empty-state-message">#{ERB::Util.html_escape(message)}</div>
+          #{"<div style=\"font-size: 12px; color: var(--text-tertiary); margin-top: var(--space-2); font-family: var(--font-mono);\">" + ERB::Util.html_escape(detail) + "</div>" if detail}
+          <a href="#{errors_path}" class="red-empty-state-cta" style="margin-top: var(--space-4);"><i class="bi bi-arrow-left"></i> Back to errors</a>
+        </div>
+      ERB
+      render html: error_html.html_safe, status: status, layout: "rails_error_dashboard"
+    end
+
+    def set_common_view_variables
+      @applications = Application.ordered_by_name.pluck(:name, :id) rescue []
+      @default_credentials_warning = RailsErrorDashboard.configuration.default_credentials? rescue false
+    end
   end
 end

data/app/controllers/rails_error_dashboard/errors_controller.rb

@@ -60,8 +60,11 @@ module RailsErrorDashboard
       # Use Query to get filtered errors
       errors_query = Queries::ErrorsList.call(filter_params)
 
-      # Paginate with Pagy
-      @pagy, @errors = pagy(:offset, errors_query, limit: params[:per_page] || 25)
+      # Paginate with Pagy. raise_range_error makes pagy 43.x raise Pagy::RangeError
+      # on out-of-range pages (e.g. ?page=999999) so application_controller.rb's
+      # rescue_from can redirect to a valid page. Without this, pagy 43.x silently
+      # returns an empty result and users see "All clear!" instead of their data.
+      @pagy, @errors = pagy(:offset, errors_query, limit: params[:per_page] || 25, raise_range_error: true)
 
       # Get dashboard stats using Query (pass application filter)
       @stats = Queries::DashboardStats.call(application_id: @current_application_id)
@@ -560,6 +563,23 @@ module RailsErrorDashboard
       redirect_back fallback_location: errors_path
     end
 
+    def test_error
+      exception = RailsErrorDashboard::TestError.new(
+        "[RED Test] This is a test error sent from the dashboard to verify " \
+        "that error capture and notification delivery are working correctly. " \
+        "It is safe to resolve or delete this error."
+      )
+      exception.set_backtrace(caller)
+
+      Commands::LogError.call(exception, { request: request, source: "dashboard.test_error" })
+
+      flash[:notice] = "Test error logged successfully. Check your notification channels (Slack, Discord, email, etc.) to confirm delivery."
+      redirect_to errors_path(**app_context_params)
+    rescue => e
+      flash[:alert] = "Failed to log test error: #{e.message}"
+      redirect_to settings_path(**app_context_params)
+    end
+
     def settings
       @config = RailsErrorDashboard.configuration
     end

data/app/helpers/rails_error_dashboard/application_helper.rb

@@ -1,5 +1,32 @@
 module RailsErrorDashboard
   module ApplicationHelper
+    # Returns the host app's CSP nonce (if any) so inline <script> tags pass strict CSP.
+    # Falls back to nil when the host has no CSP configured — in that case the script tag
+    # works without a nonce attribute. Strict CSPs (script-src 'self' 'nonce-...') require
+    # this; without it the script is blocked.
+    def red_csp_nonce
+      return nil unless respond_to?(:content_security_policy_nonce)
+      content_security_policy_nonce
+    rescue StandardError
+      nil
+    end
+
+    # Wraps an inline <script> block with the host app's CSP nonce when available.
+    # Use everywhere we have <script>...</script> in our views so they pass strict CSP.
+    #
+    #   <%= red_javascript_tag do %>
+    #     console.log('hi');
+    #   <% end %>
+    def red_javascript_tag(&block)
+      nonce = red_csp_nonce
+      content = capture(&block)
+      if nonce
+        content_tag(:script, content.html_safe, nonce: nonce)
+      else
+        content_tag(:script, content.html_safe)
+      end
+    end
+
     # Returns Bootstrap color class for error severity
     # Uses Catppuccin Mocha colors in dark theme via CSS variables
     # @param severity [Symbol] The severity level (:critical, :high, :medium, :low, :info)

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

@@ -39,7 +39,7 @@
     <% end %>
 
     <!-- Early theme detection (prevents flash of wrong theme) -->
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
     (function(){
       var t = localStorage.getItem('red-theme');
       if (t === 'dark' || (!t && window.matchMedia && matchMedia('(prefers-color-scheme: dark)').matches)) {
@@ -135,9 +135,9 @@
   --surface-secondary: #313244;
   --surface-tertiary: #45475a;
   --surface-hover: #313244;
-  --text-primary: #cdd6f4;
-  --text-secondary: #a6adc8;
-  --text-tertiary: #6c7086;
+  --text-primary: #ffffff;
+  --text-secondary: #cdd6f4;
+  --text-tertiary: #a6adc8;
   --border-primary: #313244;
   --border-secondary: #45475a;
   --accent: <%= ac[:dark] %>;
@@ -279,17 +279,21 @@ dd { color: var(--text-primary); }
 .ps-3 { padding-left: var(--space-4); }
 .pe-2 { padding-right: var(--space-2); }
 
-/* Display */
-.d-none { display: none; }
-.d-block { display: block; }
-.d-inline { display: inline; }
-.d-inline-block { display: inline-block; }
-@media (min-width: 576px) { .d-sm-inline { display: inline; } .d-sm-block { display: block; } }
-@media (min-width: 768px) { .d-md-block { display: block; } .d-md-none { display: none; } .d-md-flex { display: flex; } .d-md-inline { display: inline; } .ms-sm-auto { margin-left: auto; } .px-md-4 { padding-left: var(--space-6); padding-right: var(--space-6); } }
+/* Display (use !important to match Bootstrap utility behavior) */
+.d-none { display: none !important; }
+.d-block { display: block !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+@media (min-width: 576px) { .d-sm-inline { display: inline !important; } .d-sm-block { display: block !important; } }
+@media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-none { display: none !important; } .d-md-flex { display: flex !important; } .d-md-inline { display: inline !important; } .ms-sm-auto { margin-left: auto; } .px-md-4 { padding-left: var(--space-6); padding-right: var(--space-6); } }
 
 /* Text */
-.text-muted { color: var(--text-tertiary); }
+.text-muted { color: var(--text-secondary); }
 .text-secondary { color: var(--text-secondary); }
+
+/* Bootstrap compat: table-light thead */
+.table-light, thead.table-light { background: var(--surface-secondary); }
+.table-light th { color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
 .text-center { text-align: center; }
 .text-end { text-align: right; }
 .text-start { text-align: left; }
@@ -632,6 +636,10 @@ dd { color: var(--text-primary); }
   .red-sidebar.collapsed { display: none; }
 }
 
+/* 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; } }
+
 /* Env badge */
 .red-env-badge {
   padding: 3px 10px; font-size: 11px; font-weight: 600;
@@ -872,6 +880,12 @@ main { animation: contentFadeIn 0.15s ease; }
 details { background: var(--surface-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); }
 summary { padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 500; color: var(--text-primary); background: var(--surface-hover); }
 details[open] summary { border-bottom: 1px solid var(--border-primary); }
+
+/* Error row hover (replaces inline onmouseenter/onmouseleave) */
+tr[data-red-row-href] { transition: background 0.1s ease; }
+tr[data-red-row-href]:hover { background: var(--surface-hover); }
+tr[data-red-row-href] .sev-bar { transition: opacity 0.1s ease; }
+tr[data-red-row-href]:hover .sev-bar { opacity: 1 !important; }
     </style>
   </head>
 
@@ -884,7 +898,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
       <!-- Sidebar -->
       <nav class="red-sidebar d-none d-md-flex" id="sidebar">
         <!-- Logo -->
-        <div class="red-sidebar-logo">
+        <a href="/" class="red-sidebar-logo" title="Back to <%= Rails.application.class.module_parent_name %>" style="text-decoration: none; color: inherit;">
           <div class="red-sidebar-logo-icon">R</div>
           <div>
             <div style="font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em;">RED</div>
@@ -893,7 +907,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
             end %>
             <div style="font-size: 10px; color: var(--text-tertiary); margin-top: -2px;"><%= sidebar_app_name || Rails.application.class.module_parent_name %> &middot; <%= Rails.env %></div>
           </div>
-        </div>
+        </a>
 
         <!-- Nav groups -->
         <div style="flex: 1; overflow: auto; padding: var(--space-3) 0;">
@@ -949,7 +963,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
 
           <% if health_items.any? %>
             <div style="margin-bottom: var(--space-2);" id="navHealthSection">
-              <button class="red-sidebar-section-label" onclick="toggleNavSection('navHealthItems')">
+              <button type="button" class="red-sidebar-section-label" data-red-action="toggle-nav-section" data-red-target="navHealthItems">
                 Health
                 <i class="bi bi-chevron-down" style="font-size: 10px;" id="navHealthChevron"></i>
               </button>
@@ -980,7 +994,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
 
           <% if diag_items.any? %>
             <div style="margin-bottom: var(--space-2);" id="navDiagSection">
-              <button class="red-sidebar-section-label" onclick="toggleNavSection('navDiagItems')">
+              <button type="button" class="red-sidebar-section-label" data-red-action="toggle-nav-section" data-red-target="navDiagItems">
                 Diagnostics
                 <i class="bi bi-chevron-down" style="font-size: 10px;" id="navDiagChevron"></i>
               </button>
@@ -998,7 +1012,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
 
           <!-- INSIGHTS section -->
           <div style="margin-bottom: var(--space-2);" id="navInsightsSection">
-            <button class="red-sidebar-section-label" onclick="toggleNavSection('navInsightsItems')">
+            <button type="button" class="red-sidebar-section-label" data-red-action="toggle-nav-section" data-red-target="navInsightsItems">
               Insights
               <i class="bi bi-chevron-down" style="font-size: 10px;" id="navInsightsChevron"></i>
             </button>
@@ -1062,7 +1076,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
                   <% if params[:application_id].present? %>
                     <%= @applications.find { |name, id| id.to_s == params[:application_id].to_s }&.first || 'Unknown' %>
                   <% else %>
-                    All Apps
+                    All Apps (<%= @applications.size %>)
                   <% end %>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="appSwitcher">
@@ -1094,7 +1108,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
                 </ul>
               </div>
             <% end %>
-            <kbd>?</kbd>
+            <button type="button" title="Keyboard shortcuts (?)" data-bs-toggle="modal" data-bs-target="#keyboardShortcutsModal" style="background: none; border: none; padding: 0; cursor: pointer; line-height: 1;"><kbd>?</kbd></button>
             <button class="red-theme-toggle" id="themeToggle" title="Toggle theme">
               <i class="bi bi-moon" id="themeIcon"></i>
             </button>
@@ -1105,14 +1119,16 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
         <!-- Main content -->
         <main style="flex: 1; padding: var(--space-6) var(--space-8); max-width: 1200px; width: 100%; margin: 0 auto;">
           <% if @default_credentials_warning %>
-            <div class="alert alert-warning" style="display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); margin-bottom: var(--space-4); border-left: 4px solid var(--status-warning);">
-              <i class="bi bi-exclamation-triangle-fill" style="font-size: 18px;"></i>
-              <div>
+            <div id="security-warning" class="alert alert-warning" style="display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); margin-bottom: var(--space-4); border-left: 4px solid var(--status-warning);">
+              <i class="bi bi-exclamation-triangle-fill" style="font-size: 18px; flex-shrink: 0;"></i>
+              <div style="flex: 1;">
                 <strong>Security Warning:</strong> You are using default credentials (gandalf/youshallnotpass).
                 Set <code>ERROR_DASHBOARD_USER</code> and <code>ERROR_DASHBOARD_PASSWORD</code> environment variables,
                 or configure <code>authenticate_with</code> in your initializer.
               </div>
+              <button type="button" data-red-action="dismiss-creds-warning" style="background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 18px; padding: 0 4px; flex-shrink: 0; line-height: 1;" title="Dismiss for this session">&times;</button>
             </div>
+            <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>try { if (sessionStorage.getItem('red_dismiss_creds_warning') === '1') { document.getElementById('security-warning').style.display = 'none'; } } catch(e) {}</script>
           <% end %>
           <%= yield %>
         </main>
@@ -1124,7 +1140,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
             Built with <a href="https://github.com/AnjanJ/rails_error_dashboard" target="_blank"><strong>RED</strong> &mdash; Rails Error Dashboard</a>
           </p>
           <p style="font-size: 12px; color: var(--text-tertiary); margin: 0;">
-            Created by <a href="https://www.anjan.dev/" target="_blank">Anjan Jagirdar</a>
+            v<%= RailsErrorDashboard::VERSION %> &middot; Built with ❤️ by <a href="https://anjan.dev" target="_blank">Anjan Jagirdar</a>
           </p>
         </footer>
       </div>
@@ -1133,10 +1149,10 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
     <!-- Mobile Sidebar (Offcanvas) -->
     <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
       <div class="offcanvas-header">
-        <div style="display: flex; align-items: center; gap: 10px;">
+        <a href="/" style="display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;" title="Back to app home">
           <div class="red-sidebar-logo-icon">R</div>
           <strong>RED</strong>
-        </div>
+        </a>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
       <div class="offcanvas-body">
@@ -1201,7 +1217,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
     <script src="https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.umd.js"></script>
 
     <!-- Loading State Controller -->
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
 (function() {
   'use strict';
   if (typeof Stimulus === 'undefined') return;
@@ -1280,7 +1296,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
     </script>
 
     <!-- Syntax Highlighting -->
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
 (function() {
   'use strict';
   if (typeof hljs === 'undefined') return;
@@ -1324,7 +1340,7 @@ details[open] summary { border-bottom: 1px solid var(--border-primary); }
     </script>
 
     <!-- Theme Toggle + Chart Theme -->
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
 document.addEventListener('DOMContentLoaded', function() {
   var themeToggle = document.getElementById('themeToggle');
   var themeIcon = document.getElementById('themeIcon');
@@ -1411,7 +1427,7 @@ document.addEventListener('DOMContentLoaded', function() {
     </script>
 
     <!-- Utilities (tooltips, clipboard, time conversion, keyboard shortcuts) -->
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
 document.addEventListener('DOMContentLoaded', function() {
 
   // Tooltips
@@ -1581,11 +1597,114 @@ document.addEventListener('DOMContentLoaded', function() {
       window.location.href = '<%= analytics_errors_path %>';
     }
   });
+
+  // ==========================================================================
+  // Delegated event handlers for [data-red-action]
+  // Replaces inline event handlers (which strict CSP blocks).
+  // ==========================================================================
+  function findActionEl(target) {
+    var el = target;
+    while (el && el !== document.body) {
+      if (el.dataset && el.dataset.redAction) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+
+  document.addEventListener('click', function(e) {
+    // Row navigation: <tr data-red-row-href="/path"> — clicking anywhere on the row
+    // navigates, except when clicking inside a checkbox cell or interactive elements.
+    var rowEl = e.target.closest && e.target.closest('[data-red-row-href]');
+    if (rowEl && !e.defaultPrevented) {
+      var inIgnore = e.target.closest('input, button, a, label, [data-red-stop]');
+      if (!inIgnore) {
+        window.location = rowEl.dataset.redRowHref;
+        return;
+      }
+    }
+
+    var actionEl = findActionEl(e.target);
+    if (!actionEl) return;
+    var action = actionEl.dataset.redAction;
+
+    switch (action) {
+      case 'navigate':
+        if (actionEl.dataset.redHref) {
+          window.location = actionEl.dataset.redHref;
+        }
+        break;
+      case 'copy':
+        if (typeof window.copyToClipboard === 'function') {
+          var text = actionEl.dataset.redCopyText;
+          if (text == null && actionEl.dataset.redCopyFrom) {
+            text = actionEl.dataset[actionEl.dataset.redCopyFrom];
+          }
+          window.copyToClipboard(text || '', actionEl);
+        }
+        break;
+      case 'copy-markdown':
+        if (typeof window.copyToClipboard === 'function') {
+          var md = (actionEl.dataset.markdown || '').replace(/\\(.)/g, function(m, c) {
+            return c === 'n' ? '\n' : c;
+          });
+          window.copyToClipboard(md, actionEl);
+        }
+        break;
+      case 'download-json':
+        if (typeof window.downloadErrorJSON === 'function') {
+          // Provide currentTarget pointing at the button so the handler can show feedback.
+          window.downloadErrorJSON({ currentTarget: actionEl });
+        }
+        break;
+      case 'switch-tab':
+        if (typeof window.switchTab === 'function' && actionEl.dataset.redTab) {
+          window.switchTab(actionEl.dataset.redTab);
+        }
+        break;
+      case 'toggle-display':
+        var tgtSel = actionEl.dataset.redTarget;
+        if (tgtSel) {
+          var tgt = document.querySelector(tgtSel);
+          if (tgt) {
+            var openDisplay = actionEl.dataset.redDisplay || 'block';
+            tgt.style.display = (tgt.style.display === 'none' || tgt.style.display === '') ? openDisplay : 'none';
+          }
+        }
+        break;
+      case 'toggle-next':
+        var nextEl = actionEl.nextElementSibling;
+        if (nextEl) {
+          var isHidden = nextEl.style.display === 'none' || nextEl.style.display === '';
+          nextEl.style.display = isHidden ? (actionEl.dataset.redDisplay || 'block') : 'none';
+          var chev = actionEl.querySelector('.chev');
+          if (chev) {
+            chev.className = isHidden ? 'bi bi-chevron-up chev' : 'bi bi-chevron-down chev';
+          }
+        }
+        break;
+      case 'dismiss-creds-warning':
+        if (actionEl.parentElement) actionEl.parentElement.style.display = 'none';
+        try { sessionStorage.setItem('red_dismiss_creds_warning', '1'); } catch (err) {}
+        break;
+      case 'toggle-nav-section':
+        if (typeof window.toggleNavSection === 'function' && actionEl.dataset.redTarget) {
+          window.toggleNavSection(actionEl.dataset.redTarget);
+        }
+        break;
+      case 'confirm-submit':
+        var msg = actionEl.dataset.redConfirmMessage || 'Are you sure?';
+        if (!window.confirm(msg)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        break;
+    }
+  });
 });
     </script>
 
     <!-- Sidebar Toggle + Nav Section Toggle -->
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
 document.addEventListener('DOMContentLoaded', function() {
   var sidebarToggle = document.getElementById('sidebarToggle');
   var sidebar = document.getElementById('sidebar');
@@ -1612,7 +1731,7 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 // Nav section collapse/expand
-function toggleNavSection(itemsId) {
+window.toggleNavSection = function(itemsId) {
   var items = document.getElementById(itemsId);
   var chevron = document.getElementById(itemsId.replace('Items', 'Chevron'));
   if (items) {
@@ -1621,7 +1740,7 @@ function toggleNavSection(itemsId) {
     if (chevron) chevron.className = hidden ? 'bi bi-chevron-down' : 'bi bi-chevron-right';
     localStorage.setItem('red_nav_' + itemsId, hidden ? 'open' : 'closed');
   }
-}
+};
 
 // Restore nav section states
 document.addEventListener('DOMContentLoaded', function() {
@@ -1638,7 +1757,7 @@ document.addEventListener('DOMContentLoaded', function() {
     </script>
 
     <!-- Flash Messages -->
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
       <% if defined?(flash) && flash.present? %>
         <% if flash[:notice] %>
           showToast('<%= j flash[:notice] %>', 'success');

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

@@ -13,7 +13,7 @@
                 </span>
               <% end %>
             </h5>
-            <button class="btn btn-sm btn-outline-light" onclick="copyToClipboard('<%= j error.error_type %>', this)" title="Copy error type">
+            <button type="button" class="btn btn-sm btn-outline-light" data-red-action="copy" data-red-copy-text="<%= j error.error_type %>" title="Copy error type">
               <i class="bi bi-clipboard"></i>
             </button>
           </div>
@@ -21,7 +21,7 @@
         <div class="card-body">
           <div class="d-flex justify-content-between align-items-center mb-3">
             <h6 class="text-muted mb-0">Error Message:</h6>
-            <button class="btn btn-sm btn-outline-secondary" onclick="copyToClipboard('<%= j error.message %>', this)" title="Copy error message">
+            <button type="button" class="btn btn-sm btn-outline-secondary" data-red-action="copy" data-red-copy-text="<%= j error.message %>" title="Copy error message">
               <i class="bi bi-clipboard"></i> Copy
             </button>
           </div>
@@ -95,7 +95,7 @@
               <% end %>
             </h6>
             <% if error.backtrace.present? %>
-              <button class="btn btn-sm btn-outline-secondary" onclick="copyToClipboard(`<%= j error.backtrace %>`, this)" title="Copy full backtrace">
+              <button type="button" class="btn btn-sm btn-outline-secondary" data-red-action="copy" data-red-copy-text="<%= j error.backtrace %>" title="Copy full backtrace">
                 <i class="bi bi-clipboard"></i> Copy Full Backtrace
               </button>
             <% end %>

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

@@ -1,13 +1,11 @@
 <tr id="error_<%= error.id %>"
-    onclick="window.location='<%= error_path(error, **app_context) %>'"
-    style="border-bottom: 1px solid var(--border-primary); cursor: pointer; transition: background 0.1s ease;"
-    onmouseenter="this.style.background='var(--surface-hover)'; this.querySelector('.sev-bar').style.opacity='1';"
-    onmouseleave="this.style.background='transparent'; this.querySelector('.sev-bar').style.opacity='0';">
-  <td style="padding: var(--space-3) var(--space-4); text-align: center; position: relative;" onclick="event.stopPropagation(); var cb = this.querySelector('input'); cb.checked = !cb.checked; cb.dispatchEvent(new Event('change'));">
-    <span class="sev-bar" style="position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: <%= severity_color_var(error.severity) %>; opacity: 0; transition: opacity 0.1s ease; border-radius: 0 2px 2px 0;"></span>
-    <input type="checkbox" class="error-checkbox form-check-input" value="<%= error.id %>" data-error-id="<%= error.id %>" onclick="event.stopPropagation();" style="accent-color: var(--accent);">
+    data-red-row-href="<%= error_path(error, **app_context) %>"
+    style="border-bottom: 1px solid var(--border-primary); cursor: pointer;">
+  <td style="padding: var(--space-3) var(--space-4); text-align: center; position: relative;" data-red-stop>
+    <span class="sev-bar" style="position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: <%= severity_color_var(error.severity) %>; opacity: 0; border-radius: 0 2px 2px 0;"></span>
+    <input type="checkbox" class="error-checkbox form-check-input" value="<%= error.id %>" data-error-id="<%= error.id %>" data-red-stop style="accent-color: var(--accent);">
   </td>
-  <td style="padding: var(--space-3) var(--space-4);" onclick="window.location='<%= error_path(error, **app_context) %>'">
+  <td style="padding: var(--space-3) var(--space-4);">
     <div style="display: flex; align-items: center; gap: 8px;">
       <span class="badge bg-<%= severity_color(error.severity) %>" style="display: inline-flex; align-items: center; gap: 4px;">
         <span style="width: 6px; height: 6px; border-radius: 50%; background: currentColor;"></span>
@@ -20,11 +18,11 @@
             <span style="display: inline-block; padding: 1px 6px; font-size: 9px; font-weight: 600; border-radius: var(--radius-full); background: var(--status-success-bg); color: var(--status-success); margin-left: 4px; text-transform: uppercase;">NEW</span>
           <% end %>
         </div>
-        <div style="color: var(--text-tertiary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px;" title="<%= error.message %>"><%= error.message %></div>
+        <div style="color: var(--text-tertiary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="<%= error.message %>"><%= error.message %></div>
       </div>
     </div>
   </td>
-  <td style="padding: var(--space-3) var(--space-4);" onclick="window.location='<%= error_path(error, **app_context) %>'">
+  <td style="padding: var(--space-3) var(--space-4);">
     <%
       # Use the model's status field if it has a meaningful workflow status
       raw_status = error.respond_to?(:status) ? error.status : nil
@@ -58,26 +56,26 @@
       <i class="bi bi-arrow-counterclockwise" style="color: var(--status-warning); margin-left: 4px; font-size: 12px;" title="Reopened"></i>
     <% end %>
   </td>
-  <td style="padding: var(--space-3) var(--space-4); text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary);" onclick="window.location='<%= error_path(error, **app_context) %>'">
+  <td style="padding: var(--space-3) var(--space-4); text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary);">
     <%= error.occurrence_count.to_s(:delimited) rescue error.occurrence_count %>
   </td>
-  <td style="padding: var(--space-3) var(--space-4); text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary);" onclick="window.location='<%= error_path(error, **app_context) %>'">
+  <td style="padding: var(--space-3) var(--space-4); text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary);">
     <% if error.user_id %>
       <%= error.user_id %>
     <% else %>
       <span style="color: var(--text-tertiary);">&mdash;</span>
     <% end %>
   </td>
-  <td style="padding: var(--space-3) var(--space-4); text-align: right; color: var(--text-tertiary); font-size: 12px;" onclick="window.location='<%= error_path(error, **app_context) %>'">
+  <td style="padding: var(--space-3) var(--space-4); text-align: right; color: var(--text-tertiary); font-size: 12px;">
     <%= local_time_ago(error.last_seen_at) %>
   </td>
   <% if local_assigns[:show_application] %>
-    <td style="padding: var(--space-3) var(--space-4); font-size: 12px;" onclick="window.location='<%= error_path(error, **app_context) %>'">
+    <td style="padding: var(--space-3) var(--space-4); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<%= error.application&.name || 'Unknown' %>">
       <span class="badge bg-info"><%= error.application&.name || 'Unknown' %></span>
     </td>
   <% end %>
   <% if local_assigns[:show_platform] %>
-    <td style="padding: var(--space-3) var(--space-4); font-size: 12px;" onclick="window.location='<%= error_path(error, **app_context) %>'">
+    <td style="padding: var(--space-3) var(--space-4); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<%= error.platform || 'API' %>">
       <% if error.platform == 'iOS' %>
         <span class="badge badge-ios"><i class="bi bi-apple"></i> iOS</span>
       <% elsif error.platform == 'Android' %>

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

@@ -112,7 +112,7 @@
   </div>
 
   <% if flash[:new_issue_url].present? %>
-    <script>
+    <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
       (function() {
         window.open('<%= j flash[:new_issue_url] %>', '_blank');
       })();

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

@@ -84,17 +84,17 @@
                 <th>Replay Request:</th>
                 <td>
                   <% if curl_cmd.present? %>
-                    <button class="btn btn-sm btn-outline-primary me-2"
-                            onclick="copyToClipboard(this.dataset.curl, this)"
-                            data-curl="<%= h curl_cmd %>"
+                    <button type="button" class="btn btn-sm btn-outline-primary me-2"
+                            data-red-action="copy"
+                            data-red-copy-text="<%= h curl_cmd %>"
                             title="Copy curl command to clipboard">
                       <i class="bi bi-terminal"></i> Copy as curl
                     </button>
                   <% end %>
                   <% if rspec_cmd.present? %>
-                    <button class="btn btn-sm btn-outline-success"
-                            onclick="copyToClipboard(this.dataset.curl, this)"
-                            data-curl="<%= h rspec_cmd %>"
+                    <button type="button" class="btn btn-sm btn-outline-success"
+                            data-red-action="copy"
+                            data-red-copy-text="<%= h rspec_cmd %>"
                             title="Copy RSpec request spec to clipboard">
                       <i class="bi bi-code-slash"></i> Copy as RSpec
                     </button>

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

@@ -1,5 +1,5 @@
-<script>
-  function downloadErrorJSON(event) {
+<script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
+  window.downloadErrorJSON = function(event) {
     const errorData = {
       id: <%= raw error.id.to_json %>,
       error_type: <%= raw error.error_type.to_json %>,
@@ -52,7 +52,7 @@
       button.classList.remove('btn-success');
       button.classList.add('btn-outline-secondary');
     }, 2000);
-  }
+  };
 
   // Section Navigation — pill bar with scroll spy
   document.addEventListener('DOMContentLoaded', function() {

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

@@ -526,7 +526,7 @@
             <small class="metadata-label d-block mb-1">Error ID</small>
             <div class="d-flex align-items-center gap-2">
               <code><%= error.id %></code>
-              <button class="btn btn-sm btn-outline-secondary" onclick="copyToClipboard('<%= error.id %>', this)" title="Copy error ID">
+              <button type="button" class="btn btn-sm btn-outline-secondary" data-red-action="copy" data-red-copy-text="<%= error.id %>" title="Copy error ID">
                 <i class="bi bi-clipboard"></i>
               </button>
             </div>

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

@@ -87,11 +87,11 @@
               </div>
 
               <% if error.resolved? && error.resolution_comment.present? %>
-                <div class="mt-2 p-2 bg-success bg-opacity-10 border border-success rounded">
-                  <small class="text-success fw-bold">
+                <div style="margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--status-success-bg); border: 1px solid var(--status-success); border-radius: var(--radius-sm);">
+                  <small style="color: var(--status-success); font-weight: 600;">
                     <i class="bi bi-journal-text"></i> Resolution Notes:
                   </small>
-                  <div class="mb-0 small text-muted mt-1">
+                  <div style="font-size: 13px; color: var(--text-primary); margin-top: 4px;">
                     <%= auto_link_urls(truncate(error.resolution_comment, length: 200), error: error).html_safe %>
                   </div>
                 </div>

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

@@ -1,6 +1,6 @@
 <% content_for :page_title, "Analytics" %>
 
-<script>
+<script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
   // Dynamic chart colors based on theme
   window.getChartColors = function() {
     const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
@@ -67,7 +67,7 @@
     </div>
     <div class="card-body">
       <div id="errors-over-time-chart"></div>
-      <script>
+      <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
         document.addEventListener('DOMContentLoaded', function() {
           const colors = window.getChartColors();
           new Chartkick.LineChart("errors-over-time-chart", <%= raw @errors_over_time.to_json %>, {
@@ -112,7 +112,7 @@
           </div>
           <div class="card-body">
             <div id="errors-by-platform-chart"></div>
-            <script>
+            <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
               document.addEventListener('DOMContentLoaded', function() {
                 const colors = window.getChartColors();
                 // Distinct, accessible colors for 5 platforms with good contrast
@@ -166,7 +166,7 @@
         </div>
         <div class="card-body">
           <div id="errors-by-type-chart"></div>
-          <script>
+          <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
             document.addEventListener('DOMContentLoaded', function() {
               const colors = window.getChartColors();
               new Chartkick.BarChart("errors-by-type-chart", <%= raw @errors_by_type.to_json %>, {
@@ -208,7 +208,7 @@
         </div>
         <div class="card-body">
           <div id="errors-by-hour-chart"></div>
-          <script>
+          <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
             document.addEventListener('DOMContentLoaded', function() {
               const colors = window.getChartColors();
               new Chartkick.ColumnChart("errors-by-hour-chart", <%= raw @errors_by_hour.to_json %>, {
@@ -410,7 +410,7 @@
           </div>
           <div class="card-body">
             <div id="errors-by-version-chart"></div>
-            <script>
+            <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
               document.addEventListener('DOMContentLoaded', function() {
                 const versionData = <%= raw @errors_by_version.transform_values { |v| v[:count] }.to_json %>;
                 const colors = window.getChartColors();
@@ -549,7 +549,7 @@
           <div class="mt-4">
             <h6 class="text-muted mb-3">MTTR by Platform</h6>
             <div id="mttr-by-platform-chart"></div>
-            <script>
+            <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
               document.addEventListener('DOMContentLoaded', function() {
                 const colors = window.getChartColors();
                 new Chartkick.BarChart("mttr-by-platform-chart",
@@ -602,7 +602,7 @@
           <div class="mt-4">
             <h6 class="text-muted mb-3">MTTR Trend (Weekly)</h6>
             <div id="mttr-trend-chart"></div>
-            <script>
+            <script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
               document.addEventListener('DOMContentLoaded', function() {
                 const colors = window.getChartColors();
                 new Chartkick.LineChart("mttr-trend-chart",

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

@@ -40,20 +40,6 @@
         All time
       <% end %>
     </span>
-    <div id="batch-actions-inline" style="display: none; gap: 6px;">
-      <%= form_with url: batch_action_errors_path, method: :post, id: "batch-form", style: "display: flex; gap: 6px; align-items: center;" do |f| %>
-        <% if params[:application_id].present? %>
-          <%= hidden_field_tag :application_id, params[:application_id] %>
-        <% end %>
-        <span id="selected-count" style="font-size: 12px; font-weight: 600; color: var(--text-secondary);"></span>
-        <%= button_tag type: "submit", name: "action_type", value: "resolve", class: "btn btn-sm", style: "padding: 4px 12px; font-size: 12px;" do %>
-          Resolve
-        <% end %>
-        <%= button_tag type: "submit", name: "action_type", value: "delete", class: "btn btn-sm", style: "padding: 4px 12px; font-size: 12px; color: var(--status-critical);", data: { confirm: "Are you sure you want to delete the selected errors?" } do %>
-          Delete
-        <% end %>
-      <% end %>
-    </div>
   </div>
 
   <!-- Spike Detection Alert -->
@@ -100,7 +86,7 @@
           current_status = params[:status]
           is_unresolved_only = params[:unresolved] != "false" && params[:unresolved] != "0"
         %>
-        <%= link_to errors_path(app_context), class: "btn filter-pill #{current_status.blank? && !is_unresolved_only ? 'active btn-primary' : 'btn-outline-primary'}", style: "text-decoration: none;" do %>All<% end %>
+        <%= link_to errors_path(app_context.merge(unresolved: '0')), class: "btn filter-pill #{current_status.blank? && !is_unresolved_only ? 'active btn-primary' : 'btn-outline-primary'}", style: "text-decoration: none;" do %>All<% end %>
         <%= link_to errors_path(app_context.merge(unresolved: '1')), class: "btn filter-pill #{is_unresolved_only && current_status.blank? ? 'active btn-primary' : 'btn-outline-primary'}", style: "text-decoration: none;" do %>Unresolved <span style="font-size: 11px; opacity: 0.7;"><%= @stats[:unresolved] %></span><% end %>
         <%= link_to errors_path(app_context.merge(status: 'resolved', unresolved: '0')), class: "btn filter-pill #{current_status == 'resolved' ? 'active btn-primary' : 'btn-outline-primary'}", style: "text-decoration: none;" do %>Resolved<% end %>
         <%= link_to errors_path(app_context.merge(assigned_to: '__assigned__')), class: "btn filter-pill #{params[:assigned_to] == '__assigned__' ? 'active btn-primary' : 'btn-outline-primary'}", style: "text-decoration: none;" do %>Assigned<% end %>
@@ -120,13 +106,13 @@
 
       <!-- Advanced filters toggle -->
       <div style="width: 1px; height: 24px; background: var(--border-primary);"></div>
-      <button type="button" onclick="document.getElementById('advanced-filters').style.display = document.getElementById('advanced-filters').style.display === 'none' ? 'flex' : 'none'" class="filter-pill" style="border: none;">
+      <button type="button" data-red-action="toggle-display" data-red-target="#advanced-filters" data-red-display="flex" class="filter-pill" style="border: none;">
         <i class="bi bi-sliders"></i> More filters
       </button>
     </div>
 
     <!-- Advanced filters -->
-    <div id="advanced-filters" style="display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-primary); border-radius: var(--radius-md); border: 1px solid var(--border-primary);">
+    <div id="advanced-filters" style="display: none; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-primary); border-radius: var(--radius-md); border: 1px solid var(--border-primary);">
       <% if @applications.size > 1 %>
         <%= select_tag :application_id, options_for_select([['All Apps', '']] + @applications, params[:application_id]), class: "form-select", style: "width: auto; min-width: 120px;" %>
       <% end %>
@@ -208,23 +194,41 @@
   <!-- Error Table -->
   <div class="card" style="overflow: hidden;">
     <% if @errors.any? %>
+      <!-- Batch action toolbar (shown when one or more errors are selected). Sits above the table
+           so it doesn't disrupt the table's column widths the way a colspan thead row does. -->
+      <div id="batch-toolbar" style="display: none; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-primary); background: var(--surface-secondary);">
+        <%= form_with url: batch_action_errors_path, method: :post, id: "batch-form", style: "display: flex; gap: 8px; align-items: center; flex-wrap: wrap;" do |f| %>
+          <% if params[:application_id].present? %>
+            <%= hidden_field_tag :application_id, params[:application_id] %>
+          <% end %>
+          <input type="checkbox" id="select-all-batch" class="form-check-input" style="accent-color: var(--accent); margin: 0;" checked>
+          <span id="selected-count" style="font-size: 13px; font-weight: 600; color: var(--text-primary); margin-right: var(--space-2);"></span>
+          <%= button_tag type: "submit", name: "action_type", value: "resolve", class: "btn btn-sm", style: "padding: 4px 12px; font-size: 12px;" do %>
+            <i class="bi bi-check-circle"></i> Resolve
+          <% end %>
+          <%= button_tag type: "submit", name: "action_type", value: "delete", class: "btn btn-sm", style: "padding: 4px 12px; font-size: 12px; color: var(--status-critical);", data: { confirm: "Are you sure you want to delete the selected errors?" } do %>
+            <i class="bi bi-trash"></i> Delete
+          <% end %>
+        <% end %>
+      </div>
       <div data-loading-target="content">
-        <table class="table table-hover" style="margin-bottom: 0;">
+        <div style="overflow-x: auto;">
+        <table class="table table-hover" style="margin-bottom: 0; width: 100%; table-layout: fixed;">
           <thead>
-            <tr style="border-bottom: 1px solid var(--border-primary);">
-              <th style="width: 40px; padding: var(--space-3) var(--space-4); text-align: center;">
+            <tr id="thead-columns" style="border-bottom: 1px solid var(--border-primary);">
+              <th style="width: 36px; padding: var(--space-3) var(--space-4); text-align: center;">
                 <input type="checkbox" id="select-all" class="form-check-input" style="accent-color: var(--accent);">
               </th>
               <th style="padding: var(--space-3) var(--space-4); text-align: left;">Error</th>
-              <th style="padding: var(--space-3) var(--space-4); text-align: left; width: 90px;">Status</th>
-              <th style="padding: var(--space-3) var(--space-4); text-align: right; width: 90px;">Events</th>
-              <th style="padding: var(--space-3) var(--space-4); text-align: right; width: 70px;">Users</th>
-              <th style="padding: var(--space-3) var(--space-4); text-align: right; width: 90px;">Last seen</th>
+              <th style="padding: var(--space-3) var(--space-4); text-align: left; width: 100px;">Status</th>
+              <th style="padding: var(--space-3) var(--space-4); text-align: right; width: 70px;">Events</th>
+              <th style="padding: var(--space-3) var(--space-4); text-align: right; width: 55px;">Users</th>
+              <th style="padding: var(--space-3) var(--space-4); text-align: right; width: 85px;">Last seen</th>
               <% if @applications.size > 1 && params[:application_id].blank? %>
-                <th style="padding: var(--space-3) var(--space-4); width: 90px;">App</th>
+                <th style="padding: var(--space-3) var(--space-4); width: 100px;">App</th>
               <% end %>
               <% if @platforms.size > 1 %>
-                <th style="padding: var(--space-3) var(--space-4); width: 80px;">Platform</th>
+                <th style="padding: var(--space-3) var(--space-4); width: 100px;">Platform</th>
               <% end %>
             </tr>
           </thead>
@@ -234,11 +238,13 @@
             <% end %>
           </tbody>
         </table>
+        </div>
 
         <!-- Pagination -->
         <% if @pagy.pages > 1 %>
-          <div style="padding: var(--space-4); border-top: 1px solid var(--border-primary);">
-            <%== @pagy.series_nav(:bootstrap) %>
+          <div style="padding: var(--space-4); border-top: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);">
+            <span style="font-size: 12px; color: var(--text-tertiary);">Showing <%= @pagy.from %>–<%= @pagy.to %> of <%= @pagy.count %> errors</span>
+            <div><%== @pagy.series_nav(:bootstrap) %></div>
           </div>
         <% end %>
       </div>
@@ -268,10 +274,11 @@
   </div>
 </div>
 
-<script>
+<%= red_javascript_tag do %>
 document.addEventListener('DOMContentLoaded', function() {
   var selectAllCheckbox = document.getElementById('select-all');
-  var batchInline = document.getElementById('batch-actions-inline');
+  var selectAllBatchCheckbox = document.getElementById('select-all-batch');
+  var batchToolbar = document.getElementById('batch-toolbar');
   var selectedCountSpan = document.getElementById('selected-count');
   var batchForm = document.getElementById('batch-form');
 
@@ -282,31 +289,47 @@ document.addEventListener('DOMContentLoaded', function() {
   function updateBatchToolbar() {
     var checkedBoxes = document.querySelectorAll('.error-checkbox:checked');
     var count = checkedBoxes.length;
+    var boxes = getErrorCheckboxes();
+    var allChecked = boxes.length > 0 && Array.from(boxes).every(function(cb) { return cb.checked; });
+    var someChecked = Array.from(boxes).some(function(cb) { return cb.checked; });
+
     if (count > 0) {
-      batchInline.style.display = 'flex';
-      selectedCountSpan.textContent = count + ' selected';
+      if (batchToolbar) batchToolbar.style.display = '';
+      if (selectedCountSpan) selectedCountSpan.textContent = count + ' selected';
+      if (selectAllBatchCheckbox) {
+        selectAllBatchCheckbox.checked = allChecked;
+        selectAllBatchCheckbox.indeterminate = someChecked && !allChecked;
+      }
     } else {
-      batchInline.style.display = 'none';
+      if (batchToolbar) batchToolbar.style.display = 'none';
+    }
+
+    if (selectAllCheckbox) {
+      selectAllCheckbox.checked = allChecked;
+      selectAllCheckbox.indeterminate = someChecked && !allChecked;
     }
   }
 
+  function handleSelectAll(checked) {
+    getErrorCheckboxes().forEach(function(cb) { cb.checked = checked; });
+    updateBatchToolbar();
+  }
+
   if (selectAllCheckbox) {
     selectAllCheckbox.addEventListener('change', function() {
-      getErrorCheckboxes().forEach(function(cb) { cb.checked = selectAllCheckbox.checked; });
-      updateBatchToolbar();
+      handleSelectAll(selectAllCheckbox.checked);
+    });
+  }
+
+  if (selectAllBatchCheckbox) {
+    selectAllBatchCheckbox.addEventListener('change', function() {
+      handleSelectAll(selectAllBatchCheckbox.checked);
     });
   }
 
   document.addEventListener('change', function(e) {
     if (e.target.classList.contains('error-checkbox')) {
       updateBatchToolbar();
-      var boxes = getErrorCheckboxes();
-      var allChecked = Array.from(boxes).every(function(cb) { return cb.checked; });
-      var someChecked = Array.from(boxes).some(function(cb) { return cb.checked; });
-      if (selectAllCheckbox) {
-        selectAllCheckbox.checked = allChecked;
-        selectAllCheckbox.indeterminate = someChecked && !allChecked;
-      }
     }
   });
 
@@ -368,4 +391,4 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   }
 });
-</script>
+<% end %>

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

@@ -290,7 +290,7 @@
   <% end %>
 </div>
 
-<script>
+<script<%= " nonce=\"#{red_csp_nonce}\"".html_safe if red_csp_nonce %>>
   // Platform color mapping - consistent with analytics page
   const platformColorMap = {
     'api': '#2563EB',           // Blue

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

@@ -169,7 +169,10 @@
 %>
 
 <div>
-  <h1 style="font-size: 20px; font-weight: 700; margin-bottom: var(--space-4);">Settings</h1>
+  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4);">
+    <h1 style="font-size: 20px; font-weight: 700; margin: 0;">Settings</h1>
+    <span style="font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-tertiary); padding: 2px 10px; border: 1px solid var(--border-primary); border-radius: var(--radius-full);">v<%= RailsErrorDashboard::VERSION %></span>
+  </div>
 
   <p style="font-size: 13px; color: var(--text-tertiary); margin-bottom: var(--space-6);">
     Read-only view of current configuration. Edit via <code>config/initializers/rails_error_dashboard.rb</code> or environment variables.
@@ -178,7 +181,7 @@
   <!-- Dynamically render setting groups -->
   <% setting_groups.each do |group_name, group_config| %>
     <div class="card" style="margin-bottom: var(--space-4);">
-      <button onclick="var b = this.nextElementSibling; b.style.display = b.style.display === 'none' ? 'block' : 'none'; var chev = this.querySelector('.chev'); if(chev) chev.className = b.style.display === 'none' ? 'bi bi-chevron-down chev' : 'bi bi-chevron-up chev';" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-4) var(--space-6); background: none; border: none; cursor: pointer; border-bottom: 1px solid var(--border-primary);">
+      <button type="button" data-red-action="toggle-next" data-red-display="block" style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-4) var(--space-6); background: none; border: none; cursor: pointer; border-bottom: 1px solid var(--border-primary);">
         <span style="font-size: 14px; font-weight: 600; color: var(--text-primary);"><i class="<%= group_config[:icon] %>" style="margin-right: 6px;"></i> <%= group_name %></span>
         <div style="display: flex; align-items: center; gap: 8px;">
           <span style="font-size: 11px; color: var(--text-tertiary);"><%= group_config[:settings].size %> options</span>
@@ -255,6 +258,25 @@
     </div>
   </div>
 
+  <!-- Test Error -->
+  <div class="card" style="margin-bottom: var(--space-4);">
+    <div style="padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-primary);">
+      <span style="font-size: 14px; font-weight: 600; color: var(--text-primary);"><i class="bi bi-send-check" style="margin-right: 6px;"></i> Test Notifications</span>
+    </div>
+    <div style="padding: var(--space-5) var(--space-6);">
+      <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: var(--space-4);">
+        Send a test error through the full capture and notification pipeline. This creates a <code>RailsErrorDashboard::TestError</code> in the
+        error log and dispatches notifications to all configured channels (Slack, Discord, PagerDuty, email, webhooks).
+        The test error is clearly marked and safe to resolve or delete.
+      </p>
+      <%= form_tag test_error_errors_path(application_id: @current_application_id.presence), method: :post, style: "display: inline;" do %>
+        <button type="submit" class="btn btn-outline" data-red-action="confirm-submit" data-red-confirm-message="This will create a test error and send notifications to all configured channels. Continue?">
+          <i class="bi bi-send" style="margin-right: 4px;"></i> Send Test Error
+        </button>
+      <% end %>
+    </div>
+  </div>
+
   <!-- Help Text -->
   <div class="alert alert-light border">
     <h6 class="alert-heading">

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

@@ -77,32 +77,32 @@
       <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#assignModal" id="hero-assign-btn">
         Assign
       </button>
-      <button type="button" class="btn" onclick="copyToClipboard(this.dataset.markdown.replace(/\\(.)/g, function(m,c){return c==='n'?'\n':c}), this)" data-markdown="<%= j @error_markdown %>">
+      <button type="button" class="btn" data-red-action="copy-markdown" data-markdown="<%= j @error_markdown %>">
         <i class="bi bi-clipboard" style="margin-right: 4px;"></i>Copy for LLM
       </button>
-      <button type="button" class="btn" onclick="downloadErrorJSON(event)" title="Export JSON">
+      <button type="button" class="btn" data-red-action="download-json" title="Export JSON">
         <i class="bi bi-download"></i>
       </button>
     </div>
   </div>
 
   <!-- Main content: tabs + sidebar -->
-  <div style="display: grid; grid-template-columns: 1fr 280px; gap: var(--space-4);">
+  <div class="red-detail-grid">
     <!-- Left: tabbed content -->
     <div>
       <!-- Tab bar -->
       <div style="display: flex; gap: 0; border-bottom: 1px solid var(--border-primary); margin-bottom: var(--space-4);">
-        <button onclick="switchTab('details')" class="red-tab active" id="tab-details" style="padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--accent); background: none; border: none; border-bottom: 2px solid var(--accent); margin-bottom: -1px; cursor: pointer;">
+        <button type="button" data-red-action="switch-tab" data-red-tab="details" class="red-tab active" id="tab-details" style="padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--accent); background: none; border: none; border-bottom: 2px solid var(--accent); margin-bottom: -1px; cursor: pointer;">
           <i class="bi bi-code-slash" style="margin-right: 6px;"></i>Details
         </button>
-        <button onclick="switchTab('context')" class="red-tab" id="tab-context" style="padding: 10px 16px; font-size: 13px; font-weight: 400; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;">
+        <button type="button" data-red-action="switch-tab" data-red-tab="context" class="red-tab" id="tab-context" style="padding: 10px 16px; font-size: 13px; font-weight: 400; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;">
           <i class="bi bi-layers" style="margin-right: 6px;"></i>Context
         </button>
-        <button onclick="switchTab('history')" class="red-tab" id="tab-history" style="padding: 10px 16px; font-size: 13px; font-weight: 400; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;">
+        <button type="button" data-red-action="switch-tab" data-red-tab="history" class="red-tab" id="tab-history" style="padding: 10px 16px; font-size: 13px; font-weight: 400; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;">
           <i class="bi bi-clock-history" style="margin-right: 6px;"></i>History
         </button>
         <% if RailsErrorDashboard.configuration.enable_issue_tracking %>
-          <button onclick="switchTab('issues')" class="red-tab" id="tab-issues" style="padding: 10px 16px; font-size: 13px; font-weight: 400; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;">
+          <button type="button" data-red-action="switch-tab" data-red-tab="issues" class="red-tab" id="tab-issues" style="padding: 10px 16px; font-size: 13px; font-weight: 400; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;">
             <i class="bi bi-github" style="margin-right: 6px;"></i>Issues
           </button>
         <% end %>
@@ -162,7 +162,7 @@
     </div>
 
     <!-- Right: sidebar -->
-    <div class="error-sidebar" style="display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;">
+    <div class="error-sidebar" style="display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; overflow-wrap: break-word;">
       <%= render "sidebar_metadata", error: @error, related_errors: @related_errors %>
 
       <!-- Baseline Statistics -->
@@ -225,8 +225,8 @@
 
 <%= render "modals", error: @error %>
 
-<script>
-function switchTab(tabId) {
+<%= red_javascript_tag do %>
+window.switchTab = function(tabId) {
   // Deactivate all tabs
   document.querySelectorAll('.red-tab').forEach(function(el) {
     el.style.color = 'var(--text-secondary)';
@@ -243,5 +243,5 @@ function switchTab(tabId) {
   // Scroll to selected panel
   var panel = document.getElementById('panel-' + tabId);
   if (panel) { panel.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
-}
-</script>
+};
+<% end %>

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

@@ -79,23 +79,23 @@
       <div class="card-body p-0">
         <div class="table-responsive">
           <table class="table table-hover mb-0">
-            <thead class="table-light">
-              <tr>
-                <th>Exception Class</th>
-                <th width="250">Raise Location</th>
-                <th width="250">Rescue Location</th>
-                <th width="100">Raises</th>
-                <th width="100">Rescues</th>
-                <th width="100">Ratio</th>
-                <th width="140">Last Seen</th>
+            <thead>
+              <tr style="border-bottom: 1px solid var(--border-primary);">
+                <th style="padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Exception Class</th>
+                <th style="padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;" width="250">Raise Location</th>
+                <th style="padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;" width="250">Rescue Location</th>
+                <th style="padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;" width="100">Raises</th>
+                <th style="padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;" width="100">Rescues</th>
+                <th style="padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;" width="100">Ratio</th>
+                <th style="padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;" width="140">Last Seen</th>
               </tr>
             </thead>
             <tbody>
               <% @entries.each do |entry| %>
                 <tr>
                   <td><code style="font-size: 0.85em;"><%= entry[:exception_class] %></code></td>
-                  <td><small class="text-muted text-break"><%= entry[:raise_location] %></small></td>
-                  <td><small class="text-muted text-break"><%= entry[:rescue_location] || "Unknown" %></small></td>
+                  <td style="color: var(--text-secondary); font-size: 12px; word-break: break-all;"><%= entry[:raise_location] %></td>
+                  <td style="color: var(--text-secondary); font-size: 12px; word-break: break-all;"><%= entry[:rescue_location] || "Unknown" %></td>
                   <td><span class="badge bg-info text-dark"><%= number_with_delimiter(entry[:raise_count]) %></span></td>
                   <td><span class="badge bg-warning text-dark"><%= number_with_delimiter(entry[:rescue_count]) %></span></td>
                   <td>
@@ -104,7 +104,7 @@
                       <%= ratio_pct %>%
                     </span>
                   </td>
-                  <td><%= local_time_ago(entry[:last_seen]) %></td>
+                  <td style="color: var(--text-secondary); font-size: 12px;"><%= local_time_ago(entry[:last_seen]) %></td>
                 </tr>
               <% end %>
             </tbody>

data/config/routes.rb

@@ -44,6 +44,7 @@ RailsErrorDashboard::Engine.routes.draw do
       post :enable_coverage
       post :disable_coverage
       post :batch_action
+      post :test_error
     end
   end
 end

data/lib/rails_error_dashboard/services/error_broadcaster.rb

@@ -113,7 +113,7 @@ module RailsErrorDashboard
         server.pubsub
         @broadcast_unavailable_until = nil
         true
-      rescue => e
+      rescue LoadError, StandardError => e
         @broadcast_unavailable_until = Time.current + 60
         RailsErrorDashboard::Logger.debug("[RailsErrorDashboard] Broadcast not available (pausing 60s): #{e.message}")
         false

data/lib/rails_error_dashboard/services/system_health_snapshot.rb

@@ -195,7 +195,7 @@ module RailsErrorDashboard
           connections: server.connections.count,
           adapter: server.pubsub&.class&.name&.demodulize
         }
-      rescue => e
+      rescue LoadError, StandardError => e
         nil
       end
 

data/lib/rails_error_dashboard/test_error.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module RailsErrorDashboard
+  # Custom exception class for test errors triggered from the dashboard.
+  # Clearly identifiable in error lists so users know it's not a real issue.
+  class TestError < StandardError; end
+end

data/lib/rails_error_dashboard/version.rb

@@ -1,3 +1,3 @@
 module RailsErrorDashboard
-  VERSION = "0.6.0"
+  VERSION = "0.6.2"
 end

data/lib/rails_error_dashboard.rb

@@ -1,6 +1,7 @@
 require "rails_error_dashboard/version"
 require "rails_error_dashboard/engine"
 require "rails_error_dashboard/configuration_error"
+require "rails_error_dashboard/test_error"
 require "rails_error_dashboard/configuration"
 require "rails_error_dashboard/logger"
 require "rails_error_dashboard/manual_error_reporter"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_error_dashboard
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.6.2
 platform: ruby
 authors:
 - Anjan Jagirdar
@@ -480,6 +480,7 @@ files:
 - lib/rails_error_dashboard/subscribers/breadcrumb_subscriber.rb
 - lib/rails_error_dashboard/subscribers/issue_tracker_subscriber.rb
 - lib/rails_error_dashboard/subscribers/rack_attack_subscriber.rb
+- lib/rails_error_dashboard/test_error.rb
 - lib/rails_error_dashboard/value_objects/error_context.rb
 - lib/rails_error_dashboard/version.rb
 - lib/tasks/error_dashboard.rake
@@ -496,7 +497,7 @@ metadata:
   funding_uri: https://github.com/sponsors/AnjanJ
 post_install_message: |
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-    RED (Rails Error Dashboard) v0.6.0
+    RED (Rails Error Dashboard) v0.6.2
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   First install: