rails_vitals 0.2.0 → 0.3.0

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

@@ -3,52 +3,42 @@
   <%# Left — SVG diagram %>
   <div style="flex:1;overflow:auto;padding:24px;background:#1a202c;">
 
-    <div class="card-title" style="margin-bottom:20px;">
+    <div class="card-title mb-20">
       Association Map
-      <span class="card-title-description">
-        click any node to inspect
-      </span>
+      <span class="card-title-description">click any node to inspect</span>
     </div>
 
     <%# Legend %>
-    <div style="display:flex;gap:20px;margin-bottom:20px;font-size:12px;flex-wrap:wrap;">
+    <div class="flex flex-wrap mb-20 text-12" style="gap:20px;">
       <span>
-        <span style="display:inline-block;width:12px;height:12px;background:#68d391;border-radius:2px;margin-right:4px;"></span>
+        <span class="legend-dot" style="background:#68d391;"></span>
         Healthy
       </span>
       <span>
-        <span style="display:inline-block;width:12px;height:12px;background:#fc8181;border-radius:2px;margin-right:4px;"></span>
+        <span class="legend-dot" style="background:#fc8181;"></span>
         N+1 Detected
       </span>
       <span>
-        <span style="display:inline-block;width:12px;height:12px;background:#4a5568;border-radius:2px;margin-right:4px;"></span>
+        <span class="legend-dot" style="background:#4a5568;"></span>
         Not Queried
       </span>
-      <span style="color:#a0aec0;">——</span>
-      <span style="color:#f6ad55;">has_many / has_one</span>
-      <span style="color:#a0aec0;">——</span>
-      <span style="color:#9f7aea;">belongs_to</span>
-      <span style="color:#a0aec0;margin-left:8px;">⚠ missing index on FK</span>
+      <span class="text-muted">——</span>
+      <span class="text-orange">has_many / has_one</span>
+      <span class="text-muted">——</span>
+      <span class="text-purple">belongs_to</span>
+      <span class="text-muted ml-8">⚠ missing index on FK</span>
     </div>
 
-    <svg
-      id="assoc-map"
-      width="900"
-      height="<%= @canvas_height %>"
-      style="display:block;"
-    >
+    <svg id="assoc-map" width="900" height="<%= @canvas_height %>" style="display:block;">
       <defs>
         <%# Arrowhead markers %>
-        <marker id="arrow-hasmany" markerWidth="8" markerHeight="8"
-                refX="6" refY="3" orient="auto">
+        <marker id="arrow-hasmany" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
           <path d="M0,0 L0,6 L8,3 z" fill="#f6ad55" opacity="0.7"/>
         </marker>
-        <marker id="arrow-belongsto" markerWidth="8" markerHeight="8"
-                refX="6" refY="3" orient="auto">
+        <marker id="arrow-belongsto" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
           <path d="M0,0 L0,6 L8,3 z" fill="#9f7aea" opacity="0.7"/>
         </marker>
-        <marker id="arrow-n1" markerWidth="8" markerHeight="8"
-                refX="6" refY="3" orient="auto">
+        <marker id="arrow-n1" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
           <path d="M0,0 L0,6 L8,3 z" fill="#fc8181" opacity="0.9"/>
         </marker>
       </defs>
@@ -113,11 +103,7 @@
         <% end %>
 
         <%# Clickable group %>
-        <g
-          onclick="selectNode('<%= node.name.to_json %>')"
-          style="cursor:pointer;"
-          id="node-<%= node.name %>"
-        >
+        <g onclick="selectNode('<%= node.name.to_json %>')" class="cursor-pointer" id="node-<%= node.name %>">
           <%# Node box %>
           <rect
             x="<%= x - 54 %>" y="<%= y - 28 %>"
@@ -141,33 +127,20 @@
           </text>
 
           <%# Query count %>
-          <text
-            x="<%= x %>" y="<%= y + 8 %>"
-            text-anchor="middle"
-            font-size="10"
-            font-family="monospace"
-            fill="#a0aec0"
-          >
+          <text x="<%= x %>" y="<%= y + 8 %>" text-anchor="middle" font-size="10" font-family="monospace" fill="#a0aec0">
             <%= node.query_count %> queries
           </text>
 
           <%# Avg time %>
-          <text
-            x="<%= x %>" y="<%= y + 20 %>"
-            text-anchor="middle"
-            font-size="10"
-            font-family="monospace"
-            fill="<%= node.avg_query_time_ms > 10 ? '#f6ad55' : '#718096' %>"
-          >
+          <text x="<%= x %>" y="<%= y + 20 %>" text-anchor="middle" font-size="10" font-family="monospace"
+                fill="<%= node.avg_query_time_ms > 10 ? '#f6ad55' : '#718096' %>">
             avg <%= node.avg_query_time_ms %>ms
           </text>
 
           <%# N+1 badge %>
           <% if node.has_n1 %>
             <circle cx="<%= x + 50 %>" cy="<%= y - 24 %>" r="7" fill="#fc8181"/>
-            <text x="<%= x + 50 %>" y="<%= y - 20 %>"
-                  text-anchor="middle" font-size="9"
-                  font-weight="bold" fill="#1a202c">N+1</text>
+            <text x="<%= x + 50 %>" y="<%= y - 20 %>" text-anchor="middle" font-size="9" font-weight="bold" fill="#1a202c">N+1</text>
           <% end %>
         </g>
       <% end %>
@@ -177,63 +150,39 @@
   <%# Right — slide-in detail panel %>
   <div
     id="assoc-panel"
-    style="
-      width:0;
-      overflow:hidden;
-      background:#2d3748;
-      border-left:1px solid #4a5568;
-      transition:width 0.2s ease;
-      flex-shrink:0;
-    "
+    style="width:0;overflow:hidden;background:#2d3748;border-left:1px solid #4a5568;transition:width 0.2s ease;flex-shrink:0;"
   >
     <div id="assoc-panel-inner" style="width:320px;padding:20px;display:none;">
 
-      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
-        <span id="panel-model-name"
-              style="font-size:16px;font-weight:bold;color:#e2e8f0;font-family:monospace;">
-        </span>
-        <button
-          onclick="closePanel()"
-          style="background:none;border:none;color:#a0aec0;font-size:18px;cursor:pointer;padding:0;"
-        >✕</button>
+      <div class="flex-between mb-16">
+        <span id="panel-model-name" class="text-primary bold mono text-16"></span>
+        <button onclick="closePanel()" class="text-muted cursor-pointer" style="background:none;border:none;font-size:18px;padding:0;">✕</button>
       </div>
 
       <%# Stats row %>
-      <div style="display:flex;gap:12px;margin-bottom:20px;">
-        <div style="flex:1;background:#1a202c;border-radius:4px;padding:10px;text-align:center;">
-          <div id="panel-query-count"
-               style="font-size:20px;font-weight:bold;color:#4299e1;font-family:monospace;">
-          </div>
-          <div style="font-size:10px;color:#a0aec0;margin-top:2px;">queries</div>
+      <div class="flex mb-20" style="gap:12px;">
+        <div class="stat-box">
+          <div id="panel-query-count" class="stat-value-lg text-blue"></div>
+          <div class="text-muted text-10 mt-2">queries</div>
         </div>
-        <div style="flex:1;background:#1a202c;border-radius:4px;padding:10px;text-align:center;">
-          <div id="panel-avg-time"
-               style="font-size:20px;font-weight:bold;color:#68d391;font-family:monospace;">
-          </div>
-          <div style="font-size:10px;color:#a0aec0;margin-top:2px;">avg ms</div>
+        <div class="stat-box">
+          <div id="panel-avg-time" class="stat-value-lg text-healthy"></div>
+          <div class="text-muted text-10 mt-2">avg ms</div>
         </div>
-        <div style="flex:1;background:#1a202c;border-radius:4px;padding:10px;text-align:center;">
-          <div id="panel-n1-count"
-               style="font-size:20px;font-weight:bold;font-family:monospace;">
-          </div>
-          <div style="font-size:10px;color:#a0aec0;margin-top:2px;">N+1 patterns</div>
+        <div class="stat-box">
+          <div id="panel-n1-count" class="stat-value-lg"></div>
+          <div class="text-muted text-10 mt-2">N+1 patterns</div>
         </div>
       </div>
 
       <%# Associations list %>
-      <div style="color:#a0aec0;font-size:10px;text-transform:uppercase;
-                  letter-spacing:0.05em;margin-bottom:8px;">
-        Associations
-      </div>
-      <div id="panel-associations" style="margin-bottom:20px;"></div>
+      <div class="text-muted text-upper text-sm mb-8">Associations</div>
+      <div id="panel-associations" class="mb-20"></div>
 
       <%# N+1 patterns %>
-      <div id="panel-n1-section" style="display:none;">
-        <div style="color:#fc8181;font-size:10px;text-transform:uppercase;
-                    letter-spacing:0.05em;margin-bottom:8px;">
-          N+1 Patterns
-        </div>
-        <div id="panel-n1-list" style="margin-bottom:20px;"></div>
+      <div id="panel-n1-section" class="d-none">
+        <div class="text-danger text-upper text-sm mb-8">N+1 Patterns</div>
+        <div id="panel-n1-list" class="mb-20"></div>
       </div>
 
       <%# Action links %>
@@ -243,7 +192,7 @@
   </div>
 </div>
 
-<%# Node data for JS — embedded as JSON %>
+<%# Data bridge — JSON for selectNode() / closePanel() defined in rails_vitals/application.js %>
 <script>
   var NODE_DATA = <%= raw @nodes.map { |n| [
     n.name,
@@ -268,103 +217,6 @@
     }
   ] }.to_h.to_json %>;
 
-  var N1_PATH     = "<%= rails_vitals.n_plus_ones_path %>";
+  var N1_PATH      = "<%= rails_vitals.n_plus_ones_path %>";
   var REQUEST_PATH = "<%= rails_vitals.requests_path %>";
-
-  function selectNode(nameJson) {
-    var name = JSON.parse(nameJson);
-    var node = NODE_DATA[name];
-    if (!node) return;
-
-    // Highlight selected node
-    document.querySelectorAll('[id^="node-"]').forEach(function(el) {
-      el.style.opacity = '0.4';
-    });
-    var el = document.getElementById('node-' + name);
-    if (el) el.style.opacity = '1';
-
-    // Populate panel
-    document.getElementById('panel-model-name').textContent = node.name;
-    document.getElementById('panel-query-count').textContent = node.query_count;
-    document.getElementById('panel-avg-time').textContent = node.avg_query_time_ms;
-
-    var n1Count = node.n1_patterns.length;
-    var n1El = document.getElementById('panel-n1-count');
-    n1El.textContent = n1Count;
-    n1El.style.color = n1Count > 0 ? '#fc8181' : '#68d391';
-
-    // Associations list
-    var assocHtml = '';
-    node.associations.forEach(function(a) {
-      var macroColor = a.macro === 'belongs_to' ? '#9f7aea' : '#f6ad55';
-      var n1Badge    = a.has_n1
-        ? '<span style="background:#fc818133;color:#fc8181;font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;">N+1</span>'
-        : '';
-      var indexBadge = a.indexed
-        ? '<span style="background:#68d39133;color:#68d391;font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;">indexed</span>'
-        : '<span style="background:#f6ad5533;color:#f6ad55;font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;">⚠ no index</span>';
-
-      assocHtml +=
-        '<div style="padding:8px;background:#1a202c;border-radius:4px;margin-bottom:6px;font-size:12px;">' +
-          '<span style="color:' + macroColor + ';font-family:monospace;">' + a.macro + '</span>' +
-          ' <span style="color:#e2e8f0;font-family:monospace;">:' + a.to_model.toLowerCase() + '</span>' +
-          n1Badge +
-          '<div style="color:#718096;font-size:10px;margin-top:4px;font-family:monospace;">' +
-            'fk: ' + a.foreign_key + indexBadge +
-          '</div>' +
-        '</div>';
-    });
-    document.getElementById('panel-associations').innerHTML =
-      assocHtml || '<div style="color:#718096;font-size:12px;">No associations</div>';
-
-    // N+1 section
-    var n1Section = document.getElementById('panel-n1-section');
-    if (n1Count > 0) {
-      n1Section.style.display = 'block';
-      var n1Html = '';
-      node.n1_patterns.forEach(function(p) {
-        n1Html +=
-          '<div style="padding:8px;background:#2d1515;border:1px solid #fc818144;' +
-                      'border-radius:4px;margin-bottom:6px;font-size:11px;">' +
-            '<div style="color:#fc8181;font-family:monospace;margin-bottom:4px;">' +
-              p.occurrences + 'x detected' +
-            '</div>' +
-            (p.fix_suggestion
-              ? '<div style="color:#68d391;font-family:monospace;">Fix: ' + p.fix_suggestion + '</div>'
-              : '') +
-          '</div>';
-      });
-      document.getElementById('panel-n1-list').innerHTML = n1Html;
-    } else {
-      n1Section.style.display = 'none';
-    }
-
-    // Action links
-    var linksHtml = ""
-
-    if (n1Count > 0) {
-      linksHtml +=
-        '<a href="' + N1_PATH + '" ' +
-           'style="display:block;background:#2d1515;border:1px solid #fc818166;' +
-                  'color:#fc8181;padding:8px 12px;border-radius:4px;font-size:12px;' +
-                  'text-decoration:none;text-align:center;margin-top:8px;">' +
-          'View N+1 patterns →' +
-        '</a>';
-    }
-    document.getElementById('panel-links').innerHTML = linksHtml;
-
-    // Open panel
-    var panel = document.getElementById('assoc-panel');
-    var inner = document.getElementById('assoc-panel-inner');
-    panel.style.width = '320px';
-    inner.style.display = 'block';
-  }
-
-  function closePanel() {
-    document.getElementById('assoc-panel').style.width = '0';
-    document.getElementById('assoc-panel-inner').style.display = 'none';
-    document.querySelectorAll('[id^="node-"]').forEach(function(el) {
-      el.style.opacity = '1';
-    });
-  }
 </script>

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

@@ -44,7 +44,7 @@
             <% if r.n_plus_one_patterns.any? %>
               <span class="n1-badge"><%= r.n_plus_one_patterns.size %></span>
             <% else %>
-              <span style="color:#68d391;">None</span>
+              <span class="text-healthy">None</span>
             <% end %>
           </td>
           <td><%= r.duration_ms&.round(1) %>ms</td>
@@ -82,7 +82,7 @@
 </div>
 
 <% if @records.any? %>
-  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;">
+  <div class="grid-3">
 
     <div class="card">
       <div class="card-title">Score Distribution</div>
@@ -99,7 +99,7 @@
             <tr>
               <td><%= label %></td>
               <td><%= count %></td>
-              <td style="color:#a0aec0;">
+              <td class="text-muted">
                 <%= @total > 0 ? ((count.to_f / @total) * 100).round(1) : 0 %>%
               </td>
             </tr>
@@ -120,7 +120,7 @@
         <tbody>
           <% @health_trend.each do |endpoint, score| %>
             <tr>
-              <td style="color:#a0aec0;font-size:11px;"><%= endpoint %></td>
+              <td class="text-muted text-sm"><%= endpoint %></td>
               <td>
                 <span class="badge badge-<%= score_label_to_color(score) %>">
                   <%= score %>
@@ -145,9 +145,9 @@
         <tbody>
           <% @query_volume.each do |label, stats| %>
             <tr>
-              <td style="color:#a0aec0;font-size:11px;"><%= label %></td>
+              <td class="text-muted text-sm"><%= label %></td>
               <td><%= stats[:queries] %></td>
-              <td style="color:#a0aec0;"><%= stats[:db_time] %>ms</td>
+              <td class="text-muted"><%= stats[:db_time] %>ms</td>
             </tr>
           <% end %>
         </tbody>

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

@@ -0,0 +1,137 @@
+<% meta = node.metadata %>
+<% node_id = "node_#{SecureRandom.hex(4)}" %>
+
+<div class="<%= depth > 0 ? 'plan-node' : '' %>">
+  <%# Node box — clickable %>
+  <div
+    class="node-box"
+    onclick="toggleExplanation(<%= j(node_id).to_json %>)"
+    style="background:<%= meta[:color] %>18;border:1px solid <%= meta[:color] %>44;"
+  >
+    <div class="flex-between flex-wrap" style="gap:8px;">
+      <%# Left — type + relation %>
+      <div class="flex-center" style="gap:10px;">
+        <span
+          class="mono bold text-12"
+          style="background:<%= meta[:color] %>33;color:<%= meta[:color] %>;padding:3px 10px;border-radius:4px;"
+        >
+          <%= meta[:label] %>
+        </span>
+
+        <% if node.relation %>
+          <span class="text-primary mono text-12">
+            <%= node.relation %>
+
+            <% if node.alias_name && node.alias_name != node.relation %>
+              <span class="text-grey">(<%= node.alias_name %>)</span>
+            <% end %>
+          </span>
+        <% end %>
+
+        <% if node.index_name %>
+          <span class="text-purple mono text-sm">
+            via <%= node.index_name %>
+          </span>
+        <% end %>
+      </div>
+
+      <%# Right — cost + timing + rows %>
+      <div class="flex mono text-sm" style="gap:16px;">
+        <div class="text-right">
+          <div class="text-muted">cost</div>
+          <div style="color:<%= cost_color(node.total_cost) %>;"><%= node.total_cost %></div>
+        </div>
+
+        <% if node.actual_total_ms %>
+          <div class="text-right">
+            <div class="text-muted">actual</div>
+            <div style="color:<%= time_color(node.actual_total_ms) %>;"><%= node.actual_total_ms %>ms</div>
+          </div>
+        <% end %>
+
+        <div class="text-right">
+          <% if node.children.empty? %>
+            <%# Leaf node — show planner accuracy %>
+            <div class="text-muted">est → actual</div>
+            <div class="mono">
+              <span class="text-grey"><%= node.plan_rows %></span>
+              <span style="color:#4a5568;"> → </span>
+              <% accuracy_color = node.plan_rows.to_i > 0 &&
+                  (node.actual_rows.to_f / node.plan_rows.to_f) > 10 ? "#fc8181" : "#68d391" %>
+              <span style="color:<%= accuracy_color %>;"><%= node.actual_rows %></span>
+            </div>
+          <% else %>
+            <%# Intermediate node — show loops %>
+            <div class="text-muted">loops</div>
+            <div class="mono" style="color:<%= node.loops.to_i > 10 ? '#fc8181' : '#e2e8f0' %>;">
+              <%= node.loops || 1 %>
+            </div>
+          <% end %>
+        </div>
+
+        <div class="text-right">
+          <div class="text-muted">width</div>
+          <div class="mono" style="color:<%= node.plan_width.to_i > 200 ? '#f6ad55' : '#718096' %>;">
+            <%= node.plan_width %>B
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <%# Index condition or filter %>
+    <% if node.index_condition || node.filter %>
+      <div class="mono text-grey mt-6 text-10">
+        <% if node.index_condition %>
+          <span class="text-purple">Index Cond:</span>
+          <%= node.index_condition %>
+        <% end %>
+
+        <% if node.filter %>
+          <span class="text-orange ml-8">Filter:</span>
+          <%= node.filter %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <%# Stale statistics warning, only on leaf nodes with bad estimates %>
+  <% if node.children.empty? && node.relation &&
+        node.plan_rows.to_i > 0 &&
+        (node.actual_rows.to_f / node.plan_rows.to_f) > 10 %>
+    <div
+      class="text-orange text-sm mt-4"
+      style="padding:6px 12px;background:#2d2010;border-radius:4px;"
+    >
+      ⚠ Planner estimated <%= node.plan_rows %> rows, got
+      <%= node.actual_rows %>. Run
+      <span class="mono">ANALYZE <%= node.relation %></span> to
+      refresh table statistics.
+    </div>
+  <% end %>
+
+  <%# Education card — hidden by default %>
+  <% if meta[:explanation] %>
+    <div
+      id="<%= node_id %>"
+      class="d-none text-primary mb-8 line-relaxed"
+      style="background:#2d3748;border-left:3px solid <%= meta[:color] %>;
+             border-radius:4px;padding:12px 16px;
+             margin-top:-4px;font-size:13px;"
+    >
+      <div
+        class="bold text-upper text-sm mb-6"
+        style="color:<%= meta[:color] %>;"
+      >
+        💡 <%= meta[:label] %>
+      </div>
+
+      <%= meta[:explanation] %>
+    </div>
+  <% end %>
+
+  <%# Recurse into children %>
+  <% node.children.each do |child| %>
+    <%= render partial: "rails_vitals/explains/plan_node",
+               locals: { node: child, depth: depth + 1 } %>
+  <% end %>
+</div>