binocs 0.1.0 → 0.2.0

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

@@ -1,7 +1,7 @@
 <div class="space-y-6">
   <!-- Back Link -->
   <div>
-    <%= link_to binocs.requests_path, class: "inline-flex items-center text-sm text-slate-400 hover:text-white" do %>
+    <%= link_to binocs.requests_path, class: "inline-flex items-center text-sm text-zinc-500 hover:text-yellow-400 transition-colors" do %>
       <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
       </svg>
@@ -10,7 +10,7 @@
   </div>
 
   <!-- Header -->
-  <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
+  <div class="bg-zinc-900 rounded-lg p-6 border border-yellow-500/20">
     <div class="flex items-center justify-between">
       <div class="flex items-center space-x-4">
         <span class="inline-flex items-center rounded px-3 py-1.5 text-sm font-medium <%= method_badge_class(@request.method) %>">
@@ -19,45 +19,51 @@
         <span class="inline-flex items-center rounded px-3 py-1.5 text-sm font-medium <%= status_badge_class(@request.status_code) %>">
           <%= @request.status_code %>
         </span>
-        <h1 class="text-lg font-semibold text-white break-all"><%= @request.path %></h1>
+        <h1 class="text-lg font-semibold text-zinc-200 break-all"><%= @request.path %></h1>
       </div>
       <div class="flex items-center space-x-2">
-        <%= link_to "Open in Swagger", @request.swagger_url, target: "_blank", class: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-500" %>
-        <%= button_to "Delete", binocs.request_path(@request.uuid), method: :delete, class: "rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-500", data: { turbo_confirm: "Are you sure?" } %>
+        <%= link_to binocs.lifecycle_request_path(@request.uuid), class: "rounded-md bg-yellow-500/10 text-yellow-400 ring-1 ring-yellow-500/30 px-3 py-2 text-sm font-medium hover:bg-yellow-500/20 transition-all inline-flex items-center", data: { testid: "lifecycle-link" } do %>
+          <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+          </svg>
+          Lifecycle
+        <% end %>
+        <%= link_to "Open in Swagger", @request.swagger_url, target: "_blank", class: "rounded-md bg-yellow-500 px-3 py-2 text-sm font-medium text-black hover:bg-yellow-400 transition-colors" %>
+        <%= button_to "Delete", binocs.request_path(@request.uuid), method: :delete, class: "rounded-md bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20 px-3 py-2 text-sm font-medium hover:bg-rose-500/25 transition-colors", data: { turbo_confirm: "Are you sure?" } %>
       </div>
     </div>
 
     <div class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
       <div>
-        <dt class="text-sm text-slate-400">Duration</dt>
-        <dd class="text-lg font-medium text-white"><%= @request.formatted_duration %></dd>
+        <dt class="text-sm text-zinc-500">Duration</dt>
+        <dd class="text-lg font-medium text-zinc-200"><%= @request.formatted_duration %></dd>
       </div>
       <div>
-        <dt class="text-sm text-slate-400">Memory Delta</dt>
-        <dd class="text-lg font-medium text-white"><%= @request.formatted_memory_delta %></dd>
+        <dt class="text-sm text-zinc-500">Memory Delta</dt>
+        <dd class="text-lg font-medium text-zinc-200"><%= @request.formatted_memory_delta %></dd>
       </div>
       <div>
-        <dt class="text-sm text-slate-400">IP Address</dt>
-        <dd class="text-lg font-medium text-white"><%= @request.ip_address || "N/A" %></dd>
+        <dt class="text-sm text-zinc-500">IP Address</dt>
+        <dd class="text-lg font-medium text-zinc-200"><%= @request.ip_address || "N/A" %></dd>
       </div>
       <div>
-        <dt class="text-sm text-slate-400">Time</dt>
-        <dd class="text-lg font-medium text-white"><%= @request.created_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
+        <dt class="text-sm text-zinc-500">Time</dt>
+        <dd class="text-lg font-medium text-zinc-200"><%= @request.created_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
       </div>
     </div>
 
     <% if @request.controller_action %>
-      <div class="mt-4 pt-4 border-t border-slate-700">
-        <span class="text-sm text-slate-400">Route:</span>
-        <span class="ml-2 text-sm text-white"><%= @request.controller_action %></span>
+      <div class="mt-4 pt-4 border-t border-zinc-800">
+        <span class="text-sm text-zinc-500">Route:</span>
+        <span class="ml-2 text-sm text-zinc-200"><%= @request.controller_action %></span>
       </div>
     <% end %>
   </div>
 
   <!-- Exception (if present) -->
   <% if @request.has_exception? %>
-    <div class="bg-red-900/20 rounded-lg p-6 border border-red-800">
-      <h2 class="text-lg font-semibold text-red-400 flex items-center">
+    <div class="bg-rose-500/5 rounded-lg p-6 border border-rose-500/20">
+      <h2 class="text-lg font-semibold text-rose-400 flex items-center">
         <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
           <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
         </svg>
@@ -65,42 +71,55 @@
       </h2>
       <div class="mt-4 space-y-3">
         <div>
-          <span class="text-sm text-red-300 font-medium"><%= @request.exception["class"] %></span>
+          <span class="text-sm text-rose-300 font-medium"><%= @request.exception["class"] %></span>
         </div>
-        <div class="text-sm text-red-200">
+        <div class="text-sm text-rose-200">
           <%= @request.exception["message"] %>
         </div>
         <% if @request.exception["backtrace"].present? %>
           <div class="mt-4">
-            <h3 class="text-sm font-medium text-red-300 mb-2">Backtrace</h3>
-            <pre class="bg-slate-900 rounded p-4 text-xs text-red-200 overflow-x-auto max-h-96"><%= @request.exception["backtrace"].join("\n") %></pre>
+            <h3 class="text-sm font-medium text-rose-300 mb-2">Backtrace</h3>
+            <pre class="bg-zinc-950 rounded p-4 text-xs text-rose-200 overflow-x-auto max-h-96"><%= Array(@request.exception["backtrace"]).join("\n") %></pre>
           </div>
         <% end %>
+        <% cause = @request.exception["cause"] %>
+        <% depth = 0 %>
+        <% while cause.present? && depth < 5 %>
+          <div class="mt-4 pl-4 border-l-2 border-rose-500/30">
+            <h3 class="text-sm font-semibold text-rose-400 mb-1">Caused by: <%= cause["class"] %></h3>
+            <div class="text-sm text-rose-200"><%= cause["message"] %></div>
+            <% if cause["backtrace"].present? %>
+              <pre class="mt-2 bg-zinc-950 rounded p-3 text-xs text-rose-200/70 overflow-x-auto max-h-48"><%= Array(cause["backtrace"]).join("\n") %></pre>
+            <% end %>
+          </div>
+          <% cause = cause["cause"] %>
+          <% depth += 1 %>
+        <% end %>
       </div>
     </div>
   <% end %>
 
   <!-- Tabs -->
-  <div x-data="{ activeTab: 'params' }" class="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
+  <div x-data="{ activeTab: 'params' }" class="bg-zinc-900 rounded-lg border border-zinc-800 overflow-hidden">
     <!-- Tab Headers -->
-    <div class="border-b border-slate-700">
+    <div class="border-b border-zinc-800">
       <nav class="flex -mb-px">
-        <button @click="activeTab = 'params'" :class="activeTab === 'params' ? 'border-indigo-500 text-indigo-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-600'" class="px-6 py-3 border-b-2 text-sm font-medium">
+        <button @click="activeTab = 'params'" :class="activeTab === 'params' ? 'border-yellow-500 text-yellow-400' : 'border-transparent text-zinc-500 hover:text-zinc-200 hover:border-zinc-700'" class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
           Params
         </button>
-        <button @click="activeTab = 'headers'" :class="activeTab === 'headers' ? 'border-indigo-500 text-indigo-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-600'" class="px-6 py-3 border-b-2 text-sm font-medium">
+        <button @click="activeTab = 'headers'" :class="activeTab === 'headers' ? 'border-yellow-500 text-yellow-400' : 'border-transparent text-zinc-500 hover:text-zinc-200 hover:border-zinc-700'" class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
           Headers
         </button>
-        <button @click="activeTab = 'body'" :class="activeTab === 'body' ? 'border-indigo-500 text-indigo-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-600'" class="px-6 py-3 border-b-2 text-sm font-medium">
+        <button @click="activeTab = 'body'" :class="activeTab === 'body' ? 'border-yellow-500 text-yellow-400' : 'border-transparent text-zinc-500 hover:text-zinc-200 hover:border-zinc-700'" class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
           Body
         </button>
-        <button @click="activeTab = 'response'" :class="activeTab === 'response' ? 'border-indigo-500 text-indigo-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-600'" class="px-6 py-3 border-b-2 text-sm font-medium">
+        <button @click="activeTab = 'response'" :class="activeTab === 'response' ? 'border-yellow-500 text-yellow-400' : 'border-transparent text-zinc-500 hover:text-zinc-200 hover:border-zinc-700'" class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
           Response
         </button>
-        <button @click="activeTab = 'logs'" :class="activeTab === 'logs' ? 'border-indigo-500 text-indigo-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-600'" class="px-6 py-3 border-b-2 text-sm font-medium">
+        <button @click="activeTab = 'logs'" :class="activeTab === 'logs' ? 'border-yellow-500 text-yellow-400' : 'border-transparent text-zinc-500 hover:text-zinc-200 hover:border-zinc-700'" class="px-6 py-3 border-b-2 text-sm font-medium transition-colors">
           Logs
           <% if @request.logs.present? && @request.logs.any? %>
-            <span class="ml-2 inline-flex items-center rounded-full bg-slate-700 px-2 py-0.5 text-xs"><%= @request.logs.size %></span>
+            <span class="ml-2 inline-flex items-center rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400"><%= @request.logs.size %></span>
           <% end %>
         </button>
       </nav>
@@ -114,13 +133,13 @@
           <div class="space-y-2">
             <% @request.params.each do |key, value| %>
               <div class="flex">
-                <span class="text-sm font-medium text-indigo-400 w-48 flex-shrink-0"><%= key %></span>
-                <span class="text-sm text-white break-all"><%= format_value(value) %></span>
+                <span class="text-sm font-medium text-yellow-400 w-48 flex-shrink-0"><%= key %></span>
+                <span class="text-sm text-zinc-200 break-all"><%= format_value(value) %></span>
               </div>
             <% end %>
           </div>
         <% else %>
-          <p class="text-sm text-slate-400">No parameters</p>
+          <p class="text-sm text-zinc-500">No parameters</p>
         <% end %>
       </div>
 
@@ -128,34 +147,34 @@
       <div x-show="activeTab === 'headers'" x-cloak>
         <div class="space-y-6">
           <div>
-            <h3 class="text-sm font-medium text-slate-300 mb-3">Request Headers</h3>
+            <h3 class="text-sm font-medium text-zinc-300 mb-3">Request Headers</h3>
             <% if @request.request_headers.present? && @request.request_headers.any? %>
               <div class="space-y-2">
                 <% @request.request_headers.each do |key, value| %>
                   <div class="flex">
-                    <span class="text-sm font-medium text-indigo-400 w-48 flex-shrink-0"><%= key %></span>
-                    <span class="text-sm text-white break-all"><%= value %></span>
+                    <span class="text-sm font-medium text-yellow-400 w-48 flex-shrink-0"><%= key %></span>
+                    <span class="text-sm text-zinc-200 break-all"><%= value %></span>
                   </div>
                 <% end %>
               </div>
             <% else %>
-              <p class="text-sm text-slate-400">No request headers</p>
+              <p class="text-sm text-zinc-500">No request headers</p>
             <% end %>
           </div>
 
           <div>
-            <h3 class="text-sm font-medium text-slate-300 mb-3">Response Headers</h3>
+            <h3 class="text-sm font-medium text-zinc-300 mb-3">Response Headers</h3>
             <% if @request.response_headers.present? && @request.response_headers.any? %>
               <div class="space-y-2">
                 <% @request.response_headers.each do |key, value| %>
                   <div class="flex">
-                    <span class="text-sm font-medium text-indigo-400 w-48 flex-shrink-0"><%= key %></span>
-                    <span class="text-sm text-white break-all"><%= value %></span>
+                    <span class="text-sm font-medium text-yellow-400 w-48 flex-shrink-0"><%= key %></span>
+                    <span class="text-sm text-zinc-200 break-all"><%= value %></span>
                   </div>
                 <% end %>
               </div>
             <% else %>
-              <p class="text-sm text-slate-400">No response headers</p>
+              <p class="text-sm text-zinc-500">No response headers</p>
             <% end %>
           </div>
         </div>
@@ -163,65 +182,53 @@
 
       <!-- Body Tab -->
       <div x-show="activeTab === 'body'" x-cloak>
-        <h3 class="text-sm font-medium text-slate-300 mb-3">Request Body</h3>
+        <h3 class="text-sm font-medium text-zinc-300 mb-3">Request Body</h3>
         <% if @request.request_body.present? %>
-          <pre class="bg-slate-900 rounded p-4 text-sm text-white overflow-x-auto max-h-96"><%= format_body(@request.request_body) %></pre>
+          <pre class="bg-zinc-950 rounded p-4 text-sm text-zinc-200 overflow-x-auto max-h-96"><%= format_body(@request.request_body) %></pre>
         <% else %>
-          <p class="text-sm text-slate-400">No request body</p>
+          <p class="text-sm text-zinc-500">No request body</p>
         <% end %>
       </div>
 
       <!-- Response Tab -->
       <div x-show="activeTab === 'response'" x-cloak>
-        <h3 class="text-sm font-medium text-slate-300 mb-3">Response Body</h3>
+        <h3 class="text-sm font-medium text-zinc-300 mb-3">Response Body</h3>
         <% if @request.response_body.present? %>
-          <pre class="bg-slate-900 rounded p-4 text-sm text-white overflow-x-auto max-h-96"><%= format_body(@request.response_body) %></pre>
+          <pre class="bg-zinc-950 rounded p-4 text-sm text-zinc-200 overflow-x-auto max-h-96"><%= format_body(@request.response_body) %></pre>
         <% else %>
-          <p class="text-sm text-slate-400">No response body captured</p>
+          <p class="text-sm text-zinc-500">No response body captured</p>
         <% end %>
       </div>
 
       <!-- Logs Tab -->
       <div x-show="activeTab === 'logs'" x-cloak>
         <% if @request.logs.present? && @request.logs.any? %>
+          <!-- Log type filter -->
+          <div class="mb-4 flex items-center space-x-2 flex-wrap" x-data="{ logFilter: 'all' }">
+            <span class="text-xs text-zinc-600 mr-1">Filter:</span>
+            <button @click="logFilter = 'all'" :class="logFilter === 'all' ? 'bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/30' : 'bg-zinc-800 text-zinc-500 hover:text-zinc-200'" class="rounded px-2 py-1 text-xs font-medium transition-colors">All (<%= @request.logs.size %>)</button>
+            <% log_types = @request.logs.map { |l| l["type"] }.tally.sort_by { |_, c| -c } %>
+            <% log_types.each do |type, count| %>
+              <button @click="logFilter = '<%= type %>'" :class="logFilter === '<%= type %>' ? 'bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/30' : 'bg-zinc-800 text-zinc-500 hover:text-zinc-200'" class="rounded px-2 py-1 text-xs font-medium transition-colors"><%= type %> (<%= count %>)</button>
+            <% end %>
+          </div>
           <div class="space-y-3">
             <% @request.logs.each do |log| %>
-              <div class="bg-slate-900 rounded p-4">
-                <div class="flex items-center justify-between mb-2">
-                  <span class="text-xs font-medium text-indigo-400 uppercase"><%= log["type"] %></span>
-                  <span class="text-xs text-slate-500"><%= log["timestamp"] %></span>
-                </div>
-                <% if log["type"] == "controller" %>
-                  <div class="text-sm text-white">
-                    <span class="text-slate-400">Controller:</span> <%= log["controller"] %>#<%= log["action"] %>
-                    <% if log["view_runtime"] %>
-                      <span class="ml-4 text-slate-400">View:</span> <%= log["view_runtime"] %>ms
-                    <% end %>
-                    <% if log["db_runtime"] %>
-                      <span class="ml-4 text-slate-400">DB:</span> <%= log["db_runtime"] %>ms
-                    <% end %>
-                  </div>
-                <% elsif log["type"] == "redirect" %>
-                  <div class="text-sm text-white">
-                    <span class="text-slate-400">Redirect to:</span> <%= log["location"] %>
-                    <span class="ml-4 text-slate-400">Status:</span> <%= log["status"] %>
-                  </div>
-                <% else %>
-                  <pre class="text-sm text-white"><%= format_value(log) %></pre>
-                <% end %>
+              <div x-show="logFilter === 'all' || logFilter === '<%= log["type"] %>'">
+                <%= render partial: "binocs/requests/log_entry", locals: { log: log } %>
               </div>
             <% end %>
           </div>
         <% else %>
-          <p class="text-sm text-slate-400">No logs captured</p>
+          <p class="text-sm text-zinc-500">No logs captured</p>
         <% end %>
       </div>
     </div>
   </div>
 
   <!-- Full URL -->
-  <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
-    <h2 class="text-sm font-medium text-slate-400 mb-2">Full URL</h2>
-    <p class="text-sm text-white break-all font-mono"><%= @request.full_url %></p>
+  <div class="bg-zinc-900 rounded-lg p-6 border border-zinc-800">
+    <h2 class="text-sm font-medium text-zinc-500 mb-2">Full URL</h2>
+    <p class="text-sm text-zinc-200 break-all font-mono"><%= @request.full_url %></p>
   </div>
 </div>

data/app/views/layouts/binocs/application.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full bg-gray-900">
+<html lang="en" class="h-full bg-zinc-950">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -16,10 +16,11 @@
         extend: {
           colors: {
             binocs: {
-              bg: '#0f172a',
-              card: '#1e293b',
-              border: '#334155',
-              accent: '#6366f1'
+              bg: '#09090b',
+              card: '#18181b',
+              border: '#27272a',
+              accent: '#eab308',
+              gold: '#ca8a04'
             }
           }
         }
@@ -33,20 +34,36 @@
 <body class="h-full">
   <div class="min-h-full">
     <!-- Navigation -->
-    <nav class="bg-slate-800 border-b border-slate-700">
+    <nav class="bg-zinc-950 border-b border-yellow-500/20">
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div class="flex h-16 items-center justify-between">
           <div class="flex items-center">
-            <div class="flex-shrink-0">
-              <span class="text-2xl font-bold text-indigo-400">Binocs</span>
-              <span class="ml-2 text-sm text-slate-400">Request Monitor</span>
+            <div class="flex-shrink-0 flex items-center">
+              <!-- Binoculars icon inspired by the Binocs brand icon -->
+              <svg class="w-7 h-7 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="8" cy="14" r="5" stroke="#eab308" stroke-width="1.5" fill="#eab308" fill-opacity="0.15"/>
+                <circle cx="16" cy="14" r="5" stroke="#eab308" stroke-width="1.5" fill="#eab308" fill-opacity="0.15"/>
+                <circle cx="8" cy="14" r="2.5" fill="#18181b" stroke="#fefce8" stroke-width="0.75"/>
+                <circle cx="16" cy="14" r="2.5" fill="#18181b" stroke="#fefce8" stroke-width="0.75"/>
+                <rect x="11" y="12" width="2" height="4" rx="1" fill="#eab308"/>
+                <path d="M6 9 L8 11" stroke="#eab308" stroke-width="1.5" stroke-linecap="round"/>
+                <path d="M18 9 L16 11" stroke="#eab308" stroke-width="1.5" stroke-linecap="round"/>
+                <!-- Cyan accent dots from brand icon -->
+                <circle cx="8" cy="14" r="0.75" fill="#22d3ee"/>
+                <circle cx="16" cy="14" r="0.75" fill="#22d3ee"/>
+              </svg>
+              <span class="text-2xl font-bold text-yellow-500">Binocs</span>
+              <span class="ml-2 text-sm text-zinc-500">Request Monitor</span>
             </div>
             <div class="ml-10 flex items-baseline space-x-4">
-              <%= link_to "Requests", binocs.requests_path, class: "rounded-md px-3 py-2 text-sm font-medium #{current_page?(binocs.requests_path) ? 'bg-slate-900 text-white' : 'text-slate-300 hover:bg-slate-700 hover:text-white'}" %>
+              <%= link_to "Requests", binocs.requests_path, class: "rounded-md px-3 py-2 text-sm font-medium transition-all #{current_page?(binocs.requests_path) ? 'bg-yellow-500/10 text-yellow-400 ring-1 ring-yellow-500/30' : 'text-zinc-400 hover:bg-zinc-800 hover:text-yellow-400'}" %>
+              <%= link_to "Sequence", binocs.sequence_requests_path, class: "rounded-md px-3 py-2 text-sm font-medium transition-all #{current_page?(binocs.sequence_requests_path) ? 'bg-yellow-500/10 text-yellow-400 ring-1 ring-yellow-500/30' : 'text-zinc-400 hover:bg-zinc-800 hover:text-yellow-400'}" %>
+              <%= link_to "Heatmap", binocs.heatmap_requests_path, class: "rounded-md px-3 py-2 text-sm font-medium transition-all #{current_page?(binocs.heatmap_requests_path) ? 'bg-yellow-500/10 text-yellow-400 ring-1 ring-yellow-500/30' : 'text-zinc-400 hover:bg-zinc-800 hover:text-yellow-400'}" %>
+              <%= link_to "Analytics", binocs.analytics_requests_path, class: "rounded-md px-3 py-2 text-sm font-medium transition-all #{current_page?(binocs.analytics_requests_path) ? 'bg-yellow-500/10 text-yellow-400 ring-1 ring-yellow-500/30' : 'text-zinc-400 hover:bg-zinc-800 hover:text-yellow-400'}" %>
             </div>
           </div>
           <div class="flex items-center space-x-4">
-            <span class="text-xs text-slate-500">
+            <span class="text-xs text-zinc-600">
               Rails <%= Rails::VERSION::STRING %> |
               Ruby <%= RUBY_VERSION %> |
               <%= Rails.env %>
@@ -57,7 +74,7 @@
     </nav>
 
     <!-- Authentication Required Banner (hidden by default, shown by JS when WebSocket fails) -->
-    <div id="binocs-auth-banner" class="hidden bg-amber-900/50 border-b border-amber-700">
+    <div id="binocs-auth-banner" class="hidden bg-amber-900/30 border-b border-amber-700/50">
       <div class="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between flex-wrap gap-2">
           <div class="flex items-center">
@@ -71,10 +88,10 @@
           </div>
           <div class="flex gap-2">
             <% login_url = "#{Binocs.configuration.resolved_login_path}?redirect_to=#{ERB::Util.url_encode(request.fullpath)}" rescue Binocs.configuration.resolved_login_path %>
-            <a href="<%= login_url %>" class="rounded-md bg-amber-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-amber-500">
+            <a href="<%= login_url %>" class="rounded-md bg-yellow-500 px-3 py-1.5 text-sm font-medium text-black hover:bg-yellow-400 transition-colors">
               Sign in
             </a>
-            <button onclick="document.getElementById('binocs-auth-banner').classList.add('hidden')" class="rounded-md bg-amber-800 px-3 py-1.5 text-sm font-medium text-amber-200 hover:bg-amber-700">
+            <button onclick="document.getElementById('binocs-auth-banner').classList.add('hidden')" class="rounded-md bg-zinc-800 px-3 py-1.5 text-sm font-medium text-zinc-300 hover:bg-zinc-700 transition-colors">
               Dismiss
             </button>
           </div>
@@ -84,22 +101,22 @@
 
     <!-- Flash Messages -->
     <% if notice %>
-      <div class="bg-green-900/50 border-b border-green-800">
+      <div class="bg-emerald-900/30 border-b border-emerald-800/50">
         <div class="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
-          <p class="text-sm text-green-300"><%= notice %></p>
+          <p class="text-sm text-emerald-300"><%= notice %></p>
         </div>
       </div>
     <% end %>
     <% if alert %>
-      <div class="bg-red-900/50 border-b border-red-800">
+      <div class="bg-rose-900/30 border-b border-rose-800/50">
         <div class="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
-          <p class="text-sm text-red-300"><%= alert %></p>
+          <p class="text-sm text-rose-300"><%= alert %></p>
         </div>
       </div>
     <% end %>
 
     <!-- Main Content -->
-    <main class="bg-slate-900 min-h-screen">
+    <main class="bg-zinc-950 min-h-screen">
       <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
         <%= yield %>
       </div>

data/config/routes.rb

@@ -4,8 +4,15 @@ Binocs::Engine.routes.draw do
   root to: "requests#index"
 
   resources :requests, only: [:index, :show, :destroy] do
+    member do
+      get :lifecycle
+      get :raw
+    end
     collection do
       delete :clear
+      get :sequence
+      get :heatmap
+      get :analytics
     end
   end
 end

data/db/migrate/20260314000000_add_client_identifier_to_binocs_requests.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class AddClientIdentifierToBinocsRequests < ActiveRecord::Migration[7.0]
+  def change
+    add_column :binocs_requests, :client_identifier, :string
+    add_index :binocs_requests, :client_identifier
+  end
+end

data/lib/binocs/engine.rb

@@ -25,6 +25,15 @@ module Binocs
 
       require_relative "log_subscriber"
       Binocs::LogSubscriber.attach_to :action_controller
+      Binocs::SqlLogSubscriber.attach_to :active_record
+      Binocs::ViewLogSubscriber.attach_to :action_view
+    end
+
+    initializer "binocs.log_interceptor", after: :initialize_logger do
+      next unless Binocs.enabled?
+
+      require_relative "log_subscriber"
+      Rails.logger = Binocs::LogInterceptor.new(Rails.logger)
     end
 
     initializer "binocs.assets" do |app|

data/lib/binocs/log_subscriber.rb

@@ -20,6 +20,26 @@ module Binocs
         duration: event.duration.round(2),
         timestamp: Time.current.iso8601
       }
+
+      # Capture exception info from the payload if present
+      if payload[:exception_object]
+        ex = payload[:exception_object]
+        Thread.current[:binocs_logs] << {
+          type: "exception",
+          class: ex.class.name,
+          message: ex.message,
+          backtrace: ex.backtrace&.first(30),
+          cause: exception_cause_chain(ex),
+          timestamp: Time.current.iso8601
+        }
+      elsif payload[:exception]
+        Thread.current[:binocs_logs] << {
+          type: "exception",
+          class: payload[:exception].first,
+          message: payload[:exception].second,
+          timestamp: Time.current.iso8601
+        }
+      end
     end
 
     def halted_callback(event)
@@ -52,5 +72,149 @@ module Binocs
         timestamp: Time.current.iso8601
       }
     end
+
+    private
+
+    def exception_cause_chain(ex, depth = 0)
+      return nil if ex.cause.nil? || depth >= 5
+
+      cause = ex.cause
+      {
+        class: cause.class.name,
+        message: cause.message,
+        backtrace: cause.backtrace&.first(10),
+        cause: exception_cause_chain(cause, depth + 1)
+      }
+    end
+  end
+
+  # Captures ActiveRecord SQL queries during a request
+  class SqlLogSubscriber < ActiveSupport::LogSubscriber
+    # Only capture queries that are meaningful for debugging
+    IGNORED_QUERIES = %w[SCHEMA EXPLAIN].freeze
+
+    def sql(event)
+      return unless Thread.current[:binocs_logs]
+
+      payload = event.payload
+      return if IGNORED_QUERIES.include?(payload[:name])
+      return if payload[:name] == "CACHE"
+
+      entry = {
+        type: "sql",
+        name: payload[:name] || "SQL",
+        sql: truncate_sql(payload[:sql]),
+        duration: event.duration.round(2),
+        timestamp: Time.current.iso8601
+      }
+
+      # Flag queries that are likely part of an error
+      if payload[:exception]
+        entry[:error] = true
+        entry[:exception_class] = payload[:exception].first
+        entry[:exception_message] = payload[:exception].second
+      end
+
+      Thread.current[:binocs_logs] << entry
+    end
+
+    private
+
+    def truncate_sql(sql)
+      return nil if sql.nil?
+
+      sql = sql.squish
+      sql.length > 2000 ? "#{sql[0, 2000]}..." : sql
+    end
+  end
+
+  # Captures ActionView template and partial renders
+  class ViewLogSubscriber < ActiveSupport::LogSubscriber
+    def render_template(event)
+      record_render(event, "template")
+    end
+
+    def render_partial(event)
+      record_render(event, "partial")
+    end
+
+    def render_layout(event)
+      record_render(event, "layout")
+    end
+
+    private
+
+    def record_render(event, render_type)
+      return unless Thread.current[:binocs_logs]
+
+      payload = event.payload
+      identifier = payload[:identifier]
+      # Make the path relative to Rails root for readability
+      if identifier && defined?(Rails.root)
+        identifier = identifier.sub("#{Rails.root}/", "")
+      end
+
+      entry = {
+        type: "render",
+        render_type: render_type,
+        identifier: identifier,
+        duration: event.duration.round(2),
+        timestamp: Time.current.iso8601
+      }
+
+      if payload[:exception]
+        entry[:error] = true
+        entry[:exception_class] = payload[:exception].first
+        entry[:exception_message] = payload[:exception].second
+      end
+
+      Thread.current[:binocs_logs] << entry
+    end
+  end
+
+  # Intercepts Rails.logger output during a request to capture log lines
+  class LogInterceptor < Logger
+    def initialize(original_logger)
+      @original_logger = original_logger
+      super(nil)
+      self.level = original_logger.level
+      self.formatter = original_logger.formatter
+    end
+
+    def add(severity, message = nil, progname = nil, &block)
+      # Always pass through to original logger
+      @original_logger.add(severity, message, progname, &block)
+
+      # Capture to binocs logs if we're in a request context and severity >= WARN
+      if Thread.current[:binocs_logs] && severity && severity >= Logger::WARN
+        msg = message || (block ? block.call : progname)
+        return true if msg.nil? || msg.to_s.strip.empty?
+
+        level_name = case severity
+                     when Logger::WARN then "warn"
+                     when Logger::ERROR then "error"
+                     when Logger::FATAL then "fatal"
+                     else "unknown"
+                     end
+
+        Thread.current[:binocs_logs] << {
+          type: "log",
+          level: level_name,
+          message: msg.to_s[0, 4000],
+          timestamp: Time.current.iso8601
+        }
+      end
+
+      true
+    end
+
+    # Delegate everything else to the original logger
+    def method_missing(method, *args, &block)
+      @original_logger.send(method, *args, &block)
+    end
+
+    def respond_to_missing?(method, include_private = false)
+      @original_logger.respond_to?(method, include_private) || super
+    end
   end
 end