flare 0.1.0

data/app/views/flare/requests/show.html.erb

@@ -0,0 +1,498 @@
+<%
+  # Get root span properties
+  root_props = @root_span ? @root_span[:properties] : {}
+  http_method = root_props["http.method"]
+  http_status = root_props["http.status_code"]
+  http_target = root_props["http.target"]
+  controller = root_props["code.namespace"]
+  action = root_props["code.function"]
+
+  # Calculate total duration from root span
+  total_duration_ms = @root_span ? @root_span[:duration_ms] : 1
+  root_start = @root_span ? @root_span[:start_timestamp] : 0
+  started_at = @root_span ? Time.at(@root_span[:start_timestamp] / 1_000_000_000.0) : nil
+
+  # Count span categories
+  span_counts = @child_spans.each_with_object(Hash.new(0)) do |span, counts|
+    counts[span_category(span)] += 1
+  end
+%>
+
+<div class="page-header">
+  <div class="detail-header">
+    <div class="detail-header-left">
+      <div class="detail-title">
+        <span class="badge badge-<%= http_method.to_s.downcase %>"><%= http_method || "GET" %></span>
+        <% status_class = case http_status.to_s
+           when /^2/ then "success"
+           when /^[45]/ then "error"
+           when /^3/ then "warning"
+           else "warning"
+           end %>
+        <span class="badge badge-status badge-<%= status_class %>"><%= http_status %></span>
+        <h1><%= controller && action ? "#{controller}##{action}" : @request[:name] %></h1>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="page-body">
+  <div class="card">
+    <div class="tabs">
+      <a class="tab active" onclick="showTab('timeline')">Timeline (<%= @child_spans.size %>)</a>
+      <a class="tab" onclick="showTab('details')">Details</a>
+    </div>
+
+    <div id="tab-details" class="tab-content">
+      <%
+        # Group properties for cleaner display
+        user_agent = root_props["http.user_agent"]
+        route_pattern = root_props["http.route"]
+
+        # Properties to exclude from "other" section (already shown elsewhere)
+        shown_keys = %w[
+          http.method http.status_code http.target http.scheme http.host
+          code.namespace code.function http.route http.user_agent
+        ]
+        other_props = root_props.reject { |k, v| shown_keys.include?(k) || v.is_a?(Hash) || v.is_a?(Array) }
+      %>
+      <div class="details-sections">
+        <!-- Request Section -->
+        <div class="details-section">
+          <div class="section-header">
+            <div class="section-icon request">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.66 0 3-4.03 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4.03-3-9s1.34-9 3-9"/>
+              </svg>
+            </div>
+            <span class="section-title">Request</span>
+          </div>
+          <div class="section-grid">
+            <div class="detail-item">
+              <span class="detail-label">Duration</span>
+              <span class="detail-value prominent"><%= format_duration(total_duration_ms) %></span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Status</span>
+              <span class="detail-value">
+                <% status_dot_class = case http_status.to_s
+                   when /^2/ then "success"
+                   when /^[45]/ then "error"
+                   else "warning"
+                   end %>
+                <span class="status-dot <%= status_dot_class %>"></span><%= http_status %>
+              </span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Method</span>
+              <span class="detail-value"><%= http_method || "GET" %></span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Time</span>
+              <span class="detail-value"><%= started_at&.strftime("%b %d, %Y at %H:%M:%S") %></span>
+            </div>
+            <div class="detail-item full-width">
+              <span class="detail-label">Path</span>
+              <span class="detail-value mono"><%= http_target %></span>
+            </div>
+            <% if root_props["http.host"] %>
+              <div class="detail-item">
+                <span class="detail-label">Host</span>
+                <span class="detail-value mono"><%= root_props["http.host"] %></span>
+              </div>
+            <% end %>
+            <% if root_props["http.scheme"] %>
+              <div class="detail-item">
+                <span class="detail-label">Scheme</span>
+                <span class="detail-value"><%= root_props["http.scheme"] %></span>
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <!-- Route Section -->
+        <% if controller || action || route_pattern %>
+          <div class="details-section">
+            <div class="section-header">
+              <div class="section-icon route">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="16 18 22 12 16 6"></polyline>
+                  <polyline points="8 6 2 12 8 18"></polyline>
+                </svg>
+              </div>
+              <span class="section-title">Route</span>
+            </div>
+            <div class="section-grid">
+              <% if controller %>
+                <div class="detail-item">
+                  <span class="detail-label">Controller</span>
+                  <span class="detail-value mono"><%= controller %></span>
+                </div>
+              <% end %>
+              <% if action %>
+                <div class="detail-item">
+                  <span class="detail-label">Action</span>
+                  <span class="detail-value mono"><%= action %></span>
+                </div>
+              <% end %>
+              <% if route_pattern %>
+                <div class="detail-item full-width">
+                  <span class="detail-label">Route Pattern</span>
+                  <span class="detail-value mono secondary"><%= route_pattern %></span>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Client Section -->
+        <% if user_agent %>
+          <div class="details-section">
+            <div class="section-header">
+              <div class="section-icon client">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                  <line x1="8" y1="21" x2="16" y2="21"></line>
+                  <line x1="12" y1="17" x2="12" y2="21"></line>
+                </svg>
+              </div>
+              <span class="section-title">Client</span>
+            </div>
+            <div class="section-grid">
+              <div class="detail-item full-width">
+                <span class="detail-label">User Agent</span>
+                <span class="detail-value secondary" style="font-size: 0.75rem;"><%= user_agent %></span>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Other Properties Section -->
+        <% if other_props.any? %>
+          <div class="details-section">
+            <div class="section-header">
+              <div class="section-icon other">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="1"></circle>
+                  <circle cx="19" cy="12" r="1"></circle>
+                  <circle cx="5" cy="12" r="1"></circle>
+                </svg>
+              </div>
+              <span class="section-title">Additional Properties</span>
+            </div>
+            <div class="section-grid">
+              <% other_props.each do |key, value| %>
+                <div class="detail-item">
+                  <span class="detail-label"><%= key.to_s.split(".").last.titleize %></span>
+                  <span class="detail-value mono truncate" title="<%= value %>"><%= value %></span>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div id="tab-timeline" class="tab-content active">
+      <% if @child_spans.blank? %>
+        <div class="empty-clues">
+          <i class="bi bi-clock-history" style="font-size: 2rem; color: var(--cb-warm-gray-light);"></i>
+          <p>No timeline events recorded for this request.</p>
+        </div>
+      <% else %>
+        <div class="legend">
+          <div class="legend-item clickable active" data-filter="all" onclick="filterSpans('all')"><div class="legend-color all"></div> All (<%= @child_spans.size %>)</div>
+          <% if span_counts["sql"] > 0 %><div class="legend-item clickable" data-filter="sql" onclick="filterSpans('sql')"><div class="legend-color sql"></div> SQL (<%= span_counts["sql"] %>)</div><% end %>
+          <% if span_counts["cache"] > 0 %><div class="legend-item clickable" data-filter="cache" onclick="filterSpans('cache')"><div class="legend-color cache"></div> Cache (<%= span_counts["cache"] %>)</div><% end %>
+          <% if span_counts["view"] > 0 %><div class="legend-item clickable" data-filter="view" onclick="filterSpans('view')"><div class="legend-color view"></div> View (<%= span_counts["view"] %>)</div><% end %>
+          <% if span_counts["http"] > 0 %><div class="legend-item clickable" data-filter="http" onclick="filterSpans('http')"><div class="legend-color http"></div> HTTP (<%= span_counts["http"] %>)</div><% end %>
+          <% if span_counts["mailer"] > 0 %><div class="legend-item clickable" data-filter="mailer" onclick="filterSpans('mailer')"><div class="legend-color mailer"></div> Mailer (<%= span_counts["mailer"] %>)</div><% end %>
+          <% if span_counts["job"] > 0 %><div class="legend-item clickable" data-filter="job" onclick="filterSpans('job')"><div class="legend-color job"></div> Job (<%= span_counts["job"] %>)</div><% end %>
+          <% if span_counts["controller"] > 0 %><div class="legend-item clickable" data-filter="controller" onclick="filterSpans('controller')"><div class="legend-color controller"></div> Controller (<%= span_counts["controller"] %>)</div><% end %>
+          <% if span_counts["other"] > 0 %><div class="legend-item clickable" data-filter="other" onclick="filterSpans('other')"><div class="legend-color other"></div> Other (<%= span_counts["other"] %>)</div><% end %>
+          <div style="margin-left: auto; display: flex; gap: 0.5rem;">
+            <button type="button" onclick="collapseAll()" class="copy-ai-btn">
+              <i class="bi bi-arrows-collapse"></i>
+              Collapse All
+            </button>
+            <button type="button" onclick="copyForAI()" class="copy-ai-btn" id="copy-ai-btn">
+              <i class="bi bi-clipboard" id="copy-ai-icon"></i>
+              <span id="copy-ai-text">Copy for AI</span>
+            </button>
+          </div>
+        </div>
+
+        <div style="padding: 0.75rem;">
+          <div class="waterfall-header">
+            <div>Event</div>
+            <div>Duration</div>
+          </div>
+
+          <div class="waterfall">
+            <% @child_spans.each_with_index do |span, index| %>
+              <%
+                offset_ns = span[:start_timestamp] - root_start
+                offset_ms = offset_ns / 1_000_000.0
+                left = (offset_ms / [total_duration_ms, 1].max * 100).clamp(0, 99.5)
+                width = (span[:duration_ms] / [total_duration_ms, 1].max * 100).clamp(0.5, [0.5, 100 - left].max)
+                category = span_category(span)
+
+                # Generate display name
+                props = span[:properties] || {}
+                sql_statement = nil
+                display_name = if span[:name] == "instantiation.active_record"
+                  # Show "User Instantiation (23)" format
+                  class_name = props["class_name"] || "Record"
+                  count = props["record_count"]
+                  count ? "#{class_name} Instantiation (#{count})" : "#{class_name} Instantiation"
+                elsif category == "sql"
+                  sql_statement = props["db.statement"]
+                  props["name"] || span[:name]
+                elsif category == "cache"
+                  key = props["key"]
+                  op = span[:name].to_s.sub(".active_support", "").sub("cache_", "")
+                  key ? "#{op}: #{key.to_s.truncate(80)}" : span[:name]
+                elsif category == "view"
+                  identifier = props["identifier"] || props["code.filepath"]
+                  if identifier
+                    identifier.to_s.sub(/^.*\/app\/views\//, "")
+                  else
+                    span[:name]
+                  end
+                elsif category == "http"
+                  url = props["http.url"] || props["http.target"]
+                  method = props["http.method"]
+                  "#{method} #{url}".strip.presence || span[:name]
+                elsif category == "controller"
+                  ns = props["code.namespace"]
+                  fn = props["code.function"]
+                  ns && fn ? "#{ns}##{fn}" : span[:name]
+                else
+                  span[:name]
+                end
+              %>
+              <div class="waterfall-row" onclick="toggleSpan(<%= index %>)" id="row-<%= index %>" data-span-type="<%= category %>" <% if sql_statement.present? %>data-sql="<%= sql_statement.truncate(500).gsub('"', "'") %>"<% end %>>
+                <div class="waterfall-bar-container">
+                  <div class="waterfall-bar <%= category %>" style="left: <%= left %>%; width: <%= width %>%;"></div>
+                  <span class="waterfall-label"><%= display_name %></span>
+                  <span class="waterfall-duration"><%= format_duration(span[:duration_ms]) %></span>
+                </div>
+              </div>
+              <div class="span-detail <%= category %>" id="span-<%= index %>">
+                <pre><code><%= format_content(span[:properties]) %></code></pre>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Data for Copy for AI feature
+  const requestData = <%= {
+    name: @request[:name],
+    duration_ms: total_duration_ms,
+    http_method: http_method,
+    http_status: http_status,
+    http_target: http_target,
+    controller: controller,
+    action: action
+  }.to_json.html_safe %>;
+
+  const spansData = <%= @child_spans.map { |span|
+    {
+      name: span[:name],
+      duration_ms: span[:duration_ms],
+      offset_ms: (span[:start_timestamp] - root_start) / 1_000_000.0,
+      properties: span[:properties]
+    }
+  }.to_json.html_safe %>;
+
+  function formatDuration(ms) {
+    if (ms === null || ms === undefined) return '0ms';
+    if (ms >= 1000) return (ms / 1000).toFixed(2) + 's';
+    return ms.toFixed(2) + 'ms';
+  }
+
+  function getSpanCategory(name) {
+    name = (name || '').toLowerCase();
+    if (name.includes('sql') || name.includes('mysql') || name.includes('postgres') || name.includes('sqlite')) return 'sql';
+    if (name.includes('cache')) return 'cache';
+    if (name.includes('render') || name.includes('view')) return 'view';
+    if (name.includes('http') || name.includes('net_http') || name.includes('faraday')) return 'http';
+    if (name.includes('mail')) return 'mailer';
+    if (name.includes('job') || name.includes('active_job')) return 'job';
+    if (name.includes('action_controller') || name.includes('process_action')) return 'controller';
+    return 'other';
+  }
+
+  function copyForAI() {
+    let output = [];
+
+    output.push('> Given this Rails request trace, how would you improve performance? What information is missing that would help diagnose issues?');
+    output.push('');
+
+    const method = requestData.http_method || 'GET';
+    const status = requestData.http_status || '200';
+    output.push('# ' + method + ' ' + requestData.name + ' [' + status + '] - ' + formatDuration(requestData.duration_ms));
+    if (requestData.controller && requestData.action) {
+      output.push('Controller: ' + requestData.controller + '#' + requestData.action);
+    }
+    output.push('');
+
+    output.push('## Performance Summary');
+    output.push('');
+    output.push('- **Total:** ' + formatDuration(requestData.duration_ms));
+
+    const sqlSpans = spansData.filter(function(s) { return getSpanCategory(s.name) === 'sql'; });
+    if (sqlSpans.length > 0) {
+      const sqlTotalMs = sqlSpans.reduce(function(sum, s) { return sum + (s.duration_ms || 0); }, 0);
+      output.push('- **SQL:** ' + sqlSpans.length + ' queries, ' + formatDuration(sqlTotalMs) + ' total');
+
+      const slowest = sqlSpans.slice().sort(function(a, b) { return (b.duration_ms || 0) - (a.duration_ms || 0); }).slice(0, 3);
+      if (slowest.length > 0 && slowest[0].duration_ms > 1) {
+        const slowList = slowest.map(function(s) {
+          var stmt = (s.properties && s.properties['db.statement']) ? s.properties['db.statement'].substring(0, 50) : s.name;
+          return stmt + ' (' + formatDuration(s.duration_ms) + ')';
+        }).join(', ');
+        output.push('- **Slowest queries:** ' + slowList);
+      }
+    }
+
+    const viewSpans = spansData.filter(function(s) { return getSpanCategory(s.name) === 'view'; });
+    if (viewSpans.length > 0) {
+      const viewTotalMs = viewSpans.reduce(function(sum, s) { return sum + (s.duration_ms || 0); }, 0);
+      output.push('- **Views:** ' + viewSpans.length + ' renders, ' + formatDuration(viewTotalMs) + ' total');
+    }
+
+    output.push('');
+    output.push('## Timeline');
+    output.push('');
+
+    spansData.forEach(function(span) {
+      const offset = formatDuration(span.offset_ms);
+      const duration = formatDuration(span.duration_ms);
+      const props = span.properties || {};
+      let name = span.name;
+      let extra = '';
+
+      const category = getSpanCategory(span.name);
+      if (category === 'sql' && props['db.statement']) {
+        name = 'SQL';
+        extra = props['db.statement'];
+      } else if (category === 'view' && props['identifier']) {
+        name = 'View';
+        extra = props['identifier'].replace(/.*\/app\/views\//, '');
+      } else if (category === 'http') {
+        name = 'HTTP';
+        extra = ((props['http.method'] || '') + ' ' + (props['http.url'] || props['http.target'] || '')).trim();
+      }
+
+      let line = offset.padStart(8) + ' | ' + duration.padStart(8) + ' | ' + name;
+      if (extra) {
+        line += ': ' + extra;
+      }
+      output.push(line);
+    });
+
+    const text = output.join('\n');
+
+    navigator.clipboard.writeText(text).then(function() {
+      const btn = document.getElementById('copy-ai-btn');
+      const icon = document.getElementById('copy-ai-icon');
+      const label = document.getElementById('copy-ai-text');
+      btn.classList.add('copied');
+      icon.className = 'bi bi-check-lg';
+      label.textContent = 'Copied!';
+      setTimeout(function() {
+        btn.classList.remove('copied');
+        icon.className = 'bi bi-clipboard';
+        label.textContent = 'Copy for AI';
+      }, 2000);
+    });
+  }
+
+  function showTab(tabName) {
+    document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.remove('active'); });
+    document.querySelectorAll('.tab').forEach(function(el) { el.classList.remove('active'); });
+    document.getElementById('tab-' + tabName).classList.add('active');
+    event.target.classList.add('active');
+  }
+
+  function toggleSpan(index) {
+    const detail = document.getElementById('span-' + index);
+    const row = document.getElementById('row-' + index);
+
+    if (detail.classList.contains('visible')) {
+      detail.classList.remove('visible');
+      row.classList.remove('selected');
+    } else {
+      detail.classList.add('visible');
+      row.classList.add('selected');
+    }
+  }
+
+  function collapseAll() {
+    document.querySelectorAll('.span-detail.visible').forEach(function(el) {
+      el.classList.remove('visible');
+    });
+    document.querySelectorAll('.waterfall-row.selected').forEach(function(el) {
+      el.classList.remove('selected');
+    });
+  }
+
+  function filterSpans(filterType) {
+    document.querySelectorAll('.legend-item.clickable').forEach(function(el) {
+      el.classList.remove('active');
+    });
+    document.querySelector('.legend-item[data-filter="' + filterType + '"]').classList.add('active');
+
+    document.querySelectorAll('.waterfall-row').forEach(function(row) {
+      const spanType = row.getAttribute('data-span-type');
+      if (filterType === 'all' || spanType === filterType) {
+        row.classList.remove('hidden');
+      } else {
+        row.classList.add('hidden');
+        row.classList.remove('selected');
+      }
+    });
+
+    document.querySelectorAll('.span-detail').forEach(function(detail) {
+      const index = detail.id.replace('span-', '');
+      const row = document.getElementById('row-' + index);
+      if (row.classList.contains('hidden')) {
+        detail.classList.add('hidden-by-filter');
+        detail.classList.remove('visible');
+      } else {
+        detail.classList.remove('hidden-by-filter');
+      }
+    });
+  }
+
+  // SQL tooltip
+  document.addEventListener('DOMContentLoaded', function() {
+    const sqlTooltip = document.getElementById('sql-tooltip');
+    let tooltipTimeout;
+
+    document.querySelectorAll('.waterfall-row[data-sql]').forEach(function(row) {
+      row.addEventListener('mouseenter', function() {
+        const sql = row.getAttribute('data-sql');
+        if (sql && !row.classList.contains('selected')) {
+          tooltipTimeout = setTimeout(function() {
+            sqlTooltip.textContent = sql;
+            sqlTooltip.classList.add('visible');
+          }, 200);
+        }
+      });
+
+      row.addEventListener('mouseleave', function() {
+        clearTimeout(tooltipTimeout);
+        sqlTooltip.classList.remove('visible');
+      });
+    });
+  });
+</script>
+
+<div id="sql-tooltip"></div>

data/app/views/flare/spans/index.html.erb

@@ -0,0 +1,112 @@
+<%
+  current_path = send("#{@category}_spans_path")
+%>
+
+<div class="page-header">
+  <h1 class="page-title"><%= page_title %></h1>
+  <div class="filters">
+    <%= form_tag(current_path, method: :get, id: "filter-form") do %>
+      <%= text_field_tag :name, params[:name], placeholder: "Search...", class: "filter-select", style: "min-width: 200px;", onchange: "this.form.submit()" %>
+    <% end %>
+  </div>
+</div>
+
+<div class="page-body">
+  <div class="card">
+    <div class="card-body">
+      <% if @spans.blank? %>
+        <div class="empty-state">
+          <div class="empty-state-icon">
+            <i class="bi bi-search" style="font-size: 1.5rem;"></i>
+          </div>
+          <h3>No <%= page_title.downcase %> found</h3>
+          <p>Data will appear here as your application processes requests.</p>
+        </div>
+      <% else %>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th><%= page_title.singularize %></th>
+              <% if @category == "http" %>
+                <th style="width: 70px; text-align: right;">Verb</th>
+                <th style="width: 70px; text-align: right;">Status</th>
+              <% elsif @category == "cache" %>
+                <th style="width: 100px; text-align: right;">Operation</th>
+              <% end %>
+              <th style="width: 100px; text-align: right;">Duration</th>
+              <th style="width: 120px; text-align: right;">Happened</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @spans.each do |span| %>
+              <% started_at = Time.at(span[:start_timestamp] / 1_000_000_000.0) rescue nil %>
+              <% display_info = span_display_info(span, @category) %>
+              <tr onclick="navigateIfNotSelecting('<%= span_path(span[:id], category: @category) %>')" style="cursor: pointer;">
+                <td class="path-cell">
+                  <span class="span-name path-text" title="<%= display_info[:primary] %>"><%= display_info[:primary] %></span>
+                  <% if display_info[:secondary].present? %>
+                    <span class="path-subtext"><%= display_info[:secondary] %></span>
+                  <% end %>
+                </td>
+                <% if @category == "http" %>
+                  <td style="text-align: right;">
+                    <% if display_info[:http_method] %>
+                      <span class="badge badge-<%= display_info[:http_method].to_s.downcase %>"><%= display_info[:http_method] %></span>
+                    <% end %>
+                  </td>
+                  <td style="text-align: right;">
+                    <% if display_info[:http_status] %>
+                      <%
+                        status_class = case display_info[:http_status].to_s
+                          when /^2/ then "success"
+                          when /^[45]/ then "error"
+                          when /^3/ then "warning"
+                          else "warning"
+                        end
+                      %>
+                      <span class="badge badge-status badge-<%= status_class %>"><%= display_info[:http_status] %></span>
+                    <% end %>
+                  </td>
+                <% elsif @category == "cache" %>
+                  <td style="text-align: right;">
+                    <% if display_info[:cache_op] %>
+                      <%
+                        cache_class = case display_info[:cache_op].to_s
+                          when /hit/ then "success"
+                          when /write/ then "warning"
+                          when /delete/ then "error"
+                          else "other"
+                        end
+                      %>
+                      <span class="badge badge-status badge-<%= cache_class %>"><%= display_info[:cache_op] %></span>
+                    <% end %>
+                  </td>
+                <% end %>
+                <td class="duration" style="text-align: right;"><%= format_duration(span[:duration_ms]) %></td>
+                <td class="timestamp" style="text-align: right;"><%= started_at ? time_ago_in_words(started_at) : "-" %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+
+        <% if @total_count > 0 %>
+          <div class="pagination">
+            <div class="pagination-side">
+              <% if @has_prev %>
+                <%= link_to "Previous", send("#{@category}_spans_path", request.query_parameters.merge(offset: [@offset - 50, 0].max)), class: "pagination-link" %>
+              <% end %>
+            </div>
+            <div class="pagination-info">
+              <%= number_with_delimiter(@offset + 1) %> - <%= number_with_delimiter([@offset + @spans.size, @total_count].min) %> of <%= number_with_delimiter(@total_count) %>
+            </div>
+            <div class="pagination-side" style="text-align: right;">
+              <% if @has_next %>
+                <%= link_to "Next", send("#{@category}_spans_path", request.query_parameters.merge(offset: @offset + 50)), class: "pagination-link" %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>