source_monitor 0.1.1

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

@@ -0,0 +1,73 @@
+<div class="space-y-6">
+  <div class="flex flex-wrap items-start justify-between gap-4">
+    <div>
+      <h1 class="text-3xl font-semibold text-slate-900">Scrape Log</h1>
+      <p class="mt-1 text-sm text-slate-500">
+        Started <%= @log.started_at&.strftime("%b %d, %Y %H:%M:%S %Z") || "Unknown" %> ·
+        <%= @log.success? ? "Success" : "Failure" %>
+      </p>
+    </div>
+    <div class="flex gap-3">
+      <%= link_to "Back to Logs", source_monitor.logs_path(log_type: "scrape"), 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" %>
+      <%= link_to "View Item", source_monitor.item_path(@log.item), class: "inline-flex items-center rounded-md bg-slate-800 px-3 py-2 text-sm font-medium text-white hover:bg-slate-700" %>
+    </div>
+  </div>
+
+  <div class="grid gap-6 lg:grid-cols-2">
+    <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">Summary</h2>
+      </div>
+      <dl class="divide-y divide-slate-100">
+        <% summary = {
+             "Item" => link_to(@log.item.title.presence || "(untitled)", source_monitor.item_path(@log.item)),
+             "Source" => link_to(@log.source.name, source_monitor.source_path(@log.source)),
+             "Scraper Adapter" => @log.scraper_adapter || "—",
+             "HTTP Status" => @log.http_status || "—",
+             "Success" => @log.success? ? "Yes" : "No",
+             "Duration (ms)" => @log.duration_ms || "—",
+             "Content Length" => @log.content_length || "—",
+             "Started At" => @log.started_at&.strftime("%b %d, %Y %H:%M:%S %Z") || "—",
+             "Completed At" => @log.completed_at&.strftime("%b %d, %Y %H:%M:%S %Z") || "—"
+           } %>
+        <% summary.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="text-sm text-slate-900 text-right"><%= value %></dd>
+          </div>
+        <% end %>
+      </dl>
+    </div>
+
+    <div class="space-y-6">
+      <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">Error Details</h2>
+        </div>
+        <div class="px-5 py-4 text-sm text-slate-700">
+          <% if @log.success? %>
+            <p class="text-slate-500">No errors recorded.</p>
+          <% else %>
+            <% if @log.error_class.present? %>
+              <p class="font-medium text-rose-600"><%= @log.error_class %></p>
+            <% end %>
+            <p class="mt-2 whitespace-pre-wrap break-words text-xs text-slate-600"><%= @log.error_message.presence || "No error message captured." %></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">Metadata</h2>
+        </div>
+        <div class="px-5 py-4 text-sm text-slate-700">
+          <% if @log.metadata.present? %>
+            <pre class="whitespace-pre-wrap break-words text-xs text-slate-600"><%= JSON.pretty_generate(@log.metadata) %></pre>
+          <% else %>
+            <p class="text-slate-500">No metadata recorded.</p>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/source_monitor/shared/_toast.html.erb

@@ -0,0 +1,34 @@
+<% level_key = local_assigns.fetch(:level, :info).to_s %>
+<% delay_ms = local_assigns.fetch(:delay_ms, 5000) %>
+<% title = local_assigns[:title] %>
+<% message = local_assigns[:message] %>
+<% palette = {
+     "success" => "border-emerald-200 bg-emerald-50 text-emerald-800",
+     "error" => "border-rose-200 bg-rose-50 text-rose-800",
+     "info" => "border-blue-200 bg-blue-50 text-blue-800",
+     "warning" => "border-amber-200 bg-amber-50 text-amber-800"
+   } %>
+<% classes = palette.fetch(level_key, palette["info"]) %>
+
+<div
+  data-controller="notification"
+  data-notification-delay-value="<%= delay_ms %>"
+  class="pointer-events-auto w-full max-w-md rounded-lg border px-4 py-3 shadow-lg transition duration-300 <%= classes %>"
+>
+  <div class="flex items-start justify-between gap-3">
+    <div class="flex-1">
+      <% if title.present? %>
+        <p class="text-sm font-semibold"><%= title %></p>
+      <% end %>
+      <p class="mt-1 text-sm leading-snug"><%= message %></p>
+    </div>
+    <button
+      type="button"
+      class="text-xs font-semibold uppercase tracking-wide opacity-60 transition hover:opacity-100"
+      data-action="notification#hide"
+      aria-label="Dismiss notification"
+    >
+      Close
+    </button>
+  </div>
+</div>

data/app/views/source_monitor/sources/_bulk_scrape_form.html.erb

@@ -0,0 +1,64 @@
+<% counts = (local_assigns[:counts] || {}).with_indifferent_access %>
+<% selected = (local_assigns[:selected] || :current).to_sym %>
+<% scraping_enabled = source.scraping_enabled? %>
+<% options = [
+     { value: :current, label: "Current view", count: counts[:current] || 0 },
+     { value: :unscraped, label: "Unscraped items", count: counts[:unscraped] || 0 },
+     { value: :all, label: "All items", count: counts[:all] || 0 }
+   ] %>
+
+<div data-testid="bulk-scrape-form">
+  <% if scraping_enabled %>
+    <%= form_with url: source_monitor.source_bulk_scrape_path(source),
+          method: :post,
+          scope: :bulk_scrape,
+          data: {
+            controller: "async-submit",
+            action: "turbo:submit-start->async-submit#start turbo:submit-end->async-submit#finish"
+          },
+          class: "space-y-6" do |form| %>
+      <fieldset class="space-y-4" role="radiogroup">
+        <legend class="text-xs font-semibold uppercase tracking-wider text-slate-500">Scrape scope</legend>
+        <div class="space-y-2">
+          <% options.each do |option| %>
+            <% value = option[:value] %>
+            <% is_selected = (selected == value) %>
+            <% count_label = option[:count].to_i %>
+            <label class="relative block" data-testid="bulk-scrape-option-<%= value %>">
+              <%= form.radio_button :selection,
+                    value,
+                    checked: is_selected,
+                    class: "peer absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-blue-600 focus:ring-blue-500",
+                    data: { testid: "bulk-scrape-radio-#{value}" } %>
+              <div class="flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 pl-11 text-sm font-medium text-slate-600 transition peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700">
+                <span><%= option[:label] %></span>
+                <span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600 peer-checked:bg-blue-100 peer-checked:text-blue-700"><%= pluralize(count_label, "item") %></span>
+              </div>
+            </label>
+          <% end %>
+        </div>
+      </fieldset>
+
+      <div class="flex items-center justify-end gap-3">
+        <button
+          type="button"
+          class="inline-flex items-center rounded-md border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100"
+          data-action="modal#close"
+        >
+          Cancel
+        </button>
+        <%= form.submit "Scrape Items",
+              class: "inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+              data: {
+                "async-submit-target": "button",
+                "async-submit-loading-text-value": "Enqueuing..."
+              } %>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-500">
+      <p class="font-semibold text-slate-700">Scraping is disabled for this source.</p>
+      <p class="mt-1">Enable scraping to queue bulk scrapes.</p>
+    </div>
+  <% end %>
+</div>

data/app/views/source_monitor/sources/_bulk_scrape_modal.html.erb

@@ -0,0 +1,53 @@
+<% selected = (local_assigns[:selected] || :current).to_sym %>
+<% preview_limit = local_assigns[:preview_limit] || SourceMonitor::Scraping::BulkSourceScraper::DEFAULT_PREVIEW_LIMIT %>
+<% preview_items_relation = SourceMonitor::Item.where(source_id: source.id)
+  .order(Arel.sql("published_at DESC NULLS LAST, created_at DESC"))
+  .limit(preview_limit) %>
+<% preview_items = preview_items_relation.to_a %>
+<% counts = SourceMonitor::Scraping::BulkSourceScraper.selection_counts(
+     source: source,
+     preview_items: preview_items,
+     preview_limit: preview_limit
+   ) %>
+
+<div data-controller="modal" data-modal-open-class="flex" class="relative">
+  <button
+    type="button"
+    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 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+    data-action="modal#open"
+    data-testid="bulk-scrape-button"
+  >
+    Bulk Scrape
+  </button>
+
+  <div
+    data-modal-target="panel"
+    class="hidden fixed inset-0 z-50 items-center justify-center"
+    data-testid="bulk-scrape-modal"
+  >
+    <div class="absolute inset-0 bg-slate-900/40" data-action="click->modal#close"></div>
+    <div class="relative z-10 w-full max-w-xl overflow-hidden rounded-lg bg-white shadow-xl">
+      <div class="flex items-start justify-between border-b border-slate-200 px-6 py-4">
+        <div>
+          <h2 class="text-lg font-semibold text-slate-900">Bulk Scrape Items</h2>
+          <p class="mt-1 text-xs text-slate-500">Queue scraping jobs for this source without leaving the page.</p>
+        </div>
+        <button
+          type="button"
+          class="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100 hover:text-slate-700"
+          data-action="modal#close"
+          aria-label="Close bulk scrape modal"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="px-6 py-5">
+        <%= render "source_monitor/sources/bulk_scrape_form",
+              source: source,
+              counts: counts,
+              selected: selected %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,302 @@
+<% source = local_assigns.fetch(:source) %>
+<% recent_fetch_logs = source.fetch_logs.order(started_at: :desc).limit(5) %>
+<% recent_scrape_logs = source.scrape_logs.order(started_at: :desc).limit(5) %>
+<% preview_limit = SourceMonitor::Scraping::BulkSourceScraper::DEFAULT_PREVIEW_LIMIT %>
+<% items = source.items.recent.limit(preview_limit) %>
+<% fetch_status = async_status_badge(source.fetch_status) %>
+<% health_status_override = local_assigns[:health_status_override] %>
+
+<div class="space-y-8">
+  <div class="flex items-start justify-between">
+    <div>
+      <h1 class="text-3xl font-semibold text-slate-900"><%= source.name %></h1>
+      <div class="mt-2 flex flex-wrap items-center gap-2 text-xs">
+        <span data-testid="fetch-status-badge" class="inline-flex items-center rounded-full px-3 py-1 font-semibold <%= fetch_status[:classes] %>">
+          <%= loading_spinner_svg if fetch_status[:show_spinner] %>
+          <%= fetch_status[:label] %>
+        </span>
+        <% if source.last_fetch_started_at.present? %>
+          <span class="rounded-full bg-slate-100 px-3 py-1 font-semibold text-slate-600">
+            Started <%= time_ago_in_words(source.last_fetch_started_at) %> ago
+          </span>
+        <% elsif source.last_fetched_at.present? %>
+          <span class="rounded-full bg-slate-100 px-3 py-1 font-semibold text-slate-600">
+            Last fetched <%= time_ago_in_words(source.last_fetched_at) %> ago
+          </span>
+        <% end %>
+      </div>
+      <p class="mt-2 text-sm text-slate-500">Feed URL: <%= source.feed_url %></p>
+    </div>
+    <div class="flex flex-wrap items-center justify-end gap-3">
+      <% fetch_disabled = %w[queued fetching].include?(source.fetch_status) %>
+      <%= button_to "Fetch Now",
+            source_monitor.source_fetch_path(source),
+            method: :post,
+            class: [
+              "inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-white shadow",
+              fetch_disabled ? "cursor-not-allowed bg-slate-400" : "bg-blue-600 hover:bg-blue-500"
+            ].join(" "),
+            disabled: fetch_disabled,
+            data: {
+              "async-submit-target": "button",
+              "async-submit-loading-text-value": "Enqueuing..."
+            },
+            form: {
+              class: "inline",
+              data: {
+                controller: "async-submit",
+                action: "turbo:submit-start->async-submit#start turbo:submit-end->async-submit#finish"
+              }
+            } %>
+      <%= render "source_monitor/sources/bulk_scrape_modal",
+            source: source,
+            selected: (@bulk_scrape_selection || :current),
+            preview_limit: preview_limit %>
+      <% if source.fetch_circuit_open? %>
+        <%= button_to "Retry Now",
+              source_monitor.source_retry_path(source),
+              method: :post,
+              class: "inline-flex items-center rounded-md bg-amber-600 px-3 py-2 text-sm font-medium text-white shadow hover:bg-amber-500",
+              data: {
+                "async-submit-target": "button",
+                "async-submit-loading-text-value": "Retrying..."
+              },
+              form: {
+                class: "inline",
+                data: {
+                  controller: "async-submit",
+                  action: "turbo:submit-start->async-submit#start turbo:submit-end->async-submit#finish"
+                }
+              } %>
+      <% end %>
+      <%= link_to "Edit", source_monitor.edit_source_path(source), class: "inline-flex items-center rounded-md bg-slate-800 px-3 py-2 text-sm font-medium text-white shadow hover:bg-slate-700" %>
+      <%= form_with url: source_monitor.source_path(source), method: :delete, data: { turbo_confirm: "Delete this source and remove all associated data?", turbo_frame: "_top" }, class: "inline" do %>
+        <%= hidden_field_tag :redirect_to, source_monitor.sources_path %>
+        <button type="submit" class="inline-flex items-center rounded-md border border-rose-400 px-3 py-2 text-sm font-medium text-rose-600 hover:bg-rose-50">
+          Delete
+        </button>
+      <% end %>
+    </div>
+  </div>
+
+  <% if source.fetch_circuit_open? %>
+    <div class="rounded-lg border border-amber-200 bg-amber-50 px-6 py-4 shadow-sm">
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h2 class="text-lg font-medium text-amber-900">Circuit breaker open</h2>
+          <p class="mt-1 text-xs text-amber-700">
+            Recent failures paused automatic fetches until <%= source.fetch_circuit_until&.strftime("%b %d, %Y %H:%M %Z") || "later" %>. Use Retry Now to bypass the cooldown.
+          </p>
+        </div>
+        <span class="inline-flex items-center rounded-full bg-amber-600/10 px-3 py-1 text-xs font-semibold text-amber-700">
+          Failures: <%= source.failure_count %>
+        </span>
+      </div>
+    </div>
+  <% end %>
+
+  <% if source.items_retention_days.present? || source.max_items.present? %>
+    <div class="rounded-lg border border-blue-200 bg-blue-50 px-6 py-4 shadow-sm">
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h2 class="text-lg font-medium text-slate-900">Retention Policy Active</h2>
+          <p class="mt-1 text-xs text-slate-600">
+            SourceMonitor prunes items for this source immediately after each fetch so stored data stays within the configured limits.
+          </p>
+        </div>
+        <div class="flex gap-2">
+          <% if source.items_retention_days.present? %>
+            <span class="inline-flex items-center rounded-full bg-blue-600/10 px-3 py-1 text-xs font-semibold text-blue-700">
+              <%= pluralize(source.items_retention_days, "day") %> window
+            </span>
+          <% end %>
+          <% if source.max_items.present? %>
+            <span class="inline-flex items-center rounded-full bg-blue-600/10 px-3 py-1 text-xs font-semibold text-blue-700">
+              Max <%= number_with_delimiter(source.max_items) %> items
+            </span>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="grid gap-6 lg:grid-cols-3 lg:items-start">
+    <div class="space-y-6 lg: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">Source Details</h2>
+        </div>
+        <dl class="divide-y divide-slate-100">
+          <% interval_hours = number_with_precision(source.fetch_interval_minutes / 60.0, precision: 2)
+             circuit_state =
+               if source.fetch_circuit_open?
+                 until_time = source.fetch_circuit_until&.strftime("%b %d, %Y %H:%M %Z") || "unknown"
+                 "Open until #{until_time}"
+               else
+                 "Closed"
+               end
+
+             details = {
+               "Website" => (source.website_url.presence || "—"),
+               "Fetch interval" => "#{source.fetch_interval_minutes} minutes (~#{interval_hours} hours)",
+               "Adaptive interval" => source.adaptive_fetching_enabled? ? "Auto" : "Fixed",
+               "Scraper" => source.scraper_adapter,
+               "Feed content" => source.feed_content_readability_enabled? ? "Readability" : "Raw",
+               "Active" => source.active? ? "Yes" : "No",
+               "Scraping" => source.scraping_enabled? ? "Enabled" : "Disabled",
+               "Auto scrape" => source.auto_scrape? ? "Enabled" : "Disabled",
+               "Requires JS" => source.requires_javascript? ? "Yes" : "No",
+               "Failure count" => source.failure_count,
+               "Retry attempt" => source.fetch_retry_attempt,
+               "Circuit state" => circuit_state,
+               "Last error" => source.last_error.presence || "None",
+               "Items count" => source.items_count,
+               "Retention days" => source.items_retention_days || "—",
+               "Max items" => source.max_items || "—"
+             } %>
+          <% 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="text-sm text-slate-900"><%= value %></dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+
+      <div class="rounded-lg border border-slate-200 bg-white px-6 py-5 shadow-sm">
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-medium text-slate-900">Health Monitoring</h2>
+          <%= render "source_monitor/sources/health_status_badge",
+                source: source,
+                health_status_override: health_status_override %>
+        </div>
+        <dl class="mt-4 divide-y divide-slate-100">
+          <% rows = {
+            "Rolling success" => (source.rolling_success_rate ? number_to_percentage(source.rolling_success_rate * 100, precision: 0) : "—"),
+            "Auto-pause threshold" => begin
+              threshold = source.health_auto_pause_threshold.presence || SourceMonitor.config.health.auto_pause_threshold
+              threshold ? number_to_percentage(threshold.to_f * 100, precision: 0) : "—"
+            end,
+            "Auto-pause started" => (source.auto_paused_at&.strftime("%b %d, %Y %H:%M %Z") || "—"),
+            "Auto-pause until" => (source.auto_paused_until&.strftime("%b %d, %Y %H:%M %Z") || "—")
+          } %>
+          <% rows.each do |label, value| %>
+            <div class="flex items-center justify-between py-3 text-sm">
+              <dt class="font-medium text-slate-600"><%= label %></dt>
+              <dd class="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">Recent Fetches</h2>
+        </div>
+        <div class="divide-y divide-slate-100">
+          <% if recent_fetch_logs.any? %>
+            <% recent_fetch_logs.each do |log| %>
+              <div class="px-5 py-3 text-sm text-slate-700">
+                <div class="flex items-center justify-between">
+                  <span>Started <%= log.started_at&.strftime("%b %d, %H:%M") || "Unknown" %></span>
+                  <span class="ml-4 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold <%= log.success? ? "bg-green-100 text-green-700" : "bg-rose-100 text-rose-700" %>">
+                    <%= log.success? ? "Success" : "Failure" %>
+                  </span>
+                </div>
+                <p class="mt-1 text-xs text-slate-500"><%= log.items_created %> created · <%= log.items_updated %> updated · <%= log.items_failed %> failed</p>
+              </div>
+            <% end %>
+          <% else %>
+            <div class="px-5 py-4 text-sm text-slate-500">No fetch history yet.</div>
+          <% 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">Recent Scrapes</h2>
+        </div>
+        <div class="divide-y divide-slate-100">
+          <% if recent_scrape_logs.any? %>
+            <% recent_scrape_logs.each do |log| %>
+              <div class="px-5 py-3 text-sm text-slate-700">
+                <div class="flex items-center justify-between">
+                  <span>Started <%= log.started_at&.strftime("%b %d, %H:%M") || "Unknown" %></span>
+                  <span class="ml-4 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold <%= log.success? ? "bg-green-100 text-green-700" : "bg-rose-100 text-rose-700" %>">
+                    <%= log.success? ? "Success" : "Failure" %>
+                  </span>
+                </div>
+                <p class="mt-1 text-xs text-slate-500"><%= log.scraper_adapter || "—" %></p>
+              </div>
+            <% end %>
+          <% else %>
+            <div class="px-5 py-4 text-sm text-slate-500">No scrape history yet.</div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <div class="lg:col-span-2">
+      <div class="rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div class="flex items-center justify-between border-b border-slate-200 px-5 py-4">
+          <h2 class="text-lg font-medium">Items</h2>
+          <%= link_to "View all items", source_monitor.items_path, class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
+        </div>
+        <% if items.any? %>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-slate-200 text-left text-sm" data-testid="source-items-table">
+              <thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <tr>
+                  <th scope="col" class="px-5 py-3">Title</th>
+                  <th scope="col" class="px-5 py-3">Categories</th>
+                  <th scope="col" class="px-5 py-3">Tags</th>
+                  <th scope="col" class="px-5 py-3">Published</th>
+                  <th scope="col" class="px-5 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-5 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" %>
+                      </div>
+                      <% if item.summary.present? %>
+                        <div class="mt-1 text-xs text-slate-500"><%= item.summary %></div>
+                      <% end %>
+                    </td>
+                    <% categories = Array(item.categories).filter_map { |value| value.to_s.strip.presence } %>
+                    <% tags = Array(item.tags).filter_map { |value| value.to_s.strip.presence } %>
+                    <td class="px-5 py-4 text-xs text-slate-500"><%= categories.present? ? categories.join(", ") : "—" %></td>
+                    <td class="px-5 py-4 text-xs text-slate-500"><%= tags.present? ? tags.join(", ") : "—" %></td>
+                    <td class="px-5 py-4 text-xs text-slate-500">
+                      <%= item.published_at ? item.published_at.strftime("%b %d, %Y %H:%M") : "Unpublished" %>
+                    </td>
+                    <td class="px-5 py-4 text-xs">
+                      <% scrape_badge = item_scrape_status_badge(item: item, source: source) %>
+                      <span
+                        class="inline-flex items-center gap-1 rounded-full px-3 py-1 font-semibold <%= scrape_badge[:classes] %>"
+                        data-testid="item-scrape-status-badge"
+                        data-status="<%= scrape_badge[:status] %>"
+                      >
+                        <%= loading_spinner_svg(css_class: "h-3.5 w-3.5 animate-spin text-blue-500") if scrape_badge[:show_spinner] %>
+                        <%= scrape_badge[:label] %>
+                      </span>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          </div>
+          <div class="border-t border-slate-200 px-5 py-3 text-xs text-slate-500">
+            Showing up to 10 most recent items.
+          </div>
+        <% else %>
+          <div class="px-5 py-6 text-sm text-slate-500">
+            No items for this source yet.
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

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

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

data/app/views/source_monitor/sources/_empty_state_row.html.erb

@@ -0,0 +1,5 @@
+<tr id="source_monitor_sources_empty_state">
+  <td colspan="7" class="px-6 py-6 text-center text-sm text-slate-500">
+    No sources yet. <%= link_to "Create the first source", source_monitor.new_source_path, class: "text-blue-600 hover:text-blue-500" %>.
+  </td>
+</tr>

data/app/views/source_monitor/sources/_fetch_interval_heatmap.html.erb

@@ -0,0 +1,46 @@
+<% distribution = Array(local_assigns.fetch(:fetch_interval_distribution, [])) %>
+<% selected_bucket = local_assigns[:selected_bucket] %>
+<% search_params = local_assigns[:search_params] || {} %>
+<% max_count = distribution.map(&:count).max.to_i %>
+
+<div id="source_monitor_sources_heatmap" class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
+  <div class="border-b border-slate-200 bg-slate-50 px-6 py-4">
+    <h2 class="text-base font-semibold text-slate-900">Fetch Interval Distribution</h2>
+    <p class="mt-1 text-xs text-slate-500">Heatmap shows how many sources sit in each scheduling bucket.</p>
+  </div>
+  <div class="px-6 py-4" data-testid="fetch-interval-heatmap">
+    <table class="w-full table-fixed text-center text-sm">
+      <thead class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+        <tr>
+          <% distribution.each do |bucket| %>
+            <th scope="col" class="px-2 pb-3"><%= bucket.label %></th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <% distribution.each do |bucket| %>
+            <% bucket_classes = heatmap_bucket_classes(bucket.count, max_count) %>
+            <% selected = bucket == selected_bucket %>
+            <% link_path = fetch_interval_bucket_path(bucket, search_params, selected: selected) %>
+            <% bucket_key = [bucket.min || 0, bucket.max || "plus"].join("-") %>
+            <% highlight_classes = selected ? "ring-2 ring-blue-500 shadow-lg" : "ring-1 ring-transparent hover:ring-blue-400 hover:shadow" %>
+            <td class="px-2">
+              <%= link_to link_path,
+                    class: "block focus:outline-none group",
+                    data: { turbo_frame: "_top" },
+                    "data-testid" => "fetch-interval-bucket-#{bucket_key}",
+                    aria: { label: selected ? "Show all sources" : "Filter sources by #{bucket.label}" } do %>
+                <div class="flex flex-col items-center justify-center gap-1 rounded-lg px-3 py-4 text-xs font-semibold transition <%= bucket_classes %> <%= highlight_classes %>"
+                     title="<%= "#{bucket.count} sources between #{bucket.label}" %>">
+                  <span class="text-base"><%= bucket.count %></span>
+                  <span class="font-medium">sources</span>
+                </div>
+              <% end %>
+            </td>
+          <% end %>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>