rails_live_dashboard 0.1.0

data/app/views/rails_live_dashboard/dashboard/show.html.erb

@@ -0,0 +1,27 @@
+<div class="mt-10">
+  <h3 class="text-base font-semibold leading-6 text-gray-900">System information</h3>
+  <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-4">
+    <div class="overflow-hidden rounded-lg bg-gradient-to-r from-orange-700 to-orange-500 px-4 py-5 shadow sm:p-6">
+      <dt class="truncate text-sm font-medium text-white">Ruby version</dt>
+      <dd class="mt-1 text-3xl font-semibold tracking-tight text-white"><%= @ruby_version %></dd>
+    </div>
+    <div class="overflow-hidden rounded-lg bg-gradient-to-r from-red-700 to-red-500 px-4 py-5 shadow sm:p-6">
+      <dt class="truncate text-sm font-medium text-white">Rails version</dt>
+      <dd class="mt-1 text-3xl font-semibold tracking-tight text-white"><%= @rails_version %></dd>
+    </div>
+  </dl>
+</div>
+
+<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 mt-10">
+  <turbo-frame id="slow_requests_widget" src="<%= widgets_slowest_requests_path %>">
+    <div class="flex justify-center items-center h-64 w-full rounded-lg bg-white shadow-sm">
+      <%= lucide_icon('loader-2', class: 'h-16 w-16 text-gray-800 animate-spin') %>
+    </div>
+  </turbo-frame>
+
+  <turbo-frame id="slowest_queries_widget" src="<%= widgets_slowest_queries_path %>">
+    <div class="flex justify-center items-center h-64 w-full rounded-lg bg-white shadow-sm">
+      <%= lucide_icon('loader-2', class: 'h-16 w-16 text-gray-800 animate-spin') %>
+    </div>
+  </turbo-frame>
+</div>

data/app/views/rails_live_dashboard/exceptions/_tabs.html.erb

@@ -0,0 +1,16 @@
+<div
+  class="overflow-hidden bg-white shadow sm:rounded-lg"
+  data-controller="tabs"
+  data-tabs-active-class="border-indigo-500 text-indigo-600"
+  data-tabs-default-tab-value="tab_backtrace"
+>
+  <nav class="isolate flex rounded-t-lg shadow" aria-label="Tabs">
+    <button id="tab_backtrace" class="w-full text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-center text-sm font-medium" data-tabs-target="button" data-action="click->tabs#select">Backtrace</button>
+  </nav>
+
+  <div class="p-5 bg-gray-800 text-white">
+    <div data-tabs-target="tab" id="tab_backtrace">
+      <%= @exception.backtrace.join("\n") || "[]" %>
+    </div>
+  </div>
+</div>

data/app/views/rails_live_dashboard/exceptions/index.html.erb

@@ -0,0 +1,55 @@
+<div class="mt-10">
+  <div class="mt-8 flow-root">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Type</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Occurrences</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                  <span class="sr-only">Show</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+            <% if @exceptions.empty? %>
+              <tr>
+                <td colspan="4">
+                  <p class="p-5 text-center">No exception registered</p>
+                </td>
+              </tr>
+            <% end %>
+
+            <% @exceptions.each do |exception| %>
+              <tr>
+                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                    <div class="min-w-0 flex-auto">
+                      <p class="text-sm font-semibold leading-6 text-gray-900">
+                        <%= exception.class_name %>
+                      </p>
+                      <p class="mt-1 truncate text-xs leading-5 text-gray-500">
+                        <%= exception.message %>
+                      </p>
+                    </div>
+                  </td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                    <%= exception.occurrences %>
+                  </td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                    <%= exception.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+                    </td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                    <%= link_to 'Show', exception_path(exception), class: 'text-indigo-600 hover:text-indigo-900' %>
+                  </td>
+              </tr>
+            <% end %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/rails_live_dashboard/exceptions/show.html.erb

@@ -0,0 +1,41 @@
+<div class="flex flex-col mt-10 gap-10">
+  <div class="overflow-hidden bg-white shadow sm:rounded-lg">
+    <div class="px-4 py-6 sm:px-6">
+      <h3 class="text-lg font-semibold leading-7 text-gray-900">Exception Details</h3>
+    </div>
+    <div class="border-t border-gray-100">
+      <dl class="divide-y divide-gray-100">
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Date</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @exception.created_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Class</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <%= @exception.class_name %>
+          </dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Message</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <%= @exception.message %>
+          </dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">File</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <%= @exception.file %>:<%= @exception.line %>
+          </dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Occurrences</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <%= @exception.occurrences %>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <%= render 'tabs' %>
+</div>

data/app/views/rails_live_dashboard/queries/_list.html.erb

@@ -0,0 +1,43 @@
+<table class="min-w-full divide-y divide-gray-300">
+  <thead class="bg-gray-50">
+    <tr>
+      <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Name</th>
+      <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">SQL</th>
+      <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Duration</th>
+      <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th>
+      <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+        <span class="sr-only">Edit</span>
+      </th>
+    </tr>
+  </thead>
+  <tbody class="divide-y divide-gray-200 bg-white">
+    <% if @queries.empty? %>
+      <tr>
+        <td colspan="5">
+          <p class="p-5 text-center">No queries registered</p>
+        </td>
+      </tr>
+    <% end %>
+    
+    <% @queries.each do |query| %>
+    <tr>
+      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-800">
+        <%= query.content.name %>
+      </td>
+      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+        <%= query.content.sql[0..80] %>
+        <%= "..." if query.content.sql.size > 80 %>
+      </td>
+      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+        <%= render RailsLiveDashboard::QueryDurationBadgeComponent.new(query.content.duration) %>
+      </td>
+      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+        <%= query.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+      </td>
+      <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+        <%= link_to 'Show', query_path(query), class: 'text-indigo-600 hover:text-indigo-900' %>
+      </td>
+    </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/rails_live_dashboard/queries/index.html.erb

@@ -0,0 +1,11 @@
+<div class="mt-10">
+  <div class="mt-8 flow-root">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+          <%= render 'list' %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/rails_live_dashboard/queries/show.html.erb

@@ -0,0 +1,33 @@
+<div class="flex flex-col mt-10 gap-10">
+  <div class="overflow-hidden bg-white shadow sm:rounded-lg">
+    <div class="px-4 py-6 sm:px-6">
+      <h3 class="text-lg font-semibold leading-7 text-gray-900">Query Details</h3>
+    </div>
+    <div class="border-t border-gray-100">
+      <dl class="divide-y divide-gray-100">
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Date</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @query.created_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">SQL</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @query.content.sql %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Parameters</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @query.content.parameters %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Duration</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <%= render RailsLiveDashboard::QueryDurationBadgeComponent.new(@query.content.duration) %>
+          </dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Cached</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @query.content.cached %></dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</div>

data/app/views/rails_live_dashboard/requests/_contents.html.erb

@@ -0,0 +1,26 @@
+<div
+  class="overflow-hidden bg-white shadow sm:rounded-lg"
+  data-controller="tabs"
+  data-tabs-active-class="border-indigo-500 text-indigo-600"
+  data-tabs-default-tab-value="tab_payload"
+>
+  <nav class="isolate flex rounded-t-lg shadow" aria-label="Tabs">
+    <button id="tab_payload" class="w-1/3 text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-center text-sm font-medium" data-tabs-target="button" data-action="click->tabs#select">Payload</button>
+    <button id="tab_headers" class="w-1/3 text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-center text-sm font-medium" data-tabs-target="button" data-action="click->tabs#select">Headers</button>
+    <button id="tab_body" class="w-1/3 text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-center text-sm font-medium" data-tabs-target="button" data-action="click->tabs#select">Body</button>
+  </nav>
+
+  <div class="p-5 bg-gray-800 text-white">
+    <div data-tabs-target="tab" id="tab_payload">
+      <pre><%= JSON.pretty_generate(@request.payload || {}) %></pre>
+    </div>
+
+    <div data-tabs-target="tab" id="tab_headers">
+      <pre><%= JSON.pretty_generate(@request.headers || {}) %></pre>
+    </div>
+
+    <div data-tabs-target="tab" id="tab_body">
+      <pre><%= @request.body || "No body" %></pre>
+    </div>
+  </div>
+</div>

data/app/views/rails_live_dashboard/requests/_exceptions.html.erb

@@ -0,0 +1,43 @@
+<% if @exceptions.empty? %>
+  <p class="py-10 text-center">No exceptions for this request</p>
+<% else %>
+  <div class="flow-root">
+    <div class="overflow-x-auto">
+      <div class="inline-block min-w-full align-middle">
+        <table class="min-w-full divide-y divide-gray-300">
+          <thead class="bg-gray-50">
+            <tr>
+              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Type</th>
+              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">Show</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 bg-white">
+          <% @exceptions.each do |exception| %>
+            <tr>
+                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                  <div class="min-w-0 flex-auto">
+                    <p class="text-sm font-semibold leading-6 text-gray-900">
+                      <%= exception.class_name %>
+                    </p>
+                    <p class="mt-1 truncate text-xs leading-5 text-gray-500">
+                      <%= exception.message %>
+                    </p>
+                  </div>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                  <%= exception.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+                  </td>
+                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                  <%= link_to 'Show', exception_path(exception), class: 'text-indigo-600 hover:text-indigo-900' %>
+                </td>
+            </tr>
+          <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/rails_live_dashboard/requests/_queries.html.erb

@@ -0,0 +1,11 @@
+<% if @queries.empty? %>
+  <p class="py-10 text-center">No queries for this request</p>
+<% else %>
+  <div class="flow-root">
+    <div class="overflow-x-auto">
+      <div class="inline-block min-w-full align-middle">
+        <%= render 'rails_live_dashboard/queries/list' %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/rails_live_dashboard/requests/_relateds.html.erb

@@ -0,0 +1,23 @@
+<div
+  class="overflow-hidden bg-white shadow sm:rounded-lg"
+  data-controller="tabs"
+  data-tabs-active-class="border-indigo-500 text-indigo-600"
+  data-tabs-default-tab-value="tab_queries"
+>
+  <nav class="isolate flex rounded-t-lg shadow" aria-label="Tabs">
+    <button id="tab_queries" class="w-1/2 text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-center text-sm font-medium" data-tabs-target="button" data-action="click->tabs#select">
+      Queries (<%= @queries.size %>)
+    </button>
+    <button id="tab_exceptions" class="w-1/2 text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-center text-sm font-medium" data-tabs-target="button" data-action="click->tabs#select">
+      Exceptions (<%= @exceptions.size %>)
+    </button>
+  </nav>
+
+  <div data-tabs-target="tab" id="tab_queries">
+    <%= render 'queries' %>
+  </div>
+
+  <div data-tabs-target="tab" id="tab_exceptions">
+    <%= render 'exceptions' %>
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+<div class="mt-10">
+  <div class="mt-8 flow-root">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-300">
+            <thead class="bg-gray-50">
+              <tr>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Method</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">URL</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                  <span class="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              <% if @requests.empty? %>
+                <tr>
+                  <td colspan="5">
+                    <p class="p-5 text-center">No request registered</p>
+                  </td>
+                </tr>
+              <% end %>
+              
+              <% @requests.each do |req| %>
+              <tr>
+                <td class="whitespace-nowrap py-4 pl-4 pr-3 sm:pl-6">
+                  <%= render RailsLiveDashboard::RequestMethodBadgeComponent.new(req.method) %>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"><%= req.path %></td>
+                <td class="whitespace-nowrap px-3 py-4">
+                  <%= render RailsLiveDashboard::RequestStatusBadgeComponent.new(req.status_code) %>
+                </td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"><%= req.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
+                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                  <%= link_to 'Show', request_path(req), class: 'text-indigo-600 hover:text-indigo-900' %>
+                </td>
+              </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+<div class="flex flex-col mt-10 gap-10">
+  <div class="overflow-hidden bg-white shadow sm:rounded-lg">
+    <div class="px-4 py-6 sm:px-6">
+      <h3 class="text-lg font-semibold leading-7 text-gray-900">Request Details</h3>
+    </div>
+    <div class="border-t border-gray-100">
+      <dl class="divide-y divide-gray-100">
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Date</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.created_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Method</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <%= render RailsLiveDashboard::RequestMethodBadgeComponent.new(@request.method, turbo_stream: @request.turbo_stream?) %>
+          </dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Controller</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.controller %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Action</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.controller_action %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Path</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.path %></dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Status</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <%= render RailsLiveDashboard::RequestStatusBadgeComponent.new(@request.status_code) %>
+          </dd>
+        </div>
+        <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+          <dt class="text-sm font-medium text-gray-900">Duration</dt>
+          <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.duration %> ms</dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <%= render 'contents' %>
+  <%= render 'relateds' %>
+</div>

data/app/views/rails_live_dashboard/shared/_header.html.erb

@@ -0,0 +1,43 @@
+<header class="bg-gray-800" data-controller="reveal">
+  <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-700 lg:px-8">
+    <div class="relative flex h-16 justify-between">
+      <div class="relative z-10 flex px-2 lg:px-0">
+        <div class="flex flex-shrink-0 items-center">
+          <h1 class="text-xl text-white">Live Dashboard</h1>
+        </div>
+      </div>
+      <div class="relative z-10 flex items-center lg:hidden">
+        <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false" data-action="click->reveal#toggle">
+          <%= lucide_icon('menu', class: 'block h-6 w-6', 'data-reveal-target': 'item') %>
+          <%= lucide_icon('x', class: 'hidden h-6 w-6', 'data-reveal-target': 'item') %>
+        </button>
+      </div>
+      <div class="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center">
+        <%= link_to clean_path, title: 'Clear all data', data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: 'relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white' do %>
+          <span class="sr-only">Clear records</span>
+          <%= lucide_icon('trash', class: 'h-6 w-6') %>
+        <% end %>
+      </div>
+    </div>
+
+    <nav class="hidden lg:flex lg:space-x-8 lg:py-2" aria-label="Global">
+      <%= link_to 'Dashboard', dashboard_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white inline-flex items-center rounded-md py-2 px-3 text-sm font-medium', 'bg-gray-900 text-white': current_page?(dashboard_path)) %>
+      <%= link_to 'Requests', requests_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white inline-flex items-center rounded-md py-2 px-3 text-sm font-medium', 'bg-gray-900 text-white': current_page?(requests_path)) %>
+      <%= link_to 'Exceptions', exceptions_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white inline-flex items-center rounded-md py-2 px-3 text-sm font-medium', 'bg-gray-900 text-white': current_page?(exceptions_path)) %>
+      <%= link_to 'Queries', queries_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white inline-flex items-center rounded-md py-2 px-3 text-sm font-medium', 'bg-gray-900 text-white': current_page?(queries_path)) %>
+    </nav>
+  </div>
+
+  <nav class="hidden" aria-label="Global" id="mobile-menu" data-reveal-target="item">
+    <div class="space-y-1 px-2 pb-3 pt-2">
+      <%= link_to 'Clear all data', clean_path, title: 'Clear all data', data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: 'text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md py-2 px-3 text-base font-medium' %>
+    </div>
+    <hr class='my-2 border-gray-500' />
+    <div class="space-y-1 px-2 pb-3 pt-2">  
+      <%= link_to 'Dashboard', dashboard_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md py-2 px-3 text-base font-medium', 'bg-gray-900 text-white': current_page?(dashboard_path)) %>
+      <%= link_to 'Requests', requests_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md py-2 px-3 text-base font-medium', 'bg-gray-900 text-white': current_page?(requests_path)) %>
+      <%= link_to 'Exceptions', exceptions_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md py-2 px-3 text-base font-medium', 'bg-gray-900 text-white': current_page?(exceptions_path)) %>
+      <%= link_to 'Queries', queries_path, class: class_names('text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md py-2 px-3 text-base font-medium', 'bg-gray-900 text-white': current_page?(queries_path)) %>
+    </div>
+  </nav>
+</header>

data/app/views/rails_live_dashboard/widgets/slowest_queries/show.html.erb

@@ -0,0 +1,42 @@
+<turbo-frame id="slowest_queries_widget">
+  <h3 class="text-base font-semibold leading-6 text-gray-900">Slowest Queries</h3>
+  <dl class="mt-3 rounded-lg">
+    <ul role="list" class="divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg">
+      <% if @queries.empty? %>
+      <li>
+        <p class="p-5 text-center">No queries registered</p>
+      </li>
+      <% end %>
+
+      <% @queries.each do |query| %>
+      <li>
+        <a href="<%= query_path(query) %>" target="_top" class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6">
+          <div class="flex min-w-0 gap-x-4">
+            <div class="min-w-0 flex-auto">
+              <p class="text-sm leading-6 font-semibold text-gray-900">
+                <%= query.content.name %>
+              </p>
+              <p class="mt-2 flex text-sm leading-6 text-gray-900">
+                <%= query.content.sql[0..40] %>...
+              </p>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-x-4">
+            <div class="hidden sm:flex sm:flex-col sm:items-end">
+              <p class="text-sm leading-6 text-gray-900">
+                <%= render RailsLiveDashboard::QueryDurationBadgeComponent.new(query.content.duration) %>
+              </p>
+              <p class="mt-1 text-xs leading-5 text-gray-500">
+                <%= query.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+              </p>
+            </div>
+            <svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </a>
+      </li>
+      <%end %>
+    </ul>
+  </dl>
+</turbo-frame>

data/app/views/rails_live_dashboard/widgets/slowest_requests/show.html.erb

@@ -0,0 +1,42 @@
+<turbo-frame id="slow_requests_widget">
+  <h3 class="text-base font-semibold leading-6 text-gray-900">Slowest Requests</h3>
+  <dl class="mt-3 rounded-lg">
+    <ul role="list" class="divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg">
+      <% if @requests.empty? %>
+      <li>
+        <p class="p-5 text-center">No requests registered</p>
+      </li>
+      <% end %>
+
+      <% @requests.each do |req| %>
+      <li>
+        <a href="<%= request_path(req) %>" target="_top" class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6">
+          <div class="flex min-w-0 gap-x-4">
+            <div class="min-w-0 flex-auto">
+              <p class="text-sm leading-6 text-gray-900">
+                <%= render RailsLiveDashboard::RequestMethodBadgeComponent.new(req.method) %>
+              </p>
+              <p class="mt-2 flex text-sm leading-6 text-gray-900">
+                <%= req.content.path %>
+              </p>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-x-4">
+            <div class="hidden sm:flex sm:flex-col sm:items-end">
+              <p class="text-sm leading-6 text-gray-900">
+                <%= render RailsLiveDashboard::RequestDurationBadgeComponent.new(req.content.duration) %>
+              </p>
+              <p class="mt-1 text-xs leading-5 text-gray-500">
+                <%= req.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+              </p>
+            </div>
+            <svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </a>
+      </li>
+      <%end %>
+    </ul>
+  </dl>
+</turbo-frame>

data/config/routes.rb

@@ -0,0 +1,14 @@
+RailsLiveDashboard::Engine.routes.draw do
+  root to: 'dashboard#show'
+
+  resource :dashboard, only: [:show], controller: :dashboard
+  resource :clean, only: [:destroy], controller: :clean
+  resources :requests, only: %i[index show]
+  resources :exceptions, only: %i[index show]
+  resources :queries, only: %i[index show]
+
+  namespace :widgets do
+    get 'slowest-requests', action: :show, controller: :slowest_requests
+    get 'slowest-queries', action: :show, controller: :slowest_queries
+  end
+end

data/db/migrate/20240213133517_create_rails_live_dashboard_entries.rb

@@ -0,0 +1,14 @@
+class CreateRailsLiveDashboardEntries < ActiveRecord::Migration[7.1]
+  def change
+    create_table :rails_live_dashboard_entries do |t|
+      t.string :type, null: false
+      t.string :batch_id, limit: 36, null: false
+      t.json :content, null: false
+      t.boolean :should_show, default: true
+      t.datetime :created_at, null: false
+    end
+
+    add_index :rails_live_dashboard_entries, :batch_id
+    add_index :rails_live_dashboard_entries, :created_at
+  end
+end

data/lib/generators/rails_live_dashboard/install_generator.rb

@@ -0,0 +1,11 @@
+module RailsLiveDashboard
+  class InstallGenerator < Rails::Generators::Base
+    desc 'Create configuration file to RailsLiveDashboard'
+
+    source_root File.expand_path('../templates', __dir__)
+
+    def copy_initializer_file
+      copy_file 'initializer.rb', Rails.root.join('config/initializers/rails_live_dashboard.rb')
+    end
+  end
+end

data/lib/generators/templates/initializer.rb

@@ -0,0 +1,3 @@
+RailsLiveDashboard.configure do |config|
+  config.enabled = true
+end

data/lib/rails_live_dashboard/configuration.rb

@@ -0,0 +1,13 @@
+require 'singleton'
+
+module RailsLiveDashboard
+  class Configuration
+    include Singleton
+
+    attr_accessor :enabled
+
+    def initialize
+      @enabled = true
+    end
+  end
+end