source_monitor 0.1.1

data/app/views/source_monitor/items/_details.html.erb

@@ -0,0 +1,234 @@
+<% item = local_assigns.fetch(:item) %>
+<% source = item.source %>
+<% manual_scrape_disabled = !source&.scraping_enabled? %>
+<% scrape_badge = item_scrape_status_badge(item: item, source: source) %>
+<% inflight_scrape = %w[pending processing].include?(scrape_badge[:status]) %>
+<% recent_scrape_logs = item.scrape_logs.order(started_at: :desc).limit(5) %>
+<% latest_scrape_log = recent_scrape_logs.first %>
+
+<div class="space-y-8">
+  <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
+    <div>
+      <h1 class="text-3xl font-semibold text-slate-900"><%= item.title.presence || "(untitled)" %></h1>
+      <div class="mt-2 flex flex-wrap items-center gap-2 text-xs">
+        <span
+          data-testid="scrape-status-badge"
+          data-status="<%= scrape_badge[:status] %>"
+          class="inline-flex items-center gap-1 rounded-full px-3 py-1 font-semibold <%= scrape_badge[:classes] %>"
+        >
+          <%= loading_spinner_svg if scrape_badge[:show_spinner] %>
+          <%= scrape_badge[:label] %>
+        </span>
+        <% if item.scraped_at.present? %>
+          <span class="rounded-full bg-slate-100 px-3 py-1 font-semibold text-slate-600">
+            Last scraped <%= time_ago_in_words(item.scraped_at) %> ago
+          </span>
+        <% else %>
+          <span class="rounded-full bg-slate-100 px-3 py-1 font-semibold text-slate-600">
+            No scrape recorded
+          </span>
+        <% end %>
+      </div>
+      <p class="mt-2 text-sm text-slate-500">
+        <% if source %>
+          From <%= link_to source.name, source_monitor.source_path(source), class: "text-blue-600 hover:text-blue-500" %>
+        <% else %>
+          <span class="text-slate-400">No source</span>
+        <% end %>
+        &middot;
+        <%= item.published_at ? item.published_at.strftime("%b %d, %Y %H:%M %Z") : "Unpublished" %>
+      </p>
+    </div>
+  </div>
+
+  <div class="grid gap-6 xl:grid-cols-3 xl:items-start">
+    <div class="space-y-6 xl:col-span-1">
+      <div class="rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div class="border-b border-slate-200 px-5 py-4">
+          <h2 class="text-lg font-medium">Item Details</h2>
+        </div>
+        <dl class="divide-y divide-slate-100">
+          <% categories_list = Array(item.categories).filter_map { |value| value.to_s.strip.presence } %>
+          <% tags_list = Array(item.tags).filter_map { |value| value.to_s.strip.presence } %>
+          <% details = {
+               "GUID" => item.guid,
+               "Content Fingerprint" => item.content_fingerprint || "—",
+               "URL" => item.url,
+               "Canonical URL" => item.canonical_url || "—",
+               "Author" => item.author || "—",
+               "Published At" => (item.published_at&.strftime("%b %d, %Y %H:%M %Z") || "—"),
+               "Updated At (Source)" => (item.updated_at_source&.strftime("%b %d, %Y %H:%M %Z") || "—"),
+               "Language" => item.language || "—",
+               "Categories" => categories_list.present? ? categories_list.join(", ") : "—",
+               "Tags" => tags_list.present? ? tags_list.join(", ") : "—"
+             } %>
+          <% details.each do |label, value| %>
+            <div class="flex items-center justify-between px-5 py-3">
+              <dt class="text-sm font-medium text-slate-600"><%= label %></dt>
+              <dd class="max-w-[60%] break-words text-sm text-slate-900"><%= value %></dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+
+      <div class="rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div class="border-b border-slate-200 px-5 py-4">
+          <h2 class="text-lg font-medium">Scraping</h2>
+          <p class="mt-1 text-xs text-slate-500">Manual results and recent adapter history.</p>
+        </div>
+        <div class="space-y-4 px-5 py-5 text-sm text-slate-700">
+          <div class="grid gap-3 text-xs text-slate-500">
+            <div class="flex justify-between">
+              <span class="font-medium text-slate-600">Adapter</span>
+              <span><%= source&.scraper_adapter || "—" %></span>
+            </div>
+            <div class="flex justify-between">
+              <span class="font-medium text-slate-600">HTTP Status</span>
+              <span><%= latest_scrape_log&.http_status || "—" %></span>
+            </div>
+            <div class="flex justify-between">
+              <span class="font-medium text-slate-600">Content Length</span>
+              <span><%= latest_scrape_log&.content_length || "—" %></span>
+            </div>
+          </div>
+
+          <% if latest_scrape_log&.error_message.present? %>
+            <div class="rounded border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
+              <p class="font-semibold">Last Error</p>
+              <p class="mt-1"><%= latest_scrape_log.error_message %></p>
+            </div>
+          <% end %>
+
+          <% if recent_scrape_logs.any? %>
+            <div>
+              <p class="text-xs font-semibold tracking-wide text-slate-500">Recent Attempts</p>
+              <ul class="mt-2 space-y-2 text-xs text-slate-500">
+                <% recent_scrape_logs.first(3).each do |log| %>
+                  <li class="flex items-center justify-between">
+                    <span><%= log.started_at&.strftime("%b %d, %H:%M") || "Unknown" %></span>
+                    <span class="ml-3 inline-flex items-center rounded-full px-2 py-0.5 font-semibold <%= log.success? ? "bg-green-100 text-green-700" : "bg-rose-100 text-rose-700" %>">
+                      <%= log.success? ? "Success" : "Failure" %>
+                    </span>
+                  </li>
+                <% end %>
+              </ul>
+              <%= link_to "View all scrape logs", source_monitor.logs_path(log_type: "scrape", item_id: item.id), class: "mt-3 inline-block text-xs font-medium text-blue-600 hover:text-blue-500" %>
+            </div>
+          <% else %>
+            <p class="text-xs text-slate-500">No scrape history yet.</p>
+          <% end %>
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div class="border-b border-slate-200 px-5 py-4">
+          <h2 class="text-lg font-medium">Counts &amp; Metrics</h2>
+        </div>
+        <div class="space-y-2 px-5 py-4 text-sm text-slate-700">
+          <p><span class="font-medium text-slate-600">Comments:</span> <%= item.comments_count || 0 %></p>
+          <p><span class="font-medium text-slate-600">Feed Items in Source:</span> <%= source&.items_count || "—" %></p>
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div class="border-b border-slate-200 px-5 py-4">
+          <h2 class="text-lg font-medium">Metadata</h2>
+        </div>
+        <div class="px-5 py-4 text-sm text-slate-700">
+          <% if item.metadata.present? %>
+            <pre class="whitespace-pre-wrap break-words text-xs text-slate-600"><%= JSON.pretty_generate(item.metadata) %></pre>
+          <% else %>
+            <p class="text-slate-500">No metadata recorded.</p>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <div class="space-y-6 xl:col-span-2">
+      <div class="rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div class="flex flex-col gap-4 border-b border-slate-200 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 class="text-lg font-medium">Content Comparison</h2>
+            <p class="mt-1 text-xs text-slate-500">Review feed-provided content alongside scraped output.</p>
+          </div>
+          <div class="flex flex-shrink-0 flex-wrap gap-3">
+            <% if item.url.present? %>
+              <%= link_to "View Original", item.url, target: "_blank", rel: "noopener", class: "inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white shadow hover:bg-blue-500" %>
+            <% end %>
+            <%= button_to "Manual Scrape",
+                  source_monitor.scrape_item_path(item),
+                  method: :post,
+                  class: [
+                    "inline-flex items-center rounded-md px-3 py-2 text-sm font-medium shadow",
+                    manual_scrape_disabled || inflight_scrape ? "cursor-not-allowed bg-slate-200 text-slate-500" : "bg-slate-800 text-white hover:bg-slate-700"
+                  ].join(" "),
+                  disabled: manual_scrape_disabled || inflight_scrape,
+                  data: {
+                    "async-submit-target": "button",
+                    "async-submit-loading-text-value": "Queuing..."
+                  },
+                  form: {
+                    class: "inline",
+                    data: {
+                      controller: "async-submit",
+                      action: "turbo:submit-start->async-submit#start turbo:submit-end->async-submit#finish"
+                    }
+                  } %>
+          </div>
+        </div>
+        <div class="grid gap-6 px-5 py-5 text-sm text-slate-700 lg:grid-cols-2">
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-sm font-semibold tracking-wide text-slate-500">Feed Summary</h3>
+              <% if item.summary.present? %>
+                <div class="mt-2 rounded border border-slate-200 bg-slate-50 p-3 text-slate-700">
+                  <%= simple_format(item.summary) %>
+                </div>
+              <% else %>
+                <p class="mt-2 text-slate-500">No summary available.</p>
+              <% end %>
+            </div>
+
+            <div>
+              <h3 class="text-sm font-semibold tracking-wide text-slate-500">Feed Content</h3>
+              <% if item.content.present? %>
+                <div class="mt-2 rounded border border-slate-200 bg-white p-3 shadow-inner">
+                  <%= simple_format(item.content) %>
+                </div>
+              <% else %>
+                <p class="mt-2 text-slate-500">No content captured from feed.</p>
+              <% end %>
+            </div>
+          </div>
+
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-sm font-semibold tracking-wide text-slate-500">Scraped Content</h3>
+              <% if item.scraped_content.present? %>
+                <div class="mt-2 rounded border border-emerald-200 bg-emerald-50 p-3 text-slate-700">
+                  <%= simple_format(item.scraped_content) %>
+                </div>
+              <% else %>
+                <p class="mt-2 text-slate-500">Scraper has not produced any content yet.</p>
+              <% end %>
+            </div>
+
+            <div>
+              <h3 class="text-sm font-semibold tracking-wide text-slate-500">Scraped HTML</h3>
+              <% if item.scraped_html.present? %>
+                <details class="mt-2 rounded border border-slate-200 bg-white text-xs shadow-sm">
+                  <summary class="cursor-pointer px-3 py-2 font-medium text-slate-700">View raw HTML</summary>
+                  <div class="px-3 pb-3 pt-2">
+                    <pre class="max-h-96 overflow-auto whitespace-pre-wrap break-words text-slate-600"><%= ERB::Util.h(item.scraped_html) %></pre>
+                  </div>
+                </details>
+              <% else %>
+                <p class="mt-2 text-slate-500">No scraped HTML available.</p>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/source_monitor/items/_details_wrapper.html.erb

@@ -0,0 +1,3 @@
+<div id="<%= dom_id(item, :details) %>">
+  <%= render "source_monitor/items/details", item: item %>
+</div>

data/app/views/source_monitor/items/index.html.erb

@@ -0,0 +1,147 @@
+<div class="space-y-6">
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <h1 class="text-3xl font-semibold text-slate-900">Items</h1>
+      <p class="mt-1 text-sm text-slate-500">Browse recently ingested entries across all sources.</p>
+    </div>
+    <%= search_form_for @q, url: source_monitor.items_path, method: :get, html: { class: "w-full max-w-sm sm:w-auto", data: { turbo_frame: "source_monitor_items_table" } } do |form| %>
+      <%= form.label @search_field, "Search items", class: "sr-only" %>
+      <div class="flex rounded-md shadow-sm">
+        <%= form.search_field @search_field, placeholder: "Search title, summary, or source…", class: "w-full rounded-l-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" %>
+        <%= form.submit "Search", class: "rounded-r-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500" %>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
+    <%= turbo_frame_tag "source_monitor_items_table" do %>
+      <% if @search_term.present? %>
+        <div class="rounded-t-lg border-b border-blue-100 bg-blue-50 px-4 py-2 text-xs text-blue-700">
+          Showing results for "<%= @search_term %>".
+          <%= link_to "Clear search", source_monitor.items_path, class: "ml-2 font-medium text-blue-600 hover:text-blue-500", data: { turbo_frame: "source_monitor_items_table" } %>
+        </div>
+      <% end %>
+      <table class="min-w-full divide-y divide-slate-200 text-left text-sm">
+        <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+          <tr>
+            <th scope="col"
+                class="px-6 py-3"
+                data-sort-column="title"
+                aria-sort="<%= table_sort_aria(@q, :title) %>">
+              <span class="inline-flex items-center gap-1">
+                <%= table_sort_link(
+                      @q,
+                      :title,
+                      "Title",
+                      frame: "source_monitor_items_table",
+                      default_order: :asc,
+                      secondary: ["published_at desc", "created_at desc"],
+                      html_options: {
+                        class: "inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wide text-slate-600 hover:text-slate-900 focus:outline-none"
+                      }
+                    ) %>
+                <span class="text-[11px] text-slate-400" aria-hidden="true"><%= table_sort_arrow(@q, :title) %></span>
+              </span>
+            </th>
+            <th scope="col" class="px-6 py-3">Source</th>
+            <th scope="col"
+                class="px-6 py-3"
+                data-sort-column="published_at"
+                aria-sort="<%= table_sort_aria(@q, :published_at) %>">
+              <span class="inline-flex items-center gap-1">
+                <%= table_sort_link(
+                      @q,
+                      :published_at,
+                      "Published",
+                      frame: "source_monitor_items_table",
+                      default_order: :desc,
+                      secondary: ["created_at desc"],
+                      html_options: {
+                        class: "inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wide text-slate-600 hover:text-slate-900 focus:outline-none"
+                      }
+                    ) %>
+                <span class="text-[11px] text-slate-400" aria-hidden="true"><%= table_sort_arrow(@q, :published_at) %></span>
+              </span>
+            </th>
+            <th scope="col" class="px-6 py-3">Scrape Status</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100 text-slate-700">
+          <% @items.each do |item| %>
+            <tr class="hover:bg-slate-50">
+              <td class="px-6 py-4">
+                <div class="font-medium text-slate-900">
+                  <%= link_to item.title.presence || "(untitled)",
+                        source_monitor.item_path(item),
+                        class: "hover:text-blue-600",
+                        data: { turbo_frame: "_top" } %>
+                </div>
+                <% if item.summary.present? %>
+                  <div class="mt-1 text-xs text-slate-500"><%= item.summary %></div>
+                <% end %>
+              </td>
+              <td class="px-6 py-4 text-sm">
+                <% if item.source %>
+                  <%= link_to item.source.name,
+                        source_monitor.source_path(item.source),
+                        class: "text-blue-600 hover:text-blue-500",
+                        data: { turbo_frame: "_top" } %>
+                <% else %>
+                  <span class="text-slate-400">—</span>
+                <% end %>
+              </td>
+              <td class="px-6 py-4 text-xs text-slate-500">
+                <%= item.published_at ? item.published_at.strftime("%b %d, %Y %H:%M") : "Unpublished" %>
+              </td>
+              <td class="px-6 py-4 text-xs">
+                <% status_label, status_classes =
+                     case item.scrape_status
+                     when "success"
+                       ["Scraped", "bg-green-100 text-green-700"]
+                     when "failed"
+                       ["Failed", "bg-rose-100 text-rose-700"]
+                     when "pending"
+                       ["Pending", "bg-amber-100 text-amber-700"]
+                     else
+                       ["Not Scraped", "bg-slate-100 text-slate-600"]
+                     end %>
+                <span class="inline-flex items-center rounded-full px-3 py-1 font-semibold <%= status_classes %>"><%= status_label %></span>
+              </td>
+            </tr>
+          <% end %>
+
+          <% if @items.blank? %>
+            <tr>
+              <td colspan="4" class="px-6 py-6 text-center text-sm text-slate-500">
+                No items found.
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+      <div class="flex flex-col items-center gap-3 border-t border-slate-200 px-6 py-4 sm:flex-row sm:justify-between">
+        <div class="text-xs text-slate-500">
+          Page <%= @page %>
+        </div>
+        <div class="flex gap-2">
+          <% prev_params = { page: @page - 1 } %>
+          <% prev_params[:q] = @search_params if @search_params.present? %>
+          <% next_params = { page: @page + 1 } %>
+          <% next_params[:q] = @search_params if @search_params.present? %>
+
+          <% if @has_previous_page %>
+            <%= link_to "Previous", source_monitor.items_path(prev_params), class: "inline-flex items-center rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50", data: { turbo_frame: "source_monitor_items_table" } %>
+          <% else %>
+            <span class="inline-flex items-center rounded-md border border-slate-200 px-3 py-2 text-sm font-medium text-slate-300">Previous</span>
+          <% end %>
+
+          <% if @has_next_page %>
+            <%= link_to "Next", source_monitor.items_path(next_params), class: "inline-flex items-center rounded-md border border-slate-300 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50", data: { turbo_frame: "source_monitor_items_table" } %>
+          <% else %>
+            <span class="inline-flex items-center rounded-md border border-slate-200 px-3 py-2 text-sm font-medium text-slate-300">Next</span>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/source_monitor/items/show.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream_from @item, :details %>
+
+<%= render "source_monitor/items/details_wrapper", item: @item %>

data/app/views/source_monitor/logs/index.html.erb

@@ -0,0 +1,208 @@
+<div class="space-y-6">
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <h1 class="text-3xl font-semibold text-slate-900">Logs</h1>
+      <p class="mt-1 text-sm text-slate-500">Review recent fetch, scrape, and health check activity in a single view.</p>
+    </div>
+  </div>
+
+  <% base_params = @filter_params.except(:page) %>
+
+  <div class="flex flex-wrap items-center gap-3">
+    <div class="flex overflow-hidden rounded-md border border-slate-200">
+      <% status_options = [
+        ["All", nil],
+        ["Successes", "success"],
+        ["Failures", "failed"]
+      ] %>
+      <% status_options.each do |label, value| %>
+        <% params_for_status = base_params.merge(status: value, page: nil).compact %>
+        <% active = (@filter_set.status == value) || (@filter_set.status.nil? && value.nil?) %>
+        <%= link_to label,
+                    source_monitor.logs_path(params_for_status),
+                    class: [
+                      "px-4 py-2 text-sm font-medium border-slate-200",
+                      active ? "bg-slate-800 text-white" : "bg-white text-slate-600 hover:bg-slate-50",
+                      value.present? ? "border-l" : ""
+                    ].join(" ") %>
+      <% end %>
+    </div>
+
+    <div class="flex overflow-hidden rounded-md border border-slate-200">
+      <% type_options = [
+        ["All Logs", nil],
+        ["Fetch Logs", "fetch"],
+        ["Scrape Logs", "scrape"],
+        ["Health Checks", "health_check"]
+      ] %>
+      <% type_options.each do |label, value| %>
+        <% params_for_type = base_params.merge(log_type: value, page: nil).compact %>
+        <% active = (@filter_set.log_type == value) || (@filter_set.log_type.nil? && value.nil?) %>
+        <%= link_to label,
+                    source_monitor.logs_path(params_for_type),
+                    class: [
+                      "px-4 py-2 text-sm font-medium border-slate-200",
+                      active ? "bg-slate-800 text-white" : "bg-white text-slate-600 hover:bg-slate-50",
+                      value.present? ? "border-l" : ""
+                    ].join(" ") %>
+      <% end %>
+    </div>
+  </div>
+
+  <%= form_with url: source_monitor.logs_path, method: :get, local: true, html: { class: "rounded-lg border border-slate-200 bg-white p-4 shadow-sm" } do |form| %>
+    <%= form.hidden_field :status, value: @filter_set.status %>
+    <%= form.hidden_field :log_type, value: @filter_set.log_type %>
+
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <div class="flex flex-col">
+        <%= form.label :search, "Search logs", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
+        <%= form.text_field :search,
+                            value: @filter_set.search,
+                            placeholder: "Error message, source, adapter, HTTP status…",
+                            class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
+      </div>
+
+      <div class="flex flex-col">
+        <%= form.label :timeframe, "Timeframe", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
+        <%= form.select :timeframe,
+                        options_for_select([["All time", nil], ["Last 24 hours", "24h"], ["Last 7 days", "7d"], ["Last 30 days", "30d"]], @filter_set.timeframe),
+                        {}, class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
+      </div>
+
+      <div class="flex flex-col">
+        <%= form.label :started_after, "Started after", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
+        <%= form.datetime_field :started_after,
+                                value: @filter_set.started_after&.strftime("%Y-%m-%dT%H:%M"),
+                                class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
+      </div>
+
+      <div class="flex flex-col">
+        <%= form.label :started_before, "Started before", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
+        <%= form.datetime_field :started_before,
+                                value: @filter_set.started_before&.strftime("%Y-%m-%dT%H:%M"),
+                                class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
+      </div>
+
+      <div class="flex flex-col">
+        <%= form.label :source_id, "Source ID", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
+        <%= form.number_field :source_id,
+                              value: @filter_set.source_id,
+                              class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
+      </div>
+
+      <div class="flex flex-col">
+        <%= form.label :item_id, "Item ID", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
+        <%= form.number_field :item_id,
+                              value: @filter_set.item_id,
+                              class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
+      </div>
+    </div>
+
+    <div class="mt-4 flex flex-wrap items-center gap-3">
+      <%= form.submit "Search", class: "inline-flex items-center rounded-md bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" %>
+      <%= link_to "Clear", source_monitor.logs_path, class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
+    </div>
+  <% end %>
+
+  <div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm" data-testid="logs-table">
+    <table class="min-w-full divide-y divide-slate-200 text-left text-sm">
+      <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+        <tr>
+          <th scope="col" class="px-6 py-3">Started</th>
+          <th scope="col" class="px-6 py-3">Type</th>
+          <th scope="col" class="px-6 py-3">Subject</th>
+          <th scope="col" class="px-6 py-3">Source</th>
+          <th scope="col" class="px-6 py-3">HTTP / Adapter</th>
+          <th scope="col" class="px-6 py-3">Result</th>
+          <th scope="col" class="px-6 py-3">Metrics</th>
+          <th scope="col" class="px-6 py-3 text-right"></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-slate-100 text-slate-700">
+        <% @rows.each do |row| %>
+          <tr class="hover:bg-slate-50" data-log-row="<%= row.dom_id %>">
+            <td class="px-6 py-4 text-xs text-slate-500">
+              <%= row.started_at&.strftime("%b %d, %Y %H:%M:%S") || "Unknown" %>
+            </td>
+            <td class="px-6 py-4 text-sm">
+              <% type_classes = row.fetch? ? "bg-slate-200 text-slate-800" : "bg-blue-100 text-blue-700" %>
+              <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold <%= type_classes %>"><%= row.type_label %></span>
+            </td>
+            <td class="px-6 py-4 text-sm">
+              <% if row.primary_path %>
+                <%= link_to row.primary_label, row.primary_path, class: "text-blue-600 hover:text-blue-500" %>
+              <% else %>
+                <%= row.primary_label %>
+              <% end %>
+            </td>
+            <td class="px-6 py-4 text-sm">
+              <% if row.source_path %>
+                <%= link_to row.source_label, row.source_path, class: "text-blue-600 hover:text-blue-500" %>
+              <% else %>
+                <%= row.source_label || "—" %>
+              <% end %>
+            </td>
+            <td class="px-6 py-4 text-sm">
+              <span class="font-medium"><%= row.http_summary %></span>
+            </td>
+            <td class="px-6 py-4 text-sm">
+              <% status_classes = row.success? ? "bg-green-100 text-green-700" : "bg-rose-100 text-rose-700" %>
+              <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold <%= status_classes %>"><%= row.status_label %></span>
+              <% if row.error_message.present? %>
+                <p class="mt-2 text-xs text-slate-500"><%= row.error_message %></p>
+              <% end %>
+            </td>
+            <td class="px-6 py-4 text-xs text-slate-500">
+              <%= row.metrics_summary %>
+            </td>
+            <td class="px-6 py-4 text-right text-sm">
+              <% if row.detail_path %>
+                <%= link_to "View Details", row.detail_path, class: "text-blue-600 hover:text-blue-500" %>
+              <% else %>
+                —
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+
+        <% if @rows.blank? %>
+          <tr>
+            <td colspan="8" class="px-6 py-6 text-center text-sm text-slate-500">
+              No logs recorded yet.
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div class="text-xs text-slate-500" data-page-indicator="<%= @query_result.page %>">
+      Page <%= @query_result.page %>
+    </div>
+    <div class="flex gap-2">
+      <% prev_page = @query_result.has_previous_page ? @query_result.page - 1 : @query_result.page %>
+      <% next_page = @query_result.has_next_page ? @query_result.page + 1 : @query_result.page %>
+      <% prev_params = @filter_params.merge(page: prev_page).compact %>
+      <% next_params = @filter_params.merge(page: next_page).compact %>
+      <%= link_to "Previous",
+                  source_monitor.logs_path(prev_params),
+                  class: [
+                    "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium",
+                    @query_result.has_previous_page ? "border-slate-300 text-slate-700 hover:bg-slate-50" : "border-slate-200 text-slate-300 cursor-not-allowed"
+                  ].join(" "),
+                  aria: { disabled: !@query_result.has_previous_page } %>
+      <%= link_to "Next",
+                  source_monitor.logs_path(next_params),
+                  class: [
+                    "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium",
+                    @query_result.has_next_page ? "border-slate-300 text-slate-700 hover:bg-slate-50" : "border-slate-200 text-slate-300 cursor-not-allowed"
+                  ].join(" "),
+                  aria: { disabled: !@query_result.has_next_page } %>
+    </div>
+  </div>
+
+  <p class="text-xs text-slate-500">
+    Showing up to <%= @query_result.per_page %> logs per page.
+  </p>
+</div>