solid_observer 0.1.1 → 0.4.0

data/app/views/solid_observer/cache_dashboard/_summary.html.erb

@@ -0,0 +1,39 @@
+<% storage_summary = cache_storage_summary(storage_components) %>
+
+<section class="so-dashboard-section" aria-labelledby="so-cache-summary-heading">
+  <header class="so-dashboard-section__header">
+    <h2 id="so-cache-summary-heading" class="so-dashboard-section__title">Summary in selected range</h2>
+  </header>
+
+  <div class="so-stat-cards so-cache-dashboard__summary">
+    <article class="so-card so-metric">
+      <div class="so-card__label">Hit rate</div>
+      <div class="so-metric__value"><%= cache_ratio_percent(stats[:hit_rate]) %></div>
+      <div class="so-card__subtitle">hits / read outcomes</div>
+    </article>
+
+    <article class="so-card so-metric">
+      <div class="so-card__label">Operations</div>
+      <div class="so-metric__value"><%= number_with_delimiter(stats[:operations_count].to_i) %></div>
+      <div class="so-card__subtitle">selected window</div>
+    </article>
+
+    <article class="<%= ["so-card", "so-metric", ("so-card--accent-danger" if stats[:errors_count].to_i.positive?)].compact.join(" ") %>">
+      <div class="so-card__label">Error rate</div>
+      <div class="so-metric__value"><%= cache_ratio_percent(stats[:error_rate]) %></div>
+      <div class="so-card__subtitle">errors / operations</div>
+    </article>
+
+    <article class="so-card so-metric">
+      <div class="so-card__label">Avg duration</div>
+      <div class="so-metric__value"><%= format_duration(stats[:avg_duration].to_f) %></div>
+      <div class="so-card__subtitle">operation latency</div>
+    </article>
+
+    <article class="so-card so-metric">
+      <div class="so-card__label">Storage footprint</div>
+      <div class="so-metric__value"><%= storage_summary[:value] %></div>
+      <div class="so-card__subtitle"><%= storage_summary[:subtitle] %></div>
+    </article>
+  </div>
+</section>

data/app/views/solid_observer/cache_dashboard/index.html.erb

@@ -0,0 +1,62 @@
+<% content_for :title, "Cache overview" %>
+<% status_class = @cache_dashboard_available ? "so-badge--success" : "so-badge--warning" %>
+
+<div class="so-dashboard so-cache-dashboard">
+  <span class="sr-only">Cache Dashboard</span>
+
+  <div class="so-content__header">
+    <h1>Cache overview</h1>
+
+    <% if @cache_dashboard_available %>
+      <div class="so-cache-dashboard__intro">
+        <span class="so-badge so-badge--pill <%= status_class %>">
+          <svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true">
+            <circle r="3" cx="3" cy="3" />
+          </svg>
+          Available
+        </span>
+        <p class="so-cache-dashboard__hint">Selected range: <%= cache_range_label(@range) %> · keys and values are never shown.</p>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @cache_dashboard_available %>
+    <form action="<%= request.path %>" method="get" class="so-dashboard-toolbar so-cache-dashboard__range-form">
+      <label for="so-cache-range" class="so-card__label so-filters__label">Range</label>
+      <select id="so-cache-range" name="range" onchange="this.form.submit()">
+        <% SolidObserver::Services::CacheStats::RANGES.each_key do |key| %>
+          <option value="<%= key %>" <%= "selected" if key == @range %>><%= cache_range_label(key) %></option>
+        <% end %>
+      </select>
+      <button type="submit" class="so-btn so-btn--refresh">Refresh data</button>
+    </form>
+
+    <%= render "solid_observer/cache_dashboard/summary", stats: @stats, storage_components: @storage_components %>
+    <%= render "solid_observer/cache_dashboard/charts" %>
+
+    <% if @stability&.[](:available) %>
+      <section class="so-stability" data-so-zone="cache-stability" aria-labelledby="so-cache-stability-heading">
+        <span class="so-stability__label" id="so-cache-stability-heading">Stability</span>
+        <%= cache_stability_badge(@stability[:state]) %>
+        <span class="so-stability__detail"><%= cache_stability_detail(@stability) %></span>
+        <a href="#so-cache-events-heading" class="so-stability__link">View sampled events →</a>
+      </section>
+    <% end %>
+
+    <%= render "solid_observer/cache_dashboard/recent_events", recent_events: @recent_events %>
+  <% else %>
+    <section class="so-card so-card--section" aria-labelledby="so-cache-unavailable-heading">
+      <header class="so-dashboard-section__header">
+        <h2 id="so-cache-unavailable-heading" class="so-dashboard-section__title">Cache dashboard unavailable</h2>
+        <span class="so-badge so-badge--pill <%= status_class %>">
+          <svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true">
+            <circle r="3" cx="3" cy="3" />
+          </svg>
+          Unavailable
+        </span>
+      </header>
+
+      <p class="so-dashboard-section__meta so-dashboard-section__meta--idle">Cache dashboard is unavailable because SolidCache support is disabled or not detected. Metrics are unavailable.</p>
+    </section>
+  <% end %>
+</div>

data/app/views/solid_observer/cache_operations/_confirm_clear.html.erb

@@ -0,0 +1,6 @@
+<%= button_to "Clear cache",
+      clear_cache_operations_path,
+      method: :post,
+      class: "so-btn so-btn--danger",
+      form: {class: "so-form--inline"},
+      data: {confirm: SolidObserver::Services::CacheOperations.message(:clear, :confirmation)} %>

data/app/views/solid_observer/cache_operations/index.html.erb

@@ -0,0 +1,60 @@
+<% content_for :title, "Cache controls" %>
+<% cache_operations = SolidObserver::Services::CacheOperations %>
+<% status_class = @cache_controls_available ? "so-badge--success" : "so-badge--warning" %>
+
+<div class="so-dashboard so-cache-controls">
+  <div class="so-content__header">
+    <h1>Cache controls</h1>
+    <div class="so-cache-controls__intro">
+      <span class="so-badge so-badge--pill <%= status_class %>">
+        <svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true">
+          <circle r="3" cx="3" cy="3" />
+        </svg>
+        <%= @cache_controls_available ? "Available" : "Unavailable" %>
+      </span>
+      <p class="so-cache-controls__hint">Clear or prune SolidCache safely. Cache keys and values are never shown.</p>
+    </div>
+  </div>
+
+  <% if @cache_controls_available %>
+    <section class="so-card so-card--section" aria-labelledby="so-cache-controls-title">
+      <header class="so-dashboard-section__header">
+        <h2 id="so-cache-controls-title" class="so-dashboard-section__title">Operational controls</h2>
+      </header>
+
+      <div class="so-cache-control-row">
+        <div class="so-cache-control-row__copy">
+          <h3 class="so-cache-control-row__title">Prune expired entries</h3>
+          <p class="so-cache-control-row__body">Removes expired SolidCache records only. Active cache entries remain eligible for hits.</p>
+        </div>
+
+        <div class="so-cache-control-row__action">
+          <%= button_to "Prune expired entries",
+                prune_cache_operations_path,
+                method: :post,
+                class: "so-btn",
+                form: {class: "so-form--inline"} %>
+        </div>
+      </div>
+
+      <div class="so-cache-control-row">
+        <div class="so-cache-control-row__copy">
+          <h3 class="so-cache-control-row__title">Clear all cache</h3>
+          <p class="so-cache-control-row__body">Evicts all cached application data. Requests may slow while the cache rebuilds.</p>
+        </div>
+
+        <div class="so-cache-control-row__action">
+          <%= render "confirm_clear" %>
+        </div>
+      </div>
+    </section>
+  <% else %>
+    <section class="so-card so-card--section" aria-labelledby="so-cache-controls-unavailable-title">
+      <header class="so-dashboard-section__header">
+        <h2 id="so-cache-controls-unavailable-title" class="so-dashboard-section__title">Operational controls</h2>
+      </header>
+
+      <p class="so-dashboard-section__meta so-dashboard-section__meta--idle"><%= cache_operations.unavailable_message %></p>
+    </section>
+  <% end %>
+</div>

data/app/views/solid_observer/dashboard/_chart.html.erb

@@ -0,0 +1,28 @@
+<div class="so-chart-strip" data-so-zone="chart" data-so-chart>
+  <% if SolidObserver.config.persistence_mode? %>
+    <figure class="so-spark" data-so-spark="performed">
+      <figcaption class="so-spark__label">Performed total <span data-so-range-copy><%= range_label(local_assigns[:range] || "15m") %></span></figcaption>
+      <svg class="so-spark__svg" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
+        <line class="so-spark__baseline" x1="1" x2="119" y1="31" y2="31"/>
+        <polyline class="so-spark__line" points="<%= spark_points(@chart[:performed]) %>"/>
+      </svg>
+      <span class="so-spark__value" data-so-card-value="performed_in_range"><%= number_with_delimiter(@stats[:performed_in_range].to_i) %></span>
+    </figure>
+    <figure class="so-spark" data-so-spark="failed">
+      <figcaption class="so-spark__label">Failed total <span data-so-range-copy><%= range_label(local_assigns[:range] || "15m") %></span></figcaption>
+      <svg class="so-spark__svg" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
+        <line class="so-spark__baseline" x1="1" x2="119" y1="31" y2="31"/>
+        <polyline class="so-spark__line" points="<%= spark_points(@chart[:failed]) %>"/>
+      </svg>
+      <span class="so-spark__value" data-so-card-value="failed_in_range"><%= number_with_delimiter(@stats[:failed_in_range].to_i) %></span>
+    </figure>
+  <% end %>
+  <figure class="so-spark" data-so-spark="ready">
+    <figcaption class="so-spark__label">Ready depth</figcaption>
+    <svg class="so-spark__svg" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
+      <line class="so-spark__baseline" x1="1" x2="119" y1="31" y2="31"/>
+      <polyline class="so-spark__line" points="<%= spark_points(@chart[:ready]) %>"/>
+    </svg>
+    <span class="so-spark__value" data-so-card-value="ready"><%= number_with_delimiter(@stats[:ready].to_i) %></span>
+  </figure>
+</div>

data/app/views/solid_observer/dashboard/_live_state.html.erb

@@ -0,0 +1,20 @@
+<%# Zone B: Right now — live state cards %>
+<% if stats[:available] %>
+  <div class="so-stat-cards" data-so-zone="live-state">
+    <%= render "solid_observer/shared/stat_card", label: "Ready", subtitle: "queued", value: stats[:ready], data_key: "ready" %>
+    <%= render "solid_observer/shared/stat_card", label: "Scheduled", subtitle: "future runs", value: stats[:scheduled], data_key: "scheduled" %>
+    <%= render "solid_observer/shared/stat_card", label: "In-flight", subtitle: "in progress", value: stats[:claimed], data_key: "claimed" %>
+    <%= render "solid_observer/shared/stat_card", label: "Workers", subtitle: "active processes", value: stats[:workers], data_key: "workers" %>
+    <%= render "solid_observer/shared/stat_card", label: "Pending failures", subtitle: "awaiting retry", value: stats[:failed], data_key: "failed" %>
+  </div>
+  <% if stats[:ready].to_i.zero? && stats[:scheduled].to_i.zero? && stats[:claimed].to_i.zero? && stats[:failed].to_i.zero? %>
+    <p class="so-dashboard-section__meta so-dashboard-section__meta--idle">Queue idle right now. No ready, scheduled, in-flight, or pending-failure work is currently visible.</p>
+  <% end %>
+<% else %>
+  <div class="so-card">
+    <div class="so-empty">
+      <div class="so-empty__icon">&#9888;&#65039;</div>
+      <div>SolidQueue is not available</div>
+    </div>
+  </div>
+<% end %>

data/app/views/solid_observer/dashboard/_queue_table.html.erb

@@ -0,0 +1,34 @@
+<%# Zone E: Per-queue table with live depth and range throughput %>
+<% if persistence_mode? && stats[:available] %>
+  <div class="so-card so-card--section" data-so-zone="queue-table">
+    <div class="so-card__label">Queue throughput</div>
+    <% queues = stats[:queues] || {} %>
+    <% performed_by_queue = stats[:performed_by_queue] || {} %>
+    <% failed_by_queue = stats[:failed_by_queue] || {} %>
+    <% all_queue_names = (queues.keys | performed_by_queue.keys | failed_by_queue.keys).sort %>
+    <% if all_queue_names.any? %>
+      <table class="so-table so-table--card">
+        <thead>
+          <tr>
+            <th>Queue</th>
+            <th>Live depth</th>
+            <th>Performed <span data-so-range-copy><%= range_label(range) %></span></th>
+            <th>Failed <span data-so-range-copy><%= range_label(range) %></span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% all_queue_names.each do |queue_name| %>
+            <tr>
+              <td><%= queue_name %></td>
+              <td data-so-table-value="queue-depth-<%= queue_name %>"><%= number_with_delimiter(queues[queue_name].to_i) %></td>
+              <td data-so-table-value="queue-performed-<%= queue_name %>"><%= number_with_delimiter(performed_by_queue[queue_name].to_i) %></td>
+              <td data-so-table-value="queue-failed-<%= queue_name %>"><%= number_with_delimiter(failed_by_queue[queue_name].to_i) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p class="so-dashboard-section__meta so-dashboard-section__meta--empty-queue">No queue activity in this range. Live depth still shows current waiting work when present.</p>
+    <% end %>
+  </div>
+<% end %>

data/app/views/solid_observer/dashboard/_right_now.html.erb

@@ -0,0 +1,3 @@
+<%# Legacy partial — Zone B/C are now served by _live_state and _throughput partials.
+    This partial is retained for compatibility only and must not be the combined Zone B/C container. %>
+<%= render "live_state", stats: stats %>

data/app/views/solid_observer/dashboard/_throughput.html.erb

@@ -0,0 +1,32 @@
+<%# Zone C: Throughput in selected range %>
+<% if persistence_mode? && stats[:available] %>
+  <div class="so-stat-cards" data-so-zone="throughput">
+    <div class="so-card so-metric">
+      <div class="so-card__label">Performed</div>
+      <div class="so-metric__value" data-so-card-value="performed_in_range"><%= number_with_delimiter(stats[:performed_in_range].to_i) %></div>
+      <span class="so-metric__suffix" data-so-card-suffix>jobs</span>
+      <div class="so-card__subtitle" data-so-range-copy><%= range_label(range) %></div>
+    </div>
+    <div class="so-card so-metric">
+      <div class="so-card__label">Failed</div>
+      <div class="so-metric__value" data-so-card-value="failed_in_range"><%= number_with_delimiter(stats[:failed_in_range].to_i) %></div>
+      <span class="so-metric__suffix" data-so-card-suffix>jobs</span>
+      <div class="so-card__subtitle" data-so-range-copy><%= range_label(range) %></div>
+    </div>
+    <div class="so-card so-metric">
+      <div class="so-card__label">Enqueued</div>
+      <div class="so-metric__value" data-so-card-value="enqueued_in_range"><%= number_with_delimiter(stats[:enqueued_in_range].to_i) %></div>
+      <span class="so-metric__suffix" data-so-card-suffix>jobs</span>
+      <div class="so-card__subtitle" data-so-range-copy><%= range_label(range) %></div>
+    </div>
+    <div class="so-card so-metric">
+      <div class="so-card__label">Avg duration</div>
+      <div class="so-metric__value" data-so-card-value="avg_duration_in_range"><%= stats[:avg_duration_in_range] > 0 ? number_with_delimiter((stats[:avg_duration_in_range] * 1000).round) : "0" %></div>
+      <span class="so-metric__suffix" data-so-card-suffix>ms</span>
+      <div class="so-card__subtitle" data-so-range-copy><%= range_label(range) %></div>
+    </div>
+  </div>
+  <% if stats[:performed_in_range].to_i.zero? && stats[:failed_in_range].to_i.zero? && stats[:enqueued_in_range].to_i.zero? %>
+    <p class="so-dashboard-section__meta so-dashboard-section__meta--empty-range"><%= "No throughput #{range_label(range).sub('in ', '')}".html_safe %>. Jobs may still be waiting right now; this row only counts completed queue events in the selected range.</p>
+  <% end %>
+<% end %>

data/app/views/solid_observer/dashboard/index.html.erb

@@ -0,0 +1,143 @@
+<% content_for :title, "Dashboard" %>
+
+<% if @component == "cache" %>
+  <%= render template: "solid_observer/cache_dashboard/index" %>
+<% else %>
+<div class="so-dashboard">
+  <% queue_enabled = SolidObserver.config.solid_queue_enabled? %>
+  <% queue_status_class = queue_enabled ? "so-badge--success" : "so-badge--warning" %>
+
+  <div class="so-content__header">
+    <h1>Queue overview</h1>
+    <div class="so-queue-overview__intro">
+      <span class="so-badge so-badge--pill <%= queue_status_class %>">
+        <svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true">
+          <circle r="3" cx="3" cy="3" />
+        </svg>
+        <%= queue_enabled ? "Available" : "Unavailable" %>
+      </span>
+      <% if queue_enabled %>
+        <p class="so-queue-overview__hint">Selected range: <%= range_label(@range) %></p>
+      <% end %>
+    </div>
+  </div>
+
+  <% if !queue_enabled %>
+    <section class="so-card so-card--section" aria-labelledby="so-queue-unavailable-heading">
+      <h2 id="so-queue-unavailable-heading">Queue Unavailable</h2>
+      <p class="so-dashboard-section__meta so-dashboard-section__meta--idle">Queue component is disabled or not installed. Enable SolidQueue to access dashboard controls.</p>
+    </section>
+  <% else %>
+  <%# Zone A: Toolbar — range selector, Refresh, Live toggle, help disclosure %>
+  <div class="so-dashboard-toolbar" data-so-live>
+    <form action="<%= request.path %>" method="get" class="so-dashboard-toolbar__left">
+      <label for="so-range" class="so-card__label so-filters__label">Range</label>
+      <select id="so-range" name="range" data-so-range-select onchange="this.form.submit()">
+        <% SolidObserver::QueueStats::RANGES.each_key do |key| %>
+          <option value="<%= key %>" <%= "selected" if key == @range %>><%= key %></option>
+        <% end %>
+      </select>
+      <button type="button" class="so-btn so-btn--refresh" data-so-refresh aria-busy="false">Refresh data</button>
+      <span class="so-toolbar-freshness" data-so-freshness aria-live="polite"></span>
+      <input type="hidden" name="live" value="<%= @live ? 'on' : '' %>">
+    </form>
+    <div class="so-dashboard-toolbar__right">
+      <label class="so-toggle so-toggle--pill <%= "so-toggle--on" if @live %>">
+        <input type="checkbox" name="live" value="on" <%= "checked" if @live %> data-so-live-toggle>
+        <span class="so-toggle__track" aria-hidden="true">
+          <span class="so-toggle__thumb"></span>
+        </span>
+        <span class="so-toggle__label">Live</span>
+        <span class="so-toggle__sep" aria-hidden="true"> · </span>
+        <span class="so-toggle__cadence" aria-live="polite"><%= @live ? "5s" : "off" %></span>
+        <span class="so-toggle__dot" aria-hidden="true"></span>
+      </label>
+      <div class="so-help-wrapper" data-so-help-wrapper>
+        <button type="button" class="so-btn so-btn--help" data-so-help-btn aria-expanded="false" aria-controls="so-help-panel">(?)
+        </button>
+        <div id="so-help-panel" class="so-help-panel" data-so-help-panel hidden>
+          <p>Live mode polls every 5 seconds for current queue state. Throughput and chart data update only on range change or manual refresh.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <%# Zone B: Right now — live state %>
+  <section class="so-dashboard-section" aria-labelledby="so-live-state-heading">
+    <div class="so-dashboard-section__header">
+      <h2 class="so-dashboard-section__title" id="so-live-state-heading">Right now</h2>
+      <span class="so-dashboard-section__meta"><span class="so-badge so-badge--pill so-badge--success"><svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true"><circle r="3" cx="3" cy="3" fill="var(--so-live-marker, var(--so-success))"/></svg></span> current</span>
+    </div>
+    <%= render "live_state", stats: @stats %>
+  </section>
+
+  <%# Zone C: Throughput in selected range %>
+  <% if persistence_mode? && @stats[:available] %>
+    <section class="so-dashboard-section" aria-labelledby="so-throughput-heading">
+      <div class="so-dashboard-section__header">
+        <h2 class="so-dashboard-section__title" id="so-throughput-heading">Throughput in selected range</h2>
+        <span class="so-dashboard-section__meta"><span class="so-badge so-badge--pill so-badge--info"><svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true"><circle r="3" cx="3" cy="3" fill="var(--so-range-marker, var(--so-info))"/></svg></span> <span data-so-range-copy><%= range_label(@range) %></span></span>
+      </div>
+      <%= render "throughput", stats: @stats, range: @range %>
+    </section>
+  <% end %>
+
+  <%# Zone D: Charts %>
+  <% if @stats[:available] %>
+    <section class="so-dashboard-section" aria-labelledby="so-chart-heading">
+      <div class="so-dashboard-section__header">
+        <h2 class="so-dashboard-section__title" id="so-chart-heading">Charts</h2>
+      </div>
+      <%= render "chart", range: @range %>
+    </section>
+  <% end %>
+
+  <%# Zone E: Per-queue table %>
+  <%= render "queue_table", stats: @stats, range: @range %>
+
+  <%# Zone F: Stability strip %>
+  <% if @stats[:available] && persistence_mode? %>
+    <section class="so-stability" data-so-zone="stability" aria-labelledby="so-stability-heading">
+      <span class="so-stability__label" id="so-stability-heading">Stability</span>
+      <%= stability_badge(@stats) %>
+      <span class="so-stability__detail"><%= stability_detail(@stats) %></span>
+      <%= link_to "View failures →", events_path(event_type: "job_failed"), class: "so-stability__link" %>
+    </section>
+  <% end %>
+
+  <%# Zone G: Recent Events %>
+  <% if @stats[:available] && persistence_mode? %>
+    <% if defined?(@recent_events) && @recent_events.present? %>
+      <div class="so-card">
+        <div class="so-card__label">Recent Events</div>
+        <table class="so-table so-table--card">
+          <thead>
+            <tr>
+              <th>Event</th>
+              <th>Job Class</th>
+              <th>Queue</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @recent_events.each do |event| %>
+              <tr>
+                <td><%= event.event_type.humanize %></td>
+                <td><%= event.job_class %></td>
+                <td><%= event.queue_name %></td>
+                <td><%= time_ago_in_words(event.recorded_at) %> ago</td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="so-card">
+        <div class="so-card__label">Recent Events</div>
+        <p class="so-dashboard-section__meta so-dashboard-section__meta--empty-events">No recent events yet. Queue activity will appear here after jobs are enqueued, performed, or failed.</p>
+      </div>
+    <% end %>
+  <% end %>
+  <% end %>
+</div>
+<% end %>

data/app/views/solid_observer/errors/storage_unavailable.html.erb

@@ -0,0 +1,27 @@
+<% content_for :title, "Storage Unavailable" %>
+
+<div class="so-content__header">
+  <h1>SolidObserver storage is not reachable</h1>
+</div>
+
+<div class="so-card so-card--spaced so-card--accent-danger">
+  <p class="so-card__label so-card__label--danger">
+    <strong><%= @error_class %></strong>
+  </p>
+  <pre class="so-pre so-pre--error"><%= @error_message %></pre>
+</div>
+
+<div class="so-card so-card--spaced">
+  <h2>What to do next</h2>
+  <ol>
+    <li>Confirm the <code>solid_observer_queue</code> database in <code>config/database.yml</code> is reachable.</li>
+    <li>
+      Run migrations if you have not yet:
+      <pre class="so-pre">bin/rails solid_observer:install:migrations
+bin/rails db:create
+bin/rails db:migrate</pre>
+    </li>
+    <li>If the database server is temporarily down, reload this page once it recovers.</li>
+    <li>Switch to <code>storage_mode: :realtime</code> in <code>config/initializers/solid_observer.rb</code> if you want SolidObserver without a persistence database.</li>
+  </ol>
+</div>

data/app/views/solid_observer/events/index.html.erb

@@ -0,0 +1,53 @@
+<% content_for :title, "Events" %>
+
+<div class="so-content__header">
+  <h1>Events</h1>
+</div>
+
+<%= form_tag events_path, method: :get, class: "so-filters" do %>
+  <%= select_tag :event_type,
+      options_for_select([["All Event Types", ""]] + @available_event_types.map { |t| [t.humanize, t] }, @event_type),
+      onchange: "this.form.submit()" %>
+
+  <%= select_tag :job_class,
+      options_for_select([["All Classes", ""]] + @available_job_classes.map { |c| [c, c] }, @job_class),
+      onchange: "this.form.submit()" %>
+
+  <%= select_tag :queue_name,
+      options_for_select([["All Queues", ""]] + @available_queues.map { |q| [q, q] }, @queue_name),
+      onchange: "this.form.submit()" %>
+
+  <%= date_field_tag :from, @from&.strftime("%Y-%m-%d"), placeholder: "From date", onchange: "this.form.submit()" %>
+  <%= date_field_tag :to, @to&.strftime("%Y-%m-%d"), placeholder: "To date", onchange: "this.form.submit()" %>
+
+  <%= link_to "Clear Filters", events_path, class: "so-btn" if @event_type.present? || @job_class.present? || @queue_name.present? || @from || @to %>
+<% end %>
+
+<% if @events.any? %>
+  <table class="so-table so-table--listing">
+    <thead>
+      <tr>
+        <th>Event</th>
+        <th>Job Class</th>
+        <th>Queue</th>
+        <th>Duration</th>
+        <th>Time</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @events.each do |event| %>
+        <tr>
+          <td><%= link_to event.event_type.humanize, event_path(event.id) %></td>
+          <td><%= event.job_class %></td>
+          <td><%= event.queue_name %></td>
+          <td><%= duration_with_semantic(event.duration, event.event_type) %></td>
+          <td><%= time_ago_in_words(event.recorded_at) %> ago</td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <%= render "solid_observer/shared/pagination", page: @page, total_pages: @total_pages %>
+<% else %>
+  <%= render "solid_observer/shared/empty_state", message: "No events found matching the criteria" %>
+<% end %>

data/app/views/solid_observer/events/show.html.erb

@@ -0,0 +1,47 @@
+<% content_for :title, "Event ##{@event.id}" %>
+
+<div class="so-content__header">
+  <h1>Event #<%= @event.id %></h1>
+</div>
+
+<div class="so-back-link">
+  <%= link_to "← Back to Events", events_path(event_type: params[:event_type], job_class: params[:job_class], queue_name: params[:queue_name], from: params[:from], to: params[:to]), class: "so-btn" %>
+</div>
+
+<div class="so-card so-card--spaced">
+  <table class="so-table so-details">
+    <tbody>
+      <tr>
+        <td>Event Type</td>
+        <td><%= @event.event_type.humanize %></td>
+      </tr>
+      <tr>
+        <td>Job Class</td>
+        <td><code><%= @event.job_class %></code></td>
+      </tr>
+      <tr>
+        <td>Queue</td>
+        <td><%= @event.queue_name %></td>
+      </tr>
+      <tr>
+        <td>Correlation ID</td>
+        <td><code><%= @event.correlation_id || "N/A" %></code></td>
+      </tr>
+      <tr>
+        <td>Duration</td>
+        <td><%= duration_with_semantic(@event.duration, @event.event_type) %></td>
+      </tr>
+      <tr>
+        <td>Recorded At</td>
+        <td><%= @event.recorded_at.strftime("%Y-%m-%d %H:%M:%S.%3N UTC") %></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<% if @metadata %>
+  <div class="so-card so-card--spaced">
+    <div class="so-card__label">Metadata</div>
+    <pre class="so-pre"><code><%= JSON.pretty_generate(@metadata) %></code></pre>
+  </div>
+<% end %>

data/app/views/solid_observer/jobs/index.html.erb

@@ -0,0 +1,61 @@
+<% content_for :title, "Jobs" %>
+
+<div class="so-content__header">
+  <h1>Jobs</h1>
+</div>
+
+<%= form_tag jobs_path, method: :get, class: "so-filters" do %>
+  <%= select_tag :status,
+      options_for_select([["All Active", "all_active"], ["Ready", "ready"], ["Scheduled", "scheduled"], ["Claimed", "claimed"], ["Failed", "failed"]], @status),
+      onchange: "this.form.submit()" %>
+
+  <%= select_tag :queue_name,
+      options_for_select([["All Queues", ""]] + @available_queues.map { |q| [q, q] }, @queue_name),
+      onchange: "this.form.submit()" %>
+
+  <%= select_tag :job_class,
+      options_for_select([["All Classes", ""]] + @available_job_classes.map { |c| [c, c] }, @job_class),
+      onchange: "this.form.submit()" %>
+<% end %>
+
+<% if @jobs.any? %>
+  <table class="so-table so-table--listing">
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Class</th>
+        <th>Queue</th>
+        <th>Status</th>
+        <th>Created</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @jobs.each do |execution| %>
+        <% job = execution.job %>
+        <% status = execution_status(execution) %>
+        <tr>
+          <td><%= link_to execution.id, job_path(execution.id, status: status) %></td>
+          <td><%= job&.class_name || "N/A" %></td>
+          <td><%= job&.queue_name || execution&.queue_name || "N/A" %></td>
+          <td><%= status_badge(status) %></td>
+          <td><%= time_ago_in_words(execution.created_at) %> ago</td>
+          <td>
+            <%= link_to "View", job_path(execution.id, status: status), class: "so-btn" %>
+            <% if execution.is_a?(SolidQueue::FailedExecution) %>
+              <%= button_to "Retry", retry_job_path(execution.id), method: :post, class: "so-btn so-btn--primary", form: { class: "so-form--inline" }, data: { confirm: "Retry job #{execution.id}?" } %>
+              <%= button_to "Discard", discard_job_path(execution.id), method: :post, class: "so-btn so-btn--danger", form: { class: "so-form--inline" }, data: { confirm: "Discard job #{execution.id}? This cannot be undone." } %>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <%= render "solid_observer/shared/pagination", page: @page, total_pages: @total_pages %>
+<% else %>
+  <%= render "solid_observer/shared/empty_state",
+      message: persistence_mode? ?
+        "No jobs match this filter. Successfully completed jobs are not stored here — see #{link_to("Events tab", events_path)} for the full job history.".html_safe :
+        "No jobs match this filter." %>
+<% end %>