rails_vitals 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8fc3f44a23831df5f94973a04dfd928519ac7b14adf763147cc7b4d6e6ee2702
-  data.tar.gz: 39be2ad3de1a6569e42e5c22cea38a04db5c933910014de9c5963652c6a15451
+  metadata.gz: 0e310ba646b2f5168dec1765754ead900d1341fcfb229820afc9c75e4e6be8fb
+  data.tar.gz: a38f8d572a5b5a00a45d21239d9b07669c9dca818f7d75bcd9d7d9cfeea06e79
 SHA512:
-  metadata.gz: f95974f80db2e2975a0b7ccd77aef6d0335a6c89202a31186b6631de09fb25938e0f0f5a2f55806c4cafd7d9b469ff589593a7805a4769cdff9eaaa08ef72e96
-  data.tar.gz: d5698c85c0a72ac0f5f44f8db1c16c8b6b51c9c3aa0533ea70e774005f87d2e323a06c903f192d646e70ad1efa204560e94cbdbe122e2f6522412d50fbfbcfab
+  metadata.gz: c5708c964e928d6400375f2e1d98024a05f9e089066fb3fb65c32ae61c39cbb69a4589d4ed901cbb6a8e491657ec438ec60b419dbff27bbdfbef9d8517c789b3
+  data.tar.gz: 88155cc28f07138987841604882c728068c9031fb25566ac8fc00efc824e3139a77352fd109a42b1d6861db466d1aae9dab2920412a860947de651456fb0d486

data/README.md

@@ -282,12 +282,21 @@ rails_vitals/
         ├── models/
         ├── n_plus_ones/
         ├── associations/
-        └── live/
+        ├── explains/
+        ├── playgrounds/
+        └── shared/                            # Reusable partials
+            ├── _page_header.html.erb
+            ├── _empty_state.html.erb
+            ├── _score_badge.html.erb
+            └── _n1_indicator.html.erb
 ```
 
 **Key architectural decisions:**
 
 - **Zero JS dependencies** — no Chartkick, no D3, no Chart.js. Tables for data, SVG for diagrams, vanilla JS for interactions.
+- **Single CSS/JS asset file** — all styles in `app/assets/stylesheets/rails_vitals/application.css`, all behaviour in `app/assets/javascripts/rails_vitals/application.js`. No inline `<style>` or `<script>` blocks in views.
+- **Shared view partials** — common UI patterns (`_page_header`, `_empty_state`, `_score_badge`, `_n1_indicator`) live in `app/views/rails_vitals/shared/` and are reused across all views.
+- **Centralised helpers** — all color logic, heat colors, and formatting live in `ApplicationHelper`. Views never define inline color hashes or call `.round(1).to_s + "ms"` directly; they use `format_ms()`, `risk_color()`, `badge_class()`, etc.
 - **Thread-local Collector** — instrumentation state is stored per-thread, never shared between concurrent requests.
 - **In-memory ring buffer** — the Store keeps the last N requests in memory. No database writes, no schema migrations.
 - **Module prepend for callbacks** — callback instrumentation wraps `ActiveRecord::Base#run_callbacks` via `Module#prepend`. No TracePoint, no monkey-patching.

data/app/assets/stylesheets/rails_vitals/application.css

@@ -364,6 +364,13 @@ tr:hover td { background: #1e2535; }
 .gap-24 { gap: 24px; }
 
 /* ─── Grid utilities ─────────────────────────────────────────────────────────── */
+.grid-5 {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
 .grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -499,3 +506,39 @@ tr:hover td { background: #1e2535; }
   padding: 12px 16px;
   margin-bottom: 20px;
 }
+
+/* ─── Score display (big number on request detail) ───────────────────────────── */
+.score-display {
+  font-size: 42px;
+  font-weight: bold;
+}
+
+/* ─── EXPLAIN plan tree ──────────────────────────────────────────────────────── */
+.plan-node {
+  border-left: 2px solid #4a5568;
+  margin-left: 16px;
+  padding-left: 16px;
+  margin-top: 8px;
+}
+.plan-node:first-child {
+  margin-left: 0;
+  padding-left: 0;
+  border-left: none;
+}
+.node-box {
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin-bottom: 4px;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.node-box:hover { opacity: 0.85; }
+
+/* ─── EXPLAIN warning/interpretation block ───────────────────────────────────── */
+.interpret-block {
+  border-radius: 6px;
+  padding: 12px 16px;
+  font-size: 13px;
+  background: #1a202c;
+  margin-bottom: 16px;
+}

data/app/helpers/rails_vitals/application_helper.rb

@@ -11,7 +11,9 @@ module RailsVitals
     COLOR_ORANGE = "#f6ad55"
     COLOR_LIGHT_GREEN = "#68d391"
 
-    def score_color(color)
+    # Module-level helper so plain Ruby classes (e.g. PanelRenderer) can resolve
+    # a score color without needing a helper instance.
+    def self.score_color_for(color)
       case color
       when "green" then COLOR_GREEN
       when "blue"  then COLOR_BLUE
@@ -20,6 +22,10 @@ module RailsVitals
       end
     end
 
+    def score_color(color)
+      RailsVitals::ApplicationHelper.score_color_for(color)
+    end
+
     def score_label_to_color(score)
       case score
       when 90..100 then "healthy"
@@ -107,5 +113,21 @@ module RailsVitals
       else              COLOR_LIGHT_RED
       end
     end
+
+    # Returns the full badge CSS class string for a score color label.
+    def badge_class(color)
+      "badge badge-#{color}"
+    end
+
+    def format_ms(value)
+      return "0ms" unless value
+
+      "#{value.to_f.round(1)}ms"
+    end
+
+    # Calculates a percentage of count over total, returning 0 when total is zero.
+    def percentage(count, total)
+      total.to_f > 0 ? ((count.to_f / total) * 100).round(1) : 0
+    end
   end
 end

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

@@ -1,4 +1,4 @@
-<div class="page-title">Dashboard</div>
+<%= render "rails_vitals/shared/page_header", title: "Dashboard" %>
 
 <div class="grid-3">
   <div class="stat-card">
@@ -34,20 +34,14 @@
         <tr>
           <td><%= r.endpoint %></td>
           <td>
-            <span class="badge badge-<%= r.color %>">
-              <%= r.score %> <%= r.label %>
-            </span>
+            <%= render "rails_vitals/shared/score_badge", color: r.color, score: r.score, label: r.label %>
           </td>
           <td><%= r.total_query_count %></td>
-          <td><%= r.total_db_time_ms.round(1) %>ms</td>
+          <td><%= format_ms(r.total_db_time_ms) %></td>
           <td>
-            <% if r.n_plus_one_patterns.any? %>
-              <span class="n1-badge"><%= r.n_plus_one_patterns.size %></span>
-            <% else %>
-              <span class="text-healthy">None</span>
-            <% end %>
+            <%= render "rails_vitals/shared/n1_indicator", patterns: r.n_plus_one_patterns %>
           </td>
-          <td><%= r.duration_ms&.round(1) %>ms</td>
+          <td><%= format_ms(r.duration_ms) %></td>
           <td><%= link_to "→", rails_vitals.request_path(r.id) %></td>
         </tr>
       <% end %>
@@ -74,7 +68,7 @@
           <td><%= stats[:count] %></td>
           <td><%= stats[:avg_score] %></td>
           <td><%= stats[:avg_queries] %></td>
-          <td><%= stats[:avg_db_time_ms].round(1) %>ms</td>
+          <td><%= format_ms(stats[:avg_db_time_ms]) %></td>
         </tr>
       <% end %>
     </tbody>
@@ -100,7 +94,7 @@
               <td><%= label %></td>
               <td><%= count %></td>
               <td class="text-muted">
-                <%= @total > 0 ? ((count.to_f / @total) * 100).round(1) : 0 %>%
+                <%= percentage(count, @total) %>%
               </td>
             </tr>
           <% end %>
@@ -122,9 +116,7 @@
             <tr>
               <td class="text-muted text-sm"><%= endpoint %></td>
               <td>
-                <span class="badge badge-<%= score_label_to_color(score) %>">
-                  <%= score %>
-                </span>
+                <%= render "rails_vitals/shared/score_badge", color: score_label_to_color(score), score: score %>
               </td>
             </tr>
           <% end %>

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

@@ -1,34 +1,12 @@
-<style>
-  .plan-node {
-    border-left: 2px solid #4a5568;
-    margin-left: 16px;
-    padding-left: 16px;
-    margin-top: 8px;
-  }
-  .plan-node:first-child {
-    margin-left: 0;
-    padding-left: 0;
-    border-left: none;
-  }
-  .node-box {
-    border-radius: 6px;
-    padding: 12px 16px;
-    margin-bottom: 4px;
-    cursor: pointer;
-    transition: opacity 0.15s;
-  }
-  .node-box:hover { opacity: 0.85; }
-</style>
-
 <%# Header %>
 <div class="mb-20">
   <% if @record %>
-    <a href="<%= rails_vitals.request_path(@record.id) %>" class="text-blue" style="font-size:13px;">
-      ← Back to Request Detail
-    </a>
+    <%= link_to "← Back to Request Detail",
+                rails_vitals.request_path(@record.id),
+                class: "back-link text-sm" %>
   <% end %>
 
-  <h2 class="page-heading" style="margin:8px 0;">
+  <h2 class="page-heading mb-8">
     EXPLAIN Visualizer
   </h2>
 
@@ -38,15 +16,12 @@
 </div>
 
 <% if @result.error %>
-  <div
-    class="text-danger"
-    style="background:#2d1515;border:1px solid #fc818166;border-radius:6px;padding:16px;font-size:13px;"
-  >
+  <div class="error-card">
     <%= @result.error %>
   </div>
 <% else %>
   <%# Summary stats row %>
-  <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px;">
+  <div class="grid-5">
     <% stats = [
         { label: "Total Cost",    value: @result.total_cost,               color: cost_color(@result.total_cost) },
         { label: "Actual Time",   value: "#{@result.actual_time_ms}ms",    color: time_color(@result.actual_time_ms) },
@@ -149,16 +124,10 @@
 
   <%# Interpretation summary %>
   <% if @result.interpretation %>
+    <% interp_color = @result.warnings.any? ? "#f6ad55" : "#68d391" %>
     <div
-      class="mb-16 line-relaxed"
-      style="
-        background:#1a202c;
-        border-radius:6px;
-        padding:12px 16px;
-        font-size:13px;
-        color:<%= @result.warnings.any? ? '#f6ad55' : '#68d391' %>;
-        border-left:3px solid <%= @result.warnings.any? ? '#f6ad55' : '#68d391' %>;
-      "
+      class="interpret-block mb-16 line-relaxed"
+      style="color:<%= interp_color %>;border-left:3px solid <%= interp_color %>;"
     >
       <%= @result.interpretation %>
     </div>

data/app/views/rails_vitals/heatmap/index.html.erb

@@ -29,7 +29,7 @@
                     class: "text-accent" %>
             </td>
             <td>
-              <span class="badge badge-<%= color %>">
+              <span class="<%= badge_class(color) %>">
                 <%= row[:avg_score] %>
               </span>
             </td>
@@ -60,7 +60,6 @@
     </table>
   </div>
 <% else %>
-  <div class="card empty-state">
-    No requests recorded yet. Visit your app to generate data.
-  </div>
+  <%= render "rails_vitals/shared/empty_state",
+             message: "No requests recorded yet. Visit your app to generate data." %>
 <% end %>

data/app/views/rails_vitals/models/index.html.erb

@@ -94,7 +94,6 @@
     </div>
   <% end %>
 <% else %>
-  <div class="card empty-state">
-    No data recorded yet. Visit your app to generate data.
-  </div>
+  <%= render "rails_vitals/shared/empty_state",
+             message: "No data recorded yet. Visit your app to generate data." %>
 <% end %>

data/app/views/rails_vitals/n_plus_ones/index.html.erb

@@ -51,7 +51,5 @@
     </table>
   </div>
 <% else %>
-  <div class="card empty-state">
-    No N+1 patterns detected yet.
-  </div>
+  <%= render "rails_vitals/shared/empty_state", message: "No N+1 patterns detected yet." %>
 <% end %>

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

@@ -11,14 +11,14 @@
   <div class="card-title">Detected Pattern</div>
   <pre class="code-block text-muted mb-16"><%= @pattern[:pattern] %></pre>
 
-  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;font-size:13px;">
+  <div class="grid-3 mb-16" style="font-size:13px;">
     <div>
       <div class="text-muted mb-4">Total Occurrences</div>
       <div class="text-danger stat-value-lg"><%= @pattern[:occurrences] %>x</div>
     </div>
     <div>
       <div class="text-muted mb-4">Estimated Time Wasted</div>
-      <div class="text-danger stat-value-lg"><%= @estimated_saving_ms %>ms</div>
+      <div class="text-danger stat-value-lg"><%= format_ms(@estimated_saving_ms) %></div>
     </div>
     <div>
       <div class="text-muted mb-4">Affected Requests</div>
@@ -48,11 +48,11 @@
   <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;" class="mb-24">
     <div class="impact-box">
       <div class="section-label">Est. Saving Per Request</div>
-      <div class="text-healthy stat-value-xl"><%= @avg_saving_per_request %>ms</div>
+      <div class="text-healthy stat-value-xl"><%= format_ms(@avg_saving_per_request) %></div>
     </div>
     <div class="impact-box">
       <div class="section-label">Total Time Recovered</div>
-      <div class="text-healthy stat-value-xl"><%= @estimated_saving_ms %>ms</div>
+      <div class="text-healthy stat-value-xl"><%= format_ms(@estimated_saving_ms) %></div>
     </div>
     <div class="impact-box">
       <div class="section-label">Requests Affected</div>
@@ -77,12 +77,11 @@
         <tr>
           <td><%= r.endpoint %></td>
           <td>
-            <span class="badge badge-<%= score_label_to_color(r.score) %>">
-              <%= r.score %>
-            </span>
+            <%= render "rails_vitals/shared/score_badge",
+                       color: score_label_to_color(r.score), score: r.score %>
           </td>
           <td><%= r.total_query_count %></td>
-          <td class="text-muted"><%= r.duration_ms.round(1) %>ms</td>
+          <td class="text-muted"><%= format_ms(r.duration_ms) %></td>
           <td>
             <%= link_to "→", request_path(r.id), class: "text-accent" %>
           </td>

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

@@ -1,4 +1,4 @@
-<div class="page-title">Request History</div>
+<%= render "rails_vitals/shared/page_header", title: "Request History" %>
 
 <div class="filter-bar">
   <%= link_to "All",        rails_vitals.requests_path,                              class: params[:score].blank? && params[:n_plus_one].blank? ? "active" : "" %>
@@ -10,7 +10,7 @@
 </div>
 
 <% if params[:endpoint].present? %>
-  <div class="text-muted" style="margin:20px 0;">
+    <div class="text-muted mb-16">
     Filtering by endpoint:
     <span class="text-accent"><%= params[:endpoint] %></span>
     &nbsp;
@@ -38,20 +38,14 @@
           <td class="text-muted text-sm"><%= r.recorded_at.strftime("%H:%M:%S") %></td>
           <td><%= r.endpoint %></td>
           <td>
-            <span class="badge badge-<%= r.color %>">
-              <%= r.score %>
-            </span>
+            <%= render "rails_vitals/shared/score_badge", color: r.color, score: r.score %>
           </td>
           <td><%= r.total_query_count %></td>
-          <td><%= r.total_db_time_ms.round(1) %>ms</td>
+          <td><%= format_ms(r.total_db_time_ms) %></td>
           <td>
-            <% if r.n_plus_one_patterns.any? %>
-              <span class="n1-badge"><%= r.n_plus_one_patterns.size %></span>
-            <% else %>
-              <span class="text-healthy">—</span>
-            <% end %>
+            <%= render "rails_vitals/shared/n1_indicator", patterns: r.n_plus_one_patterns, none_label: "—" %>
           </td>
-          <td><%= r.duration_ms&.round(1) %>ms</td>
+          <td><%= format_ms(r.duration_ms) %></td>
           <td><%= link_to "→", rails_vitals.request_path(r.id) %></td>
         </tr>
       <% end %>

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

@@ -1,18 +1,20 @@
-<div class="flex-center mb-20" style="gap:16px;">
-  <%= link_to "← Back", rails_vitals.requests_path, class: "back-link" %>
-  <div class="page-title" style="margin:0;">Request Detail</div>
+<div class="page-header">
+  <div class="mb-8">
+    <%= link_to "← Back", rails_vitals.requests_path, class: "back-link" %>
+  </div>
+  <h1 class="page-heading">Request Detail</h1>
 </div>
 
 <%# Header %>
 <div class="card flex-between">
   <div>
-    <div class="bold" style="font-size:42px;color:<%= score_color(@record.color) %>;">
+    <div class="score-display" style="color:<%= score_color(@record.color) %>;">
       <%= @record.score %>
       <span class="text-muted" style="font-size:16px;">/ 100</span>
     </div>
   </div>
   <div class="text-right">
-    <span class="<%= "badge badge-#{@record.color}" %>" style="font-size:13px;padding:4px 14px;">
+    <span class="<%= badge_class(@record.color) %>" style="font-size:13px;padding:4px 14px;">
       <%= @record.label %>
     </span>
     <div class="text-muted text-sm mt-6"><%= @record.recorded_at.strftime("%Y-%m-%d %H:%M:%S") %></div>
@@ -27,7 +29,7 @@
       <tr><td class="text-muted" style="width:140px;">Endpoint</td><td><%= @record.endpoint %></td></tr>
       <tr><td class="text-muted">Method</td>  <td><%= @record.http_method %></td></tr>
       <tr><td class="text-muted">Status</td>  <td><%= @record.response_status %></td></tr>
-      <tr><td class="text-muted">Duration</td><td><%= @record.duration_ms&.round(1) %>ms</td></tr>
+      <tr><td class="text-muted">Duration</td><td><%= format_ms(@record.duration_ms) %></td></tr>
     </tbody>
   </table>
 </div>
@@ -38,15 +40,14 @@
   <table>
     <tbody>
       <tr><td class="text-muted" style="width:140px;">Total Queries</td><td><%= @record.total_query_count %></td></tr>
-      <tr><td class="text-muted">DB Time</td>     <td><%= @record.total_db_time_ms.round(1) %>ms</td></tr>
+      <tr><td class="text-muted">DB Time</td>     <td><%= format_ms(@record.total_db_time_ms) %></td></tr>
       <tr>
         <td class="text-muted">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 class="text-healthy">None detected</span>
-          <% end %>
+          <%= render "rails_vitals/shared/n1_indicator",
+                     patterns: @record.n_plus_one_patterns,
+                     suffix: "detected",
+                     none_label: "None detected" %>
         </td>
       </tr>
     </tbody>
@@ -95,7 +96,7 @@
       <% @record.queries.sort_by { |q| -q[:duration_ms] }.each do |q| %>
         <tr>
           <td class="sql"><%= q[:sql] %></td>
-          <td class="text-nowrap"><%= q[:duration_ms].round(1) %>ms</td>
+          <td class="text-nowrap"><%= format_ms(q[:duration_ms]) %></td>
         </tr>
       <% end %>
     </tbody>
@@ -109,7 +110,7 @@
       Callback Map
       <span class="text-muted ml-8" style="font-weight:normal;">
         <%= @record.callbacks.size %> callbacks —
-        <%= @record.total_callback_time_ms.round(1) %>ms total
+        <%= format_ms(@record.total_callback_time_ms) %> total
       </span>
     </div>
     <% @record.callbacks.group_by { |c| c[:model] }.each do |model, callbacks| %>
@@ -117,8 +118,9 @@
         <div class="text-accent bold text-12 mb-6" style="padding-bottom:4px;border-bottom:1px solid #2d3748;">
           <%= model %>
           <span class="text-muted" style="font-weight:normal;">
+            <td class="text-muted ml-6">
             (<%= callbacks.size %> callbacks,
-            <%= callbacks.sum { |c| c[:duration_ms] }.round(1) %>ms)
+            <%= format_ms(callbacks.sum { |c| c[:duration_ms] }) %>)
           </span>
         </div>
         <table>
@@ -137,11 +139,9 @@
                     <%= cb[:kind] %>
                   </span>
                 </td>
-                <td><%= cb[:duration_ms] %>ms</td>
+                <td><%= format_ms(cb[:duration_ms]) %></td>
                 <td class="text-muted">
-                  <% pct = @record.total_callback_time_ms > 0 ?
-                    ((cb[:duration_ms] / @record.total_callback_time_ms) * 100).round(1) : 0 %>
-                  <%= pct %>%
+                  <%= percentage(cb[:duration_ms], @record.total_callback_time_ms) %>%
                 </td>
               </tr>
             <% end %>
@@ -180,7 +180,7 @@
         <% dna_id = "dna_#{i}" %>
 
         <%# Query row — clickable %>
-        <tr onclick="toggleDna('<%= dna_id %>')" class="cursor-pointer">
+        <tr onclick="toggleDna(<%= dna_id.to_json %>)" class="cursor-pointer">
           <td class="text-muted"><%= i + 1 %></td>
           <td class="mono text-sm text-primary truncate" style="max-width:400px;">
             <%= q[:sql] %>
@@ -195,8 +195,7 @@
             </span>
           </td>
           <td>
-            <% risk_colors = { healthy: "#68d391", neutral: "#a0aec0", warning: "#f6ad55", danger: "#fc8181" } %>
-            <span class="text-12" style="color:<%= risk_colors[dna.risk] %>;text-transform:capitalize;">
+            <span class="text-12" style="color:<%= risk_color(dna.risk) %>;text-transform:capitalize;">
               <%= dna.risk %>
             </span>
           </td>
@@ -234,7 +233,7 @@
                 <div class="flex flex-wrap" style="gap:6px;">
                   <% dna.tokens.each do |token| %>
                     <span
-                      onclick="toggleCard('<%= "card_#{dna_id}_#{token[:type]}" %>'); event.stopPropagation();"
+                      onclick="toggleCard(<%= "card_#{dna_id}_#{token[:type]}".to_json %>); event.stopPropagation();"
                       class="mono cursor-pointer"
                       style="background:<%= token[:color] %>22;color:<%= token[:color] %>;border:1px solid <%= token[:color] %>66;padding:3px 10px;border-radius:4px;font-size:12px;"
                     >
@@ -270,8 +269,7 @@
                 </div>
                 <div>
                   <span class="text-muted">Risk</span>
-                  <% risk_colors = { healthy: "#68d391", neutral: "#a0aec0", warning: "#f6ad55", danger: "#fc8181" } %>
-                  <span class="bold ml-6" style="color:<%= risk_colors[dna.risk] %>;text-transform:capitalize;">
+                  <span class="bold ml-6" style="color:<%= risk_color(dna.risk) %>;text-transform:capitalize;">
                     <%= dna.risk %>
                   </span>
                 </div>

data/app/views/rails_vitals/shared/_empty_state.html.erb

@@ -0,0 +1,3 @@
+<div class="card empty-state">
+  <%= message %>
+</div>

data/app/views/rails_vitals/shared/_n1_indicator.html.erb

@@ -0,0 +1,9 @@
+<% if patterns.any? %>
+  <span class="n1-badge">
+    <%= patterns.size %><% if local_assigns[:suffix] %> <%= suffix %><% end %>
+  </span>
+<% else %>
+  <span class="text-healthy">
+    <%= local_assigns.fetch(:none_label, "None") %>
+  </span>
+<% end %>

data/app/views/rails_vitals/shared/_page_header.html.erb

@@ -0,0 +1,15 @@
+<div class="page-header">
+  <% if local_assigns[:back_path] %>
+    <div class="mb-8">
+      <%= link_to local_assigns.fetch(:back_label, "← Back"), back_path, class: "back-link" %>
+    </div>
+  <% end %>
+  <h1 class="page-heading">
+    <%= title %>
+  </h1>
+  <% if local_assigns[:subtitle] %>
+    <p class="page-subtitle">
+      <%= subtitle %>
+    </p>
+  <% end %>
+</div>

data/app/views/rails_vitals/shared/_score_badge.html.erb

@@ -0,0 +1,3 @@
+<span class="<%= badge_class(color) %>">
+  <%= score %><% if local_assigns[:label] %> <%= label %><% end %>
+</span>

data/lib/rails_vitals/analyzers/association_mapper.rb

@@ -104,7 +104,7 @@ module RailsVitals
         canvas_h = 120 + (by_depth.keys.max || 0) * 160
 
         by_depth.each do |depth, layer_nodes|
-          count  = layer_nodes.size
+          count = layer_nodes.size
           x_step = canvas_w / (count + 1)
           layer_nodes.each_with_index do |node, i|
             node.position = {