error_radar 0.2.0 → 0.4.0

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

@@ -0,0 +1,297 @@
+<%
+  sev_colors    = { 'info' => '#17a2b8', 'warning' => '#fd7e14', 'error' => '#dc3545', 'critical' => '#7b001c' }
+  status_colors = { 'open' => '#dc3545', 'in_progress' => '#fd7e14', 'resolved' => '#28a745', 'ignored' => '#6c757d' }
+  fp            = @filter_params
+  current_sort  = fp['sort'] || 'last_seen_at'
+  current_order = fp['order'] || 'desc'
+
+  sort_url = ->(col) {
+    dir = (current_sort == col && current_order != 'asc') ? 'asc' : 'desc'
+    errors_path(fp.reject { |k, _| k == 'page' }.merge('sort' => col, 'order' => dir))
+  }
+  sort_arrow = ->(col) {
+    next '' unless current_sort == col
+    current_order == 'asc' ? ' ↑' : ' ↓'
+  }
+
+  offset_start = @total_count == 0 ? 0 : ((@page - 1) * 50) + 1
+  offset_end   = [offset_start + @errors.size - 1, @total_count].min
+  filters_on   = fp.values.any?(&:present?)
+%>
+
+<style>
+  .er-list-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
+  .er-list-header h1 { margin: 0; }
+  .er-filter-bar { margin-bottom: 12px; }
+  .er-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+  .er-filter-row input[type=text], .er-filter-row select, .er-filter-row input[type=date] {
+    border: 1px solid #d1d5db; border-radius: 7px; padding: 6px 10px; font-size: 13px;
+    background: #fff; color: #1f2933; height: 34px;
+  }
+  .er-filter-row input[type=text] { min-width: 260px; }
+  .er-filter-row select { min-width: 130px; }
+  .er-filter-row input[type=date] { min-width: 130px; }
+  .btn-filter { background: #2563eb; color: #fff; border: 0; border-radius: 7px; padding: 0 16px; height: 34px; font-size: 13px; cursor: pointer; }
+  .btn-filter:hover { background: #1d4ed8; }
+  .btn-clear { font-size: 13px; color: #6b7280; padding: 0 8px; }
+  .btn-clear:hover { color: #1f2933; }
+  .er-results-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; min-height: 36px; }
+  .er-results-count { font-size: 13px; color: #6b7280; }
+  .er-bulk-bar { display: none; align-items: center; gap: 8px; }
+  .btn-bulk { border: 0; border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: #fff; }
+  .btn-bulk-resolve { background: #28a745; } .btn-bulk-ignore { background: #6c757d; }
+  .btn-bulk-reopen  { background: #fd7e14; } .btn-bulk-delete  { background: #dc3545; }
+  .btn-bulk:hover   { opacity: .85; }
+  .er-table thead th { position: sticky; top: 0; background: #f9fafb; z-index: 1; white-space: nowrap; }
+  .er-table thead th a { color: #6b7280; font-size: 12px; }
+  .er-table thead th a:hover { color: #1f2933; }
+  .er-table tbody tr:hover { background: #f8fafc; }
+  .er-table tbody tr.row-checked { background: #eff6ff; }
+  .er-actions a { display: inline-block; padding: 2px 6px; border-radius: 5px; font-size: 12px; margin: 0 2px; }
+  .er-actions a:hover { background: #f3f4f6; }
+  .er-pagination { display: flex; gap: 4px; align-items: center; margin-top: 16px; justify-content: center; flex-wrap: wrap; }
+  .er-page-link { display: inline-block; padding: 5px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #374151; background: #fff; }
+  .er-page-link:hover { background: #f3f4f6; border-color: #9ca3af; }
+  .er-page-link.active { background: #2563eb; border-color: #2563eb; color: #fff; pointer-events: none; }
+  .er-page-ellipsis { padding: 5px 4px; color: #9ca3af; font-size: 13px; }
+  .mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; }
+</style>
+
+<div class="er-list-header">
+  <h1>All Errors</h1>
+  <span class="sub" style="margin:0"><%= @total_count %> total</span>
+</div>
+
+<%# ─── Filter bar ─── %>
+<div class="panel er-filter-bar">
+  <form action="<%= errors_path %>" method="GET" data-turbo="false">
+    <div class="er-filter-row">
+      <input type="text" name="q" value="<%= fp['q'] %>" placeholder="Search error class, message, source…">
+
+      <select name="status">
+        <option value="">All statuses</option>
+        <% ErrorLog.statuses.each_key do |s| %>
+          <option value="<%= s %>" <%= 'selected' if fp['status'] == s %>><%= s.humanize %></option>
+        <% end %>
+      </select>
+
+      <select name="severity">
+        <option value="">All severities</option>
+        <% ErrorLog.severities.each_key do |s| %>
+          <option value="<%= s %>" <%= 'selected' if fp['severity'] == s %>><%= s.capitalize %></option>
+        <% end %>
+      </select>
+
+      <select name="category">
+        <option value="">All categories</option>
+        <% ErrorLog.categories.each_key do |s| %>
+          <option value="<%= s %>" <%= 'selected' if fp['category'] == s.to_s %>><%= s.to_s.humanize %></option>
+        <% end %>
+      </select>
+
+      <input type="date" name="from" value="<%= fp['from'] %>" title="Last seen from">
+      <input type="date" name="to"   value="<%= fp['to'] %>"   title="Last seen to">
+
+      <button type="submit" class="btn-filter">Filter</button>
+      <% if filters_on %>
+        <a href="<%= errors_path %>" class="btn-clear">Clear</a>
+      <% end %>
+    </div>
+  </form>
+</div>
+
+<%# ─── Results bar + bulk actions ─── %>
+<div class="er-results-bar">
+  <span class="er-results-count">
+    <% if @total_count == 0 %>
+      No errors found<% if filters_on %> matching your filters<% end %>
+    <% elsif @total_count <= 50 %>
+      <%= @total_count %> errors
+    <% else %>
+      <%= offset_start %>–<%= offset_end %> of <%= @total_count %> errors
+    <% end %>
+  </span>
+
+  <div class="er-bulk-bar" id="bulk-bar">
+    <span id="bulk-count" style="font-size:13px;color:#374151;font-weight:600"></span>
+    <button class="btn-bulk btn-bulk-resolve" onclick="bulkAction('resolve')">Resolve</button>
+    <button class="btn-bulk btn-bulk-ignore"  onclick="bulkAction('ignore')">Ignore</button>
+    <button class="btn-bulk btn-bulk-reopen"  onclick="bulkAction('reopen')">Reopen</button>
+    <button class="btn-bulk btn-bulk-delete"  onclick="bulkAction('delete')">Delete</button>
+  </div>
+</div>
+
+<%# ─── Table ─── %>
+<div class="panel" style="padding:0;overflow:hidden">
+  <% if @errors.empty? %>
+    <div style="padding:48px;text-align:center;color:#9ca3af;font-size:14px">
+      <div style="font-size:32px;margin-bottom:12px">✓</div>
+      No errors<% if filters_on %> match your filters<% else %> recorded<% end %>.
+    </div>
+  <% else %>
+    <div style="overflow-x:auto">
+      <table class="er-table">
+        <thead>
+          <tr>
+            <th style="width:36px;padding:10px 8px">
+              <input type="checkbox" id="select-all" onchange="toggleAll(this)" title="Select all">
+            </th>
+            <th><a href="<%= sort_url.call('severity') %>">Severity<%= sort_arrow.call('severity') %></a></th>
+            <th>Status</th>
+            <th>Error Class</th>
+            <th>Source</th>
+            <th style="min-width:240px">Message</th>
+            <th><a href="<%= sort_url.call('occurrences') %>">Count<%= sort_arrow.call('occurrences') %></a></th>
+            <th><a href="<%= sort_url.call('last_seen_at') %>">Last Seen<%= sort_arrow.call('last_seen_at') %></a></th>
+            <th style="width:80px">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @errors.each do |e| %>
+            <tr class="error-row" data-id="<%= e.id %>">
+              <td style="padding:8px"><input type="checkbox" class="row-cb" value="<%= e.id %>" onchange="onRowCheck(this)"></td>
+              <td><span class="badge" style="background:<%= sev_colors[e.severity] %>"><%= e.severity %></span></td>
+              <td><span class="badge" style="background:<%= status_colors[e.status] %>"><%= e.status.humanize %></span></td>
+              <td class="mono"><%= link_to e.error_class.to_s.truncate(40), error_path(e), title: e.error_class %></td>
+              <td style="font-size:12px;color:#6b7280;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="<%= e.source %>"><%= e.source %></td>
+              <td style="font-size:12px;color:#374151"><%= e.short_message %></td>
+              <td style="font-weight:600;color:<%= e.occurrences > 100 ? '#dc3545' : '#374151' %>"><%= e.occurrences %></td>
+              <td style="font-size:12px;color:#6b7280;white-space:nowrap"><%= e.last_seen_at&.strftime('%m/%d %H:%M') %></td>
+              <td class="er-actions" style="white-space:nowrap">
+                <% unless e.status_resolved? %>
+                  <a href="#" class="quick-resolve" data-id="<%= e.id %>" data-url="<%= error_status_path(e) %>" title="Resolve">✓</a>
+                <% end %>
+                <% unless e.status_ignored? %>
+                  <a href="#" class="quick-ignore" data-id="<%= e.id %>" data-url="<%= error_status_path(e) %>" title="Ignore">✕</a>
+                <% end %>
+                <%= link_to '→', error_path(e), title: 'View detail', style: 'color:#2563eb' %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
+</div>
+
+<%# ─── Pagination ─── %>
+<% if @pages.any? %>
+  <div class="er-pagination">
+    <% if @page > 1 %>
+      <%= link_to '← Prev', errors_path(fp.merge('page' => @page - 1)), class: 'er-page-link' %>
+    <% end %>
+
+    <% @pages.each do |p| %>
+      <% if p == '...' %>
+        <span class="er-page-ellipsis">…</span>
+      <% else %>
+        <%= link_to p, errors_path(fp.merge('page' => p)), class: "er-page-link #{p == @page ? 'active' : ''}" %>
+      <% end %>
+    <% end %>
+
+    <% if @page < @total_pages %>
+      <%= link_to 'Next →', errors_path(fp.merge('page' => @page + 1)), class: 'er-page-link' %>
+    <% end %>
+  </div>
+<% end %>
+
+<script>
+(function () {
+  var BULK_URL = '<%= errors_bulk_path %>';
+  var CSRF     = document.querySelector('meta[name="csrf-token"]').content;
+
+  // ── checkbox state ──
+  function selectedIds() {
+    return Array.from(document.querySelectorAll('.row-cb:checked')).map(function (c) { return c.value; });
+  }
+
+  window.onRowCheck = function (cb) {
+    var row = cb.closest('tr');
+    row.classList.toggle('row-checked', cb.checked);
+    syncBulkBar();
+  };
+
+  window.toggleAll = function (masterCb) {
+    document.querySelectorAll('.row-cb').forEach(function (c) {
+      c.checked = masterCb.checked;
+      c.closest('tr').classList.toggle('row-checked', masterCb.checked);
+    });
+    syncBulkBar();
+  };
+
+  function syncBulkBar() {
+    var ids = selectedIds();
+    var bar = document.getElementById('bulk-bar');
+    var cnt = document.getElementById('bulk-count');
+    if (ids.length > 0) {
+      bar.style.display = 'flex';
+      cnt.textContent = ids.length + ' selected';
+    } else {
+      bar.style.display = 'none';
+    }
+  }
+
+  // ── bulk actions ──
+  window.bulkAction = function (action) {
+    var ids = selectedIds();
+    if (!ids.length) return;
+    if (action === 'delete' && !confirm('Permanently delete ' + ids.length + ' error(s)? This cannot be undone.')) return;
+
+    fetch(BULK_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': CSRF },
+      body: JSON.stringify({ ids: ids, bulk_action: action })
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (d) {
+      if (d.ok) {
+        toast(d.count + ' errors ' + action + 'd', true);
+        setTimeout(function () { location.reload(); }, 700);
+      } else {
+        toast('Error: ' + (d.error || 'failed'), false);
+      }
+    })
+    .catch(function () { toast('Network error', false); });
+  };
+
+  // ── quick row actions ──
+  document.querySelectorAll('.quick-resolve').forEach(function (a) {
+    a.addEventListener('click', function (e) {
+      e.preventDefault();
+      quickStatus(a.dataset.url, a.dataset.id, 'resolved');
+    });
+  });
+  document.querySelectorAll('.quick-ignore').forEach(function (a) {
+    a.addEventListener('click', function (e) {
+      e.preventDefault();
+      quickStatus(a.dataset.url, a.dataset.id, 'ignored');
+    });
+  });
+
+  function quickStatus(url, id, status) {
+    fetch(url, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': CSRF },
+      body: JSON.stringify({ status: status })
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (d) {
+      if (d.ok) {
+        toast('#' + id + ' → ' + d.status, true);
+        setTimeout(function () { location.reload(); }, 500);
+      } else {
+        toast('Failed: ' + (d.error || ''), false);
+      }
+    });
+  }
+
+  // ── toast ──
+  function toast(msg, ok) {
+    var t = document.getElementById('toast');
+    t.textContent = msg;
+    t.style.background = ok ? '#16a34a' : '#dc2626';
+    t.classList.add('show');
+    setTimeout(function () { t.classList.remove('show'); }, 2200);
+  }
+})();
+</script>

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

@@ -0,0 +1,165 @@
+<%
+  sev_colors    = { 'info' => '#17a2b8', 'warning' => '#fd7e14', 'error' => '#dc3545', 'critical' => '#7b001c' }
+  status_colors = { 'open' => '#dc3545', 'in_progress' => '#fd7e14', 'resolved' => '#28a745', 'ignored' => '#6c757d' }
+%>
+
+<style>
+  .er-show-header { margin-bottom: 20px; }
+  .er-show-header h1 { font-size: 16px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .er-show-meta { font-size: 13px; color: #6b7280; }
+  .er-show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
+  .er-detail-table th { width: 150px; color: #6b7280; font-weight: 500; vertical-align: top; }
+  .er-detail-table td { word-break: break-word; }
+  .er-pre { white-space: pre-wrap; background: #f8fafc; padding: 12px; border-radius: 8px;
+            max-height: 360px; overflow: auto; font-size: 11px; font-family: ui-monospace, monospace; margin: 0; }
+  .er-status-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
+  .er-btn { padding: 8px 16px; border: 0; border-radius: 8px; color: #fff; cursor: pointer; font-size: 13px; }
+  .er-btn:hover { opacity: .85; }
+  .er-btn-danger { background: #1f2933; }
+  .resolve-inline { margin-top: 10px; display: none; }
+  .resolve-inline textarea { width: 320px; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 7px;
+                              font-size: 13px; resize: vertical; }
+  .resolve-inline button { margin-top: 6px; padding: 6px 14px; background: #28a745; color: #fff;
+                            border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; }
+  @media (max-width: 768px) { .er-show-grid { grid-template-columns: 1fr; } }
+</style>
+
+<div class="sub"><%= link_to '← All Errors', errors_path %></div>
+
+<div class="er-show-header">
+  <h1>
+    <span class="badge" style="background:<%= status_colors[@error.status] %>"><%= @error.status.humanize %></span>
+    <span class="badge" style="background:<%= sev_colors[@error.severity] %>"><%= @error.severity %></span>
+    <span style="font-family:ui-monospace,monospace"><%= @error.error_class %></span>
+  </h1>
+  <div class="er-show-meta">
+    <%= @error.category.to_s.humanize %> ·
+    <strong>×<%= @error.occurrences %></strong> occurrences ·
+    last seen <strong><%= @error.last_seen_at&.strftime('%Y-%m-%d %H:%M') %></strong>
+  </div>
+</div>
+
+<%# ── Details ── %>
+<div class="panel">
+  <h2>Details</h2>
+  <table class="er-detail-table">
+    <tr><th>Error class</th><td style="font-family:monospace"><%= @error.error_class %></td></tr>
+    <tr><th>Source</th><td><%= @error.source %></td></tr>
+    <tr><th>Category</th><td><%= @error.category.to_s.humanize %></td></tr>
+    <tr><th>Message</th><td style="white-space:pre-wrap"><%= @error.message %></td></tr>
+    <tr><th>Occurrences</th><td><strong><%= @error.occurrences %></strong></td></tr>
+    <tr><th>First seen</th><td><%= @error.first_seen_at&.strftime('%Y-%m-%d %H:%M:%S %Z') %></td></tr>
+    <tr><th>Last seen</th><td><%= @error.last_seen_at&.strftime('%Y-%m-%d %H:%M:%S %Z') %></td></tr>
+    <% if @error.http_status.present? || @error.api_code.present? %>
+      <tr><th>HTTP status</th><td><%= @error.http_status %></td></tr>
+      <% if @error.api_code.present? %>
+        <tr><th>API code / subcode</th><td><%= @error.api_code %> / <%= @error.api_subcode %></td></tr>
+      <% end %>
+      <% if @error.request_url.present? %>
+        <tr><th>Request URL</th><td style="word-break:break-all"><%= @error.request_url %></td></tr>
+      <% end %>
+    <% end %>
+    <% if @error.resolved_at.present? %>
+      <tr><th>Resolved at</th><td><%= @error.resolved_at&.strftime('%Y-%m-%d %H:%M:%S') %> by <%= @error.resolved_by %></td></tr>
+      <% if @error.resolution_note.present? %>
+        <tr><th>Resolution note</th><td><%= @error.resolution_note %></td></tr>
+      <% end %>
+    <% end %>
+  </table>
+</div>
+
+<%# ── Context + Backtrace side by side ── %>
+<div class="er-show-grid">
+  <div class="panel">
+    <h2>Context</h2>
+    <pre class="er-pre"><%= JSON.pretty_generate(@error.context || {}) %></pre>
+  </div>
+  <div class="panel">
+    <h2>Backtrace</h2>
+    <pre class="er-pre"><%= @error.backtrace %></pre>
+  </div>
+</div>
+
+<%# ── Status change ── %>
+<div class="panel" style="margin-top:16px">
+  <h2>Change status</h2>
+  <div class="er-status-actions">
+    <% %w[open in_progress ignored].each do |s| %>
+      <button class="er-btn status-btn" data-status="<%= s %>"
+              style="background:<%= status_colors[s] %>">
+        <%= s.humanize %>
+      </button>
+    <% end %>
+
+    <div>
+      <button class="er-btn" style="background:#28a745" onclick="toggleResolveBox(event)">Resolve</button>
+      <div class="resolve-inline" id="resolve-box">
+        <textarea id="resolve-note" rows="3" placeholder="Resolution note (optional)…"></textarea><br>
+        <button onclick="doResolve()">Confirm resolve</button>
+      </div>
+    </div>
+
+    <div style="flex:1"></div>
+    <button class="er-btn er-btn-danger" onclick="doDelete()">Delete</button>
+  </div>
+</div>
+
+<script>
+(function () {
+  var CSRF       = document.querySelector('meta[name="csrf-token"]').content;
+  var STATUS_URL = '<%= error_status_path(@error) %>';
+  var DELETE_URL = '<%= error_path(@error) %>';
+
+  document.querySelectorAll('.status-btn').forEach(function (btn) {
+    btn.addEventListener('click', function () { changeStatus(btn.dataset.status, null); });
+  });
+
+  window.toggleResolveBox = function (e) {
+    e.preventDefault();
+    var box = document.getElementById('resolve-box');
+    box.style.display = box.style.display === 'none' ? 'block' : 'none';
+  };
+
+  window.doResolve = function () {
+    changeStatus('resolved', document.getElementById('resolve-note').value.trim() || null);
+  };
+
+  function changeStatus(status, note) {
+    var body = { status: status };
+    if (note) body.note = note;
+    fetch(STATUS_URL, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': CSRF },
+      body: JSON.stringify(body)
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (d) {
+      if (d.ok) {
+        showToast('→ ' + d.status, true);
+        setTimeout(function () { location.reload(); }, 700);
+      } else {
+        showToast('Error: ' + (d.error || 'failed'), false);
+      }
+    });
+  }
+
+  window.doDelete = function () {
+    if (!confirm('Permanently delete this error? This cannot be undone.')) return;
+    fetch(DELETE_URL, {
+      method: 'DELETE',
+      headers: { 'X-CSRF-Token': CSRF }
+    })
+    .then(function (r) {
+      if (r.ok) { window.location.href = '<%= errors_path %>'; }
+    });
+  };
+
+  function showToast(msg, ok) {
+    var t = document.getElementById('toast');
+    t.textContent = msg;
+    t.style.background = ok ? '#16a34a' : '#dc2626';
+    t.classList.add('show');
+    setTimeout(function () { t.classList.remove('show'); }, 2000);
+  }
+})();
+</script>

data/app/views/layouts/error_radar/application.html.erb

@@ -10,8 +10,8 @@
     <style>
       * { box-sizing: border-box; }
       body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f4f6f8; color: #1f2933; }
-      .wrap { max-width: 1360px; margin: 0 auto; padding: 20px; }
-      h1 { font-size: 22px; margin: 0 0 4px; }
+      .wrap { max-width: 1400px; margin: 0 auto; padding: 20px; }
+      h1 { font-size: 20px; margin: 0 0 4px; }
       .sub { color: #6b7280; font-size: 13px; margin-bottom: 18px; }
       a { color: #2563eb; text-decoration: none; }
       .cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
@@ -25,6 +25,7 @@
       .panel h2 { font-size: 14px; margin: 0 0 12px; color: #374151; }
       table { width: 100%; border-collapse: collapse; font-size: 13px; }
       th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef0f2; }
+      th { font-size: 12px; color: #6b7280; font-weight: 600; background: #f9fafb; }
       .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; color: #fff; font-size: 11px; }
       .kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
       .col { background: #eceff1; border-radius: 10px; padding: 10px; min-height: 200px; }
@@ -37,11 +38,26 @@
       .ticket .msg { font-size: 12px; color: #4b5563; margin: 4px 0; max-height: 48px; overflow: hidden; }
       .ticket .meta { font-size: 11px; color: #9ca3af; display: flex; gap: 8px; flex-wrap: wrap; }
       .ticket .occ { background: #fee2e2; color: #b91c1c; border-radius: 8px; padding: 0 6px; }
-      .toast { position: fixed; bottom: 20px; right: 20px; background: #1f2933; color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; }
+      .toast { position: fixed; bottom: 20px; right: 20px; background: #1f2933; color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; z-index: 9999; }
       .toast.show { opacity: 1; }
+      /* Nav */
+      .er-nav { background: #1f2933; }
+      .er-nav .wrap { display: flex; align-items: center; gap: 4px; padding-top: 0; padding-bottom: 0; }
+      .er-nav .nav-logo { color: #f9fafb; font-weight: 700; font-size: 14px; padding: 14px 16px 14px 0; border-right: 1px solid #374151; margin-right: 8px; }
+      .er-nav .nav-logo:hover { color: #fff; }
+      .er-nav .nav-link { color: #9ca3af; font-size: 13px; padding: 14px 12px; display: inline-block; }
+      .er-nav .nav-link:hover { color: #f9fafb; }
+      .er-nav .nav-link.active { color: #fff; border-bottom: 2px solid #3b82f6; }
     </style>
   </head>
   <body>
+    <nav class="er-nav">
+      <div class="wrap">
+        <a href="<%= root_path %>" class="nav-logo">🛰 Error Radar</a>
+        <a href="<%= root_path %>" class="nav-link <%= 'active' if controller_name == 'dashboard' %>">Dashboard</a>
+        <a href="<%= errors_path %>" class="nav-link <%= 'active' if controller_name == 'errors' %>">All Errors</a>
+      </div>
+    </nav>
     <div class="wrap"><%= yield %></div>
     <div id="toast" class="toast"></div>
   </body>

data/config/routes.rb

@@ -2,6 +2,10 @@
 
 ErrorRadar::Engine.routes.draw do
   root to: 'dashboard#index'
-  get   'errors/:id',        to: 'dashboard#show',          as: :error
-  patch 'errors/:id/status', to: 'dashboard#update_status', as: :error_status
+
+  get    'errors',            to: 'errors#index',         as: :errors
+  post   'errors/bulk',       to: 'errors#bulk',          as: :errors_bulk
+  get    'errors/:id',        to: 'errors#show',          as: :error
+  patch  'errors/:id/status', to: 'errors#update_status', as: :error_status
+  delete 'errors/:id',        to: 'errors#destroy'
 end

data/lib/error_radar/configuration.rb

@@ -32,7 +32,42 @@ module ErrorRadar
     attr_accessor :sensitive_params
 
     # Integration toggles.
-    attr_accessor :install_middleware, :install_sidekiq, :install_rails_admin
+    attr_accessor :install_middleware, :install_sidekiq, :install_rails_admin,
+                  :install_active_job, :install_rake
+
+    # Notifications ─────────────────────────────────────────────────────────
+    # When to fire: :new_error (first time a fingerprint is seen),
+    #               :critical  (any critical-severity occurrence, throttled),
+    #               :all       (every occurrence, throttled to 1/hour/fingerprint)
+    attr_accessor :notify_on
+
+    # Slack incoming-webhook URL (https://hooks.slack.com/services/...)
+    attr_accessor :slack_webhook_url
+    # Override target channel. Leave nil to use webhook's default channel.
+    attr_accessor :slack_channel
+
+    # Discord incoming-webhook URL
+    attr_accessor :discord_webhook_url
+
+    # ActionMailer recipients. Requires ActionMailer to be configured in host app.
+    attr_accessor :email_recipients
+    # From address for notification emails.
+    attr_accessor :email_from
+
+    # One or more plain HTTPS URLs that receive a POST with JSON body on each alert.
+    attr_accessor :webhook_urls
+
+    # App name shown in notification subject/title. Defaults to Rails app name.
+    attr_accessor :app_name
+    # Base URL used to build deep-links (e.g. "https://myapp.com").
+    attr_accessor :app_host
+
+    # Custom callbacks: ->(error_log) { ... }. Called after built-in channels.
+    attr_reader :error_callbacks
+
+    def on_error(&block)
+      @error_callbacks << block
+    end
 
     # Custom classification rules. Each is a callable `->(exception) { :category | nil }`.
     # The first rule that returns a non-nil category wins; built-in rules run after.
@@ -73,9 +108,22 @@ module ErrorRadar
         ActionDispatch::Http::Parameters::ParseError
       ]
       @sensitive_params   = %w[password password_confirmation token access_token authorization secret]
-      @install_middleware = true
-      @install_sidekiq    = true
+      @install_middleware  = true
+      @install_sidekiq     = true
       @install_rails_admin = true
+      @install_active_job  = true
+      @install_rake        = true
+
+      @notify_on            = [:new_error]
+      @slack_webhook_url    = nil
+      @slack_channel        = nil
+      @discord_webhook_url  = nil
+      @email_recipients     = []
+      @email_from           = nil
+      @webhook_urls         = []
+      @app_name             = nil
+      @app_host             = nil
+      @error_callbacks      = []
       @categorizers       = []
       @detail_extractors  = []
       @expected_servers   = []

data/lib/error_radar/engine.rb

@@ -22,6 +22,29 @@ module ErrorRadar
       end
     end
 
+    # Auto-inject into every ActiveJob subclass (any queue adapter, not just Sidekiq).
+    # Disabled when only Sidekiq is in use to avoid double-counting.
+    initializer 'error_radar.active_job', after: :load_config_initializers do
+      if ErrorRadar.config.install_active_job && defined?(::ActiveJob)
+        require 'error_radar/integrations/active_job'
+        ActiveSupport.on_load(:active_job) do
+          include ErrorRadar::Integrations::ActiveJob
+        end
+      end
+    end
+
+    # Wrap every Rake task execution so failures are captured automatically.
+    initializer 'error_radar.rake', after: :load_config_initializers do |_app|
+      if ErrorRadar.config.install_rake
+        config.after_initialize do
+          if defined?(::Rake::Task)
+            require 'error_radar/integrations/rake'
+            ErrorRadar::Integrations::Rake.install!
+          end
+        end
+      end
+    end
+
     # Register the ErrorLog board + custom actions in RailsAdmin, if present.
     config.after_initialize do
       if ErrorRadar.config.install_rails_admin && defined?(::RailsAdmin)

data/lib/error_radar/integrations/rake.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module ErrorRadar
+  module Integrations
+    # Patches Rake::Task#execute so any exception raised inside a rake task is
+    # automatically captured as an ErrorLog, then re-raised so rake's normal
+    # failure handling (exit code, output) is unaffected.
+    module Rake
+      def self.install!
+        return if @installed
+
+        @installed = true
+
+        ::Rake::Task.class_eval do
+          alias_method :error_radar_original_execute, :execute
+
+          def execute(args = nil)
+            error_radar_original_execute(args)
+          rescue Exception => e # rubocop:disable Lint/RescueException
+            ErrorRadar.capture(
+              e,
+              source: "rake:#{name}",
+              category: :background_job,
+              context: { task: name }
+            )
+            raise
+          end
+        end
+      end
+    end
+  end
+end