rails_pulse 0.1.0

data/app/views/rails_pulse/components/_time_period.html.erb

@@ -0,0 +1,16 @@
+<div class="flex gap items-center justify-end mbe-4">
+  <p>Time period</p>
+  <div data-controller="rails-pulse--popover" data-rails-pulse--popover-placement-value="bottom-start">
+    <button type="button" id="menu_button" class="btn" data-rails-pulse--popover-target="button" data-action="rails-pulse--popover#toggle" aria-haspopup="true" aria-controls="menu">
+      1 month
+      <%= rails_pulse_icon 'chevron-down' %>
+    </button>
+    <div popover class="popover" style="--popover-size: 8rem;" data-rails-pulse--popover-target="menu">
+      <div id="menu" class="menu" data-controller="rails-pulse--menu" data-action="keydown.up->rails-pulse--menu#prev keydown.down->rails-pulse--menu#next" role="menu" aria-labelledby="menu_button">
+        <a class="btn menu__item" data-rails-pulse--menu-target="item" role="menuitem" href="">1 week</a>
+        <a class="btn menu__item" data-rails-pulse--menu-target="item" role="menuitem" href="">1 month</a>
+        <a class="btn menu__item" data-rails-pulse--menu-target="item" role="menuitem" href="">3 months</a>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/rails_pulse/csp_test/show.html.erb

@@ -0,0 +1,207 @@
+<% content_for :title, "CSP Compliance Test" %>
+
+<div class="p-6">
+  <h1 class="text-2xl font-bold mb-4">Content Security Policy Compliance Test</h1>
+
+  <p class="text-subtle mb-6">This page tests Rails Pulse components under strict CSP policies to ensure all assets and functionality work safely.</p>
+
+    <div class="flex flex-col gap">
+
+      <!-- Icon Controller Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">Icon Controller Test</h2>
+          <p class="text-subtle mb-4">Testing CSP-safe icon rendering with pre-compiled assets:</p>
+
+          <div class="flex gap items-center mb-3">
+            <span
+              data-controller="rails-pulse--icon"
+              data-rails-pulse--icon-name-value="menu"
+              data-rails-pulse--icon-width-value="24"
+              data-rails-pulse--icon-height-value="24"
+              class="loading error loaded"
+            ></span>
+            <span class="mis-2">Menu Icon</span>
+          </div>
+
+          <div class="flex gap items-center mb-3">
+            <span
+              data-controller="rails-pulse--icon"
+              data-rails-pulse--icon-name-value="check"
+              data-rails-pulse--icon-width-value="20"
+              data-rails-pulse--icon-height-value="20"
+            ></span>
+            <span class="mis-2">Check Icon</span>
+          </div>
+
+          <div class="flex gap items-center">
+            <span
+              data-controller="rails-pulse--icon"
+              data-rails-pulse--icon-name-value="nonexistent"
+              data-rails-pulse--icon-width-value="16"
+              data-rails-pulse--icon-height-value="16"
+            ></span>
+            <span class="mis-2">Missing Icon (should show placeholder)</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Popover Controller Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">Popover Controller Test</h2>
+          <p class="text-subtle mb-4">Testing CSP-safe popover positioning:</p>
+
+          <div data-controller="rails-pulse--popover">
+            <button
+              data-rails-pulse--popover-target="button"
+              data-action="click->rails-pulse--popover#toggle"
+              class="btn btn--primary"
+            >
+              Show Popover
+            </button>
+
+            <div
+              data-rails-pulse--popover-target="menu"
+              popover="auto"
+              class="bg-white border rounded-md shadow-md p-3"
+            >
+              <p class="mb-2">This popover uses CSS custom properties for positioning (CSP-safe)</p>
+              <p class="text-subtle">No inline styles are used.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Context Menu Controller Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">Context Menu Controller Test</h2>
+          <p class="text-subtle mb-4">Testing CSP-safe context menu positioning:</p>
+
+          <div data-controller="rails-pulse--context-menu">
+            <div
+              class="card p-4 border border-dark bg-shade text-center"
+              data-action="contextmenu->rails-pulse--context-menu#show"
+            >
+              Right-click me to show context menu
+            </div>
+
+            <div
+              data-rails-pulse--context-menu-target="menu"
+              popover="auto"
+              class="bg-white border rounded-md shadow-md"
+            >
+              <div class="p-2">
+                <button class="block i-full text-start p-2 hover:bg-shade">Copy</button>
+                <button class="block i-full text-start p-2 hover:bg-shade">Paste</button>
+                <button class="block i-full text-start p-2 hover:bg-shade">Delete</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Index Controller Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">Index Controller Test (Turbo Frame)</h2>
+          <p class="text-subtle mb-4">Testing CSP-safe DOM manipulation for Turbo Frame updates:</p>
+
+          <turbo-frame id="csp-test-frame">
+            <div class="bg-shade border border-main rounded-md p-4">
+              <p class="mb-2">This content can be updated via Turbo Frame requests using CSP-safe DOM methods.</p>
+              <p class="text-subtle">No innerHTML usage - only DOM parser and appendChild methods.</p>
+            </div>
+          </turbo-frame>
+        </div>
+      </div>
+
+      <!-- Asset Loading Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">Asset Loading Test</h2>
+          <p class="text-subtle mb-4">Verifying all Rails Pulse assets load correctly under strict CSP:</p>
+
+          <div class="flex flex-col gap">
+            <div class="flex justify-between items-center">
+              <span>CSS Bundle (rails-pulse.css):</span>
+              <span id="css-status" class="badge badge--secondary">Loading...</span>
+            </div>
+
+            <div class="flex justify-between items-center">
+              <span>JavaScript Bundle (rails-pulse.js):</span>
+              <span id="js-status" class="badge badge--secondary">Loading...</span>
+            </div>
+
+            <div class="flex justify-between items-center">
+              <span>Icons Bundle (rails-pulse-icons.js):</span>
+              <span id="icons-status" class="badge badge--secondary">Loading...</span>
+            </div>
+
+            <div class="flex justify-between items-center">
+              <span>Stimulus Controllers:</span>
+              <span id="stimulus-status" class="badge badge--secondary">Loading...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- AJAX Request Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">AJAX Request Test</h2>
+          <p class="text-subtle mb-4">Testing CSP compliance for dynamic content loading:</p>
+
+          <button 
+            id="ajax-test-btn"
+            class="btn btn--primary mb-3"
+            data-testid="ajax-test-button"
+          >
+            Test AJAX Loading
+          </button>
+          
+          <div id="ajax-result" class="bg-shade border border-main rounded-md p-4">
+            <span class="text-subtle">Click button to test AJAX request...</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Chart Component Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">Chart Component Test</h2>
+          <p class="text-subtle mb-4">Testing rails_charts CSP compliance:</p>
+
+          <div id="chart-container" class="bg-shade border border-main rounded-md p-4 text-center">
+            <span class="text-subtle">Chart components would render here in a real dashboard</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- CSP Violation Test -->
+      <div class="card">
+        <div class="p-4">
+          <h2 class="text-lg font-semibold mb-3">CSP Violation Summary</h2>
+          <p class="mb-2">Check the browser console for any CSP violations.</p>
+          <p class="text-subtle mb-4">A properly implemented CSP-safe system should show zero violations.</p>
+
+          <div class="bg-shade border border-main rounded-md p-4">
+            <div class="mb-2">
+              <strong class="font-semibold">Expected Result:</strong> 
+              <span class="text-subtle">No CSP violations in browser console</span>
+            </div>
+            <div>
+              <strong class="font-semibold">Violation Count:</strong> 
+              <span id="violation-count" class="badge badge--secondary">0</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+  </div>
+</div>
+
+<%= content_for :head do %>
+  <script src="/rails-pulse-assets/csp-test.js" nonce="<%= request_nonce %>"></script>
+<% end %>

data/app/views/rails_pulse/dashboard/charts/_bar_chart.html.erb

@@ -0,0 +1 @@
+<%= bar_chart @component_data, height: "100%", options: bar_chart_options(units: "ms") %>

data/app/views/rails_pulse/dashboard/index.html.erb

@@ -0,0 +1,64 @@
+<div class="row">
+  <%= cached_component(component: "metric_card", id: "average_response_times", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "percentile_response_times", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "request_count_totals", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "error_rate_per_route", class: "grid-item block") %>
+</div>
+
+<div class="row">
+  <div class="grid-item" style="height:300px">
+    <%= cached_component(
+      component: "panel",
+      id: "dashboard_average_response_time",
+      card_classes: 'b-full',
+      title: 'Average Response Time',
+      help_heading: 'Average Response Time',
+      help_text: 'This panel measures the average server-side response time in milliseconds for all HTTP requests processed by your application. This is the time it takes from the server receiving a request until the request is returned to the client in milliseconds.',
+      actions: [{ url: routes_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }],
+      refresh_action: true,
+      content_partial: 'rails_pulse/dashboard/charts/bar_chart')
+    %>
+  </div>
+
+  <div class="grid-item">
+    <%= cached_component(
+      component: "panel",
+      id: "dashboard_p95_response_time",
+      card_classes: 'b-full',
+      title: 'Query Performance',
+      help_heading: 'Query Performance',
+      help_text: 'This panel measures the 95th percentile response time in milliseconds for queries in your application. This represents the query performance below which 95% of queries fall, indicating the upper-bound performance for most database operations.',
+      actions: [{ url: routes_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }],
+      refresh_action: true,
+      content_partial: 'rails_pulse/dashboard/charts/bar_chart')
+    %>
+  </div>
+</div>
+
+<div class="row">
+  <div class="grid-item">
+    <%= cached_component(
+      component: "panel",
+      id: "dashboard_slow_routes",
+      title: 'Slowest Routes This Week',
+      help_heading: 'Slowest Routes',
+      help_text: 'This panel shows the slowest routes in your application this week compared to last week, including average response time, week-over-week change, and total request count.',
+      refresh_action: true,
+      content_partial: 'rails_pulse/dashboard/tables/standard_table',
+      class: "table-container")
+    %>
+  </div>
+
+  <div class="grid-item">
+    <%= cached_component(
+      component: "panel",
+      id: "dashboard_slow_queries",
+      title: 'Slowest Queries This Week',
+      help_heading: 'Slowest Queries',
+      help_text: 'This panel shows the slowest database queries in your application this week, including average execution time and when they were last seen.',
+      refresh_action: true,
+      content_partial: 'rails_pulse/dashboard/tables/standard_table',
+      class: "table-container")
+    %>
+  </div>
+</div>

data/app/views/rails_pulse/dashboard/tables/_routes_table.html.erb

@@ -0,0 +1,32 @@
+<table class="table mbs-4">
+  <thead>
+    <tr>
+      <th>Route</th>
+      <th>This Week Avg (ms)</th>
+      <th>Last Week Avg (ms)</th>
+      <th>Change</th>
+      <th>Requests</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table_data.any? %>
+      <% table_data.each do |route_data| %>
+        <tr>
+          <td><%= route_data[:route_path] %></td>
+          <td class="<%= route_data[:trend] == 'worse' ? 'highlight-red' : (route_data[:trend] == 'better' ? 'highlight-green' : '') %>">
+            <%= route_data[:this_week_avg] %>
+          </td>
+          <td><%= route_data[:last_week_avg] %></td>
+          <td class="<%= route_data[:percentage_change] > 5 ? 'highlight-red' : (route_data[:percentage_change] < -5 ? 'highlight-green' : '') %>">
+            <%= route_data[:percentage_change] > 0 ? '+' : '' %><%= route_data[:percentage_change] %>%
+          </td>
+          <td><%= route_data[:request_count] %></td>
+        </tr>
+      <% end %>
+    <% else %>
+      <tr>
+        <td colspan="5" class="text-center text-subtle">No route data available for the selected time period</td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/rails_pulse/dashboard/tables/_standard_table.html.erb

@@ -0,0 +1 @@
+<%= render 'rails_pulse/components/table', table_data: @component_data %>

data/app/views/rails_pulse/operations/_operation_analysis_application.html.erb

@@ -0,0 +1,43 @@
+<% if operation.label&.match?(/(\w+)#(\w+)/) %>
+  <% controller, action = operation.label.match(/(\w+)#(\w+)/)&.captures %>
+  <dt>Controller</dt>
+  <dd><%= html_escape(controller) %></dd>
+  <dt>Action</dt>
+  <dd><%= html_escape(action) %></dd>
+<% end %>
+
+<% total_db_time = operation.request.operations
+     .where(operation_type: ["sql"])
+     .sum(:duration) %>
+<% total_view_time = operation.request.operations
+     .where(operation_type: ["template", "partial", "layout", "collection"])
+     .sum(:duration) %>
+<% pure_controller_time = operation.duration - total_db_time - total_view_time %>
+
+<% if pure_controller_time > 0 %>
+  <dt>Pure Logic Time</dt>
+  <dd>
+    <%= pure_controller_time.round(1) %>ms
+    <% if pure_controller_time > 100 %>
+      - consider optimization
+    <% end %>
+  </dd>
+<% end %>
+
+<% db_operations_count = operation.request.operations
+     .where(operation_type: ["sql"])
+     .count %>
+<% if db_operations_count > 0 %>
+  <dt>Database Queries</dt>
+  <dd>
+    <%= db_operations_count %>
+    <% if db_operations_count > 10 %>
+      - potential N+1 queries
+    <% end %>
+  </dd>
+<% end %>
+
+<% if operation.codebase_location.present? %>
+  <dt>Source</dt>
+  <dd><code><%= html_escape(operation.codebase_location.split('/').last(3).join('/')) %></code></dd>
+<% end %>

data/app/views/rails_pulse/operations/_operation_analysis_database.html.erb

@@ -0,0 +1,12 @@
+<dt>SQL Analysis</dt>
+<dd>
+  <% if operation.duration > RailsPulse.configuration.query_thresholds[:critical] %>
+    Critically slow query (><%= RailsPulse.configuration.query_thresholds[:critical] %> ms)
+  <% elsif operation.duration > RailsPulse.configuration.query_thresholds[:very_slow] %>
+    Very slow query (><%= RailsPulse.configuration.query_thresholds[:very_slow] %> ms)
+  <% elsif operation.duration > RailsPulse.configuration.query_thresholds[:slow] %>
+    Slow query (><%= RailsPulse.configuration.query_thresholds[:slow] %> ms)
+  <% else %>
+    Normal query (<<%= RailsPulse.configuration.query_thresholds[:slow] %> ms)
+  <% end %>
+</dd>

data/app/views/rails_pulse/operations/_operation_analysis_generic.html.erb

@@ -0,0 +1,15 @@
+<dt>Duration</dt>
+<dd><%= operation.duration.round(2) %>ms</dd>
+
+<dt>Operation Type</dt>
+<dd><%= operation.operation_type.humanize %></dd>
+
+<% if operation.label.present? && operation.label != operation.operation_type %>
+  <dt>Operation</dt>
+  <dd><%= html_escape(truncate(operation.label, length: 150)) %></dd>
+<% end %>
+
+<% if operation.codebase_location.present? %>
+  <dt>Source</dt>
+  <dd><code><%= html_escape(operation.codebase_location.split('/').last(3).join('/')) %></code></dd>
+<% end %>

data/app/views/rails_pulse/operations/_operation_analysis_other.html.erb

@@ -0,0 +1,69 @@
+<dt>Operation Performance</dt>
+<dd>
+  <% case operation.operation_type %>
+  <% when "cache_read", "cache_write" %>
+    <% if operation.operation_type == "cache_read" %>
+      <% if operation.duration > 10 %>
+        Slow cache read (>10ms)
+      <% else %>
+        Fast cache read
+      <% end %>
+    <% else %>
+      <% if operation.duration > 50 %>
+        Slow cache write (>50ms)
+      <% else %>
+        Fast cache write
+      <% end %>
+    <% end %>
+  <% when "http" %>
+    <% if operation.duration > 1000 %>
+      Very slow request (>1s)
+    <% elsif operation.duration > 500 %>
+      Slow request (>500ms)
+    <% else %>
+      Fast request
+    <% end %>
+  <% when "job" %>
+    <% if operation.duration > 5000 %>
+      Long-running job (>5s)
+    <% elsif operation.duration > 1000 %>
+      Moderate job (>1s)
+    <% else %>
+      Quick job
+    <% end %>
+  <% when "mailer" %>
+    <% if operation.duration > 2000 %>
+      Slow email delivery (>2s)
+    <% elsif operation.duration > 500 %>
+      Moderate delivery (>500ms)
+    <% else %>
+      Fast delivery
+    <% end %>
+  <% when "storage" %>
+    <% if operation.duration > 1000 %>
+      Slow storage operation (>1s)
+    <% elsif operation.duration > 500 %>
+      Moderate storage (>500ms)
+    <% else %>
+      Fast storage
+    <% end %>
+  <% else %>
+    Duration: <%= operation.duration.round(2) %>ms
+  <% end %>
+</dd>
+
+<% if operation.operation_type == "http" && operation.label&.match?(/https?:\/\/([^\/\s]+)/) %>
+  <% domain = operation.label.match(/https?:\/\/([^\/\s]+)/)&.captures&.first %>
+  <dt>External Service</dt>
+  <dd><%= html_escape(domain) %></dd>
+<% end %>
+
+<% if operation.label.present? && operation.label != operation.operation_type %>
+  <dt>Details</dt>
+  <dd><%= html_escape(truncate(operation.label, length: 100)) %></dd>
+<% end %>
+
+<% if operation.codebase_location.present? %>
+  <dt>Source</dt>
+  <dd><code><%= html_escape(operation.codebase_location.split('/').last(3).join('/')) %></code></dd>
+<% end %>

data/app/views/rails_pulse/operations/_operation_analysis_view.html.erb

@@ -0,0 +1,39 @@
+<dt>Code Location</dt>
+<dd>
+  <code>
+    <%= html_escape(operation.codebase_location.present? ? operation.codebase_location.split('/').last(3).join('/') : 'N/A') %>
+  </code>
+</dd>
+
+<dt>View Performance</dt>
+<dd>
+  <% if operation.duration > 100 %>
+    Slow render (>100ms)
+  <% elsif operation.duration > 50 %>
+    Moderate render (>50ms)
+  <% else %>
+    Fast render
+  <% end %>
+</dd>
+
+<% if operation.label&.include?('_') %>
+  <dt>Template Type</dt>
+  <dd>Partial template - ensure data is pre-loaded in controller</dd>
+<% end %>
+
+<% view_start = operation.occurred_at %>
+<% view_end = operation.occurred_at + operation.duration %>
+<% concurrent_db_ops = operation.request.operations
+     .where(operation_type: ["sql"])
+     .where("occurred_at >= ? AND occurred_at <= ?", view_start, view_end)
+     .count %>
+
+<% if concurrent_db_ops > 0 %>
+  <dt>Queries During Rendering</dt>
+  <dd><%= concurrent_db_ops %> database <%= 'query'.pluralize(concurrent_db_ops) %></dd>
+<% end %>
+
+<% if operation.duration > 50 %>
+  <dt>Optimization Suggestion</dt>
+  <dd>Consider fragment caching: <code>&lt;% cache do %&gt;</code></dd>
+<% end %>

data/app/views/rails_pulse/operations/show.html.erb

@@ -0,0 +1,79 @@
+<%= render 'rails_pulse/components/breadcrumbs' %>
+
+<h1>Operation <%= @operation.id %></h1>
+
+<div class="card">
+  <%= turbo_frame_tag "operation_#{@operation.id}_details" do %>
+    <dl class="descriptive-list">
+      <dt>
+        <% if @operation.operation_type == "sql" %>
+          Query
+        <% elsif ["template", "partial", "layout", "collection"].include?(@operation.operation_type) %>
+          View Render
+        <% else %>
+          <%= html_escape(@operation.label) %>
+        <% end %>
+      </dt>
+      <dd>
+        <% if @operation.operation_type == "sql" %>
+          <%= render 'rails_pulse/components/code_panel', { value: @operation.label } %>
+        <% else %>
+          <%= html_escape(@operation.label) %>
+        <% end %>
+      </dd>
+
+      <dt>Operation Type</dt>
+      <dd><pre><%= @operation.operation_type %></pre></dd>
+
+      <dt>Duration</dt>
+      <dd>
+        <%= @operation.duration.round(2) %> ms
+      </dd>
+
+      <dt>Request Impact</dt>
+      <dd>
+        <% impact = (@operation.duration / @request.duration * 100).round(1) %>
+        <%= impact %>% of total request time
+      </dd>
+
+      <dt>Occurred At</dt>
+      <dd><%= human_readable_occurred_at @operation.occurred_at %></dd>
+
+      <% begin %>
+        <%= render partial: "operation_analysis_#{categorize_operation(@operation.operation_type)}", locals: { operation: @operation } %>
+      <% rescue ActionView::MissingTemplate %>
+        <%= render partial: "operation_analysis_generic", locals: { operation: @operation } %>
+      <% end %>
+
+      <% if @performance_context.any? %>
+        <dt>Performance Comparison</dt>
+        <dd>
+          Average: <%= @performance_context[:average].round(1) %>ms<br>
+          95th Percentile: <%= @performance_context[:percentile_95].round(1) %>ms<br>
+          Based on <%= @performance_context[:count] %> recent operations
+        </dd>
+      <% end %>
+
+      <% if @related_operations.any? %>
+        <dt>Related Operations</dt>
+        <dd>
+          <%= pluralize(@related_operations.count, 'similar operation') %> in this request
+          <% if @related_operations.count > 2 %>
+            <br>Potential N+1 query pattern detected
+          <% end %>
+        </dd>
+      <% end %>
+
+      <% if @optimization_suggestions.any? %>
+        <dt>Optimization Tips</dt>
+        <dd>
+          <% @optimization_suggestions.each do |suggestion| %>
+            <div>
+              <%= suggestion[:title] %> - <%= suggestion[:description] %>
+            </div>
+          <% end %>
+        </dd>
+      <% end %>
+    </dl>
+  <% end %>
+</div>

data/app/views/rails_pulse/queries/_show_table.html.erb

@@ -0,0 +1,19 @@
+<% columns = [
+  { field: :occurred_at, label: 'Occurred At', class: 'w-auto' },
+  { field: :duration, label: 'Duration', class: 'w-32'}
+] %>
+
+<table class="table mbs-4">
+  <%= render "rails_pulse/components/table_head", columns: columns %>
+
+  <tbody>
+    <% @table_data.each do |query| %>
+      <tr>
+        <td class="whitespace-nowrap"><%= human_readable_occurred_at(query.occurred_at)  %></td>
+        <td class="whitespace-nowrap"><%= query.duration.round(2) %> ms</td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "rails_pulse/components/table_pagination" %>

data/app/views/rails_pulse/queries/_table.html.erb

@@ -0,0 +1,31 @@
+<% columns = [
+  { field: :normalized_sql, label: 'Query', class: 'w-auto' },
+  { field: :execution_count, label: 'Executions', class: 'w-24' },
+  { field: :average_query_time_ms, label: 'Avg Time', class: 'w-24' },
+  { field: :total_time_consumed, label: 'Total Time', class: 'w-28' },
+  { field: :performance_status, label: 'Status', class: 'w-16' },
+  { field: :occurred_at, label: 'Last Seen', class: 'w-32' }
+] %>
+
+<table class="table mbs-4">
+  <%= render "rails_pulse/components/table_head", columns: columns %>
+
+  <tbody>
+    <% @table_data.each do |query| %>
+      <tr>
+        <td class="whitespace-nowrap">
+          <div>
+            <%= link_to html_escape(truncate_sql(query.normalized_sql)), query_path(query), data: { turbo_frame: '_top', } %>
+          </div>
+        </td>
+        <td class="whitespace-nowrap"><%= number_with_delimiter query.execution_count %></td>
+        <td class="whitespace-nowrap"><%= query.average_query_time_ms.to_i %> ms</td>
+        <td class="whitespace-nowrap"><%= number_with_delimiter query.total_time_consumed.to_i %> ms</td>
+        <td class="whitespace-nowrap text-center"><%= query_status_indicator(query.average_query_time_ms) %></td>
+        <td class="whitespace-nowrap"><%= human_readable_occurred_at(query.occurred_at) if query.occurred_at %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "rails_pulse/components/table_pagination" %>