catpm 0.1.0

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

@@ -0,0 +1,107 @@
+<% content_for :title, @error.error_class %>
+<% content_for :subtitle do %>
+  <%= type_badge(@error.kind) %>
+  <%= @error.error_class %>
+  &middot; <%= @error.occurrences_count %> occurrences
+<% end %>
+
+<%= render "catpm/shared/page_nav", active: "errors" %>
+
+<div class="breadcrumbs">
+  <a href="<%= catpm.errors_path(tab: @error.resolved? ? "resolved" : "active") %>">Errors</a>
+  <span class="sep">/</span>
+  <span><%= @error.error_class %></span>
+</div>
+
+<%# ─── Hero ─── %>
+<div class="error-hero">
+  <div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px">
+    <div style="flex:1; min-width:0">
+      <div class="error-hero-class"><%= @error.error_class %></div>
+      <div class="error-hero-message"><%= @error.message %></div>
+      <div class="error-hero-meta">
+        <%= type_badge(@error.kind) %>
+        <%= status_dot(@error.resolved?) %>
+        <span class="occurrence-count"><%= @error.occurrences_count %> occurrences</span>
+      </div>
+    </div>
+    <div style="display:flex; gap:6px; flex-shrink:0">
+      <% if @error.resolved? %>
+        <%= button_to "Reopen", catpm.unresolve_error_path(@error), method: :patch, class: "btn" %>
+      <% else %>
+        <%= button_to "Resolve", catpm.resolve_error_path(@error), method: :patch, class: "btn btn-primary" %>
+      <% end %>
+      <%= button_to "Delete", catpm.error_path(@error), method: :delete, class: "btn btn-danger", data: { confirm: "Delete this error and all its occurrences?" } %>
+    </div>
+  </div>
+</div>
+
+<%# ─── Timeline ─── %>
+<div class="grid">
+  <div class="card">
+    <div class="label">First Seen</div>
+    <div class="value" style="font-size:16px"><%= time_with_tooltip(@error.first_occurred_at) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Last Seen</div>
+    <div class="value" style="font-size:16px"><%= time_with_tooltip(@error.last_occurred_at) %></div>
+  </div>
+</div>
+
+<%# ─── Backtrace ─── %>
+<% first_bt = @contexts.first && (@contexts.first["backtrace"] || @contexts.first[:backtrace] || []) %>
+<% if first_bt.any? %>
+  <h2>Backtrace</h2>
+  <%= section_description("All occurrences share the same fingerprint and backtrace.") %>
+  <div style="border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px; position:relative">
+    <button class="copy-btn" style="position:absolute; top:8px; right:8px" onclick="copyText(this)">Copy</button>
+    <pre class="mono" style="font-size:12px; white-space:pre-wrap; margin:0; line-height:1.8"><% first_bt.first(20).each do |line| %><span class="<%= line.match?(%r{/(gems|ruby|vendor|bundle)/}) ? 'backtrace-lib' : 'backtrace-app' %>"><%= line %></span>
+<% end %></pre>
+  </div>
+<% end %>
+
+<%# ─── Fingerprint ─── %>
+<div style="margin-bottom:20px; font-size:12px; color:var(--text-2)">
+  <span style="font-weight:500; color:var(--text-1)">Fingerprint:</span>
+  <span class="mono" style="word-break:break-all"><%= @error.fingerprint %></span>
+</div>
+
+<%# ─── Occurrences ─── %>
+<% if @contexts.any? %>
+  <h2>Last <%= @contexts.size %> Captured Occurrences</h2>
+  <div class="table-scroll">
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Time</th>
+        <th>Duration</th>
+        <th>Status</th>
+        <th>Target</th>
+        <th>Segments</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @contexts.each_with_index do |ctx, i| %>
+        <% segments = ctx["segments"] || ctx[:segments] || [] %>
+        <% has_detail = segments.any? %>
+        <tr id="occurrence-<%= i + 1 %>" class="<%= 'expandable' if has_detail %>" data-occurrence="<%= i %>" <% if has_detail %>onclick="toggleOccurrence(this)"<% end %>>
+          <td class="mono text-muted"><% if has_detail %><span class="chevron">&#x25B8;</span> <% end %>#<%= i + 1 %></td>
+          <td><%= time_with_tooltip(ctx["occurred_at"] || ctx[:occurred_at]) %></td>
+          <td class="mono"><%= (ctx["duration"] || ctx[:duration]) ? format_duration((ctx["duration"] || ctx[:duration]).to_f) : "—" %></td>
+          <td><%= status_badge(ctx["status"] || ctx[:status]) %></td>
+          <td class="mono"><%= ctx["target"] || ctx[:target] || "—" %></td>
+          <td class="mono text-muted"><%= segment_count_summary(ctx["segment_summary"] || ctx[:segment_summary]).presence || "—" %></td>
+        </tr>
+        <% if has_detail %>
+          <tr id="detail-<%= i %>" style="display:none">
+            <td colspan="6" style="padding:14px; background:var(--bg-1)">
+              <%= render "catpm/shared/segments_waterfall", segments: segments, total_duration: (ctx["duration"] || ctx[:duration] || 1), segments_capped: ctx["segments_capped"] || ctx[:segments_capped], table_id: "segments-table-#{i}" %>
+            </td>
+          </tr>
+        <% end %>
+      <% end %>
+    </tbody>
+  </table>
+  </div>
+<% end %>

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

@@ -0,0 +1,73 @@
+<% content_for :title, "Events" %>
+<% content_for :subtitle, "Custom Event Tracking" %>
+
+<%= render "catpm/shared/page_nav", active: "events" %>
+
+<%# ─── Time Range ─── %>
+<div class="time-range">
+  <% Catpm::ApplicationHelper::RANGE_KEYS.each do |r| %>
+    <a href="<%= catpm.events_path(range: r) %>" class="<%= 'active' if @range == r %>"><%= r %></a>
+  <% end %>
+  <span style="margin-left:auto; font-size:12px; color:var(--text-2)">
+    Updated <%= Time.current.strftime("%H:%M:%S") %>
+  </span>
+</div>
+
+<%# ─── Hero Metrics ─── %>
+<div class="grid-hero">
+  <div class="card">
+    <div class="label">Total Events</div>
+    <div class="value"><%= @total_events %></div>
+    <div class="detail"><%= range_label(@range) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Unique Names</div>
+    <div class="value"><%= @unique_names %></div>
+    <div class="detail">distinct event types</div>
+  </div>
+  <div class="card">
+    <div class="label">Events / min</div>
+    <div class="value"><%= @events_per_min %></div>
+    <div class="detail"><%= range_label(@range) %></div>
+  </div>
+</div>
+
+<%# ─── Events Table ─── %>
+<h2>Events <% if @total_event_names > @events.size %><span class="text-muted" style="font-weight:400; font-size:13px">(showing <%= @events.size %> of <%= @total_event_names %>)</span><% end %></h2>
+<%= section_description("Events tracked in the selected time range.") %>
+
+<% if @events.any? %>
+  <div class="table-scroll">
+  <table>
+    <thead>
+      <tr>
+        <th><%= sort_header("Name", "name", @sort, @dir, extra_params: { range: @range }) %></th>
+        <th><%= sort_header("Count", "total_count", @sort, @dir, extra_params: { range: @range }) %></th>
+        <th>Trend</th>
+        <th><%= sort_header("Last Seen", "last_seen", @sort, @dir, extra_params: { range: @range }) %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @events.each do |ev| %>
+        <tr class="linked">
+          <td>
+            <a href="<%= catpm.event_path(name: ev[:name], range: @range) %>" class="row-link">
+              <span class="badge badge-event"><%= ev[:name] %></span>
+            </a>
+          </td>
+          <td><%= ev[:total_count] %></td>
+          <td><%= sparkline_svg(ev[:sparkline], width: 120, height: 32, color: "var(--accent)", time_labels: @sparkline_times) %></td>
+          <td><%= time_with_tooltip(ev[:last_seen]) %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+  </div>
+  <% ep_extra = { range: @range, sort: @sort, dir: @dir } %>
+  <%= pagination_nav(@page, @total_event_names, Catpm::EventsController::PER_PAGE, extra_params: ep_extra) %>
+<% else %>
+  <div class="empty-state">
+    <div class="empty-title">No events tracked yet</div>
+    <div class="empty-hint">Use <code>Catpm.event("name")</code> to start tracking custom events.</div>
+  </div>
+<% end %>

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

@@ -0,0 +1,86 @@
+<% content_for :title, @name %>
+<% content_for :subtitle, "Event Detail" %>
+
+<%= render "catpm/shared/page_nav", active: "events" %>
+
+<div class="breadcrumbs">
+  <a href="<%= catpm.events_path(range: @range) %>">Events</a>
+  <span class="sep">/</span>
+  <span class="badge badge-event"><%= @name %></span>
+</div>
+
+<%# ─── Time Range ─── %>
+<div class="time-range">
+  <% Catpm::ApplicationHelper::RANGE_KEYS.each do |r| %>
+    <a href="<%= catpm.event_path(name: @name, range: r) %>" class="<%= 'active' if @range == r %>"><%= r %></a>
+  <% end %>
+</div>
+
+<%# ─── Hero Metrics ─── %>
+<div class="grid-hero">
+  <div class="card">
+    <div class="label">Total Count</div>
+    <div class="value"><%= @total_count %></div>
+    <div class="detail"><%= range_label(@range) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Events / min</div>
+    <div class="value"><%= @events_per_min %></div>
+    <div class="detail"><%= range_label(@range) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Last Seen</div>
+    <div class="value" style="font-size:18px"><%= @last_seen ? time_with_tooltip(@last_seen) : "—" %></div>
+  </div>
+</div>
+
+<%# ─── Bar Chart ─── %>
+<h2>Event Volume</h2>
+<%= section_description("Events per time slot over the selected range.") %>
+<div style="border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:24px; position:relative">
+  <%= bar_chart_svg(@chart_data, width: 600, height: 180, color: "var(--accent)", time_labels: @chart_times) %>
+</div>
+
+<%# ─── Recent Samples ─── %>
+<h2>Recent Samples</h2>
+<%= section_description("Most recent event payloads captured.") %>
+
+<% if @samples.any? %>
+  <table style="table-layout:fixed">
+    <colgroup>
+      <col style="width:120px">
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th>Recorded At</th>
+        <th>Payload</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @samples.each do |sample| %>
+        <tr>
+          <td style="white-space:nowrap; vertical-align:top"><%= time_with_tooltip(sample.recorded_at) %></td>
+          <td style="vertical-align:top">
+            <% payload = sample.parsed_payload %>
+            <% if payload.any? %>
+              <details class="collapsible-compact">
+                <summary><%= payload.keys.first(3).join(", ") %><%= "..." if payload.keys.size > 3 %></summary>
+                <div class="details-body">
+                  <pre style="font-size:12px; white-space:pre-wrap; word-break:break-all; margin:0"><%= JSON.pretty_generate(payload) %></pre>
+                </div>
+              </details>
+            <% else %>
+              <span class="text-muted">—</span>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <div class="empty-state">
+    <div class="empty-title">No samples recorded</div>
+    <div class="empty-hint">Events without payloads don't generate samples.</div>
+  </div>
+<% end %>

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

@@ -0,0 +1,113 @@
+<% content_for :title, "Sample ##{@sample.id}" %>
+<% content_for :subtitle do %>
+  <%= type_badge(@sample.sample_type) %>
+  <%= type_badge(@sample.kind) %>
+  <%= @bucket&.target %>
+  &middot; <%= format_duration(@sample.duration) %>
+<% end %>
+
+<div class="breadcrumbs">
+  <a href="<%= catpm.status_index_path %>">Overview</a>
+  <% if @bucket %>
+    <span class="sep">/</span>
+    <a href="<%= catpm.endpoint_path(kind: @bucket.kind, target: @bucket.target, operation: @bucket.operation) %>"><%= @bucket.target %></a>
+  <% end %>
+  <span class="sep">/</span>
+  <span>Sample #<%= @sample.id %></span>
+</div>
+
+<%# ─── Request Info Bar ─── %>
+<% method_val = @context["method"] || @context[:method] %>
+<% path_val = @context["path"] || @context[:path] %>
+<% status_val = @context["status"] || @context[:status] %>
+<div class="request-bar">
+  <% if method_val %><strong class="mono"><%= method_val %></strong><% end %>
+  <% if path_val %><span class="mono"><%= path_val %></span><% end %>
+  <% if status_val %><%= status_badge(status_val) %><% end %>
+  <span class="sep">&middot;</span>
+  <span class="mono"><%= format_duration(@sample.duration) %></span>
+  <span class="sep">&middot;</span>
+  <span class="text-muted"><%= time_with_tooltip(@sample.recorded_at) %></span>
+</div>
+
+<%# ─── Request Context + Full JSON side by side ─── %>
+<%
+  ctx_display = @context.except("segments", :segments, "segment_summary", :segment_summary, "segments_capped", :segments_capped, "backtrace", :backtrace)
+  ctx_flat = ctx_display.select { |_, v| !v.is_a?(Hash) && !v.is_a?(Array) }
+  ctx_nested = ctx_display.select { |_, v| v.is_a?(Hash) || v.is_a?(Array) }
+%>
+
+<div class="sample-layout">
+  <% if ctx_display.any? %>
+    <div class="sample-sidebar">
+      <h2 style="margin-top:0">Request Context</h2>
+      <% if ctx_flat.any? %>
+        <div class="context-grid" style="margin-bottom:12px">
+          <% ctx_flat.each do |k, v| %>
+            <div class="ctx-key"><%= k %></div>
+            <div class="ctx-val"><%= v.to_s.truncate(200) %></div>
+          <% end %>
+        </div>
+      <% end %>
+      <% if ctx_nested.any? %>
+        <% ctx_nested.each do |k, v| %>
+          <details class="collapsible" open>
+            <summary><%= k %></summary>
+            <div class="details-body">
+              <pre class="mono" style="color:var(--text-1); white-space:pre-wrap; font-size:12px"><%= JSON.pretty_generate(v) rescue v.inspect %></pre>
+            </div>
+          </details>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="sample-main">
+    <%# ─── Full JSON ─── %>
+    <details class="collapsible" open>
+      <summary>Full JSON</summary>
+      <div class="details-body">
+        <pre class="mono" style="color:var(--text-1); white-space:pre-wrap; font-size:12px; word-break:break-all"><%= JSON.pretty_generate(@context.except("segments", :segments)) rescue @context.inspect %></pre>
+      </div>
+    </details>
+  </div>
+</div>
+
+<%# ─── Time Breakdown (full width, above waterfall) ─── %>
+<% if @summary.any? %>
+  <%
+    breakdown = segment_colors.filter_map { |type, color|
+      dur = (@summary["#{type}_duration"] || @summary[:"#{type}_duration"] || 0).to_f
+      count = (@summary["#{type}_count"] || @summary[:"#{type}_count"] || 0).to_i
+      next if dur <= 0
+      next if (type == "code" || type == "other") && count <= 1 && dur < 1.0
+      text_color = segment_text_colors[type] || "#4b5563"
+      [segment_labels[type] || type.capitalize, dur, color, count, text_color]
+    }
+    typed_total = breakdown.sum { |_, dur, _, _, _| dur }
+    other_dur = [@sample.duration - typed_total, 0].max
+    breakdown << ["Other", other_dur, "#dde2e8", nil, "#4b5563"] if other_dur > 0.5
+    total = @sample.duration
+  %>
+
+  <h2>Time Breakdown</h2>
+  <div style="display:flex; height:32px; border-radius:4px; overflow:hidden; margin-bottom:4px; border:1px solid var(--border)">
+    <% breakdown.each do |label, dur, color, _, text| %>
+      <% if dur > 0 && total > 0 %>
+        <div title="<%= label %> — <%= format_duration(dur) %> (<%= "%.0f" % (dur/total*100) %>%)" style="flex:<%= dur %>; background:<%= color %>; 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 / total > 0.08 %><%= label %><% end %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+  <div style="display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; font-size:12px; color:var(--text-1)">
+    <% breakdown.each do |label, dur, color, count, text| %>
+      <span><span style="display:inline-block;width:10px;height:10px;background:<%= color %>;border-radius:2px;margin-right:4px;border:1px solid <%= text %>22"></span><%= label %> <%= format_duration(dur) %> (<%= "%.0f" % (total > 0 ? dur/total*100 : 0) %>%)<%= " · #{count}" if count && count > 0 %></span>
+    <% end %>
+  </div>
+<% end %>
+
+<%# ─── Segments Waterfall (full width, no title) ─── %>
+<% if @segments.any? %>
+  <%= render "catpm/shared/segments_waterfall", segments: @segments, total_duration: @sample.duration, segments_capped: @context["segments_capped"] || @context[:segments_capped], table_id: "segments-table" %>
+<% end %>

data/app/views/catpm/shared/_page_nav.html.erb

@@ -0,0 +1,6 @@
+<div class="page-nav">
+  <a href="<%= catpm.status_index_path %>"<%= ' class="active"'.html_safe if active == "performance" %>>Performance</a>
+  <a href="<%= catpm.events_path %>"<%= ' class="active"'.html_safe if active == "events" %>>Events</a>
+  <a href="<%= catpm.errors_path %>"<%= ' class="active"'.html_safe if active == "errors" %>>Errors<% if @active_error_count.to_i > 0 %><span class="nav-count alert"><%= @active_error_count %></span><% end %></a>
+  <a href="<%= catpm.system_index_path %>"<%= ' class="active"'.html_safe if active == "system" %>>System</a>
+</div>

data/app/views/catpm/shared/_segments_waterfall.html.erb

@@ -0,0 +1,147 @@
+<%# Locals: segments, total_duration, segments_capped, table_id %>
+
+<% if segments.any? %>
+  <% total_dur = total_duration.to_f %>
+  <% total_dur = 1.0 if total_dur == 0 %>
+
+  <%
+    # Build tree: compute children lists and depth per segment
+    children = Hash.new { |h, k| h[k] = [] }
+    roots = []
+    segments.each_with_index do |seg, i|
+      pi = seg["parent_index"] || seg[:parent_index]
+      if pi.nil?
+        roots << i
+      else
+        children[pi.to_i] << i
+      end
+    end
+
+    depth_map = {}
+    ordered = []
+    build_order = ->(indices, depth) {
+      indices.each do |i|
+        depth_map[i] = depth
+        ordered << i
+        build_order.call(children.fetch(i, []), depth + 1)
+      end
+    }
+    build_order.call(roots, 0)
+
+    # Include any segments not reachable from roots (orphans from overflow)
+    segments.each_index { |i| unless depth_map.key?(i); depth_map[i] = 0; ordered << i; end }
+
+    # For tree lines: determine if a segment is the last child of its parent
+    last_child = {}
+    ([nil] + segments.each_index.to_a).each do |pi|
+      kids = pi.nil? ? roots : children.fetch(pi, [])
+      last_child[kids.last] = true if kids.any?
+    end
+
+    # Build tree prefix string for indentation
+    tree_prefix = ->(depth, index, current_pos) {
+      next "" if depth == 0
+      parts = []
+      (1...depth).each do |d|
+        has_more = false
+        ((current_pos + 1)...ordered.size).each do |j|
+          jd = depth_map[ordered[j]]
+          break if jd < d
+          if jd == d
+            has_more = true
+            break
+          end
+        end
+        parts << (has_more ? "│  " : "   ")
+      end
+      parts << (last_child[index] ? "└─ " : "├─ ")
+      parts.join
+    }
+  %>
+
+  <%
+    # Determine which segments are parents (have children)
+    has_children = Set.new
+    children.each { |pi, _kids| has_children << pi }
+
+    # Segments marked collapsed (sampler children — hidden by default)
+    collapsed_set = Set.new
+    starts_collapsed = Set.new
+    segments.each_with_index do |s, i|
+      if s["collapsed"] || s[:collapsed]
+        collapsed_set << i
+        pi = s["parent_index"] || s[:parent_index]
+        starts_collapsed << pi.to_i if pi
+      end
+    end
+  %>
+
+  <style>tr[data-collapsed] { display: none; }</style>
+  <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:8px; overflow:hidden">
+    <table style="margin:0" id="<%= table_id %>">
+      <thead>
+        <tr>
+          <th style="width:55px">Type</th>
+          <th style="width:70px">Duration</th>
+          <th>Detail</th>
+          <th style="width:35%">Timeline</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% ordered.each_with_index do |seg_idx, pos| %>
+          <% seg = segments[seg_idx] %>
+          <% type = (seg["type"] || seg[:type]).to_s %>
+          <% dur = (seg["duration"] || seg[:duration] || 0).to_f %>
+          <% offset = (seg["offset"] || seg[:offset] || 0).to_f %>
+          <% detail = (seg["detail"] || seg[:detail]).to_s %>
+          <% source = seg["source"] || seg[:source] %>
+          <% bar_color = segment_colors[type] || "#484f58" %>
+          <% left_pct = (offset / total_dur * 100).clamp(0, 99) %>
+          <% width_pct = (dur / total_dur * 100).clamp(0.5, 100 - left_pct) %>
+          <% depth = depth_map[seg_idx] %>
+          <% prefix = tree_prefix.call(depth, seg_idx, pos) %>
+          <% is_parent = has_children.include?(seg_idx) %>
+          <% pi = seg["parent_index"] || seg[:parent_index] %>
+          <% is_collapsed = collapsed_set.include?(seg_idx) %>
+          <% parent_starts_collapsed = starts_collapsed.include?(seg_idx) %>
+
+          <tr data-seg="<%= seg_idx %>" data-depth="<%= depth %>"<%= " data-parent=\"#{pi}\"" if pi %><%= " data-has-children" if is_parent %><%= " data-collapsed" if is_collapsed %>>
+            <td><%= type_badge(type) %></td>
+            <td class="mono" style="text-align:right"><%= "%.2f" % dur %>ms</td>
+            <td>
+              <div style="padding-left:<%= depth * 20 %>px">
+                <% if is_parent %>
+                  <span class="seg-toggle" data-seg="<%= seg_idx %>" onclick="toggleSegment(this)" title="Collapse/Expand"><%= parent_starts_collapsed ? "▸" : "▾" %></span>
+                <% end %>
+                <% if depth > 0 %><span class="tree-indent"><%= prefix %></span><% end %>
+                <% if type == "sql" && detail.length > 60 %>
+                  <div class="sql-wrap" onclick="event.stopPropagation()">
+                    <span class="sql-toggle" onclick="var w=this.parentElement;w.classList.toggle('open');this.textContent=w.classList.contains('open')?'\u25BE':'\u25B8'">&#x25B8;</span>
+                    <span class="sql-text"><%= detail %></span>
+                  </div>
+                <% elsif type == "sql" %>
+                  <span class="sql-text"><%= detail %></span>
+                <% else %>
+                  <span class="mono"><%= detail %></span>
+                <% end %>
+                <% if source %>
+                  <div class="source"><%= source %></div>
+                <% end %>
+              </div>
+            </td>
+            <td>
+              <div class="bar-container">
+                <div class="bar-fill" style="margin-left:<%= left_pct %>%; width:<%= width_pct %>%; background:<%= bar_color %>"></div>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% else %>
+  <div class="empty-state">
+    <div class="empty-title">No segments captured</div>
+    <div class="empty-hint">Segments appear when SQL queries, view renders, or HTTP calls are instrumented.</div>
+  </div>
+<% end %>

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

@@ -0,0 +1,124 @@
+<% content_for :title, "Overview" %>
+<% content_for :subtitle, "Application Performance Monitor" %>
+
+<%= render "catpm/shared/page_nav", active: "performance" %>
+
+<%# ─── Time Range ─── %>
+<div class="time-range">
+  <% Catpm::ApplicationHelper::RANGE_KEYS.each do |r| %>
+    <a href="<%= catpm.status_index_path(range: r) %>" class="<%= 'active' if @range == r %>"><%= r %></a>
+  <% end %>
+  <span style="margin-left:auto; font-size:12px; color:var(--text-2)">
+    Updated <%= Time.current.strftime("%H:%M:%S") %> ·
+    <span id="refresh-status">Refreshing in <span id="refresh-countdown">30</span>s</span>
+    <a href="#" id="refresh-toggle" onclick="toggleAutoRefresh(event)" style="margin-left:4px; color:var(--text-2)">Pause</a>
+  </span>
+</div>
+
+<script>
+  (function() {
+    var seconds = 30, paused = false, timer;
+    var countdownEl = document.getElementById('refresh-countdown');
+    var statusEl = document.getElementById('refresh-status');
+    var toggleEl = document.getElementById('refresh-toggle');
+    function tick() {
+      if (paused) return;
+      seconds--;
+      if (seconds <= 0) { location.reload(); return; }
+      countdownEl.textContent = seconds;
+      timer = setTimeout(tick, 1000);
+    }
+    timer = setTimeout(tick, 1000);
+    window.toggleAutoRefresh = function(e) {
+      e.preventDefault();
+      paused = !paused;
+      if (paused) {
+        clearTimeout(timer);
+        statusEl.textContent = 'Auto-refresh paused';
+        toggleEl.textContent = 'Resume';
+      } else {
+        statusEl.innerHTML = 'Refreshing in <span id="refresh-countdown">' + seconds + '</span>s';
+        countdownEl = document.getElementById('refresh-countdown');
+        toggleEl.textContent = 'Pause';
+        timer = setTimeout(tick, 1000);
+      }
+    };
+  })();
+</script>
+
+<%# ─── Hero Metrics ─── %>
+<div class="grid-hero">
+  <div class="card">
+    <div class="label">Requests / min</div>
+    <div class="value"><%= @requests_per_min %></div>
+    <div class="detail"><%= @recent_count %> total &middot; <%= range_label(@range) %></div>
+    <div class="sparkline"><%= sparkline_svg(@sparkline_requests, width: 200, height: 48, color: "var(--accent)", fill: true, time_labels: @sparkline_times) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Error Rate</div>
+    <div class="value"><%= @error_rate %>%</div>
+    <div class="detail"><%= @sparkline_errors.sum %> errors &middot; <%= range_label(@range) %></div>
+    <div class="sparkline"><%= sparkline_svg(@sparkline_errors, width: 200, height: 48, color: "var(--red)", fill: true, time_labels: @sparkline_times) %></div>
+  </div>
+  <div class="card">
+    <div class="label">Avg Response Time</div>
+    <div class="value"><%= format_duration(@recent_avg_duration) %></div>
+    <div class="detail"><%= @total_endpoint_count %> endpoints tracked</div>
+    <div class="sparkline"><%= sparkline_svg(@sparkline_durations, width: 200, height: 48, color: "var(--accent)", fill: true, labels: @sparkline_durations.map { |d| format_duration(d) }, time_labels: @sparkline_times) %></div>
+  </div>
+</div>
+
+<%# ─── Endpoints ─── %>
+<h2>Endpoints <% if @total_endpoint_count > @endpoint_count %><span class="text-muted" style="font-weight:400; font-size:13px">(showing <%= @endpoint_count %> of <%= @total_endpoint_count %>)</span><% end %></h2>
+<%= section_description("Endpoints active in the selected time range.") %>
+<% ep_extra = { range: @range }; ep_extra[:kind] = @kind_filter if @kind_filter %>
+<% if @endpoints.any? || @kind_filter.present? %>
+  <div class="filters">
+    <% @available_kinds.each do |k| %>
+      <a href="<%= catpm.status_index_path(range: @range, kind: @kind_filter == k ? nil : k) %>" class="filter-pill<%= ' active' if @kind_filter == k %>"><%= k %></a>
+    <% end %>
+  </div>
+<% end %>
+<% if @endpoints.any? %>
+  <div class="table-scroll">
+  <table id="endpoints-table">
+    <thead>
+      <tr>
+        <th>Kind</th>
+        <th><%= sort_header("Target", "target", @sort, @dir, extra_params: ep_extra) %></th>
+        <th><%= sort_header("Count", "total_count", @sort, @dir, extra_params: ep_extra) %></th>
+        <th><%= sort_header("Avg", "avg_duration", @sort, @dir, extra_params: ep_extra) %></th>
+        <th><%= sort_header("Max", "max_duration", @sort, @dir, extra_params: ep_extra) %></th>
+        <th><%= sort_header("Fail", "total_failures", @sort, @dir, extra_params: ep_extra) %></th>
+        <th><%= sort_header("Last Seen", "last_seen", @sort, @dir, extra_params: ep_extra) %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @endpoints.each do |ep| %>
+        <tr class="linked">
+          <td><a href="<%= catpm.endpoint_path(kind: ep[:kind], target: ep[:target], operation: ep[:operation]) %>" class="row-link"><%= type_badge(ep[:kind]) %></a></td>
+          <td class="mono"><%= ep[:target] %><%= " #{ep[:operation]}" if ep[:operation].present? %></td>
+          <td><%= ep[:total_count] %></td>
+          <td class="mono"><%= format_duration(ep[:avg_duration]) %></td>
+          <td class="mono"><%= format_duration(ep[:max_duration]) %></td>
+          <td><%= ep[:total_failures] %></td>
+          <td><%= time_with_tooltip(ep[:last_seen]) %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+  </div>
+  <% ep_page_extra = { range: @range, sort: @sort, dir: @dir }; ep_page_extra[:kind] = @kind_filter if @kind_filter %>
+  <%= pagination_nav(@page, @total_endpoint_count, Catpm::StatusController::PER_PAGE, extra_params: ep_page_extra) %>
+<% else %>
+  <div class="empty-state">
+    <% if @kind_filter %>
+      <div class="empty-title">No matching endpoints</div>
+      <div class="empty-hint">No <strong><%= @kind_filter %></strong> endpoints found in this time range.</div>
+    <% else %>
+      <div class="empty-title">No endpoints tracked yet</div>
+      <div class="empty-hint">Make some requests to your application and they'll appear here after the next flush.</div>
+    <% end %>
+  </div>
+<% end %>
+