catpm 0.1.0

data/app/helpers/catpm/application_helper.rb

@@ -0,0 +1,264 @@
+# frozen_string_literal: true
+
+module Catpm
+  module ApplicationHelper
+    # Soft pastel palette — bars, breakdown, waterfall
+    SEGMENT_COLORS = {
+      'sql' => '#b8e4c6', 'view' => '#e4d4f4', 'cache' => '#fdd8b5',
+      'http' => '#f9c4c0', 'mailer' => '#e4d4f4', 'storage' => '#fdd8b5',
+      'custom' => '#dde2e8', 'code' => '#c8daf0', 'gem' => '#f0e0f0', 'other' => '#e8e8e8', 'controller' => '#b6d9f7',
+      'middleware' => '#f0dfa0', 'request' => '#b6d9f7'
+    }.freeze
+
+    SEGMENT_TEXT_COLORS = {
+      'sql' => '#1a7f37', 'view' => '#6639a6', 'cache' => '#953800',
+      'http' => '#a1110a', 'mailer' => '#6639a6', 'storage' => '#953800',
+      'custom' => '#4b5563', 'code' => '#3b5998', 'gem' => '#7b3f9e', 'other' => '#9ca3af', 'controller' => '#0550ae',
+      'middleware' => '#7c5c00', 'request' => '#0550ae'
+    }.freeze
+
+    BADGE_CLASSES = {
+      'http' => 'badge-http', 'job' => 'badge-job', 'custom' => 'badge-custom',
+      'sql' => 'badge-sql', 'view' => 'badge-view', 'cache' => 'badge-cache',
+      'mailer' => 'badge-mailer', 'storage' => 'badge-storage',
+      'error' => 'badge-error', 'slow' => 'badge-slow', 'random' => 'badge-random'
+    }.freeze
+
+    SAMPLE_TYPE_LABELS = {
+      'random' => 'sample', 'slow' => 'slow', 'error' => 'error'
+    }.freeze
+
+    SEGMENT_LABELS = {
+      'sql' => 'SQL Queries', 'view' => 'View Renders', 'cache' => 'Cache Ops',
+      'http' => 'HTTP Calls', 'mailer' => 'Mailer', 'storage' => 'Storage',
+      'custom' => 'Custom', 'code' => 'App Code', 'gem' => 'Gems', 'other' => 'Untracked',
+      'controller' => 'Controller', 'middleware' => 'Middleware', 'request' => 'Request'
+    }.freeze
+
+    RANGES = {
+      '1h'  => [1.hour,   60],
+      '6h'  => [6.hours,  360],
+      '24h' => [24.hours, 1440],
+      '1w'  => [1.week,   (1.week / 60).to_i],
+      '2w'  => [2.weeks,  (2.weeks / 60).to_i],
+      '1m'  => [30.days,  (30.days / 60).to_i],
+      '1y'  => [365.days, (365.days / 60).to_i]
+    }.freeze
+
+    RANGE_KEYS = RANGES.keys.freeze
+
+    def segment_colors
+      SEGMENT_COLORS
+    end
+
+    def segment_labels
+      SEGMENT_LABELS
+    end
+
+    def segment_text_colors
+      SEGMENT_TEXT_COLORS
+    end
+
+    def type_badge(type)
+      type_str = type.to_s
+      display = SAMPLE_TYPE_LABELS[type_str] || type_str
+      css = BADGE_CLASSES[type_str] || ''
+      %(<span class="badge #{css}">#{ERB::Util.html_escape(display)}</span>).html_safe
+    end
+
+    def format_duration(ms)
+      ms = ms.to_f
+      if ms >= 1000
+        '%.2fs' % (ms / 1000.0)
+      else
+        '%.1fms' % ms
+      end
+    end
+
+    def status_badge(status_val)
+      return '' unless status_val
+      s = status_val.to_i
+      css = s >= 500 ? 'badge-err' : s >= 400 ? 'badge-warn' : 'badge-ok'
+      %(<span class="badge #{css}">#{status_val}</span>).html_safe
+    end
+
+    def segment_count_summary(summary)
+      return '' if summary.blank?
+      parts = SEGMENT_COLORS.keys.filter_map do |type|
+        count = (summary["#{type}_count"] || summary[:"#{type}_count"] || 0).to_i
+        next if count == 0
+        "#{count} #{type}"
+      end
+      parts.join(', ')
+    end
+
+    def sparkline_svg(data_points, width: 120, height: 48, color: '#539bf5', fill: false, labels: nil, time_labels: nil)
+      return '' if data_points.blank?
+      points = data_points.map(&:to_f)
+      max_val = points.max
+      max_val = 1.0 if max_val == 0
+      step = width.to_f / [points.size - 1, 1].max
+
+      parsed = points.each_with_index.map do |val, i|
+        x = (i * step).round(1)
+        y = (height - (val / max_val * (height - 4)) - 2).round(1)
+        [x, y, val]
+      end
+
+      coords_str = parsed.map { |x, y, _| "#{x},#{y}" }
+
+      fill_el = ''
+      if fill
+        fill_coords = coords_str + ["#{width},#{height}", "0,#{height}"]
+        fill_el = %(<polygon points="#{fill_coords.join(" ")}" fill="#{color}" opacity="0.08"/>)
+      end
+
+      circles = parsed.map.with_index do |(x, y, val), i|
+        label = labels ? labels[i] : val.is_a?(Float) ? ('%.1f' % val) : val
+        time_attr = time_labels ? %( data-time="#{time_labels[i]}") : ''
+        %(<circle cx="#{x}" cy="#{y}" r="6" fill="transparent" data-value="#{label}"#{time_attr} class="sparkline-dot"/>)
+      end.join
+
+      %(<svg width="#{width}" height="#{height}" viewBox="0 0 #{width} #{height}" xmlns="http://www.w3.org/2000/svg" style="display:block;position:relative">#{fill_el}<polyline points="#{coords_str.join(" ")}" fill="none" stroke="#{color}" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>#{circles}</svg>).html_safe
+    end
+
+    def bar_chart_svg(data_points, width: 600, height: 200, color: 'var(--accent)', time_labels: nil)
+      return '' if data_points.blank?
+      points = data_points.map(&:to_i)
+      max_val = points.max
+      max_val = 1 if max_val == 0
+      bar_count = points.size
+      gap = 2
+      bar_width = ((width.to_f - (bar_count - 1) * gap) / bar_count).round(2)
+      bar_width = [bar_width, 1].max
+
+      bars = points.each_with_index.map do |val, i|
+        x = (i * (bar_width + gap)).round(2)
+        bar_h = (val.to_f / max_val * (height - 20)).round(2)
+        y = height - bar_h
+        time_attr = time_labels ? %( data-time="#{time_labels[i]}") : ''
+        rx = [bar_width / 4, 2].min.round(1)
+        # Visible bar
+        bar = %(<rect x="#{x}" y="#{y}" width="#{bar_width}" height="#{bar_h}" fill="#{color}" rx="#{rx}" ry="#{rx}" opacity="0.85"/>)
+        # Invisible hover target (full height)
+        hover = %(<rect x="#{x}" y="0" width="#{bar_width}" height="#{height}" fill="transparent" data-value="#{val}"#{time_attr} class="sparkline-dot"/>)
+        bar + hover
+      end.join
+
+      # Gridlines
+      gridlines = [0.25, 0.5, 0.75].map do |pct|
+        gy = (height - pct * (height - 20)).round(1)
+        %(<line x1="0" y1="#{gy}" x2="#{width}" y2="#{gy}" stroke="var(--border)" stroke-width="0.5" stroke-dasharray="4,3"/>)
+      end.join
+
+      svg = %(<svg width="100%" height="#{height}" viewBox="0 0 #{width} #{height}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="display:block">#{gridlines}#{bars}</svg>)
+      max_label = %(<span class="bar-chart-max">#{max_val}</span>)
+
+      %(<div class="bar-chart-wrap">#{svg}#{max_label}</div>).html_safe
+    end
+
+    def relative_time(time)
+      return '—' unless time
+      time = Time.parse(time) if time.is_a?(String)
+      diff = (Time.current - time).to_i
+      if diff < 60
+        'just now'
+      elsif diff < 3600
+        "#{diff / 60}m ago"
+      elsif diff < 86_400
+        "#{diff / 3600}h ago"
+      elsif diff < 172_800
+        'yesterday'
+      elsif diff < 604_800
+        "#{diff / 86_400}d ago"
+      else
+        time.strftime('%b %-d')
+      end
+    rescue ArgumentError, TypeError
+      '—'
+    end
+
+    def time_with_tooltip(time)
+      return '—' unless time
+      time = Time.parse(time) if time.is_a?(String)
+      full = time.strftime('%Y-%m-%d %H:%M:%S')
+      rel = relative_time(time)
+      %(<span title="#{full}" class="time-rel">#{rel}</span>).html_safe
+    rescue ArgumentError, TypeError
+      '—'
+    end
+
+    def sort_header(label, column, current_sort, current_dir, extra_params: {})
+      active = current_sort == column.to_s
+      new_dir = active && current_dir == 'asc' ? 'desc' : 'asc'
+      arrow = active ? (current_dir == 'asc' ? ' &#9650;' : ' &#9660;') : ''
+      params_hash = extra_params.merge(sort: column, dir: new_dir)
+      url = '?' + params_hash.map { |k, v| "#{k}=#{v}" }.join('&')
+      %(<a href="#{url}" class="sort-link#{active ? ' active' : ''}">#{label}#{arrow}</a>).html_safe
+    end
+
+    def section_description(text)
+      %(<p class="section-desc">#{text}</p>).html_safe
+    end
+
+    def status_dot(resolved)
+      color = resolved ? 'var(--green)' : 'var(--red)'
+      label = resolved ? 'Resolved' : 'Active'
+      %(<span class="status-dot"><span class="dot" style="background:#{color}"></span> #{label}</span>).html_safe
+    end
+
+    def parse_range(range_str, extra_valid: [])
+      valid = RANGE_KEYS + extra_valid
+      key = valid.include?(range_str) ? range_str : '1h'
+      return [key, nil, nil] if extra_valid.include?(key) && !RANGES.key?(key)
+      period, bucket_seconds = RANGES[key]
+      [key, period, bucket_seconds]
+    end
+
+    def range_label(range)
+      case range
+      when '6h'  then 'Last 6 hours'
+      when '24h' then 'Last 24 hours'
+      when '1w'  then 'Last week'
+      when '2w'  then 'Last 2 weeks'
+      when '1m'  then 'Last month'
+      when '1y'  then 'Last year'
+      else 'Last hour'
+      end
+    end
+
+    def pagination_nav(current_page, total_count, per_page, extra_params: {})
+      total_pages = (total_count.to_f / per_page).ceil
+      return '' if total_pages <= 1
+
+      prev_params = extra_params.merge(page: current_page - 1)
+      next_params = extra_params.merge(page: current_page + 1)
+      prev_url = '?' + prev_params.compact.map { |k, v| "#{k}=#{v}" }.join('&')
+      next_url = '?' + next_params.compact.map { |k, v| "#{k}=#{v}" }.join('&')
+
+      html = '<div class="pagination">'
+      if current_page > 1
+        html << %(<a href="#{prev_url}" class="btn">← Previous</a>)
+      else
+        html << '<span class="btn" style="opacity:0.3;cursor:default">← Previous</span>'
+      end
+      html << %(<span class="pagination-info">Page #{current_page} of #{total_pages}</span>)
+      if current_page < total_pages
+        html << %(<a href="#{next_url}" class="btn">Next →</a>)
+      else
+        html << '<span class="btn" style="opacity:0.3;cursor:default">Next →</span>'
+      end
+      html << '</div>'
+      html.html_safe
+    end
+
+    def trend_indicator(error)
+      return '' unless error.last_occurred_at
+      if error.last_occurred_at > 1.hour.ago
+        %(<span title="Active in the last hour" style="color:var(--red)">↑</span>).html_safe
+      else
+        %(<span title="Quiet" style="color:var(--text-2)">—</span>).html_safe
+      end
+    end
+  end
+end

data/app/jobs/catpm/application_job.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Catpm
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/catpm/application_mailer.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Catpm
+  class ApplicationMailer < ActionMailer::Base
+    default from: 'from@example.com'
+    layout 'mailer'
+  end
+end

data/app/models/catpm/application_record.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Catpm
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/catpm/bucket.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Catpm
+  class Bucket < ApplicationRecord
+    self.table_name = 'catpm_buckets'
+
+    has_many :samples, class_name: 'Catpm::Sample', foreign_key: :bucket_id, dependent: :delete_all
+
+    validates :kind, :target, :bucket_start, presence: true
+
+    scope :by_kind, ->(kind) { where(kind: kind) }
+    scope :recent, ->(period = 1.hour) { where(bucket_start: period.ago..) }
+
+    def average_duration
+      return 0.0 if count.zero?
+      duration_sum / count
+    end
+
+    def failure_rate
+      return 0.0 if count.zero?
+      failure_count.to_f / count
+    end
+
+    def percentile(p)
+      digest = tdigest
+      return nil if digest.nil? || digest.empty?
+      digest.percentile(p)
+    end
+
+    def tdigest
+      return nil if p95_digest.blank?
+      TDigest.deserialize(p95_digest)
+    end
+
+    def parsed_metadata_sum
+      case metadata_sum
+      when Hash then metadata_sum
+      when String then JSON.parse(metadata_sum)
+      else {}
+      end
+    rescue JSON::ParserError
+      {}
+    end
+  end
+end

data/app/models/catpm/error_record.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Catpm
+  class ErrorRecord < ApplicationRecord
+    self.table_name = 'catpm_errors'
+
+    validates :fingerprint, :kind, :error_class, :first_occurred_at, :last_occurred_at, presence: true
+    validates :fingerprint, uniqueness: true
+
+    scope :by_kind, ->(kind) { where(kind: kind) }
+    scope :unresolved, -> { where(resolved_at: nil) }
+    scope :resolved, -> { where.not(resolved_at: nil) }
+    scope :recent, ->(period = 24.hours) { where(last_occurred_at: period.ago..) }
+
+    def resolved?
+      resolved_at.present?
+    end
+
+    def resolve!
+      update!(resolved_at: Time.current)
+    end
+
+    def unresolve!
+      update!(resolved_at: nil)
+    end
+
+    def parsed_contexts
+      case contexts
+      when Array then contexts
+      when String then JSON.parse(contexts)
+      else []
+      end
+    rescue JSON::ParserError
+      []
+    end
+  end
+end

data/app/models/catpm/event_bucket.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Catpm
+  class EventBucket < ApplicationRecord
+    self.table_name = 'catpm_event_buckets'
+
+    validates :name, :bucket_start, presence: true
+
+    scope :by_name, ->(name) { where(name: name) }
+    scope :recent, ->(period = 1.hour) { where(bucket_start: period.ago..) }
+  end
+end

data/app/models/catpm/event_sample.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Catpm
+  class EventSample < ApplicationRecord
+    self.table_name = 'catpm_event_samples'
+
+    validates :name, :recorded_at, presence: true
+
+    scope :by_name, ->(name) { where(name: name) }
+    scope :recent, ->(period = 1.hour) { where(recorded_at: period.ago..) }
+
+    def parsed_payload
+      case payload
+      when Hash then payload
+      when String then JSON.parse(payload)
+      else {}
+      end
+    rescue JSON::ParserError
+      {}
+    end
+  end
+end

data/app/models/catpm/sample.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Catpm
+  class Sample < ApplicationRecord
+    self.table_name = 'catpm_samples'
+
+    belongs_to :bucket, class_name: 'Catpm::Bucket'
+
+    validates :kind, :sample_type, :recorded_at, :duration, presence: true
+
+    scope :by_kind, ->(kind) { where(kind: kind) }
+    scope :slow, -> { where(sample_type: 'slow') }
+    scope :errors, -> { where(sample_type: 'error') }
+    scope :recent, ->(period = 1.hour) { where(recorded_at: period.ago..) }
+
+    def parsed_context
+      case context
+      when Hash then context
+      when String then JSON.parse(context)
+      else {}
+      end
+    rescue JSON::ParserError
+      {}
+    end
+  end
+end

data/app/views/catpm/endpoints/_sample_table.html.erb

@@ -0,0 +1,36 @@
+<h2><%= title %> (<%= samples.size %>)</h2>
+<% if samples.any? %>
+  <div class="table-scroll">
+  <table>
+    <thead>
+      <tr>
+        <th>Duration</th>
+        <th>Segments</th>
+        <th>Time</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% samples.each do |s| %>
+        <% ctx = s.parsed_context; summary = ctx["segment_summary"] || ctx[:segment_summary] || {} %>
+        <tr class="linked">
+          <td><a href="<%= catpm.sample_path(s) %>" class="row-link mono"><%= format_duration(s.duration) %></a></td>
+          <td>
+            <% sc = (summary["sql_count"] || summary[:sql_count] || 0).to_i %>
+            <% vc = (summary["view_count"] || summary[:view_count] || 0).to_i %>
+            <% if sc > 0 || vc > 0 %>
+              <span class="mono text-muted"><%= sc %> sql, <%= vc %> views</span>
+            <% else %>
+              <span class="text-muted">—</span>
+            <% end %>
+          </td>
+          <td><%= time_with_tooltip(s.recorded_at) %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+  </div>
+<% else %>
+  <div class="empty-state">
+    <div class="empty-hint"><%= empty_msg %></div>
+  </div>
+<% end %>

data/app/views/catpm/endpoints/show.html.erb

@@ -0,0 +1,124 @@
+<% content_for :title, @target %>
+<% content_for :subtitle do %>
+  <%= type_badge(@kind) %>
+  <%= @target %> <%= @operation.presence %>
+  &middot; <%= @count %> requests
+  &middot; <%= @range == "all" ? "All time" : range_label(@range) %>
+<% end %>
+
+<%= render "catpm/shared/page_nav", active: "performance" %>
+
+<div class="breadcrumbs">
+  <a href="<%= catpm.status_index_path %>">Performance</a>
+  <span class="sep">/</span>
+  <span><%= @target %></span>
+</div>
+
+<% ep_params = { kind: @kind, target: @target, operation: @operation } %>
+<div class="time-range">
+  <% (Catpm::ApplicationHelper::RANGE_KEYS + ["all"]).each do |r| %>
+    <a href="<%= catpm.endpoint_path(ep_params.merge(range: r)) %>" class="<%= 'active' if @range == r %>"><%= r == "all" ? "All" : r %></a>
+  <% end %>
+</div>
+
+<div class="grid">
+  <div class="card">
+    <div class="label">Requests</div>
+    <div class="value"><%= @count %></div>
+  </div>
+  <div class="card">
+    <div class="label">Avg Duration</div>
+    <div class="value"><%= format_duration(@avg_duration) %></div>
+  </div>
+  <div class="card">
+    <div class="label">p95</div>
+    <div class="value"><%= @tdigest ? format_duration(@tdigest.percentile(0.95)) : "—" %></div>
+  </div>
+  <div class="card">
+    <div class="label">Max</div>
+    <div class="value"><%= format_duration(@duration_max) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Min</div>
+    <div class="value"><%= format_duration(@duration_min) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Failures</div>
+    <div class="value"><%= @failure_count %></div>
+    <div class="detail"><%= "%.1f" % (@failure_rate * 100) %>%</div>
+  </div>
+</div>
+
+<% if @tdigest && @tdigest.count > 0 %>
+  <h2>Percentile Distribution</h2>
+  <%= section_description("p95 means 95% of requests completed faster than this value. Higher percentiles reveal tail latency.") %>
+  <div class="grid">
+    <% [0.5, 0.75, 0.9, 0.95, 0.99].each do |p| %>
+      <div class="card">
+        <div class="label">p<%= (p * 100).to_i %></div>
+        <div class="value"><%= format_duration(@tdigest.percentile(p)) %></div>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<%
+  type_data = segment_colors.map { |type, color|
+    count = (@metadata["#{type}_count"] || @metadata[:"#{type}_count"] || 0).to_f
+    dur = (@metadata["#{type}_duration"] || @metadata[:"#{type}_duration"] || 0).to_f
+    avg_dur = @count > 0 ? dur / @count : 0
+    avg_count = @count > 0 ? count / @count : 0
+    text_color = segment_text_colors[type] || "#4b5563"
+    { type: type, label: segment_labels[type] || type.capitalize, bg: color, text: text_color, count: count, dur: dur, avg_dur: avg_dur, avg_count: avg_count }
+  }.select { |d| d[:count] > 0 }
+%>
+
+<% if type_data.any? %>
+  <h2>Average Time Breakdown</h2>
+
+  <%
+    avg_total = @avg_duration
+    typed_avg = type_data.sum { |d| d[:avg_dur] }
+    avg_other = [avg_total - typed_avg, 0].max
+    bar_data = type_data.map { |d| [d[:label], d[:avg_dur], d[:bg], d[:text]] }
+    bar_data << ["Other", avg_other, "#dde2e8", "#4b5563"] if avg_other > 0
+  %>
+
+  <div style="margin-bottom:16px">
+    <div style="display:flex; height:32px; border-radius:4px; overflow:hidden; border:1px solid var(--border)">
+      <% bar_data.each do |label, dur, bg, text| %>
+        <% if dur > 0 && avg_total > 0 %>
+          <div title="<%= label %> — <%= format_duration(dur) %> (<%= "%.0f" % (dur/avg_total*100) %>%)" style="flex:<%= dur %>; background:<%= bg %>; display:flex; align-items:center; justify-content:center; color:<%= text %>; font-size:11px; font-weight:500; overflow:hidden; white-space:nowrap; padding:0 4px;">
+            <% if dur / avg_total > 0.08 %><%= label %><% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+    <div style="display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--text-1)">
+      <% bar_data.each do |label, dur, bg, text| %>
+        <span><span style="display:inline-block;width:10px;height:10px;background:<%= bg %>;border-radius:2px;margin-right:4px;border:1px solid <%= text %>22"></span><%= label %> <%= format_duration(dur) %> (<%= "%.0f" % (avg_total > 0 ? dur/avg_total*100 : 0) %>%)</span>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="grid">
+    <% type_data.each do |d| %>
+      <div class="card">
+        <div class="label">Avg <%= d[:label] %></div>
+        <div class="value"><%= "%.0f" % d[:avg_count] %></div>
+        <div class="detail"><%= format_duration(d[:avg_dur]) %> avg</div>
+      </div>
+    <% end %>
+    <% if avg_other > 0 %>
+      <div class="card">
+        <div class="label">Avg Other</div>
+        <div class="value"><%= format_duration(avg_other) %></div>
+        <div class="detail">App code, middleware, etc.</div>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<%= render "catpm/endpoints/sample_table", title: "Error Requests", samples: @error_samples, empty_msg: "No errors for this endpoint." %>
+<%= render "catpm/endpoints/sample_table", title: "Slowest Requests", samples: @slow_samples, empty_msg: "No slow requests captured yet." %>
+<%= render "catpm/endpoints/sample_table", title: "Sample Requests", samples: @samples, empty_msg: "No samples captured yet." %>

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

@@ -0,0 +1,66 @@
+<% content_for :title, "Errors" %>
+<% content_for :subtitle, "#{@active_count} active, #{@resolved_count} resolved" %>
+
+<%= render "catpm/shared/page_nav", active: "errors" %>
+
+<div class="tabs">
+  <a href="<%= catpm.errors_path(tab: "active") %>" class="tab <%= 'active' if @tab == 'active' %>">Active (<%= @active_count %>)</a>
+  <a href="<%= catpm.errors_path(tab: "resolved") %>" class="tab <%= 'active' if @tab == 'resolved' %>">Resolved (<%= @resolved_count %>)</a>
+</div>
+
+<% if @errors.any? || @kind_filter.present? %>
+  <div class="filters">
+    <% @available_kinds.each do |k| %>
+      <a href="<%= catpm.errors_path(tab: @tab, kind: @kind_filter == k ? nil : k) %>" class="filter-pill<%= ' active' if @kind_filter == k %>"><%= k %></a>
+    <% end %>
+    <input type="text" class="search-input" id="error-search" placeholder="Search errors... (/)" oninput="filterByText('error-search','errors-table')">
+    <% if @tab == "active" && @active_count > 0 %>
+      <span style="display:inline; margin-left:auto"><%= button_to "Resolve all", catpm.resolve_all_errors_path, method: :post, class: "btn", data: { confirm: "Resolve all #{@active_count} active errors?" } %></span>
+    <% end %>
+  </div>
+<% end %>
+
+<% extra = { tab: @tab }; extra[:kind] = @kind_filter if @kind_filter %>
+
+<% if @errors.any? %>
+  <div class="table-scroll">
+  <table id="errors-table">
+    <thead>
+      <tr>
+        <th>Kind</th>
+        <th><%= sort_header("Error Class", "error_class", @sort, @dir, extra_params: extra) %></th>
+        <th>Message</th>
+        <th><%= sort_header("Count", "occurrences_count", @sort, @dir, extra_params: extra) %></th>
+        <th>Trend</th>
+        <th><%= sort_header("Last Seen", "last_occurred_at", @sort, @dir, extra_params: extra) %></th>
+        <% if @tab == "resolved" %><th>Resolved</th><% end %>
+      </tr>
+    </thead>
+    <tbody>
+      <% @errors.each do |e| %>
+        <tr class="linked">
+          <td><a href="<%= catpm.error_path(e) %>" class="row-link"><%= type_badge(e.kind) %></a></td>
+          <td class="mono"><%= e.error_class %></td>
+          <td style="color:var(--text-1)"><%= truncate(e.message, length: 60) %></td>
+          <td<%= " style=\"font-weight:600\"".html_safe if e.occurrences_count >= 10 %>><%= e.occurrences_count %></td>
+          <td><%= trend_indicator(e) %></td>
+          <td><%= time_with_tooltip(e.last_occurred_at) %></td>
+          <% if @tab == "resolved" %><td><%= time_with_tooltip(e.resolved_at) %></td><% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+  </div>
+  <% page_extra = extra.merge(sort: @sort, dir: @dir) %>
+  <%= pagination_nav(@page, @total_count, Catpm::ErrorsController::PER_PAGE, extra_params: page_extra) %>
+<% else %>
+  <div class="empty-state">
+    <% if @tab == "active" %>
+      <div class="empty-title">No active errors</div>
+      <div class="empty-hint">Your application is running smoothly. Errors will appear here when they occur.</div>
+    <% else %>
+      <div class="empty-title">No resolved errors</div>
+      <div class="empty-hint">When you resolve active errors, they'll move here for reference.</div>
+    <% end %>
+  </div>
+<% end %>