RubyGems - devformance - Versions diffs - 0.1.0 - Mend

devformance 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

checksums.yaml +7 -0
data/README.md +205 -0
data/app/assets/builds/tailwind.css +2 -0
data/app/assets/images/icon.png +0 -0
data/app/assets/images/icon.svg +68 -0
data/app/assets/stylesheets/devmetrics/dashboard.css +476 -0
data/app/assets/stylesheets/devmetrics_live/application.css +10 -0
data/app/assets/tailwind/application.css +1 -0
data/app/channels/application_cable/channel.rb +4 -0
data/app/channels/application_cable/connection.rb +4 -0
data/app/channels/devformance/metrics_channel.rb +25 -0
data/app/controllers/application_controller.rb +4 -0
data/app/controllers/devformance/application_controller.rb +19 -0
data/app/controllers/devformance/icons_controller.rb +21 -0
data/app/controllers/devformance/metrics_controller.rb +41 -0
data/app/controllers/devformance/playground_controller.rb +89 -0
data/app/helpers/application_helper.rb +9 -0
data/app/helpers/metrics_helper.rb +2 -0
data/app/helpers/playground_helper.rb +2 -0
data/app/javascript/devformance/channels/consumer.js +2 -0
data/app/javascript/devformance/channels/index.js +1 -0
data/app/javascript/devformance/controllers/application.js +9 -0
data/app/javascript/devformance/controllers/hello_controller.js +7 -0
data/app/javascript/devformance/controllers/index.js +14 -0
data/app/javascript/devformance/controllers/metrics_controller.js +364 -0
data/app/javascript/devformance/controllers/playground_controller.js +33 -0
data/app/javascript/devmetrics.js +4 -0
data/app/jobs/application_job.rb +7 -0
data/app/jobs/devformance/file_runner_job.rb +318 -0
data/app/mailers/application_mailer.rb +4 -0
data/app/models/application_record.rb +3 -0
data/app/models/devformance/file_result.rb +14 -0
data/app/models/devformance/run.rb +19 -0
data/app/models/devformance/slow_query.rb +5 -0
data/app/views/devformance/metrics/index.html.erb +79 -0
data/app/views/devformance/playground/run.html.erb +63 -0
data/app/views/layouts/devformance/application.html.erb +856 -0
data/app/views/layouts/mailer.html.erb +13 -0
data/app/views/layouts/mailer.text.erb +1 -0
data/app/views/metrics/index.html.erb +334 -0
data/app/views/pwa/manifest.json.erb +22 -0
data/app/views/pwa/service-worker.js +26 -0
data/config/BUSINESS_LOGIC_PLAN.md +1244 -0
data/config/application.rb +31 -0
data/config/boot.rb +4 -0
data/config/cable.yml +17 -0
data/config/cache.yml +16 -0
data/config/credentials.yml.enc +1 -0
data/config/database.yml +98 -0
data/config/deploy.yml +116 -0
data/config/engine_routes.rb +13 -0
data/config/environment.rb +5 -0
data/config/environments/development.rb +84 -0
data/config/environments/production.rb +90 -0
data/config/environments/test.rb +59 -0
data/config/importmap.rb +11 -0
data/config/initializers/assets.rb +7 -0
data/config/initializers/content_security_policy.rb +25 -0
data/config/initializers/filter_parameter_logging.rb +8 -0
data/config/initializers/inflections.rb +16 -0
data/config/locales/en.yml +31 -0
data/config/master.key +1 -0
data/config/puma.rb +41 -0
data/config/queue.yml +22 -0
data/config/recurring.yml +15 -0
data/config/routes.rb +20 -0
data/config/storage.yml +34 -0
data/db/migrate/20260317144616_create_slow_queries.rb +13 -0
data/db/migrate/20260317175630_create_performance_runs.rb +14 -0
data/db/migrate/20260317195043_add_run_id_to_slow_queries.rb +10 -0
data/db/migrate/20260319000001_create_devformance_runs.rb +20 -0
data/db/migrate/20260319000002_create_devformance_file_results.rb +29 -0
data/db/migrate/20260319000003_add_columns_to_slow_queries.rb +7 -0
data/lib/devformance/bullet_log_parser.rb +47 -0
data/lib/devformance/compatibility.rb +12 -0
data/lib/devformance/coverage_setup.rb +33 -0
data/lib/devformance/engine.rb +80 -0
data/lib/devformance/log_writer.rb +29 -0
data/lib/devformance/run_orchestrator.rb +58 -0
data/lib/devformance/sql_instrumentor.rb +29 -0
data/lib/devformance/test_framework/base.rb +43 -0
data/lib/devformance/test_framework/coverage_helper.rb +76 -0
data/lib/devformance/test_framework/detector.rb +26 -0
data/lib/devformance/test_framework/minitest.rb +71 -0
data/lib/devformance/test_framework/registry.rb +24 -0
data/lib/devformance/test_framework/rspec.rb +60 -0
data/lib/devformance/test_helper.rb +42 -0
data/lib/devformance/version.rb +3 -0
data/lib/devformance.rb +196 -0
data/lib/generators/devformance/install/install_generator.rb +73 -0
data/lib/generators/devformance/install/templates/add_columns_to_slow_queries.rb.erb +7 -0
data/lib/generators/devformance/install/templates/add_run_id_to_slow_queries.rb.erb +10 -0
data/lib/generators/devformance/install/templates/create_devformance_file_results.rb.erb +29 -0
data/lib/generators/devformance/install/templates/create_devformance_runs.rb.erb +20 -0
data/lib/generators/devformance/install/templates/create_performance_runs.rb.erb +14 -0
data/lib/generators/devformance/install/templates/create_slow_queries.rb.erb +13 -0
data/lib/generators/devformance/install/templates/initializer.rb +23 -0
data/lib/tasks/devformance.rake +45 -0
data/spec/fixtures/devformance/devformance_run.rb +27 -0
data/spec/fixtures/devformance/file_result.rb +34 -0
data/spec/fixtures/devformance/slow_query.rb +11 -0
data/spec/lib/devmetrics/log_writer_spec.rb +81 -0
data/spec/lib/devmetrics/run_orchestrator_spec.rb +102 -0
data/spec/lib/devmetrics/sql_instrumentor_spec.rb +115 -0
data/spec/models/devmetrics/file_result_spec.rb +87 -0
data/spec/models/devmetrics/run_spec.rb +66 -0
data/spec/models/query_log_spec.rb +21 -0
data/spec/rails_helper.rb +20 -0
data/spec/requests/devmetrics/metrics_controller_spec.rb +149 -0
data/spec/requests/devmetrics_pages_spec.rb +12 -0
data/spec/requests/performance_spec.rb +17 -0
data/spec/requests/slow_perf_spec.rb +9 -0
data/spec/spec_helper.rb +114 -0
data/spec/support/devmetrics_formatter.rb +106 -0
data/spec/support/devmetrics_metrics.rb +37 -0
data/spec/support/factory_bot.rb +3 -0
metadata +200 -0

data/app/views/layouts/mailer.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/app/views/layouts/mailer.text.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= yield %>

data/app/views/metrics/index.html.erb ADDED Viewed

@@ -0,0 +1,334 @@
+<%# ============================================================
+    Devformance — Dashboard View
+    Design: Dark technical, IBM Plex Sans + JetBrains Mono
+    Colors: #0F172A base, #1E293B cards, #22C55E accent
+    ============================================================ %>
+<div data-controller="metrics">
+  <%# ── Page header ── %>
+  <div style="margin-bottom:2rem;">
+    <div style="display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem;">
+      <div>
+        <p style="font-family:var(--font-mono); font-size:0.7rem; font-weight:600; letter-spacing:0.12em; color:var(--green); text-transform:uppercase; margin:0 0 0.375rem;">
+          Rails 8 · Solid Cable · No Redis
+        </p>
+        <h2 style="font-size:1.75rem; font-weight:700; color:var(--text-primary); margin:0; letter-spacing:-0.02em; line-height:1.2;">
+          Performance Dashboard
+        </h2>
+        <p style="color:var(--text-secondary); font-size:0.875rem; margin:0.375rem 0 0;">
+          Powered by Solid Cable — metrics broadcast on each test run.
+        </p>
+      </div>
+      <div style="display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; color:var(--text-muted); font-family:var(--font-mono);">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:#64748b;">
+          <circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/>
+        </svg>
+        Last updated: <span id="last-updated-ts" style="color:var(--text-secondary);">just now</span>
+      </div>
+    </div>
+  </div>
+  <%# ── Run Performance Tests CTA ── %>
+  <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; background:rgba(34,197,94,0.06); border:1px solid rgba(34,197,94,0.2); border-radius:12px; padding:1.125rem 1.5rem; margin-bottom:1.75rem;">
+    <div style="display:flex; align-items:center; gap:1rem;">
+      <div style="display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.25); flex-shrink:0;">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
+      </div>
+      <div>
+        <p style="font-size:0.9375rem; font-weight:600; color:var(--text-primary); margin:0 0 0.125rem;">Run Performance Tests</p>
+        <p style="font-size:0.8125rem; color:var(--text-secondary); margin:0;">Scans <code style="font-family:var(--font-mono); color:#67E8F9;">spec/requests/</code> for request specs, instruments SQL, detects N+1s, and streams results live.</p>
+      </div>
+    </div>
+    <div style="display:flex; align-items:center; gap:0.75rem;">
+      <span style="font-size:0.7rem; color:var(--text-muted); font-family:var(--font-mono); white-space:nowrap;" data-metrics-target="testStatusBadge"></span>
+      <button
+        class="btn-primary"
+        data-action="click->metrics#runTests"
+        data-metrics-target="runTestsBtn"
+        id="run-tests-btn"
+        aria-label="Run performance test suite"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
+        Run Performance Tests
+      </button>
+    </div>
+  </div>
+  <%# ── Live Terminal Output Panel (hidden until test run starts) ── %>
+  <div id="test-output-panel" data-metrics-target="testPanel" style="display:none; margin-bottom:1.75rem;">
+    <div class="panel">
+      <div class="panel-header">
+        <div style="display:flex; align-items:center; gap:0.625rem;">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#4ADE80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="4,17 10,11 4,5"/><line x1="12" y1="19" x2="20" y2="19"/>
+          </svg>
+          <h3 style="font-size:0.875rem; font-weight:600; color:var(--text-primary); margin:0; font-family:var(--font-mono);">Test Runner Output</h3>
+        </div>
+        <div style="display:flex; align-items:center; gap:0.75rem;">
+          <span class="badge badge-green" data-metrics-target="testStatus">streaming</span>
+          <button onclick="document.getElementById('test-output-panel').style.display='none'" style="background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; line-height:1; padding:0;" aria-label="Close terminal output">✕</button>
+        </div>
+      </div>
+      <%# Progress Bar %>
+      <div style="padding: 0 1.5rem 1rem;">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem;">
+          <span style="font-size:0.75rem; color:var(--text-secondary); font-family:var(--font-mono);" data-metrics-target="testProgressText">0% Complete</span>
+          <span style="font-size:0.75rem; color:var(--text-muted); font-family:var(--font-mono);" data-metrics-target="testFileCount">&nbsp;</span>
+        </div>
+        <div class="progress-track" style="height: 10px;">
+          <div class="progress-bar" style="width:0%; background:linear-gradient(90deg, #22C55E, #4ADE80);" data-metrics-target="testProgressBar"></div>
+        </div>
+      </div>
+      <div style="background:#030712; border-radius:0 0 12px 12px; padding:1rem 1.25rem; max-height:380px; overflow-y:auto;" id="test-terminal">
+        <pre style="margin:0; font-family:var(--font-mono); font-size:0.8125rem; line-height:1.6; white-space:pre-wrap; word-break:break-all;" data-metrics-target="testOutput"></pre>
+      </div>
+    </div>
+  </div>
+  <%# ── KPI stat cards ── %>
+  <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-bottom:1.75rem;">
+    <%# Total Queries %>
+    <div class="stat-card" aria-label="Total Queries stat">
+      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;">
+        <span style="font-size:0.75rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted);">Total Queries</span>
+        <span style="display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.2);">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#60A5FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <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>
+        </span>
+      </div>
+      <div class="mono" style="font-size:2.25rem; font-weight:700; color:var(--text-primary); line-height:1; margin-bottom:0.375rem;" data-metrics-target="totalQueries">
+        <%= @total_queries %>
+      </div>
+      <div style="font-size:0.75rem; color:var(--text-muted);">all time</div>
+    </div>
+    <%# Avg Duration %>
+    <div class="stat-card" aria-label="Avg Query Duration stat">
+      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;">
+        <span style="font-size:0.75rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted);">Avg Duration</span>
+        <span style="display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(234,179,8,0.12); border:1px solid rgba(234,179,8,0.2);">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FCD34D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/>
+          </svg>
+        </span>
+      </div>
+      <div style="display:flex; align-items:baseline; gap:0.375rem;">
+        <div class="mono" style="font-size:2.25rem; font-weight:700; color:var(--text-primary); line-height:1; margin-bottom:0.375rem;" data-metrics-target="avgDuration">
+          <%= @avg_duration %>
+        </div>
+        <span style="font-family:var(--font-mono); font-size:0.875rem; color:var(--text-muted); margin-bottom:0.375rem;">ms</span>
+      </div>
+      <div style="font-size:0.75rem; color:var(--text-muted);">across logged queries</div>
+    </div>
+    <%# N+1 Detected %>
+    <div class="stat-card" aria-label="N+1 Issues stat">
+      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;">
+        <span style="font-size:0.75rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted);">N+1 Detected</span>
+        <span style="display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.2);">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#F87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+            <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
+          </svg>
+        </span>
+      </div>
+      <div class="mono" style="font-size:2.25rem; font-weight:700; color:<%= @n_plus_one_count > 0 ? '#EF4444' : '#22C55E' %>; line-height:1; margin-bottom:0.375rem;" data-metrics-target="nPlusOneCount">
+        <%= @n_plus_one_count %>
+      </div>
+      <div style="font-size:0.75rem; color:var(--text-muted);">via Bullet gem</div>
+    </div>
+    <%# Test Coverage %>
+    <div class="stat-card" aria-label="Test Coverage stat">
+      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;">
+        <span style="font-size:0.75rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted);">Test Coverage</span>
+        <span style="display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.2);">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#4ADE80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="20,6 9,17 4,12"/>
+          </svg>
+        </span>
+      </div>
+      <div style="display:flex; align-items:baseline; gap:0.375rem;">
+        <div class="mono" style="font-size:2.25rem; font-weight:700; color:#22C55E; line-height:1; margin-bottom:0.375rem;" data-metrics-target="coverage">
+          92.3%
+        </div>
+        <span data-metrics-target="coverageTrend" style="font-size:0.7rem; color:#4ADE80; font-family:var(--font-mono); display:flex; align-items:center; gap:0.125rem; margin-bottom:0.375rem;">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18,15 12,9 6,15"/></svg>
+          live
+        </span>
+      </div>
+      <div style="font-size:0.75rem; color:var(--text-muted);">SimpleCov · updating live</div>
+    </div>
+  </div>
+  <%# ── Bottom grid: Slow Queries + Right Column ── %>
+  <div style="display:grid; grid-template-columns:1fr 380px; gap:1.5rem; align-items:start;" id="main-grid">
+    <%# Left: Slow Queries Panel %>
+    <div class="panel">
+      <div class="panel-header">
+        <div style="display:flex; align-items:center; gap:0.625rem;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+            <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
+          </svg>
+          <h3 style="font-size:0.9375rem; font-weight:600; color:var(--text-primary); margin:0;">N+1 & Slow Queries</h3>
+        </div>
+        <span class="badge badge-red">
+          <span class="pulse-dot" style="width:5px;height:5px;"></span>
+          Tracking
+        </span>
+      </div>
+      <div style="padding:1.25rem 1.5rem;" id="slow-queries-list" data-metrics-target="slowQueriesList">
+        <% if @recent_slow_queries.any? %>
+          <div style="display:flex; flex-direction:column; gap:0.875rem;">
+            <% @recent_slow_queries.each do |query| %>
+              <div class="slow-query-item fade-in">
+                <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.5rem;">
+                  <div style="display:flex; align-items:center; gap:0.5rem;">
+                    <span class="badge badge-red">N+1</span>
+                    <span style="font-size:0.875rem; font-weight:600; color:#FCA5A5; font-family:var(--font-mono);"><%= query.model_class %></span>
+                  </div>
+                  <span style="font-size:0.7rem; color:var(--text-muted); font-family:var(--font-mono);">line <%= query.line_number %></span>
+                </div>
+                <div style="background:rgba(15,23,42,0.8); border:1px solid rgba(239,68,68,0.15); border-radius:6px; padding:0.625rem 0.75rem;">
+                  <span style="font-size:0.75rem; color:var(--text-muted); display:block; margin-bottom:0.25rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:600;">Fix suggestion</span>
+                  <code style="font-family:var(--font-mono); font-size:0.8rem; color:#A5F3FC; word-break:break-all;"><%= query.fix_suggestion %></code>
+                </div>
+                <div style="margin-top:0.5rem; font-size:0.7rem; color:var(--text-muted); font-family:var(--font-mono);">
+                  Detected <%= time_ago_in_words(query.created_at) %> ago
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <div id="no-slow-queries-msg" style="text-align:center; padding:3rem 1rem;">
+            <div style="display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:14px; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); margin-bottom:1rem;">
+              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4ADE80" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/>
+              </svg>
+            </div>
+            <p style="font-size:0.9375rem; font-weight:600; color:var(--text-primary); margin:0 0 0.375rem;">All clear!</p>
+            <p style="font-size:0.8125rem; color:var(--text-muted); margin:0;">No N+1s or slow queries detected. Try running queries in the Playground.</p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <%# Right column %>
+    <div style="display:flex; flex-direction:column; gap:1rem;">
+      <%# Playground CTA — dark variant with green glow %>
+      <div style="
+        background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, rgba(16,185,129,0.06) 100%);
+        border: 1px solid rgba(34,197,94,0.25);
+        border-radius: 12px;
+        padding: 1.5rem;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.2s, box-shadow 0.2s;
+      " onmouseover="this.style.borderColor='rgba(34,197,94,0.5)'; this.style.boxShadow='0 0 28px rgba(34,197,94,0.12)';" onmouseout="this.style.borderColor='rgba(34,197,94,0.25)'; this.style.boxShadow='none';">
+        <div style="display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; background:rgba(34,197,94,0.15); border:1px solid rgba(34,197,94,0.3); margin-bottom:0.875rem;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
+          </svg>
+        </div>
+        <h3 style="font-size:1rem; font-weight:700; color:var(--text-primary); margin:0 0 0.375rem; letter-spacing:-0.01em;">Query Playground</h3>
+        <p style="font-size:0.8125rem; color:var(--text-secondary); margin:0 0 1.125rem; line-height:1.5;">Execute ActiveRecord queries & watch metrics update live via Solid Cable broadcast.</p>
+        <a href="/playground/run" class="btn-primary" style="width:100%; justify-content:center;">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polygon points="5,3 19,12 5,21"/>
+          </svg>
+          Launch Playground
+        </a>
+      </div>
+      <%# System Resources %>
+      <div class="panel">
+        <div class="panel-header">
+          <div style="display:flex; align-items:center; gap:0.625rem;">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#A78BFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
+            </svg>
+            <h3 style="font-size:0.875rem; font-weight:600; color:var(--text-primary); margin:0;">System Resources</h3>
+          </div>
+          <span class="badge badge-muted">Live</span>
+        </div>
+        <div style="padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:1.25rem;">
+          <%# Memory %>
+          <div>
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem;">
+              <span style="display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--text-secondary);">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#60A5FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
+                </svg>
+                Memory
+              </span>
+              <span class="mono" style="font-size:0.8125rem; color:var(--text-primary);" data-metrics-target="memoryUsage">245 MB</span>
+            </div>
+            <div class="progress-track">
+              <div class="progress-bar" style="width:45%; background:linear-gradient(90deg, #3B82F6, #60A5FA);" data-metrics-target="memoryBar"></div>
+            </div>
+          </div>
+          <%# DB Connections %>
+          <div>
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem;">
+              <span style="display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--text-secondary);">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#A78BFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                </svg>
+                DB Connections
+              </span>
+              <span class="mono" style="font-size:0.8125rem; color:var(--text-primary);" data-metrics-target="dbConnections">14 / 50</span>
+            </div>
+            <div class="progress-track">
+              <div class="progress-bar" style="width:28%; background:linear-gradient(90deg, #A855F7, #C084FC);" data-metrics-target="connectionBar"></div>
+            </div>
+          </div>
+          <%# Coverage bar %>
+          <div>
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem;">
+              <span style="display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--text-secondary);">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#4ADE80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <polyline points="20,6 9,17 4,12"/>
+                </svg>
+                Test Coverage
+              </span>
+              <span class="mono" style="font-size:0.8125rem; color:#22C55E;" data-metrics-target="coverageBar">92.3%</span>
+            </div>
+            <div class="progress-track">
+              <div class="progress-bar" style="width:92.3%; background:linear-gradient(90deg, #16A34A, #22C55E);" data-metrics-target="coverageBarEl"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<%# Responsive grid collapse %>
+<style>
+  @media (max-width: 900px) {
+    #main-grid { grid-template-columns: 1fr !important; }
+  }
+</style>
+<script>
+  // Update the "last updated" timestamp on every cable broadcast
+  document.addEventListener('metrics:updated', () => {
+    const el = document.getElementById('last-updated-ts')
+    if (el) el.textContent = new Date().toLocaleTimeString()
+  })
+</script>

data/app/views/pwa/manifest.json.erb ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "name": "Devformance",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "scope": "/",
+  "description": "Devformance.",
+  "theme_color": "red",
+  "background_color": "red"
+}

data/app/views/pwa/service-worker.js ADDED Viewed

@@ -0,0 +1,26 @@
+// Add a service worker for processing Web Push notifications:
+//
+// self.addEventListener("push", async (event) => {
+//   const { title, options } = await event.data.json()
+//   event.waitUntil(self.registration.showNotification(title, options))
+// })
+//
+// self.addEventListener("notificationclick", function(event) {
+//   event.notification.close()
+//   event.waitUntil(
+//     clients.matchAll({ type: "window" }).then((clientList) => {
+//       for (let i = 0; i < clientList.length; i++) {
+//         let client = clientList[i]
+//         let clientPath = (new URL(client.url)).pathname
+//
+//         if (clientPath == event.notification.data.path && "focus" in client) {
+//           return client.focus()
+//         }
+//       }
+//
+//       if (clients.openWindow) {
+//         return clients.openWindow(event.notification.data.path)
+//       }
+//     })
+//   )
+// })