rails_vitals 0.2.0

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

@@ -0,0 +1,396 @@
+<div style="display:flex;align-items:center;gap:16px;margin-bottom:20px;">
+  <%= link_to "← Back", rails_vitals.requests_path, style: "color:#a0aec0;font-size:12px;" %>
+  <div class="page-title" style="margin:0;">Request Detail</div>
+</div>
+
+<%# Header %>
+<div class="card" style="display:flex;align-items:center;justify-content:space-between;">
+  <div>
+    <div style="font-size:42px;font-weight:bold;color:<%= score_color(@record.color) %>;">
+      <%= @record.score %>
+      <span style="font-size:16px;color:#a0aec0;">/ 100</span>
+    </div>
+  </div>
+  <div style="text-align:right;">
+    <span class="badge badge-<%= @record.color %>" style="font-size:13px;padding:4px 14px;">
+      <%= @record.label %>
+    </span>
+    <div style="color:#a0aec0;font-size:11px;margin-top:6px;"><%= @record.recorded_at.strftime("%Y-%m-%d %H:%M:%S") %></div>
+  </div>
+</div>
+
+<%# Request Info %>
+<div class="card">
+  <div class="card-title">Request Info</div>
+  <table>
+    <tbody>
+      <tr><td style="color:#a0aec0;width:140px;">Endpoint</td><td><%= @record.endpoint %></td></tr>
+      <tr><td style="color:#a0aec0;">Method</td>  <td><%= @record.http_method %></td></tr>
+      <tr><td style="color:#a0aec0;">Status</td>  <td><%= @record.response_status %></td></tr>
+      <tr><td style="color:#a0aec0;">Duration</td><td><%= @record.duration_ms&.round(1) %>ms</td></tr>
+    </tbody>
+  </table>
+</div>
+
+<%# Query Summary %>
+<div class="card">
+  <div class="card-title">Query Summary</div>
+  <table>
+    <tbody>
+      <tr><td style="color:#a0aec0;width:140px;">Total Queries</td><td><%= @record.total_query_count %></td></tr>
+      <tr><td style="color:#a0aec0;">DB Time</td>     <td><%= @record.total_db_time_ms.round(1) %>ms</td></tr>
+      <tr>
+        <td style="color:#a0aec0;">N+1 Patterns</td>
+        <td>
+          <% if @record.n_plus_one_patterns.any? %>
+            <span class="n1-badge"><%= @record.n_plus_one_patterns.size %> detected</span>
+          <% else %>
+            <span style="color:#68d391;">None detected</span>
+          <% end %>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<%# N+1 Patterns %>
+<% if @record.n_plus_one_patterns.any? %>
+  <div class="card">
+    <div class="card-title">N+1 Patterns</div>
+    <table>
+      <thead>
+        <tr>
+          <th>Query Pattern</th>
+          <th>Repeated</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @record.n_plus_one_patterns.each do |pattern, count| %>
+          <tr>
+            <td class="sql"><%= pattern %></td>
+            <td><span class="n1-badge"><%= count %>x</span></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>
+
+<%# All Queries %>
+<div class="card">
+  <div
+    class="card-title"
+    onclick="toggleCard('all_queries_table', 'all_queries_chevron_simple')"
+    style="cursor:pointer;"
+  >
+    <div style="display:flex;justify-content:space-between;align-items:center;">
+      <span>All Queries (<%= @record.queries.size %>)</span>
+      <span style="font-size:14px;" id="all_queries_chevron_simple">▼</span>
+    </div>
+  </div>
+  <table id="all_queries_table">
+    <thead>
+      <tr>
+        <th>SQL</th>
+        <th>Time</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @record.queries.sort_by { |q| -q[:duration_ms] }.each do |q| %>
+        <tr>
+          <td class="sql"><%= q[:sql] %></td>
+          <td style="white-space:nowrap;"><%= q[:duration_ms].round(1) %>ms</td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<%# Callback Map %>
+<% if @record.callbacks.any? %>
+  <div class="card">
+    <div class="card-title">
+      Callback Map
+      <span style="color:#a0aec0;font-weight:normal;margin-left:8px;">
+        <%= @record.callbacks.size %> callbacks —
+        <%= @record.total_callback_time_ms.round(1) %>ms total
+      </span>
+    </div>
+    <% @record.callbacks.group_by { |c| c[:model] }.each do |model, callbacks| %>
+      <div style="margin-bottom:16px;">
+        <div style="
+          color:#90cdf4;
+          font-size:12px;
+          font-weight:bold;
+          margin-bottom:6px;
+          padding-bottom:4px;
+          border-bottom:1px solid #2d3748;
+        ">
+          <%= model %>
+          <span style="color:#a0aec0;font-weight:normal;">
+            (<%= callbacks.size %> callbacks,
+            <%= callbacks.sum { |c| c[:duration_ms] }.round(1) %>ms)
+          </span>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Callback</th>
+              <th>Time</th>
+              <th>% of Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% callbacks.sort_by { |c| -c[:duration_ms] }.each do |cb| %>
+              <tr>
+                <td>
+                  <span style="
+                    background:<%= callback_color(cb[:kind]) %>;
+                    color:#fff;
+                    padding:1px 6px;
+                    border-radius:3px;
+                    font-size:11px;
+                  ">
+                    <%= cb[:kind] %>
+                  </span>
+                </td>
+                <td><%= cb[:duration_ms] %>ms</td>
+                <td style="color:#a0aec0;">
+                  <% pct = @record.total_callback_time_ms > 0 ?
+                    ((cb[:duration_ms] / @record.total_callback_time_ms) * 100).round(1) : 0 %>
+                  <%= pct %>%
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<%# All Queries with DNA %>
+<div class="card">
+  <div
+    class="card-title"
+    onclick="toggleCard('all_queries_table_dna', 'all_queries_chevron_dna')"
+    style="cursor:pointer;"
+  >
+    <div style="display:flex;justify-content:space-between;align-items:center;">
+      <p>
+        All Queries (<%= @record.queries.size %>)
+        <span class="card-title-description">
+          click any query to expand DNA
+        </span>
+      </p>
+      <span style="font-size:14px;" id="all_queries_chevron_dna">▼</span>
+    </div>
+  </div>
+  <table id="all_queries_table_dna">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>SQL</th>
+        <th>Time</th>
+        <th>Complexity</th>
+        <th>Risk</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @query_dna.each_with_index do |item, i| %>
+        <% q   = item[:query] %>
+        <% dna = item[:dna] %>
+        <% dna_id = "dna_#{i}" %>
+
+        <%# Query row — clickable %>
+        <tr
+          onclick="toggleDna('<%= dna_id %>')"
+          style="cursor:pointer;"
+        >
+          <td style="color:#a0aec0;"><%= i + 1 %></td>
+          <td style="font-family:monospace;font-size:11px;color:#e2e8f0;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
+            <%= q[:sql] %>
+          </td>
+          <td style="color:<%= time_heat_color(q[:duration_ms]) %>;">
+            <%= q[:duration_ms].round(2) %>ms
+          </td>
+          <td>
+            <span style="color:<%= dna.complexity_label[:color] %>;font-size:12px;">
+              <%= dna.complexity_label[:label] %>
+              <span style="color:#a0aec0;font-size:10px;">(<%= dna.complexity %>/10)</span>
+            </span>
+          </td>
+          <td>
+            <% risk_colors = { healthy: "#68d391", neutral: "#a0aec0", warning: "#f6ad55", danger: "#fc8181" } %>
+            <span style="color:<%= risk_colors[dna.risk] %>;font-size:12px;text-transform:capitalize;">
+              <%= dna.risk %>
+            </span>
+          </td>
+        </tr>
+
+        <%# DNA panel — hidden by default %>
+        <tr id="<%= dna_id %>" style="display:none;">
+          <td colspan="5" style="padding:0;">
+            <div style="
+              background:#1a202c;
+              border-left:3px solid #4299e1;
+              padding:16px;
+              margin:4px 0;
+            ">
+
+              <%# Full SQL %>
+              <div style="margin-bottom:16px;">
+                <div style="color:#a0aec0;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;">
+                  Full SQL
+                </div>
+                <pre style="color:#e2e8f0;font-size:11px;white-space:pre-wrap;word-break:break-all;margin:0;"><%= q[:sql] %></pre>
+              </div>
+
+              <%# Token strip %>
+              <div style="margin-bottom:16px;">
+                <div style="color:#a0aec0;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;">
+                  Query DNA
+                </div>
+                <div style="display:flex;flex-wrap:wrap;gap:6px;">
+                  <% dna.tokens.each do |token| %>
+                    <span
+                      onclick="toggleCard('<%= "card_#{dna_id}_#{token[:type]}" %>'); event.stopPropagation();"
+                      style="
+                        background:<%= token[:color] %>22;
+                        color:<%= token[:color] %>;
+                        border:1px solid <%= token[:color] %>66;
+                        padding:3px 10px;
+                        border-radius:4px;
+                        font-size:12px;
+                        font-family:monospace;
+                        cursor:pointer;
+                      "
+                    >
+                      <%= token[:label] %>
+                    </span>
+                  <% end %>
+                </div>
+              </div>
+
+              <%# Repetition bar %>
+              <% if dna.repetition_bar.is_a?(Hash) && dna.repetition_count > 1 %>
+                <div style="margin-bottom:16px;">
+                  <div style="color:#a0aec0;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;">
+                    Repetition — <%= dna.repetition_count %>x in this request
+                  </div>
+                  <div style="display:flex;align-items:center;gap:8px;">
+                    <div style="font-family:monospace;font-size:13px;">
+                      <span style="color:#fc8181;">
+                        <%= "█" * dna.repetition_bar[:filled] %>
+                      </span>
+                      <span style="color:#2d3748;">
+                        <%= "█" * dna.repetition_bar[:empty] %>
+                      </span>
+                    </div>
+                    <span style="color:#fc8181;font-size:12px;font-weight:bold;">
+                      <%= dna.repetition_count %>x — N+1 pattern
+                    </span>
+                  </div>
+                </div>
+              <% end %>
+
+              <%# Complexity + metadata row %>
+              <div style="display:flex;gap:24px;margin-bottom:16px;font-size:12px;">
+                <div>
+                  <span style="color:#a0aec0;">Complexity</span>
+                  <span style="color:<%= dna.complexity_label[:color] %>;margin-left:6px;font-weight:bold;">
+                    <%= dna.complexity_label[:label] %> (<%= dna.complexity %>/10)
+                  </span>
+                </div>
+                <div>
+                  <span style="color:#a0aec0;">Risk</span>
+                  <% risk_colors = { healthy: "#68d391", neutral: "#a0aec0", warning: "#f6ad55", danger: "#fc8181" } %>
+                  <span style="color:<%= risk_colors[dna.risk] %>;margin-left:6px;font-weight:bold;text-transform:capitalize;">
+                    <%= dna.risk %>
+                  </span>
+                </div>
+                <div>
+                  <span style="color:#a0aec0;">Duration</span>
+                  <span style="color:<%= time_heat_color(q[:duration_ms]) %>;margin-left:6px;font-weight:bold;">
+                    <%= q[:duration_ms].round(2) %>ms
+                  </span>
+                </div>
+              </div>
+
+              <%# Education cards — one per token, hidden by default %>
+              <% dna.tokens.each do |token| %>
+                <div
+                  id="card_<%= dna_id %>_<%= token[:type] %>"
+                  style="display:none;margin-bottom:8px;"
+                >
+                  <div style="
+                    background:#2d3748;
+                    border-left:3px solid <%= token[:color] %>;
+                    border-radius:4px;
+                    padding:12px 16px;
+                  ">
+                    <div style="
+                      color:<%= token[:color] %>;
+                      font-size:12px;
+                      font-weight:bold;
+                      font-family:monospace;
+                      margin-bottom:6px;
+                    ">
+                      💡 <%= token[:label] %>
+                      <span style="
+                        background:<%= token[:color] %>33;
+                        color:<%= token[:color] %>;
+                        font-size:10px;
+                        padding:1px 6px;
+                        border-radius:3px;
+                        margin-left:6px;
+                        text-transform:uppercase;
+                        font-family:Arial,sans-serif;
+                      ">
+                        <%= token[:risk] %>
+                      </span>
+                    </div>
+                    <div style="color:#e2e8f0;font-size:13px;line-height:1.6;">
+                      <%= token[:explanation] %>
+                    </div>
+                  </div>
+                </div>
+              <% end %>
+
+            </div>
+          </td>
+        </tr>
+
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<%# Inline JS for toggle behavior %>
+<script>
+  function toggleDna(id) {
+    var row = document.getElementById(id);
+    if (row) {
+      row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
+    }
+  }
+
+  function toggleCard(id, chevronId) {
+    var card = document.getElementById(id);
+    if (card) {
+      if (card.style.display === 'none') {
+        card.style.display = card.tagName === 'TABLE' ? 'table' : 'block';
+      } else {
+        card.style.display = 'none';
+      }
+    }
+
+    // Toggle chevron icon if provided
+    if (chevronId) {
+      var chevron = document.getElementById(chevronId);
+      if (chevron) {
+        chevron.textContent = chevron.textContent === '▼' ? '▶' : '▼';
+      }
+    }
+  }
+</script>

data/config/routes.rb

@@ -0,0 +1,9 @@
+RailsVitals::Engine.routes.draw do
+  root to: "dashboard#index"
+
+  resources :requests, only: [ :index, :show ]
+  resources :models, only: [ :index ]
+  resources :n_plus_ones, only: [ :index, :show ]
+  resources :associations, only: [ :index ]
+  get "heatmap", to: "heatmap#index", as: :heatmap
+end

data/lib/rails_vitals/analyzers/association_mapper.rb

@@ -0,0 +1,121 @@
+module RailsVitals
+  module Analyzers
+    class AssociationMapper
+      ModelNode = Struct.new(
+        :name, :table, :depth, :position,
+        :associations, :query_count, :avg_query_time_ms,
+        :has_n1, :n1_patterns,
+        keyword_init: true
+      )
+
+      AssociationEdge = Struct.new(
+        :from_model, :to_model, :macro,
+        :foreign_key, :indexed, :has_n1,
+        keyword_init: true
+      )
+
+      def self.build(store)
+        records = store.all
+        models = discover_models
+        n1_data = NPlusOneAggregator.aggregate(records)
+        n1_tables = n1_data.map { |p| p[:table] }.compact.uniq
+
+        nodes = models.map do |model|
+          queries = queries_for_model(model, records)
+          avg_time = queries.empty? ? 0 : (queries.sum { |q| q[:duration_ms] } / queries.size).round(2)
+
+          ModelNode.new(
+            name: model.name,
+            table: model.table_name,
+            depth: association_depth(model, models),
+            position: nil,
+            associations: build_edges(model, n1_tables),
+            query_count: queries.size,
+            avg_query_time_ms: avg_time,
+            has_n1: n1_tables.include?(model.table_name),
+            n1_patterns: n1_data.select { |p| p[:table] == model.table_name }
+          )
+        end
+
+        nodes, canvas_h = assign_positions(nodes)
+        [ nodes, canvas_h ]
+      end
+
+      def self.discover_models
+        ActiveRecord::Base.descendants
+          .reject(&:abstract_class?)
+          .reject { |m| m.name&.start_with?("RailsVitals") }
+          .select { |m| m.table_exists? rescue false }
+          .sort_by(&:name)
+      end
+
+      # Depth = how many belongs_to hops from root
+      def self.association_depth(model, all_models)
+        belongs_to_targets = model.reflect_on_all_associations(:belongs_to)
+          .map { |r| r.klass rescue nil }
+          .compact
+
+        return 0 if belongs_to_targets.empty?
+
+        belongs_to_targets.map { |target|
+          target == model ? 0 : association_depth(target, all_models) + 1
+        }.min
+      rescue
+        0
+      end
+
+      def self.build_edges(model, n1_tables)
+        model.reflect_on_all_associations.map do |assoc|
+          target = assoc.klass rescue next
+          fk = assoc.foreign_key.to_s
+          table = assoc.macro == :belongs_to ? model.table_name : target.table_name
+
+          indexed = begin
+            ActiveRecord::Base.connection
+              .indexes(table)
+              .any? { |i| i.columns.first == fk }
+          rescue
+            false
+          end
+
+          AssociationEdge.new(
+            from_model: model.name,
+            to_model: target.name,
+            macro: assoc.macro,
+            foreign_key: fk,
+            indexed: indexed,
+            has_n1: n1_tables.include?(target.table_name)
+          )
+        end.compact
+      end
+
+      def self.queries_for_model(model, records)
+        records.flat_map { |r| r.queries }
+          .select { |q|
+            q[:sql].match?(/FROM\s+"?#{model.table_name}"?/i) ||
+            q[:sql].match?(/UPDATE\s+"?#{model.table_name}"?/i)
+          }
+      end
+
+      # Assign x/y positions by depth layer
+      def self.assign_positions(nodes)
+        by_depth = nodes.group_by(&:depth)
+        canvas_w = 900
+        canvas_h = 120 + (by_depth.keys.max || 0) * 160
+
+        by_depth.each do |depth, layer_nodes|
+          count  = layer_nodes.size
+          x_step = canvas_w / (count + 1)
+          layer_nodes.each_with_index do |node, i|
+            node.position = {
+              x: x_step * (i + 1),
+              y: 60 + depth * 160
+            }
+          end
+        end
+
+        [ nodes, canvas_h ]
+      end
+    end
+  end
+end

data/lib/rails_vitals/analyzers/n_plus_one_aggregator.rb

@@ -0,0 +1,116 @@
+module RailsVitals
+  module Analyzers
+    class NPlusOneAggregator
+      def self.aggregate(records)
+        pattern_data = Hash.new do |h, k|
+          h[k] = {
+            pattern:      k,
+            occurrences:  0,
+            endpoints:    Hash.new(0),
+            table:        nil,
+            foreign_key:  nil
+          }
+        end
+
+        records.each do |record|
+          next if record.n_plus_one_patterns.empty?
+
+          record.n_plus_one_patterns.each do |sql, count|
+            normalized = normalize(sql)
+            Rails.logger.debug "Processing SQL: #{sql} → normalized: #{normalized}"
+
+            pattern_data[normalized][:occurrences] += count
+            pattern_data[normalized][:endpoints][record.endpoint] += 1
+            pattern_data[normalized][:table]       ||= extract_table(sql)
+            pattern_data[normalized][:foreign_key] ||= extract_foreign_key(sql)
+          end
+        end
+
+        pattern_data
+          .values
+          .sort_by { |p| -p[:occurrences] }
+          .map do |p|
+            p[:endpoints] = p[:endpoints].to_h
+            p.merge(fix_suggestion: build_suggestion(p))
+          end
+      end
+
+      private
+
+      def self.normalize(sql)
+        sql
+          .gsub('\\"', '"')      # unescape stored escaped quotes
+          .gsub(/\b\d+\b/, "?")
+          .gsub(/'[^']*'/, "?")
+          .gsub(/\s+/, " ")
+          .strip
+      end
+
+      def self.extract_table(sql)
+        clean = sql.gsub('\\"', '"')
+        clean.match(/FROM\s+"?(\w+)"?/i)&.captures&.first
+      end
+
+      def self.extract_foreign_key(sql)
+        clean = sql.gsub('\\"', '"')
+        clean.match(/WHERE\s+"?\w+"?\."?(\w+_id)"\s*=/i)&.captures&.first
+      end
+
+      def self.build_suggestion(pattern)
+        table       = pattern[:table]
+        foreign_key = pattern[:foreign_key]
+
+        return generic_suggestion(table) unless table && foreign_key
+
+        # Map foreign_key back to association
+        owner_model = infer_owner_model(foreign_key)
+        assoc_name  = infer_association(table, foreign_key)
+
+        if owner_model && assoc_name
+          {
+            code:        "#{owner_model}.includes(:#{assoc_name})",
+            description: "Eager load :#{assoc_name} on #{owner_model} to eliminate this N+1",
+            owner:       owner_model,
+            association: assoc_name
+          }
+        else
+          generic_suggestion(table)
+        end
+      end
+
+      def self.infer_owner_model(foreign_key)
+        # foreign_key = "user_id" → owner is "User"
+        foreign_key.sub(/_id$/, "").classify
+      end
+
+      def self.infer_association(table, foreign_key)
+        # table = "posts", foreign_key = "user_id"
+        # → association :posts on User
+        owner_class_name = foreign_key.sub(/_id$/, "").classify
+
+        begin
+          owner_class = owner_class_name.constantize
+          return nil unless owner_class < ActiveRecord::Base
+
+          # Find association on owner that points to this table
+          assoc = owner_class.reflect_on_all_associations.find do |r|
+            r.klass.table_name == table rescue false
+          end
+
+          assoc&.name
+        rescue NameError
+          nil
+        end
+      end
+
+      def self.generic_suggestion(table)
+        {
+          code:        "includes(:#{table&.singularize})",
+          description: "Use includes(), eager_load(), or preload() to batch this query",
+          owner:       nil,
+          association: table&.singularize
+        }
+      end
+    end
+  end
+end