brainzlab 0.1.1 → 0.1.2

data/lib/brainzlab/devtools/assets/templates/debug_panel.html.erb

@@ -0,0 +1,500 @@
+<div class="brainz-debug-panel<%= ' collapsed' unless @expand_by_default %>" data-controller="devtools">
+  <%# Calculate issues count and performance score %>
+  <%-
+    issues_count = 0
+    n_plus_ones = @database[:n_plus_ones] || []
+    slow_queries = (@database[:queries] || []).select { |q| (q[:duration] || 0) > 100 }
+    slow_views = (@views[:templates] || []).select { |v| (v[:duration] || 0) > 50 }
+    query_count = @database[:total_count] || 0
+    memory_delta = @memory[:delta_mb] || 0
+
+    issues_count += n_plus_ones.length
+    issues_count += slow_queries.length
+    issues_count += slow_views.length
+    issues_count += 1 if query_count > 20
+    issues_count += 1 if memory_delta > 50
+
+    # Calculate performance score (0-100)
+    score = 100
+    duration = @timing[:duration_ms] || 0
+
+    # Response time penalties
+    score -= 10 if duration > 500
+    score -= 10 if duration > 1000
+    score -= 10 if duration > 2000
+
+    # N+1 queries (major issue)
+    score -= n_plus_ones.length * 15
+
+    # Slow queries
+    score -= slow_queries.length * 5
+
+    # Query count penalties
+    score -= 10 if query_count > 20
+    score -= 10 if query_count > 50
+
+    # Memory penalties
+    score -= 10 if memory_delta > 50
+    score -= 10 if memory_delta > 100
+
+    # Slow views
+    score -= slow_views.length * 5
+
+    # Clamp to 0-100
+    score = [[score, 0].max, 100].min
+
+    # Score grade
+    score_grade = case score
+      when 90..100 then 'excellent'
+      when 70..89 then 'good'
+      when 50..69 then 'warning'
+      else 'poor'
+    end
+  -%>
+
+  <!-- Toolbar (always visible) -->
+  <div class="brainz-debug-toolbar" data-action="click->devtools#togglePanel">
+    <img src="<%= asset_url('logo.svg') %>" alt="BrainzLab" class="brainz-debug-logo">
+
+    <!-- Performance Score -->
+    <div class="brainz-score <%= score_grade %>">
+      <svg class="brainz-score-ring" viewBox="0 0 36 36">
+        <circle class="brainz-score-bg" cx="18" cy="18" r="16" fill="none" stroke-width="3"/>
+        <circle class="brainz-score-progress" cx="18" cy="18" r="16" fill="none" stroke-width="3"
+                stroke-dasharray="<%= score %>, 100"
+                transform="rotate(-90 18 18)"/>
+      </svg>
+      <span class="brainz-score-value"><%= score %></span>
+    </div>
+
+    <span class="brainz-debug-stat <%= duration_class(@timing[:duration_ms]) %>">
+      <strong><%= format_duration(@timing[:duration_ms]) %></strong>
+    </span>
+
+    <span class="brainz-debug-stat<%= ' warning' if query_count > 20 %>">
+      <strong><%= query_count %></strong> queries
+      (<%= format_duration(@database[:total_duration_ms]) %>)
+    </span>
+
+    <%- if n_plus_ones.any? -%>
+    <span class="brainz-debug-stat error">
+      <strong><%= n_plus_ones.length %></strong> N+1
+    </span>
+    <%- end -%>
+
+    <span class="brainz-debug-stat<%= memory_class(@memory[:delta_mb]) %>">
+      <strong><%= sprintf('%.1f', memory_delta) %>MB</strong>
+    </span>
+
+    <span class="brainz-debug-stat <%= status_class(@response[:status]) %>">
+      <strong><%= @response[:status] || 200 %></strong>
+    </span>
+
+    <span class="brainz-keyboard-hint">Ctrl+Shift+B</span>
+
+    <span class="brainz-debug-expand">
+      <svg width="12" height="12" viewBox="0 0 12 12">
+        <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </span>
+  </div>
+
+  <!-- Tabs -->
+  <div class="brainz-debug-tabs">
+    <button class="brainz-debug-tab active" data-tab="request" data-devtools-target="tab" data-action="click->devtools#switchTab">Request</button>
+    <button class="brainz-debug-tab" data-tab="queries" data-devtools-target="tab" data-action="click->devtools#switchTab">
+      Queries <span class="badge"><%= query_count %></span>
+    </button>
+    <button class="brainz-debug-tab" data-tab="views" data-devtools-target="tab" data-action="click->devtools#switchTab">
+      Views <span class="badge"><%= (@views[:templates] || []).length %></span>
+    </button>
+    <button class="brainz-debug-tab<%= ' has-issues' if issues_count > 0 %>" data-tab="issues" data-devtools-target="tab" data-action="click->devtools#switchTab">
+      Issues <span class="badge<%= ' error' if issues_count > 0 %>"><%= issues_count %></span>
+    </button>
+    <button class="brainz-debug-tab" data-tab="timeline" data-devtools-target="tab" data-action="click->devtools#switchTab">Timeline</button>
+  </div>
+
+  <!-- Content Panes -->
+  <div class="brainz-debug-content">
+    <!-- Request Pane -->
+    <div class="brainz-debug-pane active" data-pane="request" data-devtools-target="pane">
+      <table class="brainz-info-table">
+        <tr>
+          <th>Method</th>
+          <td><%= h(@request[:method]) %></td>
+        </tr>
+        <tr>
+          <th>Path</th>
+          <td><%= h(@request[:path]) %></td>
+        </tr>
+        <%- if @controller[:name] -%>
+        <tr>
+          <th>Controller</th>
+          <td><%= h(@controller[:name]) %>#<%= h(@controller[:action]) %></td>
+        </tr>
+        <%- end -%>
+        <tr>
+          <th>Status</th>
+          <td><span class="<%= status_class(@response[:status]) %>"><%= @response[:status] %></span></td>
+        </tr>
+        <tr>
+          <th>Request ID</th>
+          <td><code><%= h(@request[:request_id]) %></code></td>
+        </tr>
+        <tr>
+          <th>Duration</th>
+          <td><%= format_duration(@timing[:duration_ms]) %></td>
+        </tr>
+      </table>
+
+      <%- if @request[:params] && !@request[:params].empty? -%>
+      <h4 style="margin: 1rem 0 0.5rem; font-size: 0.8125rem; color: #718096;">Parameters</h4>
+      <pre class="brainz-code-block"><%= json_pretty(@request[:params]) %></pre>
+      <%- end -%>
+
+      <%- if @user && !@user.empty? -%>
+      <h4 style="margin: 1rem 0 0.5rem; font-size: 0.8125rem; color: #718096;">User</h4>
+      <pre class="brainz-code-block"><%= json_pretty(@user) %></pre>
+      <%- end -%>
+    </div>
+
+    <!-- Queries Pane -->
+    <div class="brainz-debug-pane" data-pane="queries" data-devtools-target="pane">
+      <%- queries = @database[:queries] || [] -%>
+      <%- if queries.any? -%>
+      <table class="brainz-query-table">
+        <thead>
+          <tr>
+            <th width="80">Time</th>
+            <th width="100">Name</th>
+            <th>Query</th>
+            <th width="150">Source</th>
+          </tr>
+        </thead>
+        <tbody>
+          <%- queries.each do |query| -%>
+          <tr class="brainz-query-row<%= ' cached' if query[:cached] %><%= ' slow' if (query[:duration] || 0) > 100 %>">
+            <td class="brainz-query-duration <%= query_duration_class(query[:duration]) %>">
+              <%= sprintf('%.2f', query[:duration] || 0) %>ms
+            </td>
+            <td><%= h(query[:name] || 'SQL') %></td>
+            <td class="brainz-query-sql" title="<%= h(query[:sql]) %>">
+              <%= h(truncate(query[:sql], 80)) %>
+            </td>
+            <td style="font-size: 0.75rem; color: #A0AEC0;"><%= h(query[:source]) %></td>
+          </tr>
+          <%- end -%>
+        </tbody>
+      </table>
+      <%- else -%>
+      <p style="color: #718096; font-size: 0.875rem;">No SQL queries recorded.</p>
+      <%- end -%>
+    </div>
+
+    <!-- Views Pane -->
+    <div class="brainz-debug-pane" data-pane="views" data-devtools-target="pane">
+      <%- templates = @views[:templates] || [] -%>
+      <%- if templates.any? -%>
+      <table class="brainz-view-table">
+        <thead>
+          <tr>
+            <th width="80">Time</th>
+            <th width="80">Type</th>
+            <th>Template</th>
+          </tr>
+        </thead>
+        <tbody>
+          <%- templates.each do |view| -%>
+          <tr class="<%= 'slow' if (view[:duration] || 0) > 50 %>">
+            <td style="font-family: var(--brainz-mono); font-size: 0.75rem;" class="<%= 'brainz-slow' if (view[:duration] || 0) > 50 %>">
+              <%= sprintf('%.2f', view[:duration] || 0) %>ms
+            </td>
+            <td><%= h(view[:type]) %></td>
+            <td style="font-family: var(--brainz-mono); font-size: 0.75rem;"><%= h(view[:template]) %></td>
+          </tr>
+          <%- end -%>
+        </tbody>
+      </table>
+      <%- else -%>
+      <p style="color: #718096; font-size: 0.875rem;">No view renders recorded.</p>
+      <%- end -%>
+    </div>
+
+    <!-- Issues Pane -->
+    <div class="brainz-debug-pane" data-pane="issues" data-devtools-target="pane">
+      <%- if issues_count == 0 -%>
+      <div class="brainz-no-issues">
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <p>Looking good!</p>
+        <span>No performance issues detected in this request. Your code is running efficiently.</span>
+      </div>
+      <%- else -%>
+      <div class="brainz-issues-container">
+
+      <%# N+1 Queries %>
+      <%- if n_plus_ones.any? -%>
+      <div class="brainz-issue-section">
+        <div class="brainz-issue-header error">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span>N+1 Query Detection</span>
+          <span class="issue-count"><%= n_plus_ones.length %> found</span>
+        </div>
+        <%- n_plus_ones.each do |n1| -%>
+        <div class="brainz-issue-item">
+          <div class="brainz-issue-content">
+            <span class="brainz-issue-metric critical"><%= n1[:count] %>x</span>
+            similar queries totaling <strong><%= format_duration(n1[:total_duration_ms]) %></strong>
+            <%- if n1[:source] -%>
+            <span class="brainz-issue-source"><%= h(n1[:source]) %></span>
+            <%- end -%>
+            <code><%= h(truncate(n1[:sample_query], 100)) %></code>
+          </div>
+          <button class="brainz-copy-to-ai-btn" type="button"
+                  data-action="click->devtools#copyToAi"
+                  data-issue-type="n_plus_one"
+                  data-n1-count="<%= n1[:count] %>"
+                  data-n1-duration="<%= n1[:total_duration_ms] %>"
+                  data-n1-source="<%= h(n1[:source] || '') %>"
+                  data-n1-query="<%= h(n1[:sample_query] || '') %>"
+                  data-n1-pattern="<%= h(n1[:pattern] || '') %>">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Copy
+          </button>
+        </div>
+        <%- end -%>
+      </div>
+      <%- end -%>
+
+      <%# Slow Queries %>
+      <%- if slow_queries.any? -%>
+      <div class="brainz-issue-section">
+        <div class="brainz-issue-header warning">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M12 6v6l4 2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span>Slow Queries</span>
+          <span class="issue-count"><%= slow_queries.length %> over 100ms</span>
+        </div>
+        <%- slow_queries.each do |query| -%>
+        <div class="brainz-issue-item">
+          <div class="brainz-issue-content">
+            <span class="brainz-issue-metric slow"><%= sprintf('%.0f', query[:duration]) %>ms</span>
+            <span class="brainz-issue-name"><%= h(query[:name] || 'SQL') %></span>
+            <%- if query[:source] -%>
+            <span class="brainz-issue-source"><%= h(query[:source]) %></span>
+            <%- end -%>
+            <code><%= h(truncate(query[:sql], 100)) %></code>
+          </div>
+          <button class="brainz-copy-to-ai-btn" type="button"
+                  data-action="click->devtools#copyToAi"
+                  data-issue-type="slow_query"
+                  data-query-duration="<%= query[:duration] %>"
+                  data-query-sql="<%= h(query[:sql] || '') %>"
+                  data-query-source="<%= h(query[:source] || '') %>"
+                  data-query-name="<%= h(query[:name] || '') %>">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Copy
+          </button>
+        </div>
+        <%- end -%>
+      </div>
+      <%- end -%>
+
+      <%# Too Many Queries %>
+      <%- if query_count > 20 -%>
+      <div class="brainz-issue-section">
+        <div class="brainz-issue-header warning">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7c-2 0-3 1-3 3z"/>
+            <path d="M9 12h6M12 9v6" stroke-linecap="round"/>
+          </svg>
+          <span>Excessive Database Calls</span>
+          <span class="issue-count"><%= query_count %> queries</span>
+        </div>
+        <div class="brainz-issue-item">
+          <div class="brainz-issue-content">
+            <span class="brainz-issue-metric slow"><%= query_count %></span>
+            queries executed in this request
+            <span class="brainz-issue-hint">Use eager loading or caching to reduce database round-trips.</span>
+          </div>
+          <button class="brainz-copy-to-ai-btn" type="button"
+                  data-action="click->devtools#copyToAi"
+                  data-issue-type="too_many_queries"
+                  data-query-count="<%= query_count %>"
+                  data-controller-name="<%= h(@controller[:name] || '') %>"
+                  data-action-name="<%= h(@controller[:action] || '') %>">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Copy
+          </button>
+        </div>
+      </div>
+      <%- end -%>
+
+      <%# Slow Views %>
+      <%- if slow_views.any? -%>
+      <div class="brainz-issue-section">
+        <div class="brainz-issue-header warning">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+            <path d="M3 9h18M9 21V9" stroke-linecap="round"/>
+          </svg>
+          <span>Slow View Rendering</span>
+          <span class="issue-count"><%= slow_views.length %> over 50ms</span>
+        </div>
+        <%- slow_views.each do |view| -%>
+        <div class="brainz-issue-item">
+          <div class="brainz-issue-content">
+            <span class="brainz-issue-metric slow"><%= sprintf('%.0f', view[:duration]) %>ms</span>
+            <span class="brainz-issue-name"><%= h(view[:type]) %></span>
+            <code><%= h(view[:template]) %></code>
+          </div>
+          <button class="brainz-copy-to-ai-btn" type="button"
+                  data-action="click->devtools#copyToAi"
+                  data-issue-type="slow_view"
+                  data-view-duration="<%= view[:duration] %>"
+                  data-view-template="<%= h(view[:template] || '') %>"
+                  data-view-type="<%= h(view[:type] || '') %>">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Copy
+          </button>
+        </div>
+        <%- end -%>
+      </div>
+      <%- end -%>
+
+      <%# High Memory Usage %>
+      <%- if memory_delta > 50 -%>
+      <div class="brainz-issue-section">
+        <div class="brainz-issue-header warning">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M22 12h-4l-3 9L9 3l-3 9H2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span>High Memory Allocation</span>
+          <span class="issue-count">+<%= sprintf('%.0f', memory_delta) %>MB</span>
+        </div>
+        <div class="brainz-issue-item">
+          <div class="brainz-issue-content">
+            <span class="brainz-issue-metric critical">+<%= sprintf('%.0f', memory_delta) %>MB</span>
+            memory allocated during this request
+            <span class="brainz-issue-hint">Check for large data loads or inefficient object creation.</span>
+          </div>
+          <button class="brainz-copy-to-ai-btn" type="button"
+                  data-action="click->devtools#copyToAi"
+                  data-issue-type="high_memory"
+                  data-memory-delta="<%= memory_delta %>"
+                  data-memory-before="<%= @memory[:before_mb] %>"
+                  data-memory-after="<%= @memory[:after_mb] %>"
+                  data-controller-name="<%= h(@controller[:name] || '') %>"
+                  data-action-name="<%= h(@controller[:action] || '') %>">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Copy
+          </button>
+        </div>
+      </div>
+      <%- end -%>
+
+      </div>
+      <%- end -%>
+    </div>
+
+    <!-- Timeline Pane -->
+    <div class="brainz-debug-pane" data-pane="timeline" data-devtools-target="pane">
+      <%- total = (@timing[:duration_ms] || 1).to_f -%>
+      <%- db_ms = @database[:total_duration_ms] || 0 -%>
+      <%- views_ms = @views[:total_duration_ms] || 0 -%>
+      <%- other_ms = [total - db_ms - views_ms, 0].max -%>
+      <%- db_pct = (db_ms / total * 100).round -%>
+      <%- views_pct = (views_ms / total * 100).round -%>
+      <%- other_pct = [100 - db_pct - views_pct, 0].max -%>
+
+      <!-- Total Time Header -->
+      <div class="timeline-header">
+        <span class="timeline-total"><%= format_duration(@timing[:duration_ms]) %></span>
+        <span class="timeline-label">total request time</span>
+      </div>
+
+      <!-- Timeline Bar -->
+      <div class="timeline-bar">
+        <%- if db_pct > 0 -%>
+        <div class="timeline-segment db" style="width: <%= [db_pct, 5].max %>%">
+          <span class="timeline-segment-label">DB</span>
+        </div>
+        <%- end -%>
+        <%- if views_pct > 0 -%>
+        <div class="timeline-segment views" style="width: <%= [views_pct, 5].max %>%">
+          <span class="timeline-segment-label">Views</span>
+        </div>
+        <%- end -%>
+        <%- if other_pct > 5 -%>
+        <div class="timeline-segment other" style="width: <%= other_pct %>%">
+          <span class="timeline-segment-label">Other</span>
+        </div>
+        <%- end -%>
+      </div>
+
+      <!-- Stats Grid -->
+      <div class="timeline-stats">
+        <div class="timeline-stat">
+          <div class="timeline-stat-icon db">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <ellipse cx="12" cy="5" rx="9" ry="3"/>
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+            </svg>
+          </div>
+          <div class="timeline-stat-content">
+            <div class="timeline-stat-value"><%= format_duration(db_ms) %></div>
+            <div class="timeline-stat-label">Database · <%= @database[:total_count] || 0 %> queries</div>
+          </div>
+          <div class="timeline-stat-pct"><%= db_pct %>%</div>
+        </div>
+
+        <div class="timeline-stat">
+          <div class="timeline-stat-icon views">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+              <path d="M3 9h18M9 21V9"/>
+            </svg>
+          </div>
+          <div class="timeline-stat-content">
+            <div class="timeline-stat-value"><%= format_duration(views_ms) %></div>
+            <div class="timeline-stat-label">Views · <%= (@views[:templates] || []).length %> templates</div>
+          </div>
+          <div class="timeline-stat-pct"><%= views_pct %>%</div>
+        </div>
+
+        <div class="timeline-stat">
+          <div class="timeline-stat-icon other">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/>
+              <path d="M12 6v6l4 2"/>
+            </svg>
+          </div>
+          <div class="timeline-stat-content">
+            <div class="timeline-stat-value"><%= format_duration(other_ms) %></div>
+            <div class="timeline-stat-label">Ruby · controller, middleware</div>
+          </div>
+          <div class="timeline-stat-pct"><%= other_pct %>%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<link rel="stylesheet" href="<%= asset_url('devtools.css') %>">
+<script src="<%= asset_url('devtools.js') %>"></script>