eyeloupe 0.1.0

data/app/views/eyeloupe/in_requests/index.html.erb

@@ -0,0 +1,18 @@
+<div data-controller="eyeloupe--search">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="text-xl font-semibold leading-6 text-gray-900">Requests</h1>
+      <p class="mt-2 text-sm text-gray-700">All incoming request to your application</p>
+    </div>
+    <div>
+      <form method="get" data-action="eyeloupe--search#submit">
+        <input type="hidden" name="frame" value="frame" />
+        <label for="q" class="sr-only">Search</label>
+        <input type="text" id="q" name="q" value="<%= params[:q] %>" placeholder="Search for path" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
+      </form>
+    </div>
+  </div>
+  <div class="mt-8 flow-root">
+    <%= turbo_frame_tag "frame", src: in_requests_path(frame: true), data: {"eyeloupe--refresh-target": "frame", "eyeloupe--search-target": "frame"} do %><% end %>
+  </div>
+</div>

data/app/views/eyeloupe/in_requests/show.html.erb

@@ -0,0 +1,82 @@
+<div>
+  <div class="px-4 sm:px-0">
+    <h3 class="text-xl font-semibold leading-7 text-gray-900">Request details</h3>
+  </div>
+  <div class="mt-6 border-t border-gray-100">
+    <dl class="divide-y divide-gray-100">
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Time</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= @request.created_at.to_formatted_s(:long) %> (<%= distance_of_time_in_words(@request.created_at, DateTime.now) %>)
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Hostname</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.hostname %></dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Method</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= render "eyeloupe/shared/verb", verb: @request.verb %>
+        </dd>
+      </div>
+      <% if @request.controller.present? %>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Controller</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.controller %></dd>
+      </div>
+      <% end %>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Path</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.path %></dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Status</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= render "eyeloupe/shared/status_code", code: @request.status %>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Duration</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= @request.duration %> ms
+          <% if @request.db_duration.present? && @request.view_duration.present? %>
+          (ActiveRecord: <%= @request.db_duration %> ms, Views: <%= @request.view_duration %> ms)
+          <% end %>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">IP Address</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.ip %></dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Payload</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0 rounded-md bg-black text-white overflow-x-auto">
+          <% if @request.payload.present? %>
+          <pre class="p-2"><%= @request.payload %></pre>
+          <% else %>
+          <p class="text-gray-400 p-2">No payload</p>
+          <% end %>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Headers</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0  rounded-md bg-black text-white overflow-x-auto">
+          <pre class="p-2"><%= JSON.pretty_generate(JSON.parse(@request.headers || "{}")) %></pre>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Session</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0 rounded-md bg-black text-white overflow-x-auto">
+          <pre class="p-2" ><%= JSON.pretty_generate(JSON.parse(@request.session || "{}")) %></pre>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Response</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0 rounded-md bg-black text-white overflow-x-auto">
+          <pre class="p-2"><%= @request.format == "application/json" ? JSON.pretty_generate(JSON.parse(@request.response || "{}")) : @request.response %></pre>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>

data/app/views/eyeloupe/out_requests/_frame.html.erb

@@ -0,0 +1,46 @@
+<%= turbo_frame_tag "frame" do %>
+  <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">
+
+      <table class="min-w-full divide-y divide-gray-300">
+        <thead>
+        <tr>
+          <th scope="col" class="py-3 pl-4 pr-3 text-left text-sm font-medium uppercase tracking-wide text-gray-500 sm:pl-0">Verb</th>
+          <th scope="col" class="px-3 py-3 text-left text-sm font-medium uppercase tracking-wide text-gray-500">Host</th>
+          <th scope="col" class="px-3 py-3 text-left text-sm font-medium uppercase tracking-wide text-gray-500">Path</th>
+          <th scope="col" class="px-3 py-3 text-left text-sm font-medium uppercase tracking-wide text-gray-500">Status</th>
+          <th scope="col" class="px-3 py-3 text-left text-sm font-medium uppercase tracking-wide text-gray-500">Duration</th>
+          <th scope="col" class="px-3 py-3 text-left text-sm font-medium uppercase tracking-wide text-gray-500">Occurred</th>
+          <th scope="col" class="relative py-3 pl-3 pr-4 sm:pr-0">
+            <span class="sr-only">Details</span>
+          </th>
+        </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-200">
+          <% @requests.each do |request| %>
+            <tr>
+              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-900 sm:pl-0">
+                <%= render "eyeloupe/shared/verb", verb: request.verb %>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-base text-gray-500"><%= request.hostname %></td>
+              <td class="whitespace-nowrap px-3 py-4 text-base text-gray-500"><%= request.path.truncate(50) %></td>
+              <td class="whitespace-nowrap px-3 py-4 text-base text-gray-500">
+                <%= render "eyeloupe/shared/status_code", code: request.status %>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-base text-gray-500"><%= request.duration %> ms</td>
+              <td class="whitespace-nowrap px-3 py-4 text-base text-gray-500"><%= distance_of_time_in_words(request.created_at, DateTime.now) %></td>
+              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-base font-medium sm:pr-0">
+                <%= link_to "Details", out_request_path(request), class: "text-gray-600 hover:text-gray-900", data: {"turbo_frame": "_top"} %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+    <aside class="mt-4 px-4 py-3 flex items-center justify-center sm:px-6" aria-label="Pagination">
+      <div class="flex-1 flex justify-center">
+        <%== pagy_nav(@pagy) %>
+      </div>
+    </aside>
+  </div>
+<% end %>

data/app/views/eyeloupe/out_requests/index.html.erb

@@ -0,0 +1,18 @@
+<div data-controller="eyeloupe--search">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <h1 class="text-xl font-semibold leading-6 text-gray-900">HTTP Client</h1>
+      <p class="mt-2 text-sm text-gray-700">All outbound HTTP requests made by your application</p>
+    </div>
+    <div>
+      <form method="get" data-action="eyeloupe--search#submit">
+        <input type="hidden" name="frame" value="frame" />
+        <label for="q" class="sr-only">Search</label>
+        <input type="text" id="q" name="q" value="<%= params[:q] %>" placeholder="Search for path" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
+      </form>
+    </div>
+  </div>
+  <div class="mt-8 flow-root">
+    <%= turbo_frame_tag "frame", src: out_requests_path(frame: true), data: {"eyeloupe--refresh-target": "frame", "eyeloupe--search-target": "frame"} do %><% end %>
+  </div>
+</div>

data/app/views/eyeloupe/out_requests/show.html.erb

@@ -0,0 +1,69 @@
+<div>
+  <div class="px-4 sm:px-0">
+    <h3 class="text-xl font-semibold leading-7 text-gray-900">HTTP Client Request Details</h3>
+  </div>
+  <div class="mt-6 border-t border-gray-100">
+    <dl class="divide-y divide-gray-100">
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Time</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= @request.created_at.to_formatted_s(:long) %> (<%= distance_of_time_in_words(@request.created_at, DateTime.now) %>)
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Hostname</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.hostname %></dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Method</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= render "eyeloupe/shared/verb", verb: @request.verb %>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Path</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><%= @request.path %></dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Status</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= render "eyeloupe/shared/status_code", code: @request.status %>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Duration</dt>
+        <dd class="mt-1 text-base leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+          <%= @request.duration %> ms
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Payload</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0 rounded-md bg-black text-white overflow-x-auto">
+          <% if @request.payload.present? %>
+            <pre class="p-2"><%= @request.payload %></pre>
+          <% else %>
+            <p class="text-gray-400 p-2">No payload</p>
+          <% end %>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Request headers</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0  rounded-md bg-black text-white overflow-x-auto">
+          <pre class="p-2"><%= JSON.pretty_generate(JSON.parse(@request.req_headers || "{}")) %></pre>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Response headers</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0  rounded-md bg-black text-white overflow-x-auto">
+          <pre class="p-2"><%= JSON.pretty_generate(JSON.parse(@request.res_headers || "{}")) %></pre>
+        </dd>
+      </div>
+      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+        <dt class="text-base font-medium leading-6 text-gray-900">Response</dt>
+        <dd class="mt-1 text-base leading-6 sm:col-span-2 sm:mt-0 rounded-md bg-black text-white overflow-x-auto">
+          <pre class="p-2"><%= @request.format == "application/json" ? JSON.pretty_generate(JSON.parse(@request.response || "{}")) : @request.response %></pre>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>

data/app/views/eyeloupe/shared/_status_code.html.erb

@@ -0,0 +1,21 @@
+<% if code.to_s[0] == "2" %>
+<span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-base font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
+  <%= code %>
+</span>
+<% elsif code.to_s[0] == "3" %>
+    <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
+  <%= code %>
+</span>
+<% elsif code.to_s[0] == "4" %>
+  <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-base font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">
+  <%= code %>
+</span>
+<% elsif code.to_s[0] == "5" %>
+  <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-base font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
+  <%= code %>
+</span>
+<% else %>
+<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-base font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+  <%= code %>
+</span>
+<% end %>

data/app/views/eyeloupe/shared/_verb.html.erb

@@ -0,0 +1,17 @@
+<% if verb.downcase == "post" || verb.downcase == "patch" || verb.downcase == "put" %>
+    <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
+  <%= verb %>
+</span>
+<% elsif verb.downcase == "get" || verb.downcase == "options" %>
+<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-base font-medium text-gray-600 ring-1 ring-inset ring-gray-500">
+  <%= verb %>
+</span>
+<% elsif verb.downcase == "delete" %>
+  <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-base font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
+  <%= verb %>
+</span>
+<% else %>
+<span class="inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-base font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10">
+  <%= verb %>
+</span>
+<% end %>

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

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Eyeloupe</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= javascript_importmap_tags "eyeloupe/application" %>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+  <%= stylesheet_link_tag "eyeloupe", media: "all" %>
+</head>
+<body class="bg-gray-50">
+
+  <div data-controller="eyeloupe--nav">
+    <div data-controller="eyeloupe--refresh">
+      <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
+      <div class="relative z-50 lg:hidden hidden" role="dialog" aria-modal="true" data-eyeloupe--nav-target="content">
+        <div class="fixed inset-0 bg-gray-900/80"></div>
+
+        <div class="fixed inset-0 flex">
+          <div class="relative mr-16 flex w-full max-w-xs flex-1">
+            <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
+              <button data-action="eyeloupe--nav#close" type="button" class="-m-2.5 p-2.5">
+                <span class="sr-only">Close sidebar</span>
+                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+
+            <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-50 px-6 pb-2">
+              <%= link_to root_url, class:"flex h-16 shrink-0 items-center" do %>
+                <%= image_tag "eyeloupe/logo.png", class: "h-7 w-auto" %>
+                <h1 class="ml-2 text-xl font-semibold text-gray-700">Eyeloupe</h1>
+              <% end  %>
+              <nav class="flex flex-1 flex-col">
+                <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                  <li>
+                    <ul role="list" class="-mx-2 space-y-1">
+                      <li>
+                        <%= link_to in_requests_path, class:"#{request.path.include?('/in_requests') ? 'bg-gray-200 text-red-500' : ''} hover:bg-gray-200 text-gray-500 group flex gap-x-3 rounded-md p-2 text-base leading-6 font-medium" do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <path d="M21 17l-18 0"></path>
+                            <path d="M6 10l-3 -3l3 -3"></path>
+                            <path d="M3 7l18 0"></path>
+                            <path d="M18 20l3 -3l-3 -3"></path>
+                          </svg>
+                          Requests
+                        <% end %>
+                      </li>
+                      <li>
+                        <%= link_to out_requests_path, class:"#{request.path.include?('/out_requests') ? 'bg-gray-200 text-red-500' : ''} hover:bg-gray-200 text-gray-500 group flex gap-x-3 rounded-md p-2 text-base leading-6 font-medium" do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <path d="M21 12a9 9 0 1 0 -9 9"></path>
+                            <path d="M3.6 9h16.8"></path>
+                            <path d="M3.6 15h8.4"></path>
+                            <path d="M11.578 3a17 17 0 0 0 0 18"></path>
+                            <path d="M12.5 3c1.719 2.755 2.5 5.876 2.5 9"></path>
+                            <path d="M18 21v-7m3 3l-3 -3l-3 3"></path>
+                          </svg>
+                          HTTP Client
+                        <% end %>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Static sidebar for desktop -->
+      <div class="mx-auto">
+        <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+          <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-50 px-6">
+            <%= link_to root_path, class:"flex h-16 shrink-0 items-center" do %>
+              <%= image_tag "eyeloupe/logo.png", class: "h-12 w-auto" %>
+              <h1 class="ml-2 text-2xl font-semibold text-gray-700">Eyeloupe</h1>
+            <% end  %>
+            <nav class="flex flex-1 flex-col">
+              <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                <li>
+                  <ul role="list" class="-mx-2 space-y-1">
+                    <li>
+                      <%= link_to in_requests_path, class:"#{request.path.include?('/in_requests') ? 'bg-gray-200 text-red-500' : ''} hover:bg-gray-200 text-gray-500 group flex gap-x-3 rounded-md p-2 text-base leading-6 font-medium" do %>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                          <path d="M21 17l-18 0"></path>
+                          <path d="M6 10l-3 -3l3 -3"></path>
+                          <path d="M3 7l18 0"></path>
+                          <path d="M18 20l3 -3l-3 -3"></path>
+                        </svg>
+                        Requests
+                      <% end %>
+                    </li>
+                    <li>
+                      <%= link_to out_requests_path, class:"#{request.path.include?('/out_requests') ? 'bg-gray-200 text-red-500' : ''} hover:bg-gray-200 text-gray-500 group flex gap-x-3 rounded-md p-2 text-base leading-6 font-medium" do %>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                          <path d="M21 12a9 9 0 1 0 -9 9"></path>
+                          <path d="M3.6 9h16.8"></path>
+                          <path d="M3.6 15h8.4"></path>
+                          <path d="M11.578 3a17 17 0 0 0 0 18"></path>
+                          <path d="M12.5 3c1.719 2.755 2.5 5.876 2.5 9"></path>
+                          <path d="M18 21v-7m3 3l-3 -3l-3 3"></path>
+                        </svg>
+                        HTTP Client
+                      <% end %>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+
+      <div class="hidden lg:flex py-4 justify-end items-end px-4 gap-x-2">
+        <%= link_to configs_path(value: "#{!@eyeloupe_capture}"), title: "Pause data collection", data: { "turbo_method": "put" }, class: "#{@eyeloupe_capture ? "text-gray-500 hover:bg-gray-300 bg-gray-200" : "bg-red-500 text-white hover:bg-red-600"} rounded-md p-1 transition duration-500 inline-block hidden" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
+            <path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
+          </svg>
+        <% end %>
+        <button title="Auto refresh data" data-action="eyeloupe--refresh#toggle" data-eyeloupe--refresh-target="btn" class="rounded-md text-gray-500 hover:bg-gray-300 bg-gray-200 p-1 transition duration-500 inline-block">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
+            <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
+          </svg>
+        </button>
+        <%= link_to data_path, title: "Delete all Eyeloupe data", data: { "turbo_method": "delete", "turbo_confirm": "Are you sure to delete all Eyeloupe data?" }, class: "rounded-md text-gray-500 hover:bg-gray-300 bg-gray-200 p-1 transition duration-500 inline-block" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M4 7l16 0"></path>
+            <path d="M10 11l0 6"></path>
+            <path d="M14 11l0 6"></path>
+            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+          </svg>
+        <% end %>
+      </div>
+
+      <div class="sticky top-0 z-40 flex justify-between px-4 gap-x-6 bg-white  py-4 shadow-sm sm:px-6 lg:hidden">
+        <div class="flex items-center gap-x-6">
+          <button data-action="eyeloupe--nav#open" type="button" class="-m-2.5 p-2.5 text-red-500 lg:hidden">
+            <span class="sr-only">Open sidebar</span>
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+          </button>
+          <%= link_to root_url, class: "flex gap-x-1" do %>
+            <%= image_tag "eyeloupe/logo.png", class: "h-7 w-auto" %>
+            <h1 class="ml-2 text-xl font-semibold text-gray-700">Eyeloupe</h1>
+          <% end  %>
+        </div>
+        <div class="py-4 flex justify-end items-end px-4 gap-x-2">
+          <%= link_to configs_path(value: "#{!@eyeloupe_capture}"), title: "Pause data collection", data: { "turbo_method": "put" }, class: "#{@eyeloupe_capture ? "text-gray-500 hover:bg-gray-300 bg-gray-200" : "bg-red-500 text-white hover:bg-red-600"} rounded-md p-1 transition duration-500 inline-block hidden" do %>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
+              <path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
+            </svg>
+          <% end %>
+          <button title="Auto refresh data" data-action="eyeloupe--refresh#toggle" data-eyeloupe--refresh-target="btn" class="rounded-md text-gray-500 hover:bg-gray-300 bg-gray-200 p-1 transition duration-500 inline-block">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
+              <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
+            </svg>
+          </button>
+          <%= link_to data_path, title: "Delete all Eyeloupe data", data: { "turbo_method": "delete", "turbo_confirm": "Are you sure to delete all Eyeloupe data?" }, class: "rounded-md text-gray-500 hover:bg-gray-300 bg-gray-200 p-1 transition duration-500 inline-block" do %>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M4 7l16 0"></path>
+              <path d="M10 11l0 6"></path>
+              <path d="M14 11l0 6"></path>
+              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </svg>
+          <% end %>
+        </div>
+      </div>
+
+      <main class="py-10 lg:pl-72 px-5 mx-auto">
+
+        <div class="px-4 sm:px-6 lg:px-8 bg-white rounded-md shadow-md py-5">
+          <%= yield %>
+        </div>
+      </main>
+    </div>
+  </div>
+
+</body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,4 @@
+pin_all_from File.expand_path("../app/assets/javascripts", __dir__)
+pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.0.1/dist/stimulus.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

data/config/routes.rb

@@ -0,0 +1,12 @@
+Eyeloupe::Engine.routes.draw do
+
+  root to: "application#root"
+
+  resources :in_requests, only: [:index, :show]
+  resources :out_requests, only: [:index, :show]
+
+  resource :data, only: [:destroy]
+
+  resource :configs, only: [:update]
+
+end

data/config/tailwind.config.js

@@ -0,0 +1,22 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/assets/javascripts/**/*.js',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Fira Sans', 'sans-serif', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/typography'),
+  ]
+}

data/db/migrate/20230518175305_create_eyeloupe_in_requests.rb

@@ -0,0 +1,22 @@
+class CreateEyeloupeInRequests < ActiveRecord::Migration[7.0]
+  def change
+    create_table :eyeloupe_in_requests do |t|
+      t.string :verb
+      t.string :hostname
+      t.string :controller
+      t.string :path
+      t.string :format
+      t.integer :status
+      t.integer :duration
+      t.integer :db_duration
+      t.integer :view_duration
+      t.string :ip
+      t.text :payload
+      t.text :headers
+      t.text :session
+      t.text :response
+
+      t.timestamps
+    end
+  end
+end

data/db/migrate/20230525125352_create_eyeloupe_out_requests.rb

@@ -0,0 +1,18 @@
+class CreateEyeloupeOutRequests < ActiveRecord::Migration[7.0]
+  def change
+    create_table :eyeloupe_out_requests do |t|
+      t.string :verb
+      t.string :hostname
+      t.string :path
+      t.string :format
+      t.integer :status
+      t.integer :duration
+      t.text :payload
+      t.text :req_headers
+      t.text :res_headers
+      t.text :response
+
+      t.timestamps
+    end
+  end
+end

data/lib/eyeloupe/configuration.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+require 'singleton'
+
+module Eyeloupe
+  class Configuration
+    include Singleton
+
+    # @return [Array<String>]
+    attr_accessor :excluded_paths
+
+    # @return [Boolean]
+    attr_accessor :capture
+
+    def initialize
+      @excluded_paths = %w[]
+      @capture = true
+    end
+  end
+
+end

data/lib/eyeloupe/engine.rb

@@ -0,0 +1,21 @@
+require 'importmap-rails'
+
+module Eyeloupe
+  class Engine < ::Rails::Engine
+    isolate_namespace Eyeloupe
+
+    initializer "eyeloupe.assets" do |app|
+      app.config.assets.precompile += %w[ eyeloupe_manifest ]
+    end
+
+    initializer 'eyeloupe.add_middleware' do |app|
+      app.config.middleware.insert(0, Eyeloupe::RequestMiddleware)
+    end
+
+    initializer "eyeloupe.importmap", :before => "importmap" do |app|
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      # https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test
+      app.config.importmap.cache_sweepers << root.join("app/assets/javascripts")
+    end
+  end
+end

data/lib/eyeloupe/http.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+require 'net/http'
+module Net
+  class HTTP
+    alias original_request request
+
+    def request(req, body = nil, &block)
+      if Eyeloupe.configuration.capture
+        Eyeloupe::Processors::OutRequest.instance.init(req, body)
+        res = original_request(req, body, &block)
+        Eyeloupe::Processors::OutRequest.instance.process(res)
+      else
+        res = original_request(req, body, &block)
+      end
+      res
+    end
+
+  end
+end