binocs 0.1.0

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

@@ -0,0 +1,115 @@
+<div class="space-y-6" x-data="{ live: true, connected: false }" x-init="
+  // Check connection status
+  if (typeof Turbo !== 'undefined' && Turbo.cable) {
+    connected = Turbo.cable.connection.isOpen();
+    Turbo.cable.connection.events.connected = () => { connected = true; };
+    Turbo.cable.connection.events.disconnected = () => { connected = false; };
+  }
+">
+  <!-- Stats Cards -->
+  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <div class="bg-slate-800 rounded-lg p-4 border border-slate-700">
+      <dt class="text-sm font-medium text-slate-400">Total Requests</dt>
+      <dd class="mt-1 text-3xl font-semibold text-white"><%= @stats[:total] %></dd>
+    </div>
+    <div class="bg-slate-800 rounded-lg p-4 border border-slate-700">
+      <dt class="text-sm font-medium text-slate-400">Today</dt>
+      <dd class="mt-1 text-3xl font-semibold text-white"><%= @stats[:today] %></dd>
+    </div>
+    <div class="bg-slate-800 rounded-lg p-4 border border-slate-700">
+      <dt class="text-sm font-medium text-slate-400">Avg Duration</dt>
+      <dd class="mt-1 text-3xl font-semibold text-white"><%= @stats[:avg_duration] || 0 %><span class="text-lg text-slate-400">ms</span></dd>
+    </div>
+    <div class="bg-slate-800 rounded-lg p-4 border border-slate-700">
+      <dt class="text-sm font-medium text-slate-400">Error Rate</dt>
+      <dd class="mt-1 text-3xl font-semibold <%= @stats[:error_rate].to_f > 5 ? 'text-red-400' : 'text-green-400' %>"><%= @stats[:error_rate] || 0 %><span class="text-lg text-slate-400">%</span></dd>
+    </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="bg-slate-800 rounded-lg p-4 border border-slate-700">
+    <%= form_with url: binocs.requests_path, method: :get, local: true, class: "space-y-4" do |f| %>
+      <div class="flex flex-wrap gap-4 items-center">
+        <!-- Search -->
+        <div class="flex-1 min-w-[200px]">
+          <%= text_field_tag :search, params[:search], placeholder: "Search path, controller...", class: "w-full rounded-md bg-slate-700 border-slate-600 text-white placeholder-slate-400 focus:border-indigo-500 focus:ring-indigo-500 text-sm" %>
+        </div>
+
+        <!-- Method Filter -->
+        <div>
+          <%= select_tag :method, options_for_select([["All Methods", ""], ["GET", "GET"], ["POST", "POST"], ["PUT", "PUT"], ["PATCH", "PATCH"], ["DELETE", "DELETE"]], params[:method]), class: "rounded-md bg-slate-700 border-slate-600 text-white text-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+        </div>
+
+        <!-- Status Filter -->
+        <div>
+          <%= select_tag :status, options_for_select([["All Status", ""], ["2xx Success", "2xx"], ["3xx Redirect", "3xx"], ["4xx Client Error", "4xx"], ["5xx Server Error", "5xx"]], params[:status]), class: "rounded-md bg-slate-700 border-slate-600 text-white text-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+        </div>
+
+        <!-- Controller Filter -->
+        <div>
+          <%= select_tag :controller_name, options_for_select([["All Controllers", ""]] + Binocs::Request.controllers_list.map { |c| [c, c] }, params[:controller_name]), class: "rounded-md bg-slate-700 border-slate-600 text-white text-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+        </div>
+
+        <!-- Has Exception -->
+        <div class="flex items-center">
+          <%= check_box_tag :has_exception, "1", params[:has_exception] == "1", class: "rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500" %>
+          <%= label_tag :has_exception, "Has Exception", class: "ml-2 text-sm text-slate-300" %>
+        </div>
+
+        <!-- Filter Buttons - same height -->
+        <div class="flex items-center gap-2">
+          <%= submit_tag "Filter", class: "rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer h-[38px]" %>
+          <%= link_to "Clear Filters", binocs.requests_path, class: "rounded-md bg-slate-600 px-4 py-2 text-sm font-medium text-white hover:bg-slate-500 h-[38px] inline-flex items-center" %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Actions Bar -->
+  <div class="flex justify-between items-center">
+    <div class="flex items-center gap-4">
+      <span class="text-sm text-slate-400">
+        Showing <%= @requests.size %> requests
+      </span>
+
+      <!-- Live Toggle -->
+      <button
+        @click="live = !live"
+        :class="live ? 'bg-green-600 hover:bg-green-500' : 'bg-slate-600 hover:bg-slate-500'"
+        class="inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-white transition-colors"
+      >
+        <span class="relative flex h-2 w-2">
+          <span x-show="live" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+          <span :class="live ? 'bg-green-400' : 'bg-slate-400'" class="relative inline-flex rounded-full h-2 w-2"></span>
+        </span>
+        <span x-text="live ? 'Live' : 'Paused'">Live</span>
+      </button>
+    </div>
+
+    <div class="flex gap-2">
+      <%= link_to binocs.requests_path, class: "rounded-md bg-slate-700 px-3 py-2 text-sm font-medium text-white hover:bg-slate-600", data: { turbo_frame: "_top" } do %>
+        <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+        </svg>
+        Refresh
+      <% end %>
+      <%= button_to "Clear All", binocs.clear_requests_path, 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 you want to clear all requests?" } %>
+    </div>
+  </div>
+
+  <!-- Requests List -->
+  <div class="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
+    <div id="requests-list" class="divide-y divide-slate-700">
+      <% if @requests.any? %>
+        <%= render partial: "binocs/requests/request", collection: @requests, as: :request %>
+      <% else %>
+        <%= render partial: "binocs/requests/empty_list" %>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Turbo Stream Subscription (controlled by live toggle) -->
+  <template x-if="live">
+    <%= turbo_stream_from "binocs_requests" %>
+  </template>
+</div>

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

@@ -0,0 +1,227 @@
+<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 %>
+      <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>
+      Back to Requests
+    <% end %>
+  </div>
+
+  <!-- Header -->
+  <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
+    <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) %>">
+          <%= @request.method %>
+        </span>
+        <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>
+      </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?" } %>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+    <% 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">
+        <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>
+        Exception
+      </h2>
+      <div class="mt-4 space-y-3">
+        <div>
+          <span class="text-sm text-red-300 font-medium"><%= @request.exception["class"] %></span>
+        </div>
+        <div class="text-sm text-red-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>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Tabs -->
+  <div x-data="{ activeTab: 'params' }" class="bg-slate-800 rounded-lg border border-slate-700 overflow-hidden">
+    <!-- Tab Headers -->
+    <div class="border-b border-slate-700">
+      <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">
+          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">
+          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">
+          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">
+          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">
+          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>
+          <% end %>
+        </button>
+      </nav>
+    </div>
+
+    <!-- Tab Content -->
+    <div class="p-6">
+      <!-- Params Tab -->
+      <div x-show="activeTab === 'params'">
+        <% if @request.params.present? && @request.params.any? %>
+          <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>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <p class="text-sm text-slate-400">No parameters</p>
+        <% end %>
+      </div>
+
+      <!-- Headers Tab -->
+      <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>
+            <% 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>
+                  </div>
+                <% end %>
+              </div>
+            <% else %>
+              <p class="text-sm text-slate-400">No request headers</p>
+            <% end %>
+          </div>
+
+          <div>
+            <h3 class="text-sm font-medium text-slate-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>
+                  </div>
+                <% end %>
+              </div>
+            <% else %>
+              <p class="text-sm text-slate-400">No response headers</p>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+      <!-- Body Tab -->
+      <div x-show="activeTab === 'body'" x-cloak>
+        <h3 class="text-sm font-medium text-slate-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>
+        <% else %>
+          <p class="text-sm text-slate-400">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>
+        <% 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>
+        <% else %>
+          <p class="text-sm text-slate-400">No response body captured</p>
+        <% end %>
+      </div>
+
+      <!-- Logs Tab -->
+      <div x-show="activeTab === 'logs'" x-cloak>
+        <% if @request.logs.present? && @request.logs.any? %>
+          <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>
+            <% end %>
+          </div>
+        <% else %>
+          <p class="text-sm text-slate-400">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>
+</div>

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

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-gray-900">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Binocs - Request Monitor</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= stylesheet_link_tag "binocs/application", media: "all" %>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            binocs: {
+              bg: '#0f172a',
+              card: '#1e293b',
+              border: '#334155',
+              accent: '#6366f1'
+            }
+          }
+        }
+      }
+    }
+  </script>
+  <%= turbo_include_tags %>
+  <%= stimulus_include_tags rescue nil %>
+  <style>[x-cloak] { display: none !important; }</style>
+</head>
+<body class="h-full">
+  <div class="min-h-full">
+    <!-- Navigation -->
+    <nav class="bg-slate-800 border-b border-slate-700">
+      <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>
+            <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'}" %>
+            </div>
+          </div>
+          <div class="flex items-center space-x-4">
+            <span class="text-xs text-slate-500">
+              Rails <%= Rails::VERSION::STRING %> |
+              Ruby <%= RUBY_VERSION %> |
+              <%= Rails.env %>
+            </span>
+          </div>
+        </div>
+      </div>
+    </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 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">
+            <svg class="h-5 w-5 text-amber-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+            </svg>
+            <p class="text-sm text-amber-200">
+              <strong>Real-time updates unavailable.</strong>
+              Authentication may be required for live streaming.
+            </p>
+          </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">
+              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">
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Flash Messages -->
+    <% if notice %>
+      <div class="bg-green-900/50 border-b border-green-800">
+        <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>
+        </div>
+      </div>
+    <% end %>
+    <% if alert %>
+      <div class="bg-red-900/50 border-b border-red-800">
+        <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>
+        </div>
+      </div>
+    <% end %>
+
+    <!-- Main Content -->
+    <main class="bg-slate-900 min-h-screen">
+      <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <%= yield %>
+      </div>
+    </main>
+  </div>
+</body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+# Binocs Engine Importmap
+pin "binocs/application", to: "binocs/application.js"
+pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true

data/config/routes.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+Binocs::Engine.routes.draw do
+  root to: "requests#index"
+
+  resources :requests, only: [:index, :show, :destroy] do
+    collection do
+      delete :clear
+    end
+  end
+end

data/db/migrate/20240101000000_create_binocs_requests.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class CreateBinocsRequests < ActiveRecord::Migration[7.0]
+  def change
+    create_table :binocs_requests do |t|
+      t.string :uuid, null: false, index: { unique: true }
+      t.string :method, null: false
+      t.string :path, null: false
+      t.text :full_url
+      t.string :controller_name
+      t.string :action_name
+      t.string :route_name
+      t.text :params
+      t.text :request_headers
+      t.text :response_headers
+      t.text :request_body
+      t.text :response_body
+      t.integer :status_code
+      t.float :duration_ms
+      t.string :ip_address
+      t.string :session_id
+      t.text :logs
+      t.text :exception
+      t.integer :memory_delta
+      t.string :content_type
+
+      t.timestamps
+    end
+
+    add_index :binocs_requests, :method
+    add_index :binocs_requests, :status_code
+    add_index :binocs_requests, :controller_name
+    add_index :binocs_requests, :created_at
+    add_index :binocs_requests, :duration_ms
+  end
+end

data/exe/binocs

@@ -0,0 +1,86 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'optparse'
+
+options = {
+  environment: ENV['RAILS_ENV'] || 'development',
+  refresh_interval: 2
+}
+
+OptionParser.new do |opts|
+  opts.banner = "Usage: binocs [options]"
+
+  opts.on("-e", "--environment ENV", "Rails environment (default: development)") do |env|
+    options[:environment] = env
+  end
+
+  opts.on("-r", "--refresh SECONDS", Integer, "Refresh interval in seconds (default: 2)") do |r|
+    options[:refresh_interval] = r
+  end
+
+  opts.on("-h", "--help", "Show this help message") do
+    puts opts
+    puts <<~HELP
+
+    Vim-style keybindings:
+      j/↓        Move down
+      k/↑        Move up
+      g          Go to top
+      G          Go to bottom
+      Enter/l    View request details
+      h/Esc      Go back / Close detail view
+      /          Search
+      f          Filter menu
+      r          Refresh
+      q          Quit
+      ?          Show help
+
+    HELP
+    exit
+  end
+end.parse!
+
+# Boot Rails environment
+ENV['RAILS_ENV'] = options[:environment]
+
+# Find and load the Rails application
+def find_rails_root
+  dir = Dir.pwd
+  while dir != '/'
+    return dir if File.exist?(File.join(dir, 'config', 'environment.rb'))
+    dir = File.dirname(dir)
+  end
+  nil
+end
+
+rails_root = find_rails_root
+
+if rails_root.nil?
+  puts "\e[31mError: Could not find Rails application.\e[0m"
+  puts "Make sure you're running this from within a Rails project directory."
+  exit 1
+end
+
+Dir.chdir(rails_root)
+
+begin
+  require File.join(rails_root, 'config', 'environment')
+rescue => e
+  puts "\e[31mError loading Rails environment:\e[0m #{e.message}"
+  exit 1
+end
+
+# Now load and run the TUI
+require 'binocs/tui'
+
+begin
+  Binocs::TUI::App.new(options).run
+rescue Interrupt
+  # Clean exit on Ctrl+C
+  exit 0
+rescue => e
+  puts "\e[31mError:\e[0m #{e.message}"
+  puts e.backtrace.first(5).join("\n") if ENV['DEBUG']
+  exit 1
+end