binocs 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 951ede246b19df8711837e0024c936962a8e56c60351a1fa1c47202ff6923ebb
-  data.tar.gz: b21a7315ffd445e61326d0bc7332431cde04f7d44510fdfda24f0938351717a2
+  metadata.gz: e4195cc40aca616da7fff7aaa442e94847efeab48e360fa2b5b47c7e66d9a0b2
+  data.tar.gz: 8214123335d3746b294d857275738a790b6ed66bf44c5b7a5046daefd1907b69
 SHA512:
-  metadata.gz: 10ec890ba59758423105071b00baa05183d9a22e51b92106831b9b8c4f40d11d8bdc1c391934bc99a1f426c50e012523ce74c4442602c93b32ba3bd3d51389fd
-  data.tar.gz: 50c57ebe70c4997edf303bb7bbdda1fd29d2a03474317c4f93fa9281aceaa97b9ee05c23b45ccc9f7ad32c7c1b72a74b542220a22396de92796e34822ca09c7f
+  metadata.gz: 8c5bb23f9b228e6734132ab2775ab4593bf287a0035ce2ef0f62f13ee99e1ca627422f227079c0e9172e7bceb4b07def83d08dbab6e20fe2a4a0d34d3a370610
+  data.tar.gz: 88a11c55945e97c2a96dd6e377390227ade60c484394c93d1f6c4c1127be6f4315abd3341bb60fc8808d59d29e7a08caf5ff9e91235109860260ee93bc452ca4

data/README.md

@@ -1,7 +1,17 @@
 # Binocs
 
+[![Gem Version](https://badge.fury.io/rb/binocs.svg)](https://rubygems.org/gems/binocs)
+
+![A picture of a train conductor with binoculars](https://cdn.zincan.com/952b429896eb12e5e36a68a43a9cdc16.jpg)
+
+<p align="center">
+  <img src="docs/images/binocs-icon-512.png" alt="Binocs icon" width="128" />
+</p>
+
 A Laravel Telescope-inspired request monitoring dashboard for Rails applications. Binocs provides real-time visibility into HTTP requests through both a web interface and a terminal UI with vim-style navigation, making debugging and development easier whether you prefer the browser or the command line.
 
+*Binocs is short for binoculars — the trusty tool train engineers and conductors used to look down the tracks and inspect what's coming. Now you can do the same for your Rails requests.*
+
 ## Features
 
 - **Real-time Request Monitoring**: Watch requests stream in as they happen via ActionCable/Turbo Streams
@@ -51,10 +61,7 @@ A Laravel Telescope-inspired request monitoring dashboard for Rails applications
 
 ```ruby
 # Gemfile
-gem 'binocs', path: 'path/to/binocs'  # For local development
-
-# Or from GitHub (once published)
-# gem 'binocs', github: 'zincan/binocs'
+gem 'binocs'
 ```
 
 ### 2. Install the gem
@@ -70,6 +77,7 @@ bin/rails generate binocs:install
 ```
 
 This will:
+
 - Copy the migration file
 - Create an initializer at `config/initializers/binocs.rb`
 - Add the route to mount the engine
@@ -267,6 +275,7 @@ Binocs uses Rails' ActionCable and Turbo Streams to provide real-time updates to
 3. **Database Storage**: The request data is saved to the `binocs_requests` table
 
 4. **Real-time Broadcast**: After saving, Binocs broadcasts the new request via Turbo Streams:
+
    ```ruby
    Turbo::StreamsChannel.broadcast_prepend_to(
      "binocs_requests",
@@ -299,6 +308,7 @@ If your application uses Devise (or similar) with ActionCable authentication, th
 ### Disabling Real-time Updates
 
 The dashboard includes a "Live/Paused" toggle. When paused:
+
 - The Turbo Stream subscription is temporarily disabled
 - No new requests appear automatically
 - Click "Refresh" to manually load new requests
@@ -306,17 +316,20 @@ The dashboard includes a "Live/Paused" toggle. When paused:
 ### Troubleshooting ActionCable
 
 **WebSocket not connecting:**
+
 - Check that ActionCable is configured in `config/cable.yml`
 - Verify the `/cable` path is accessible
 - Check browser console for WebSocket errors
 - If using Devise, ensure you're authenticated
 
 **Requests not appearing in real-time:**
+
 - Verify `Turbo::StreamsChannel` is available (requires `turbo-rails` gem)
 - Check Rails logs for `[Binocs] Broadcasting new request` messages
 - Ensure the request path isn't in `config.ignored_paths`
 
 **High latency or missed updates:**
+
 - Consider using Redis adapter for ActionCable in production-like environments
 - The async adapter (default for development) works fine for local debugging
 

data/app/controllers/binocs/requests_controller.rb

@@ -2,7 +2,7 @@
 
 module Binocs
   class RequestsController < ApplicationController
-    before_action :set_request, only: [:show, :destroy]
+    before_action :set_request, only: [:show, :destroy, :lifecycle, :raw]
 
     def index
       @requests = Request.recent
@@ -39,6 +39,138 @@ module Binocs
       end
     end
 
+    def sequence
+      @client_identifiers = Request.client_identifiers
+      @selected_client = params[:client].presence || @client_identifiers.first
+      @requests = Request.by_client(@selected_client).for_sequence.limit(200)
+    end
+
+    def heatmap
+      @endpoints = Request
+        .group(:method, :path)
+        .select(
+          "method",
+          "path",
+          "COUNT(*) as hit_count",
+          "AVG(duration_ms) as avg_duration",
+          "MAX(duration_ms) as max_duration",
+          "SUM(CASE WHEN status_code >= 500 THEN 1 ELSE 0 END) as error_count",
+          "SUM(CASE WHEN status_code >= 400 AND status_code < 500 THEN 1 ELSE 0 END) as client_error_count"
+        )
+        .order(Arel.sql("COUNT(*) DESC"))
+
+      # Try to match endpoints to swagger spec paths for grouping
+      @swagger_spec = Binocs::Swagger::Client.fetch_spec rescue nil
+      @endpoint_groups = build_endpoint_groups(@endpoints, @swagger_spec)
+
+      @total_requests = Request.count
+      @max_hits = @endpoints.map(&:hit_count).max || 1
+      @max_avg_duration = @endpoints.map { |e| e.avg_duration.to_f }.max || 1
+      @view_mode = params[:view] || "frequency"
+    end
+
+    def analytics
+      @total_requests = Request.count
+      @today_requests = Request.today.count
+      @avg_duration = Request.average_duration
+      @error_rate = Request.error_rate
+
+      # Hourly traffic for the last 24 hours
+      @hourly_traffic = Request
+        .where("created_at >= ?", 24.hours.ago)
+        .group_by_hour
+        .count
+
+      # Status code distribution
+      @status_distribution = Request.status_breakdown
+
+      # Method distribution
+      @method_distribution = Request.methods_breakdown
+
+      # Top endpoints by volume
+      @top_endpoints = Request
+        .group(:method, :path)
+        .select("method, path, COUNT(*) as hit_count, AVG(duration_ms) as avg_duration")
+        .order(Arel.sql("COUNT(*) DESC"))
+        .limit(15)
+
+      # Slowest endpoints (avg)
+      @slowest_endpoints = Request
+        .group(:method, :path)
+        .select("method, path, COUNT(*) as hit_count, AVG(duration_ms) as avg_duration, MAX(duration_ms) as max_duration")
+        .having("COUNT(*) >= 2")
+        .order(Arel.sql("AVG(duration_ms) DESC"))
+        .limit(10)
+
+      # Error hotspots
+      @error_endpoints = Request
+        .where("status_code >= 400")
+        .group(:method, :path, :status_code)
+        .select("method, path, status_code, COUNT(*) as error_count")
+        .order(Arel.sql("COUNT(*) DESC"))
+        .limit(10)
+
+      # Response time distribution (buckets)
+      @duration_buckets = build_duration_buckets
+    end
+
+    def lifecycle
+      logs = Array(@request.logs)
+
+      # Extract the controller log entry (the summary line from ActiveSupport::Notifications)
+      controller_log = logs.find { |l| l["type"] == "controller" }
+
+      # Timing breakdown
+      total_duration = @request.duration_ms.to_f
+      controller_duration = controller_log&.dig("duration").to_f
+      view_runtime = controller_log&.dig("view_runtime").to_f
+      db_runtime = controller_log&.dig("db_runtime").to_f
+
+      middleware_time = [total_duration - controller_duration, 0].max
+      other_time = [controller_duration - view_runtime - db_runtime, 0].max
+
+      @lifecycle = {
+        total_duration: total_duration,
+        controller_duration: controller_duration,
+        middleware_time: middleware_time,
+        view_runtime: view_runtime,
+        db_runtime: db_runtime,
+        other_time: other_time
+      }
+
+      # SQL queries from logs
+      @sql_queries = logs.select { |l| l["type"] == "sql" }
+
+      # Render entries from logs
+      @render_entries = logs.select { |l| l["type"] == "render" }
+
+      # Halted filter (if any before_action halted the chain)
+      @halted_filter = logs.find { |l| l["type"] == "halted" }
+
+      # Redirect info
+      @redirect = logs.find { |l| l["type"] == "redirect" }
+
+      # Exception info (from logs or request model)
+      @exception_log = logs.find { |l| l["type"] == "exception" }
+
+      # Generic log entries
+      @log_entries = logs.select { |l| l["type"] == "log" }
+
+      # Middleware stack from the host Rails app
+      @middleware_stack = begin
+        Rails.application.middleware.map do |middleware|
+          name = middleware.klass.is_a?(String) ? middleware.klass : middleware.klass.name
+          name
+        end.compact
+      rescue
+        []
+      end
+    end
+
+    def raw
+      @section = params[:section].presence || "full"
+    end
+
     def clear
       Request.delete_all
 
@@ -56,6 +188,63 @@ module Binocs
       redirect_to requests_path, alert: "Request not found."
     end
 
+    def build_endpoint_groups(endpoints, spec)
+      groups = {}
+
+      endpoints.each do |ep|
+        tag = find_swagger_tag(ep.method, ep.path, spec) || derive_tag_from_path(ep.path)
+        groups[tag] ||= []
+        groups[tag] << ep
+      end
+
+      # Sort groups by total hits descending
+      groups.sort_by { |_tag, eps| -eps.sum(&:hit_count) }.to_h
+    end
+
+    def find_swagger_tag(method, path, spec)
+      return nil unless spec && spec["paths"]
+
+      spec["paths"].each do |spec_path, path_item|
+        next unless path_item.is_a?(Hash)
+
+        pattern = spec_path.gsub(/\{[^}]+\}/, "[^/]+")
+        next unless path.match?(/\A#{pattern}\z/)
+
+        operation = path_item[method.downcase]
+        next unless operation
+
+        return operation["tags"]&.first
+      end
+
+      nil
+    end
+
+    def derive_tag_from_path(path)
+      # /v1/companies/123/invitations -> "Companies"
+      # /api/users -> "Users"
+      segments = path.split("/").reject(&:blank?)
+      # Skip version prefixes
+      segments.shift if segments.first&.match?(/\Av\d+\z/)
+      segments.shift if segments.first&.match?(/\Aapi\z/i)
+      # Take first meaningful segment
+      segment = segments.first || "Other"
+      segment.titleize.pluralize
+    end
+
+    def build_duration_buckets
+      buckets = {
+        "< 10ms" => Request.where("duration_ms < 10").count,
+        "10-50ms" => Request.where("duration_ms >= 10 AND duration_ms < 50").count,
+        "50-100ms" => Request.where("duration_ms >= 50 AND duration_ms < 100").count,
+        "100-250ms" => Request.where("duration_ms >= 100 AND duration_ms < 250").count,
+        "250-500ms" => Request.where("duration_ms >= 250 AND duration_ms < 500").count,
+        "500ms-1s" => Request.where("duration_ms >= 500 AND duration_ms < 1000").count,
+        "1-3s" => Request.where("duration_ms >= 1000 AND duration_ms < 3000").count,
+        "> 3s" => Request.where("duration_ms >= 3000").count
+      }
+      buckets.reject { |_, v| v.zero? }
+    end
+
     def apply_filters(scope)
       scope = scope.by_method(params[:method]) if params[:method].present?
       scope = scope.by_status_range(params[:status]) if params[:status].present?

data/app/helpers/binocs/application_helper.rb

@@ -5,32 +5,32 @@ module Binocs
     def method_badge_class(method)
       case method.to_s.upcase
       when "GET"
-        "bg-green-900/50 text-green-300"
+        "bg-emerald-500/15 text-emerald-400 ring-1 ring-emerald-500/20"
       when "POST"
-        "bg-blue-900/50 text-blue-300"
+        "bg-cyan-500/15 text-cyan-400 ring-1 ring-cyan-500/20"
       when "PUT", "PATCH"
-        "bg-yellow-900/50 text-yellow-300"
+        "bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20"
       when "DELETE"
-        "bg-red-900/50 text-red-300"
+        "bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20"
       else
-        "bg-slate-700 text-slate-300"
+        "bg-zinc-800 text-zinc-400 ring-1 ring-zinc-700"
       end
     end
 
     def status_badge_class(status)
-      return "bg-slate-700 text-slate-300" if status.nil?
+      return "bg-zinc-800 text-zinc-400 ring-1 ring-zinc-700" if status.nil?
 
       case status
       when 200..299
-        "bg-green-900/50 text-green-300"
+        "bg-emerald-500/15 text-emerald-400 ring-1 ring-emerald-500/20"
       when 300..399
-        "bg-blue-900/50 text-blue-300"
+        "bg-cyan-500/15 text-cyan-400 ring-1 ring-cyan-500/20"
       when 400..499
-        "bg-yellow-900/50 text-yellow-300"
+        "bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20"
       when 500..599
-        "bg-red-900/50 text-red-300"
+        "bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20"
       else
-        "bg-slate-700 text-slate-300"
+        "bg-zinc-800 text-zinc-400 ring-1 ring-zinc-700"
       end
     end
 
@@ -47,6 +47,18 @@ module Binocs
       value.to_s
     end
 
+    def client_label(identifier)
+      return "Unknown" if identifier.blank?
+
+      prefix, value = identifier.split(":", 2)
+      case prefix
+      when "session" then "Session #{value.to_s[0, 8]}"
+      when "auth" then "Auth #{value.to_s[0, 8]}"
+      when "ip" then "IP #{value}"
+      else identifier
+      end
+    end
+
     def format_body(body)
       return body if body.nil?
 
@@ -57,5 +69,25 @@ module Binocs
         body
       end
     end
+
+    def relative_time(time)
+      return "N/A" if time.nil?
+
+      seconds = (Time.current - time).to_i
+      return "just now" if seconds < 5
+
+      minutes = seconds / 60
+      hours = minutes / 60
+
+      if hours >= 3
+        time.strftime("%b %d, %H:%M:%S")
+      elsif hours >= 1
+        "#{hours} #{hours == 1 ? 'hour' : 'hours'} ago"
+      elsif minutes >= 1
+        "#{minutes} #{minutes == 1 ? 'minute' : 'minutes'} ago"
+      else
+        "#{seconds} #{seconds == 1 ? 'second' : 'seconds'} ago"
+      end
+    end
   end
 end

data/app/models/binocs/request.rb

@@ -32,9 +32,21 @@ module Binocs
     scope :without_exception, -> { where(exception: nil) }
     scope :slow, ->(threshold_ms = 1000) { where("duration_ms > ?", threshold_ms) }
     scope :by_ip, ->(ip) { where(ip_address: ip) if ip.present? }
+    scope :by_client, ->(identifier) { where(client_identifier: identifier) if identifier.present? }
+    scope :for_sequence, -> { order(created_at: :asc) }
     scope :recent, -> { order(created_at: :desc) }
     scope :today, -> { where("created_at >= ?", Time.current.beginning_of_day) }
     scope :last_hour, -> { where("created_at >= ?", 1.hour.ago) }
+    scope :group_by_hour, -> {
+      adapter = connection.adapter_name.downcase
+      if adapter.include?("sqlite")
+        group("strftime('%Y-%m-%d %H:00', created_at)")
+      elsif adapter.include?("postgres")
+        group("to_char(created_at, 'YYYY-MM-DD HH24:00')")
+      else
+        group("DATE_FORMAT(created_at, '%Y-%m-%d %H:00')")
+      end
+    }
     scope :search, ->(query) {
       return all if query.blank?
 
@@ -172,7 +184,26 @@ module Binocs
       controller_name.demodulize.sub(/Controller$/, "").titleize
     end
 
+    def client_label
+      return "Unknown" if client_identifier.blank?
+
+      prefix, value = client_identifier.split(":", 2)
+      case prefix
+      when "session" then "Session #{value.to_s[0, 8]}"
+      when "auth" then "Auth #{value.to_s[0, 8]}"
+      when "ip" then "IP #{value}"
+      else client_identifier
+      end
+    end
+
     # Class methods for statistics
+    def self.client_identifiers
+      where.not(client_identifier: nil)
+        .group(:client_identifier)
+        .order(Arel.sql("MAX(created_at) DESC"))
+        .pluck(:client_identifier)
+    end
+
     def self.average_duration
       average(:duration_ms)&.round(2)
     end

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

@@ -1,9 +1,9 @@
 <div class="px-4 py-12 text-center">
-  <svg class="mx-auto h-12 w-12 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+  <svg class="mx-auto h-12 w-12 text-zinc-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
   </svg>
-  <h3 class="mt-2 text-sm font-medium text-white">No requests</h3>
-  <p class="mt-1 text-sm text-slate-400">
+  <h3 class="mt-2 text-sm font-medium text-zinc-200">No requests</h3>
+  <p class="mt-1 text-sm text-zinc-500">
     Make some requests to your application and they'll appear here in real-time.
   </p>
 </div>

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

@@ -0,0 +1,104 @@
+<% border_class = case log["type"]
+                  when "exception" then "border-l-4 border-l-rose-500"
+                  when "log" then log["level"] == "error" || log["level"] == "fatal" ? "border-l-4 border-l-rose-500" : "border-l-4 border-l-amber-500"
+                  when "sql" then log["error"] ? "border-l-4 border-l-rose-500" : ""
+                  when "render" then log["error"] ? "border-l-4 border-l-rose-500" : ""
+                  else ""
+                  end %>
+
+<div class="bg-zinc-950 rounded p-4 <%= border_class %>">
+  <div class="flex items-center justify-between mb-2">
+    <div class="flex items-center space-x-2">
+      <% type_color = case log["type"]
+                       when "exception" then "text-rose-400 bg-rose-500/10"
+                       when "log" then log["level"] == "error" || log["level"] == "fatal" ? "text-rose-400 bg-rose-500/10" : "text-amber-400 bg-amber-500/10"
+                       when "sql" then log["error"] ? "text-rose-400 bg-rose-500/10" : "text-cyan-400 bg-cyan-500/10"
+                       when "render" then "text-purple-400 bg-purple-500/10"
+                       when "controller" then "text-yellow-400 bg-yellow-500/10"
+                       when "redirect" then "text-cyan-400 bg-cyan-500/10"
+                       when "halted" then "text-amber-400 bg-amber-500/10"
+                       else "text-zinc-400 bg-zinc-800"
+                       end %>
+      <span class="text-xs font-medium uppercase rounded px-1.5 py-0.5 <%= type_color %>"><%= log["type"] %></span>
+      <% if log["level"] %>
+        <span class="text-xs font-bold uppercase <%= log["level"] == 'error' || log["level"] == 'fatal' ? 'text-rose-300' : 'text-amber-300' %>"><%= log["level"] %></span>
+      <% end %>
+      <% if log["duration"] %>
+        <span class="text-xs text-zinc-600"><%= log["duration"] %>ms</span>
+      <% end %>
+    </div>
+    <span class="text-xs text-zinc-600"><%= log["timestamp"] %></span>
+  </div>
+
+  <% case log["type"] %>
+  <% when "controller" %>
+    <div class="text-sm text-zinc-200">
+      <span class="text-zinc-500">Controller:</span> <%= log["controller"] %>#<%= log["action"] %>
+      <% if log["view_runtime"] %>
+        <span class="ml-4 text-zinc-500">View:</span> <%= log["view_runtime"] %>ms
+      <% end %>
+      <% if log["db_runtime"] %>
+        <span class="ml-4 text-zinc-500">DB:</span> <%= log["db_runtime"] %>ms
+      <% end %>
+    </div>
+
+  <% when "redirect" %>
+    <div class="text-sm text-zinc-200">
+      <span class="text-zinc-500">Redirect to:</span> <%= log["location"] %>
+      <span class="ml-4 text-zinc-500">Status:</span> <%= log["status"] %>
+    </div>
+
+  <% when "sql" %>
+    <div>
+      <div class="flex items-center space-x-2 mb-1">
+        <span class="text-xs text-zinc-500"><%= log["name"] %></span>
+      </div>
+      <pre class="text-sm font-mono overflow-x-auto whitespace-pre-wrap <%= log["error"] ? 'text-rose-300' : 'text-emerald-300' %>"><%= log["sql"] %></pre>
+      <% if log["error"] %>
+        <div class="mt-2 text-sm text-rose-300">
+          <span class="font-semibold"><%= log["exception_class"] %>:</span> <%= log["exception_message"] %>
+        </div>
+      <% end %>
+    </div>
+
+  <% when "render" %>
+    <div class="text-sm text-zinc-200">
+      <span class="text-zinc-500"><%= log["render_type"]&.capitalize %>:</span>
+      <span class="font-mono text-purple-300 ml-1"><%= log["identifier"] %></span>
+      <% if log["error"] %>
+        <div class="mt-1 text-rose-300">
+          <span class="font-semibold"><%= log["exception_class"] %>:</span> <%= log["exception_message"] %>
+        </div>
+      <% end %>
+    </div>
+
+  <% when "exception" %>
+    <div class="text-sm">
+      <div class="text-rose-300 font-mono font-semibold"><%= log["class"] %></div>
+      <div class="text-rose-200 mt-1"><%= log["message"] %></div>
+      <% if log["backtrace"].present? %>
+        <pre class="mt-2 bg-zinc-900 rounded p-3 text-xs text-rose-200 overflow-x-auto max-h-48"><%= Array(log["backtrace"]).join("\n") %></pre>
+      <% end %>
+      <% if log["cause"].present? %>
+        <div class="mt-3 pl-3 border-l-2 border-rose-500/30">
+          <div class="text-xs text-rose-400 uppercase font-semibold mb-1">Caused by</div>
+          <div class="text-rose-300 font-mono text-xs"><%= log["cause"]["class"] %>: <%= log["cause"]["message"] %></div>
+          <% if log["cause"]["backtrace"].present? %>
+            <pre class="mt-1 text-xs text-rose-200/70 overflow-x-auto max-h-24"><%= Array(log["cause"]["backtrace"]).join("\n") %></pre>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+  <% when "log" %>
+    <pre class="text-sm font-mono whitespace-pre-wrap <%= log["level"] == 'error' || log["level"] == 'fatal' ? 'text-rose-300' : 'text-amber-300' %>"><%= log["message"] %></pre>
+
+  <% when "halted" %>
+    <div class="text-sm text-amber-300">
+      Filter chain halted by <span class="font-mono font-semibold"><%= log["filter"] %></span>
+    </div>
+
+  <% else %>
+    <pre class="text-sm text-zinc-200"><%= format_value(log) %></pre>
+  <% end %>
+</div>

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

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(request) do %>
-  <%= link_to binocs.request_path(request.uuid), class: "block hover:bg-slate-700/50 transition-colors duration-150", data: { turbo_frame: "_top" } do %>
+  <%= link_to binocs.request_path(request.uuid), class: "block hover:bg-yellow-500/5 transition-colors duration-150", data: { turbo_frame: "_top" } do %>
     <div class="px-4 py-3 pr-6">
       <div class="flex items-center justify-between">
         <div class="flex items-center space-x-4 min-w-0">
@@ -14,20 +14,20 @@
           </span>
 
           <!-- Path -->
-          <span class="text-sm text-white truncate" title="<%= request.path %>">
+          <span class="text-sm text-zinc-200 truncate" title="<%= request.path %>">
             <%= request.short_path %>
           </span>
 
           <!-- Controller#Action -->
           <% if request.controller_action %>
-            <span class="text-xs text-slate-400">
+            <span class="text-xs text-zinc-500">
               <%= request.controller_action %>
             </span>
           <% end %>
 
           <!-- Exception Indicator -->
           <% if request.has_exception? %>
-            <span class="inline-flex items-center rounded-full bg-red-900/50 px-2 py-1 text-xs font-medium text-red-300">
+            <span class="inline-flex items-center rounded-full bg-rose-500/10 px-2 py-1 text-xs font-medium text-rose-400 ring-1 ring-rose-500/20">
               <svg class="w-3 h-3 mr-1" 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>
@@ -36,7 +36,7 @@
           <% end %>
         </div>
 
-        <div class="flex items-center space-x-4 text-sm text-slate-400 flex-shrink-0 pl-4">
+        <div class="flex items-center space-x-4 text-sm text-zinc-500 flex-shrink-0 pl-4">
           <!-- Duration -->
           <span title="Duration" class="whitespace-nowrap">
             <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">