rails_pulse 0.1.3 → 0.2.2

data/app/models/rails_pulse/routes/tables/index.rb

@@ -2,24 +2,32 @@ module RailsPulse
   module Routes
     module Tables
       class Index
-        def initialize(ransack_query:, period_type: nil, start_time:, params:)
+        def initialize(ransack_query:, period_type: nil, start_time:, params:, disabled_tags: [])
           @ransack_query = ransack_query
           @period_type = period_type
           @start_time = start_time
           @params = params
+          @disabled_tags = disabled_tags
         end
 
         def to_table
           # Check if we have explicit ransack sorts
           has_sorts = @ransack_query.sorts.any?
 
-          base_query = @ransack_query.result(distinct: false)
+          # Store sorts for later and get result without ordering
+          # This prevents PostgreSQL GROUP BY issues with ORDER BY columns
+          base_query = @ransack_query.result(distinct: false).reorder(nil)
             .joins("INNER JOIN rails_pulse_routes ON rails_pulse_routes.id = rails_pulse_summaries.summarizable_id")
             .where(
               summarizable_type: "RailsPulse::Route",
               period_type: @period_type
             )
 
+          # Apply tag filters by excluding routes with disabled tags
+          @disabled_tags.each do |tag|
+            base_query = base_query.where.not("rails_pulse_routes.tags LIKE ?", "%#{tag}%")
+          end
+
           base_query = base_query.where(summarizable_id: @route.id) if @route
 
           # Apply grouping and aggregation
@@ -29,7 +37,8 @@ module RailsPulse
               "rails_pulse_summaries.summarizable_type",
               "rails_pulse_routes.id",
               "rails_pulse_routes.path",
-              "rails_pulse_routes.method"
+              "rails_pulse_routes.method",
+              "rails_pulse_routes.tags"
             )
             .select(
               "rails_pulse_summaries.summarizable_id",
@@ -37,6 +46,7 @@ module RailsPulse
               "rails_pulse_routes.id as route_id",
               "rails_pulse_routes.path",
               "rails_pulse_routes.method as route_method",
+              "rails_pulse_routes.tags",
               "AVG(rails_pulse_summaries.avg_duration) as avg_duration",
               "MAX(rails_pulse_summaries.max_duration) as max_duration",
               "SUM(rails_pulse_summaries.count) as count",
@@ -55,7 +65,7 @@ module RailsPulse
               grouped_query = grouped_query.order(Arel.sql("AVG(rails_pulse_summaries.avg_duration)").send(direction))
             when "max_duration_sort"
               grouped_query = grouped_query.order(Arel.sql("MAX(rails_pulse_summaries.max_duration)").send(direction))
-            when "count_sort"
+            when "count_sort", "request_count_sort"
               grouped_query = grouped_query.order(Arel.sql("SUM(rails_pulse_summaries.count)").send(direction))
             when "requests_per_minute"
               grouped_query = grouped_query.order(Arel.sql("SUM(rails_pulse_summaries.count) / 60.0").send(direction))

data/app/models/rails_pulse/summary.rb

@@ -36,9 +36,10 @@ module RailsPulse
     # Ransack configuration
     def self.ransackable_attributes(auth_object = nil)
       %w[
-        period_start period_end avg_duration max_duration count error_count
+        period_start period_end avg_duration min_duration max_duration count error_count
         requests_per_minute error_rate_percentage route_path_cont
         execution_count total_time_consumed normalized_sql
+        summarizable_id summarizable_type
       ]
     end
 
@@ -46,17 +47,16 @@ module RailsPulse
       %w[route query]
     end
 
-    # Custom ransackers for calculated fields (designed to work with GROUP BY queries)
-    ransacker :count do
-      Arel.sql("SUM(rails_pulse_summaries.count)")  # Use SUM for proper grouping
-    end
+    # Note: Basic fields like count, avg_duration, min_duration, max_duration
+    # are handled automatically by Ransack using actual database columns
 
+    # Custom ransackers for calculated fields only
     ransacker :requests_per_minute do
-      Arel.sql("SUM(rails_pulse_summaries.count) / 60.0")  # Use SUM for consistency
+      Arel.sql("rails_pulse_summaries.count / 60.0")
     end
 
     ransacker :error_rate_percentage do
-      Arel.sql("(SUM(rails_pulse_summaries.error_count) * 100.0) / SUM(rails_pulse_summaries.count)")  # Use SUM for both
+      Arel.sql("(rails_pulse_summaries.error_count * 100.0) / rails_pulse_summaries.count")
     end
 
 

data/app/services/rails_pulse/analysis/query_characteristics_analyzer.rb

@@ -38,9 +38,17 @@ module RailsPulse
 
       def count_tables
         tables = []
-        tables.concat(sql.scan(/FROM\s+(\w+)/i).flatten)
-        tables.concat(sql.scan(/JOIN\s+(\w+)/i).flatten)
-        tables.uniq.length
+
+        # Match FROM clause with various table name formats
+        # Handles: table_name, schema.table, "quoted_table", `backtick_table`
+        tables.concat(sql.scan(/FROM\s+(?:`([^`]+)`|"([^"]+)"|'([^']+)'|(\w+(?:\.\w+)?))/i).flatten.compact)
+
+        # Match JOIN clauses (INNER JOIN, LEFT JOIN, etc.)
+        tables.concat(sql.scan(/(?:INNER\s+|LEFT\s+|RIGHT\s+|FULL\s+|CROSS\s+)?JOIN\s+(?:`([^`]+)`|"([^"]+)"|'([^']+)'|(\w+(?:\.\w+)?))/i).flatten.compact)
+
+        # Remove schema prefixes for uniqueness check (schema.table -> table)
+        normalized_tables = tables.map { |table| table.split(".").last }
+        normalized_tables.uniq.length
       end
 
       def count_joins

data/app/services/rails_pulse/summary_service.rb

@@ -74,6 +74,7 @@ module RailsPulse
       route_groups = Request
         .where(occurred_at: start_time...end_time)
         .where.not(route_id: nil)
+        .joins(:route)
         .group(:route_id)
 
       # Calculate basic aggregates
@@ -132,6 +133,7 @@ module RailsPulse
       query_groups = Operation
         .where(occurred_at: start_time...end_time)
         .where.not(query_id: nil)
+        .joins(:query)
         .group(:query_id)
 
       basic_stats = query_groups.pluck(

data/app/views/layouts/rails_pulse/_global_filters.html.erb

@@ -0,0 +1,84 @@
+<% global_filters = session_global_filters %>
+<% has_global_filters = global_filters['start_time'].present? && global_filters['end_time'].present? %>
+<% has_performance_filter = global_filters['performance_threshold'].present? %>
+<% disabled_tags = global_filters['disabled_tags'] || [] %>
+<% has_tag_filters = disabled_tags.any? %>
+<% has_any_filters = has_global_filters || has_performance_filter  %>
+<% current_date_range = has_global_filters ? "#{global_filters['start_time']} to #{global_filters['end_time']}" : "" %>
+<% current_threshold = global_filters['performance_threshold'] %>
+
+<div data-controller="rails-pulse--global-filters" data-rails-pulse--global-filters-active-value="<%= has_any_filters %>">
+  <%= link_to '#', "aria-label": "Global filters", role: "button", data: { action: "rails-pulse--global-filters#open", "rails-pulse--global-filters-target": "indicator" } do %>
+    <%= rails_pulse_icon has_any_filters ? 'list-filter-plus' : 'list-filter', width: '20' %>
+  <% end %>
+
+  <div data-rails-pulse--global-filters-target="wrapper" data-action="click->rails-pulse--global-filters#closeOnClickOutside" style="display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; align-items: center; justify-content: center;">
+    <div class="dialog" data-rails-pulse--global-filters-target="dialog" style="position: relative; opacity: 1; transform: scale(1);">
+      <div class="dialog__content">
+        <h2 class="text-lg font-semibold mb-4">Global Filters</h2>
+        <p class="text-sm text-subtle mb-4">Set default time filters that persist across all pages. These can be overridden by page-specific filters.</p>
+
+        <%= form_with url: settings_global_filters_path, method: :patch, local: true, data: { action: "submit->rails-pulse--global-filters#submit" } do |form| %>
+          <div class="flex flex-col gap mb-4">
+            <div class="flex flex-col gap" style="--row-gap: 0.5rem">
+              <label for="global_date_range" class="text-sm font-medium">Date Range</label>
+              <input
+                type="text"
+                name="date_range"
+                id="global_date_range"
+                value="<%= current_date_range %>"
+                placeholder="Pick date range"
+                class="input"
+                data-controller="rails-pulse--datepicker"
+                data-rails-pulse--datepicker-mode-value="range"
+                data-rails-pulse--datepicker-show-months-value="2"
+                data-rails-pulse--datepicker-type-value="datetime"
+                data-rails-pulse--global-filters-target="dateRange"
+              />
+            </div>
+
+            <div class="flex flex-col gap" style="--row-gap: 0.5rem">
+              <label for="global_performance_threshold" class="text-sm font-medium">Performance Threshold</label>
+              <select name="performance_threshold" id="global_performance_threshold" class="input">
+                <option value="">All Requests</option>
+                <option value="slow" <%= 'selected' if current_threshold == 'slow' %>>Slow and Above</option>
+                <option value="very_slow" <%= 'selected' if current_threshold == 'very_slow' %>>Very Slow and Above</option>
+                <option value="critical" <%= 'selected' if current_threshold == 'critical' %>>Critical Only</option>
+              </select>
+              <p class="text-xs text-subtle">Filter requests/queries by performance threshold</p>
+            </div>
+
+            <div class="flex flex-col gap" style="--row-gap: 0.5rem">
+              <label class="text-sm font-medium">Tag Visibility</label>
+              <p class="text-xs text-subtle">Toggle visibility of tagged data. Unchecked tags will be hidden from all views.</p>
+              <div class="flex flex-col gap" style="--row-gap: 0.75rem">
+                <% tags = RailsPulse.configuration.tags + ["non_tagged"] %>
+                <% tags.each do |tag| %>
+                  <div class="flex items-center gap">
+                    <input
+                      type="checkbox"
+                      name="enabled_tags[]"
+                      id="tag_<%= tag %>"
+                      value="<%= tag %>"
+                      <%= 'checked="checked"' if tag == "non_tagged" ? session[:show_non_tagged] != false : !disabled_tags.include?(tag) %>
+                      class="switch"
+                      role="switch"
+                    />
+                    <label class="text-sm font-medium" for="tag_<%= tag %>">
+                      <%= tag.humanize %>
+                    </label>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-end gap">
+            <%= form.button "Clear", type: "submit", name: "clear", value: "true", class: "btn btn--borderless", formnovalidate: true %>
+            <%= form.submit "Apply Filters", class: "btn" %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/layouts/rails_pulse/_menu_items.html.erb

@@ -8,12 +8,12 @@
   <span class="overflow-ellipsis">Routes</span>
 <% end %>
 
-<%= link_to requests_path, class: 'btn sidebar-menu__button' do %>
-  <%= rails_pulse_icon 'audio-lines', width: '16' %>
-  <span class="overflow-ellipsis">Requests</span>
-<% end %>
-
 <%= link_to queries_path, class: 'btn sidebar-menu__button' do %>
   <%= rails_pulse_icon 'database', width: '16' %>
   <span class="overflow-ellipsis">Queries</span>
 <% end %>
+
+<%= link_to requests_path, class: 'btn sidebar-menu__button' do %>
+  <%= rails_pulse_icon 'audio-lines', width: '16' %>
+  <span class="overflow-ellipsis">Requests</span>
+<% end %>

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

@@ -53,10 +53,14 @@
         </nav>
       </div>
 
-      <div class="flex items-center" data-controller="rails-pulse--color-scheme">
-        <%= link_to '#', "aria-label": "Toggle color scheme", role: "button", data: { action: "rails-pulse--color-scheme#toggle" } do %>
-          <%= rails_pulse_icon 'sun', width: '48' %>
-        <% end %>
+      <div class="flex items-center gap" style="--column-gap: 0.5rem">
+        <%= render 'layouts/rails_pulse/global_filters' %>
+
+        <div data-controller="rails-pulse--color-scheme">
+          <%= link_to '#', "aria-label": "Toggle color scheme", role: "button", data: { action: "rails-pulse--color-scheme#toggle" } do %>
+            <%= rails_pulse_icon 'sun', width: '48' %>
+          <% end %>
+        </div>
       </div>
     </header>
 
@@ -65,6 +69,5 @@
         <%= yield %>
       </div>
     </main>
-
   </body>
 </html>

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

@@ -4,7 +4,7 @@
   context = data[:context]
   title = data[:title]
   summary = data[:summary]
-  line_chart_data = data[:line_chart_data]
+  chart_data = data[:chart_data]
   trend_icon = data[:trend_icon]
   trend_amount = data[:trend_amount]
   trend_text = data[:trend_text]
@@ -38,7 +38,7 @@
               }
             )
           %>
-          <%= bar_chart line_chart_data, height: "100%", options: chart_options %>
+          <%= bar_chart chart_data, height: "100%", options: chart_options %>
         </div>
       </div>
     </div>

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

@@ -26,7 +26,7 @@
         <div>
           <h4 class="text-xs font-medium text-subtle uppercase">Occurred At</h4>
           <div class="text-sm">
-            <%= operation.occurred_at.strftime("%H:%M:%S.%L") %>
+            <%= operation.occurred_at.getlocal.strftime("%H:%M:%S.%L") %>
           </div>
         </div>
       <% end %>

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

@@ -0,0 +1,20 @@
+<div class="breadcrumb-container">
+  <nav class="breadcrumb mis-2 mbs-2" aria-label="Breadcrumb">
+    <% breadcrumbs.each_with_index do |crumb, index| %>
+      <% if crumb[:current] %>
+        <span class="text-primary" aria-disabled="true" aria-current="page" role="link"><%= crumb[:title] %></span>
+      <% else %>
+        <%= link_to crumb[:title], crumb[:path] %>
+      <% end %>
+      <% unless index == breadcrumbs.length - 1 %>
+        <%= rails_pulse_icon 'chevron-right', width: 14, height: 14, class: "breadcrumb-separator mbe-1" %>
+      <% end %>
+    <% end %>
+  </nav>
+
+  <% if defined?(taggable) && taggable.present? %>
+    <div class="breadcrumb-tags">
+      <%= render 'rails_pulse/tags/tag_manager', taggable: taggable %>
+    </div>
+  <% end %>
+</div>

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

@@ -2,7 +2,7 @@
   <h4 class="text-xl mbs-1 font-bold"><%= summary %></h4>
 </div>
 <div class="chart-container chart-container--slim">
-  <%= bar_chart line_chart_data, height: "100%", options: sparkline_chart_options %>
+  <%= bar_chart chart_data, height: "100%", options: sparkline_chart_options %>
 </div>
 <div>
   <span class="badge badge--<%= trend_direction == "down" ? "positive" : "negative" %>-inverse p-0">

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

@@ -71,7 +71,7 @@
   <div class="grid-item">
     <%= render 'rails_pulse/components/panel', {
       title: 'Slowest Queries This Week',
-      help_heading: 'Slowest Queries', 
+      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.',
       actions: [{ url: queries_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }],
       card_classes: 'table-container'

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

@@ -1,4 +1,4 @@
-<%= render 'rails_pulse/components/breadcrumbs' %>
+<%= render 'rails_pulse/components/page_header' %>
 
 <h1>Operation <%= @operation.id %></h1>
 

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

@@ -12,7 +12,37 @@
         <dd><%= query.query_stats['table_count'] || 0 %></dd>
         <dt>Joins</dt>
         <dd><%= query.query_stats['join_count'] || 0 %></dd>
-        <dt>Complexity Score</dt>
+        <dt>
+          Complexity Score
+          <div data-controller="rails-pulse--popover" data-rails-pulse--popover-placement-value="bottom-start" style="display: inline-block; margin-left: 4px;">
+            <a href="#"
+              data-rails-pulse--popover-target="button"
+              data-action="rails-pulse--popover#toggle"
+              data-popovertarget="complexity-score-popover"
+              style="color: var(--gray-500); vertical-align: top;">
+              <%= rails_pulse_icon 'info', height: "14px" %>
+            </a>
+
+            <div popover class="popover card" data-rails-pulse--popover-target="menu" style="max-width: 22rem">
+              <div class="flex flex-col">
+                <h3 class="font-semibold leading-none mbe-2 uppercase text-sm">Complexity Score</h3>
+                <p class="text-sm text-subtle mbe-3">
+                  A calculated score representing query complexity based on multiple factors:
+                </p>
+                <ul class="text-sm text-subtle" style="list-style-type: disc; padding-left: 16px; margin: 0;">
+                  <li>Tables: +2 points per table</li>
+                  <li>Joins: +3 points per join</li>
+                  <li>WHERE conditions: +1 point per condition, +2 per function</li>
+                  <li>UNIONs: +4 points each</li>
+                  <li>Subqueries: +5 points each</li>
+                </ul>
+                <p class="text-sm text-subtle mbs-3">
+                  Higher scores indicate more complex queries that may need optimization.
+                </p>
+              </div>
+            </div>
+          </div>
+        </dt>
         <dd><%= query.query_stats['estimated_complexity'] || 0 %></dd>
         <dt>Has LIMIT</dt>
         <dd><%= query.query_stats['has_limit'] ? 'Yes' : 'No' %></dd>
@@ -52,36 +82,36 @@
   </div>
 </div>
 
+
 <!-- Issues Summary -->
 <% if query.issues.present? && query.issues.any? %>
-  <div class="panel panel--danger mb-4">
-    <h3 class="text-lg bold mb-3">Issues Detected</h3>
-    <ul>
-      <% query.issues.each do |issue| %>
-        <li><%= issue['description'] %></li>
-      <% end %>
-    </ul>
-  </div>
+  <hr class="mb-4" />
+  <h3 class="text-lg bold">Issues Detected</h3>
+  <ul style="list-style-type: disc; padding-left: 20px;">
+    <% query.issues.each do |issue| %>
+      <li><%= issue['description'] %></li>
+    <% end %>
+  </ul>
 <% end %>
 
+
 <!-- Suggestions -->
 <% if query.suggestions.present? && query.suggestions.any? %>
-  <div class="panel panel--info mb-4">
-    <h3 class="text-lg bold mb-3">Optimization Suggestions</h3>
-    <ul>
-      <% query.suggestions.each do |suggestion| %>
-        <li>
-          <%= suggestion['action'] %>.
-          <%= suggestion['benefit'] if suggestion['benefit'].present? %>
-        </li>
-      <% end %>
-    </ul>
-  </div>
+  <hr class="mb-4" />
+  <h3 class="text-lg bold">Optimization Suggestions</h3>
+  <ul style="list-style-type: disc; padding-left: 20px;">
+    <% query.suggestions.each do |suggestion| %>
+      <li>
+        <%= suggestion['action'] %>.
+        <%= suggestion['benefit'] if suggestion['benefit'].present? %>
+      </li>
+    <% end %>
+  </ul>
 <% end %>
 
 <!-- EXPLAIN Plan -->
 <% if query.explain_plan.present? %>
-  <%= render 'rails_pulse/components/panel', title: 'Execution Plan' do %>
-    <pre class="text-sm"><%= query.explain_plan %></pre>
-  <% end %>
+  <hr class="mb-4" />
+  <h3 class="text-lg bold">Execution Plan</h3>
+  <pre class="text-sm" style="overflow: scroll"><%= query.explain_plan %></pre>
 <% end %>

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

@@ -1,16 +1,44 @@
 <% columns = [
-  { field: :occurred_at, label: 'Timestamp', class: 'w-auto' },
-  { field: :duration, label: 'Duration', class: 'w-32'}
+  { field: :period_start, label: 'Time Period', class: 'w-auto' },
+  { field: :count, label: 'Executions', class: 'w-32'},
+  { field: :avg_duration, label: 'Avg Duration', class: 'w-32'},
+  { field: :min_duration, label: 'Min Duration', class: 'w-32'},
+  { field: :max_duration, label: 'Max Duration', class: 'w-32'}
 ] %>
 
 <table class="table mbs-4" data-controller="rails-pulse--table-sort">
   <%= render "rails_pulse/components/table_head", columns: columns %>
 
   <tbody>
-    <% @table_data.each do |query| %>
+    <% @table_data.each do |summary| %>
+      <%
+        # Determine performance class based on average duration
+        avg_duration_ms = summary.avg_duration&.round(2) || 0
+        performance_class = case avg_duration_ms
+        when 0..10 then "text-green-600"
+        when 10..50 then "text-yellow-600"
+        when 50..100 then "text-orange-600"
+        else "text-red-600"
+        end
+      %>
       <tr>
-        <td class="whitespace-nowrap"><%= human_readable_occurred_at(query.occurred_at)  %></td>
-        <td class="whitespace-nowrap"><%= query.duration.round(2) %> ms</td>
+        <td class="whitespace-nowrap">
+          <%= human_readable_summary_period(summary) %>
+        </td>
+        <td class="whitespace-nowrap text-center">
+          <span class="font-medium"><%= summary.count %></span>
+        </td>
+        <td class="whitespace-nowrap">
+          <span class="<%= performance_class %> font-medium">
+            <%= avg_duration_ms %> ms
+          </span>
+        </td>
+        <td class="whitespace-nowrap text-center">
+          <%= summary.min_duration&.round(2) || 0 %> ms
+        </td>
+        <td class="whitespace-nowrap text-center">
+          <%= summary.max_duration&.round(2) || 0 %> ms
+        </td>
       </tr>
     <% end %>
   </tbody>

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

@@ -1,9 +1,8 @@
 <% columns = [
   { field: :normalized_sql, label: 'Query', class: 'w-auto' },
+  { field: :avg_duration_sort, label: 'Average Query Time', class: 'w-44' },
   { field: :execution_count_sort, label: 'Executions', class: 'w-24' },
-  { field: :avg_duration_sort, label: 'Avg Time', class: 'w-24' },
-  { field: :total_time_consumed_sort, label: 'Total Time', class: 'w-28' },
-  { field: :performance_status, label: 'Status', class: 'w-16', sortable: false }
+  { field: nil, label: 'Tags', class: 'w-32' }
 ] %>
 
 <table class="table mbs-4" data-controller="rails-pulse--table-sort">
@@ -17,10 +16,9 @@
             <%= link_to html_escape(truncate_sql(summary.normalized_sql)), query_path(summary.query_id), data: { turbo_frame: '_top', } %>
           </div>
         </td>
-        <td class="whitespace-nowrap"><%= number_with_delimiter summary.execution_count %></td>
         <td class="whitespace-nowrap"><%= summary.avg_duration.to_i %> ms</td>
-        <td class="whitespace-nowrap"><%= number_with_delimiter summary.total_time_consumed.to_i %> ms</td>
-        <td class="whitespace-nowrap text-center"><%= query_status_indicator(summary.avg_duration) %></td>
+        <td class="whitespace-nowrap"><%= number_with_delimiter summary.execution_count %></td>
+        <td class="whitespace-nowrap"><%= display_tag_badges(summary.tags) %></td>
       </tr>
     <% end %>
   </tbody>

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

@@ -1,4 +1,4 @@
-<%= render 'rails_pulse/components/breadcrumbs' %>
+<%= render 'rails_pulse/components/page_header' %>
 
 <% unless turbo_frame_request? %>
   <div class="row">
@@ -13,13 +13,9 @@
   data-rails-pulse--index-chart-id-value="average_query_times_chart"
 >
   <%= render 'rails_pulse/components/panel', { title: 'Average Query Time', } do %>
-    <%= search_form_for @ransack_query, url: queries_path, class: "flex items-center justify-between gap mb-4" do |form| %>
+    <%= search_form_for @ransack_query, url: queries_path, class: "flex items-center justify-between gap mb-4", data: { controller: "rails-pulse--custom-range" } do |form| %>
       <div class="flex items-center grow gap">
-        <%= form.select :period_start_range,
-          RailsPulse::QueriesController::TIME_RANGE_OPTIONS,
-          { selected: @selected_time_range },
-          { class: "input" }
-        %>
+        <%= time_range_selector(form, time_range_options: RailsPulse::QueriesController::TIME_RANGE_OPTIONS, selected_time_range: @selected_time_range) %>
         <%= form.select :avg_duration,
           duration_options(:query),
           { selected: @selected_response_range },

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

@@ -1,4 +1,4 @@
-<%= render 'rails_pulse/components/breadcrumbs' %>
+<%= render 'rails_pulse/components/page_header', taggable: @query %>
 
 <% unless turbo_frame_request? %>
   <div class="row">
@@ -13,13 +13,9 @@
   data-rails-pulse--index-chart-id-value="query_responses_chart"
 >
   <%= render 'rails_pulse/components/panel', { title: 'Query Responses' } do %>
-    <%= search_form_for @ransack_query, url: query_path(@query), class: "flex items-center justify-between gap mb-4" do |form| %>
+    <%= search_form_for @ransack_query, url: query_path(@query), class: "flex items-center justify-between gap mb-4", data: { controller: "rails-pulse--custom-range" } do |form| %>
       <div class="flex items-center grow gap">
-        <%= form.select :period_start_range,
-          RailsPulse::RoutesController::TIME_RANGE_OPTIONS,
-          { selected: @selected_time_range },
-          { class: "input" }
-        %>
+        <%= time_range_selector(form, time_range_options: RailsPulse::RoutesController::TIME_RANGE_OPTIONS, selected_time_range: @selected_time_range) %>
         <%= form.select :duration,
           duration_options(:query),
           { selected: @selected_response_range },

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

@@ -1,28 +1,41 @@
-<%
-  columns = []
-  columns << { field: :route_path, label: 'Route', class: 'w-auto' } if @route.blank?
-
-  columns += [
-    { field: :occurred_at, label: 'Timestamp', class: 'w-36' },
-    { field: :duration, label: 'Response Time', class: 'w-24' },
-    { field: :status, label: 'HTTP Status', class: 'w-20' },
-    { field: :status_indicator, label: 'Status', class: 'w-16' }
-  ]
-%>
+<% columns = [
+  { field: :occurred_at, label: 'Timestamp', class: 'w-36' },
+  { field: :route_path, label: 'Route', class: 'w-auto' },
+  { field: :duration, label: 'Response Time', class: 'w-36' },
+  { field: :status, label: 'Status', class: 'w-20' },
+  { field: nil, label: 'Tags', class: 'w-32' }
+] %>
 
 <table class="table mbs-4" data-controller="rails-pulse--table-sort">
   <%= render "rails_pulse/components/table_head", columns: columns %>
 
   <tbody>
-    <% @table_data.each do |route_request| %>
+    <% @table_data.each do |request| %>
+      <%
+        # Determine performance class based on request duration
+        performance_class = case request.duration
+        when 0..100 then "text-green-600"
+        when 100..300 then "text-yellow-600"
+        when 300..1000 then "text-orange-600"
+        else "text-red-600"
+        end
+      %>
       <tr>
-        <% if @route.blank? %>
-          <td class="whitespace-nowrap"><%= link_to route_request.route.path_and_method, request_path(route_request), data: { turbo_frame: '_top' } %></td>
-        <% end %>
-        <td class="whitespace-nowrap"><%= link_to human_readable_occurred_at(route_request.occurred_at), request_path(route_request), data: { turbo_frame: '_top' } %></td>
-        <td class="whitespace-nowrap"><%= route_request.duration.round(2) %> ms</td>
-        <td class="whitespace-nowrap"><%= route_request.status %></td>
-        <td class="whitespace-nowrap text-center"><%= request_status_indicator(route_request.duration) %></td>
+        <td class="whitespace-nowrap">
+          <%= link_to human_readable_occurred_at(request.occurred_at), request_path(request), data: { turbo_frame: '_top' } %>
+        </td>
+        <td class="whitespace-nowrap">
+          <%= link_to "#{request.route.path} #{request.route.method}", route_path(request.route), data: { turbo_frame: '_top' } %>
+        </td>
+        <td class="whitespace-nowrap">
+          <span class="<%= performance_class %> font-medium">
+            <%= request.duration.round(2) %> ms
+          </span>
+        </td>
+        <td class="whitespace-nowrap">
+          <span class="text-green-600"><%= request.status %></span>
+        </td>
+        <td class="whitespace-nowrap"><%= display_tag_badges(request) %></td>
       </tr>
     <% end %>
   </tbody>