solid_observer 0.3.0 → 0.5.0

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

@@ -14,8 +14,8 @@
 
       /* text */
       --so-text: #171717;
-      --so-text-muted: #737373;
-      --so-text-subtle: #737373;
+      --so-text-muted: #707070;
+      --so-text-subtle: #707070;
 
       /* lines */
       --so-border: #e5e5e5;
@@ -46,6 +46,17 @@
       --so-live-marker: var(--so-success);
       --so-range-marker: var(--so-info);
       --so-toolbar-gap: 0.75rem;
+
+      /* SO-078 badge tokens */
+      --so-badge-success-bg: #dcfce7;
+      --so-badge-success-text: #166534;
+      --so-badge-warning-bg: #fef3c7;
+      --so-badge-warning-text: #92400e;
+      --so-badge-danger-bg: #fee2e2;
+      --so-badge-danger-text: #991b1b;
+      --so-badge-info-bg: #dbeafe;
+      --so-badge-info-text: #1e40af;
+      --so-badge-neutral-text: #525252;
     }
 
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -93,6 +104,22 @@
     .so-sidebar__nav a.active {
       background: var(--so-sidebar-active-bg);
       color: var(--so-sidebar-active-text);
+      font-weight: 600;
+    }
+
+    .so-sidebar__nav a:focus-visible {
+      outline: 2px solid var(--so-info);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 3px var(--so-focus-ring);
+    }
+
+    .so-sidebar__section {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--so-text-muted);
+      padding: 0.5rem 0.75rem 0.25rem;
+      margin: 0.5rem 0.75rem 0.25rem;
     }
 
     .so-sidebar__mode {
@@ -123,6 +150,8 @@
 
     /* SO-067 Metric card anatomy — separated value/suffix/range-copy */
     .so-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem; }
+    .so-metric .so-card__label,
+    .so-metric .so-card__subtitle { flex-basis: 100%; }
     .so-metric__value { font-size: 1.625rem; font-weight: 600; color: var(--so-text); }
     .so-metric__suffix { font-size: 0.75rem; color: var(--so-text-muted); }
 
@@ -138,6 +167,7 @@
     .so-toolbar-freshness { font-size: 0.75rem; color: var(--so-text-subtle); }
 
     /* SO-067 Focus rings */
+    .so-btn:focus-visible,
     select:focus-visible,
     .so-btn--refresh:focus-visible,
     .so-toggle--pill input:focus-visible + .so-toggle__track,
@@ -239,17 +269,20 @@
     .so-table tr:hover td { background: var(--so-surface-muted); }
 
     .so-badge {
-      display: inline-block;
-      padding: 0.15rem 0.45rem;
-      border-radius: var(--so-radius);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      border-radius: 9999px;
       font-size: 0.7rem;
-      font-weight: 600;
+      line-height: 1rem;
+      font-weight: 500;
     }
-    .so-badge--success { background: #dcfce7; color: #166534; }
-    .so-badge--warning { background: #fef3c7; color: #92400e; }
-    .so-badge--danger { background: #fee2e2; color: #991b1b; }
-    .so-badge--info { background: #dbeafe; color: #1e40af; }
-    .so-badge--default { background: var(--so-surface-muted); color: var(--so-text-muted); }
+    .so-badge--success { background: var(--so-badge-success-bg); color: var(--so-badge-success-text); }
+    .so-badge--warning { background: var(--so-badge-warning-bg); color: var(--so-badge-warning-text); }
+    .so-badge--danger { background: var(--so-badge-danger-bg); color: var(--so-badge-danger-text); }
+    .so-badge--info { background: var(--so-badge-info-bg); color: var(--so-badge-info-text); }
+    .so-badge--default { background: var(--so-surface-muted); color: var(--so-badge-neutral-text); }
+    .so-badge--recorded { background: var(--so-surface-muted); color: var(--so-text); }
 
     .so-badge--pill {
       display: inline-flex;
@@ -263,6 +296,15 @@
     .so-badge--pill.so-badge--success .so-badge__dot { fill: var(--so-success); }
     .so-badge--pill.so-badge--warning .so-badge__dot { fill: var(--so-warning); }
     .so-badge--pill.so-badge--danger  .so-badge__dot { fill: var(--so-danger); }
+    .so-badge--pill.so-badge--info    .so-badge__dot { fill: var(--so-info); }
+    .so-badge--pill.so-badge--default .so-badge__dot { fill: var(--so-badge-neutral-text); }
+    .so-badge--pill.so-badge--recorded .so-badge__dot { fill: var(--so-text); }
+
+    a.so-badge:focus-visible, button.so-badge:focus-visible {
+      outline: 2px solid var(--so-info);
+      outline-offset: 2px;
+      box-shadow: 0 0 0 3px var(--so-focus-ring);
+    }
 
     .so-stability {
       display: flex;
@@ -353,6 +395,79 @@
       .so-toggle__track, .so-toggle__thumb { transition: none; }
     }
 
+    .so-cache-controls { max-width: 820px; }
+    .so-cache-dashboard__intro,
+    .so-cache-controls__intro,
+    .so-queue-overview__intro,
+    .so-cable-dashboard__intro {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.75rem;
+      margin-top: 0.5rem;
+    }
+    .so-cache-dashboard__hint,
+    .so-cache-controls__hint,
+    .so-queue-overview__hint,
+    .so-cable-dashboard__hint {
+      font-size: 0.875rem;
+      color: var(--so-text-subtle);
+      line-height: 1.5;
+    }
+    .so-cache-dashboard__range-form,
+    .so-cable-dashboard__range-form {
+      align-items: center;
+      margin-bottom: 2rem;
+    }
+    .so-cache-dashboard__range-form select,
+    .so-cable-dashboard__range-form select,
+    .so-dashboard-toolbar select {
+      padding: 0.4rem 0.6rem;
+      border: 1px solid var(--so-border);
+      border-radius: var(--so-radius);
+      font-size: 0.85rem;
+      background: var(--so-card-bg);
+      color: var(--so-text);
+    }
+    .so-cache-dashboard__chart-empty,
+    .so-cable-dashboard__chart-empty {
+      max-width: 420px;
+      margin-bottom: 0;
+    }
+    .so-cache-dashboard__digest,
+    .so-cable-dashboard__digest {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      white-space: nowrap;
+    }
+    .so-cache-control-row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 1rem;
+      align-items: center;
+      padding: 1rem 0;
+    }
+    .so-cache-control-row + .so-cache-control-row { border-top: 1px solid var(--so-border); }
+    .so-cache-control-row__copy { min-width: 0; }
+    .so-cache-control-row__title {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: var(--so-text);
+    }
+    .so-cache-control-row__body {
+      margin-top: 0.35rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      color: var(--so-text-subtle);
+    }
+    .so-cache-control-row__action {
+      display: flex;
+      justify-content: flex-end;
+    }
+    .so-cache-control-row__action .so-form--inline {
+      display: flex;
+      justify-content: flex-end;
+    }
+
     .so-empty { text-align: center; padding: 3rem 1rem; color: var(--so-text-muted); }
     .so-empty__icon { font-size: 2rem; margin-bottom: 0.5rem; }
     .so-empty__message { font-size: 0.9rem; }
@@ -425,6 +540,10 @@
       .so-sidebar__mode { display: inline-block; padding: 0.5rem 1rem; border-top: none; margin-top: 0; font-size: 0.7rem; }
       .so-content { padding: 1rem; }
       .so-stat-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+      .so-cache-control-row { grid-template-columns: 1fr; align-items: start; }
+      .so-cache-control-row__action,
+      .so-cache-control-row__action .so-form--inline { width: 100%; justify-content: stretch; }
+      .so-cache-control-row__action .so-btn { width: 100%; }
       .so-table { display: block; overflow-x: auto; }
     }
   </style>
@@ -433,12 +552,31 @@
   <div class="so-layout">
     <aside class="so-sidebar">
       <div class="so-sidebar__logo">SolidObserver</div>
-      <nav class="so-sidebar__nav">
-        <%= link_to "Dashboard", root_path, class: ("active" if controller_name == "dashboard") %>
-        <%= link_to "Jobs", jobs_path, class: ("active" if controller_name == "jobs") %>
-        <% if persistence_mode? %>
-          <%= link_to "Events", events_path, class: ("active" if controller_name == "events") %>
-          <%= link_to "Storage", storage_path, class: ("active" if controller_name == "storages") %>
+      <nav class="so-sidebar__nav" aria-label="SolidObserver navigation">
+        <% if SolidObserver.config.solid_queue_enabled? %>
+          <div class="so-sidebar__section">Queue</div>
+          <%= link_to "Overview", root_path, class: ("active" if controller_name == "dashboard" && @component.to_s != "cache"), "aria-current": (controller_name == "dashboard" && @component.to_s != "cache" ? "page" : nil) %>
+          <%= link_to "Jobs", jobs_path, class: ("active" if controller_name == "jobs"), "aria-current": (controller_name == "jobs" ? "page" : nil) %>
+          <% if persistence_mode? %>
+            <%= link_to "Events", events_path, class: ("active" if controller_name == "events"), "aria-current": (controller_name == "events" ? "page" : nil) %>
+          <% end %>
+        <% end %>
+
+        <% if SolidObserver.config.solid_cache_enabled? %>
+          <div class="so-sidebar__section">Cache</div>
+          <%= link_to "Overview", cache_dashboard_path, class: ("active" if controller_name == "cache_dashboard"), "aria-current": (controller_name == "cache_dashboard" ? "page" : nil) %>
+          <% if SolidObserver::Services::CacheOperations.available? %>
+            <%= link_to "Controls", cache_operations_path, class: ("active" if controller_name == "cache_operations"), "aria-current": (controller_name == "cache_operations" ? "page" : nil) %>
+          <% end %>
+        <% end %>
+
+        <% if SolidObserver.config.solid_cable_enabled? %>
+          <div class="so-sidebar__section">Cable</div>
+          <%= link_to "Overview", cable_dashboard_path, class: ("active" if controller_name == "cable_dashboard"), "aria-current": (controller_name == "cable_dashboard" ? "page" : nil) %>
+        <% end %>
+
+        <% if persistence_mode? && (SolidObserver.config.solid_queue_enabled? || SolidObserver.config.solid_cache_enabled? || SolidObserver.config.solid_cable_enabled?) %>
+          <%= link_to "Storage", storage_path, class: ("active" if controller_name == "storages"), "aria-current": (controller_name == "storages" ? "page" : nil) %>
         <% end %>
       </nav>
       <div class="so-sidebar__mode">
@@ -449,10 +587,10 @@
     <main class="so-content" aria-labelledby="so-main-heading">
       <h1 class="sr-only" id="so-main-heading">Dashboard</h1>
       <% if flash[:notice] %>
-        <div class="so-flash so-flash--notice"><%= flash[:notice] %></div>
+        <div class="so-flash so-flash--notice" role="status" aria-live="polite"><%= flash[:notice] %></div>
       <% end %>
       <% if flash[:alert] %>
-        <div class="so-flash so-flash--alert"><%= flash[:alert] %></div>
+        <div class="so-flash so-flash--alert" role="alert"><%= flash[:alert] %></div>
       <% end %>
       <%= yield %>
     </main>

data/app/views/solid_observer/cable_dashboard/_charts.html.erb

@@ -0,0 +1,31 @@
+<section class="so-dashboard-section" aria-labelledby="so-cable-charts-heading">
+  <header class="so-dashboard-section__header">
+    <h2 id="so-cable-charts-heading" class="so-dashboard-section__title">Activity trends</h2>
+  </header>
+
+  <div class="so-chart-strip">
+    <% if @stats[:activity_trends]&.[](:available) %>
+      <figure class="so-spark" data-so-spark="cable-broadcasts">
+        <figcaption class="so-spark__label">Broadcasts total <span data-so-range-copy><%= cable_range_label(@range) %></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(@stats[:activity_trends][:broadcasts]) %>"/>
+        </svg>
+        <span class="so-spark__value"><%= number_with_delimiter(@stats[:broadcasts_count].to_i) %></span>
+      </figure>
+
+      <figure class="so-spark" data-so-spark="cable-rejections">
+        <figcaption class="so-spark__label">Rejections total <span data-so-range-copy><%= cable_range_label(@range) %></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(@stats[:activity_trends][:rejections]) %>"/>
+        </svg>
+        <span class="so-spark__value"><%= number_with_delimiter(@stats[:rejections_count].to_i) %></span>
+      </figure>
+    <% else %>
+      <div class="so-card so-cable-dashboard__chart-empty">
+        <p class="so-dashboard-section__meta so-dashboard-section__meta--empty-range">No chart data in the selected range yet. Summary metrics still use bounded cable stats.</p>
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/views/solid_observer/cable_dashboard/_recent_events.html.erb

@@ -0,0 +1,34 @@
+<section class="so-card so-card--section" aria-labelledby="so-cable-events-heading">
+  <header class="so-dashboard-section__header">
+    <h2 id="so-cable-events-heading" class="so-dashboard-section__title">Recent Cable events</h2>
+    <span class="so-dashboard-section__meta">debug context only · broadcasting names and payloads are never shown</span>
+  </header>
+
+  <% if recent_events.present? %>
+    <table class="so-table so-table--card">
+      <caption class="sr-only">Recent Cable events without raw broadcasting names or payloads</caption>
+      <thead>
+        <tr>
+          <th>Event</th>
+          <th>Channel class</th>
+          <th>Broadcasting digest</th>
+          <th>Duration</th>
+          <th>Recorded</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% recent_events.each do |event| %>
+          <tr>
+            <td><%= event.event_type.to_s %></td>
+            <td><%= event.channel_class.presence || "—" %></td>
+            <td><span class="so-cable-dashboard__digest"><%= cable_event_digest(event.broadcasting_digest) %></span></td>
+            <td><%= event.duration ? format_duration(event.duration) : "—" %></td>
+            <td><span title="<%= event.recorded_at.utc.strftime("%Y-%m-%d %H:%M:%S UTC") %>"><%= time_ago_in_words(event.recorded_at) %> ago</span></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <p class="so-dashboard-section__meta so-dashboard-section__meta--empty-events">No sampled cable events in the selected range yet. Broadcasts, rejections, and errors will appear here after Cable activity is recorded.</p>
+  <% end %>
+</section>

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

@@ -0,0 +1,34 @@
+<% backlog_summary = cable_backlog_summary(stats) %>
+<% storage_summary = cable_storage_summary(storage_components) %>
+
+<section class="so-dashboard-section" aria-labelledby="so-cable-summary-heading">
+  <header class="so-dashboard-section__header">
+    <h2 id="so-cable-summary-heading" class="so-dashboard-section__title">Summary in selected range</h2>
+  </header>
+
+  <div class="so-stat-cards so-cable-dashboard__summary">
+    <article class="so-card so-metric">
+      <div class="so-card__label">Broadcasts</div>
+      <div class="so-metric__value"><%= number_with_delimiter(stats[:broadcasts_count].to_i) %></div>
+      <div class="so-card__subtitle">selected window</div>
+    </article>
+
+    <article class="so-card so-metric">
+      <div class="so-card__label">Rejection rate</div>
+      <div class="so-metric__value"><%= cable_ratio_percent(stats[:rejection_rate]) %></div>
+      <div class="so-card__subtitle">rejections / broadcasts</div>
+    </article>
+
+    <article class="so-card so-metric">
+      <div class="so-card__label">Message backlog</div>
+      <div class="so-metric__value"><%= backlog_summary[:value] %></div>
+      <div class="so-card__subtitle"><%= backlog_summary[:subtitle] %></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/cable_dashboard/index.html.erb

@@ -0,0 +1,118 @@
+<% content_for :title, "Cable overview" %>
+<% status_class = @cable_dashboard_available ? "so-badge--success" : "so-badge--warning" %>
+
+<div class="so-dashboard so-cable-dashboard">
+  <span class="sr-only">Cable Dashboard</span>
+
+  <div class="so-content__header">
+    <h1>Cable overview</h1>
+
+    <% if @cable_dashboard_available %>
+      <div class="so-cable-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-cable-dashboard__hint">Selected range: <%= cable_range_label(@range) %> · broadcasting names and payloads are never shown.</p>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @cable_dashboard_available %>
+    <form action="<%= request.path %>" method="get" class="so-dashboard-toolbar so-cable-dashboard__range-form">
+      <label for="so-cable-range" class="so-card__label so-filters__label">Range</label>
+      <select id="so-cable-range" name="range" onchange="this.form.submit()">
+        <% SolidObserver::Services::CableStats::RANGES.each_key do |key| %>
+          <option value="<%= key %>" <%= "selected" if key == @range %>><%= cable_range_label(key) %></option>
+        <% end %>
+      </select>
+      <button type="submit" class="so-btn so-btn--refresh">Refresh data</button>
+    </form>
+
+    <%= render "solid_observer/cable_dashboard/summary", stats: @stats, storage_components: @storage_components %>
+
+    <section class="so-card so-card--section" aria-labelledby="so-cable-controls-heading">
+      <header class="so-dashboard-section__header">
+        <h2 id="so-cable-controls-heading" class="so-dashboard-section__title">Operational controls</h2>
+      </header>
+
+      <% cable_controls_available = SolidObserver::Services::CableOperations.available? && @stats&.[](:backlog_available) %>
+      <% cable_backlog_count = @stats&.[](:backlog_count).to_i %>
+
+      <% if cable_controls_available %>
+        <% if cable_backlog_count > 1000 %>
+          <div class="so-cache-control-row">
+            <div class="so-cache-control-row__copy">
+              <h3 class="so-cache-control-row__title">Use the Rake task</h3>
+              <p class="so-cache-control-row__body">More than 1,000 expired/trimmable Solid Cable messages are pending. The UI will not run this trim. Run solid_observer:cable:trim from the server instead.</p>
+              <span class="so-badge so-badge--pill so-badge--warning">
+                <svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true">
+                  <circle r="3" cx="3" cy="3" />
+                </svg>
+                UI trim unavailable
+              </span>
+            </div>
+          </div>
+        <% else %>
+          <div class="so-cache-control-row">
+            <div class="so-cache-control-row__copy">
+              <h3 class="so-cache-control-row__title">Trim expired messages</h3>
+              <p class="so-cache-control-row__body">Removes expired/trimmable Solid Cable messages only. Active messages remain available to Cable.</p>
+              <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" />
+                </svg>
+                Trimmable backlog: <%= cable_backlog_count %>
+              </span>
+            </div>
+
+            <div class="so-cache-control-row__action">
+              <%= button_to "Trim expired messages",
+                    trim_cable_operations_path,
+                    method: :post,
+                    class: "so-btn",
+                    form: {class: "so-form--inline"} %>
+            </div>
+          </div>
+        <% end %>
+      <% else %>
+        <p class="so-dashboard-section__meta so-dashboard-section__meta--idle">Cable controls are unavailable because Solid Cable support is disabled or not detected. No trim was attempted.</p>
+        <span class="so-badge so-badge--pill so-badge--warning">
+          <svg class="so-badge__dot" viewBox="0 0 6 6" aria-hidden="true">
+            <circle r="3" cx="3" cy="3" />
+          </svg>
+          Unavailable
+        </span>
+      <% end %>
+    </section>
+
+    <%= render "solid_observer/cable_dashboard/charts" %>
+
+    <% if @stats&.[](:stability)&.[](:available) %>
+      <section class="so-stability" data-so-zone="cable-stability" aria-labelledby="so-cable-stability-heading">
+        <span class="so-stability__label" id="so-cable-stability-heading">Stability</span>
+        <%= cable_stability_badge(@stats[:stability][:state]) %>
+        <span class="so-stability__detail"><%= cable_stability_detail(@stats[:stability]) %></span>
+        <a href="#so-cable-events-heading" class="so-stability__link">View recent events →</a>
+      </section>
+    <% end %>
+
+    <%= render "solid_observer/cable_dashboard/recent_events", recent_events: @recent_events %>
+  <% else %>
+    <section class="so-card so-card--section" aria-labelledby="so-cable-unavailable-heading">
+      <header class="so-dashboard-section__header">
+        <h2 id="so-cable-unavailable-heading" class="so-dashboard-section__title">Cable 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">Cable dashboard is unavailable because Solid Cable support is disabled or not detected. Metrics are unavailable.</p>
+    </section>
+  <% end %>
+</div>

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

@@ -0,0 +1,40 @@
+<section class="so-dashboard-section" aria-labelledby="so-cache-charts-heading">
+  <header class="so-dashboard-section__header">
+    <h2 id="so-cache-charts-heading" class="so-dashboard-section__title">Activity trends</h2>
+  </header>
+
+  <div class="so-chart-strip">
+    <% if @activity_trends&.[](:available) %>
+      <figure class="so-spark" data-so-spark="cache-hit-rate">
+        <figcaption class="so-spark__label">Hit rate <span data-so-range-copy><%= cache_range_label(@range) %></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(@activity_trends[:hit_rate]) %>"/>
+        </svg>
+        <span class="so-spark__value"><%= cache_ratio_percent(@stats[:hit_rate]) %></span>
+      </figure>
+
+      <figure class="so-spark" data-so-spark="cache-operations">
+        <figcaption class="so-spark__label">Operations total <span data-so-range-copy><%= cache_range_label(@range) %></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(@activity_trends[:operations]) %>"/>
+        </svg>
+        <span class="so-spark__value"><%= number_with_delimiter(@stats[:operations_count].to_i) %></span>
+      </figure>
+
+      <figure class="so-spark" data-so-spark="cache-errors">
+        <figcaption class="so-spark__label">Errors total <span data-so-range-copy><%= cache_range_label(@range) %></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(@activity_trends[:errors]) %>"/>
+        </svg>
+        <span class="so-spark__value"><%= number_with_delimiter(@stats[:errors_count].to_i) %></span>
+      </figure>
+    <% else %>
+      <div class="so-card so-cache-dashboard__chart-empty">
+        <p class="so-dashboard-section__meta so-dashboard-section__meta--empty-range">No chart data in the selected range yet. Summary metrics still use bounded cache stats.</p>
+      </div>
+    <% end %>
+  </div>
+</section>

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

@@ -0,0 +1,34 @@
+<section class="so-card so-card--section" aria-labelledby="so-cache-events-heading">
+  <header class="so-dashboard-section__header">
+    <h2 id="so-cache-events-heading" class="so-dashboard-section__title">Sampled recent events</h2>
+    <span class="so-dashboard-section__meta">debug context only · no raw keys or values</span>
+  </header>
+
+  <% if recent_events.present? %>
+    <table class="so-table so-table--card">
+      <caption class="sr-only">Sampled cache events without raw cache keys or values</caption>
+      <thead>
+        <tr>
+          <th>Event</th>
+          <th>Key digest</th>
+          <th>Outcome</th>
+          <th>Duration</th>
+          <th>Recorded</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% recent_events.each do |event| %>
+          <tr>
+            <td><%= event.event_type.to_s.humanize %></td>
+            <td><span class="so-cache-dashboard__digest"><%= cache_event_digest(event.key_digest) %></span></td>
+            <td><%= cache_event_outcome_badge(event) %></td>
+            <td><%= event.duration ? format_duration(event.duration) : "—" %></td>
+            <td><span title="<%= event.recorded_at.utc.strftime("%Y-%m-%d %H:%M:%S UTC") %>"><%= time_ago_in_words(event.recorded_at) %> ago</span></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <p class="so-dashboard-section__meta so-dashboard-section__meta--empty-events">No sampled cache events in the selected range yet. Slow, sampled, or errored cache operations will appear here.</p>
+  <% end %>
+</section>

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>