solid_observer 0.3.0 → 0.4.0

data/app/helpers/solid_observer/application_helper.rb

@@ -1,7 +1,11 @@
 # frozen_string_literal: true
 
+require_relative "dashboard_helper"
+
 module SolidObserver
   module ApplicationHelper
+    include SolidObserver::DashboardHelper
+
     STATUS_COLORS = {
       "completed" => "success",
       "ready" => "success",
@@ -23,6 +27,21 @@ module SolidObserver
       degraded: {label: "Degraded", tone: "warning"},
       critical: {label: "Critical", tone: "danger"}
     }.freeze
+    CACHE_OUTCOME_STATES = {
+      hit: {label: "Hit", tone: "success"},
+      miss: {label: "Miss", tone: "info"},
+      error: {label: "Error", tone: "danger"},
+      recorded: {label: "Recorded", tone: "recorded"}
+    }.freeze
+    CACHE_RANGE_LABELS = {
+      "15m" => "in last 15m",
+      "30m" => "in last 30m",
+      "1h" => "in last hour",
+      "7h" => "in last 7h",
+      "1d" => "in last day",
+      "7d" => "in last 7d",
+      "14d" => "in last 14d"
+    }.freeze
 
     def execution_status(execution)
       ExecutionPresenter.new(execution).status
@@ -41,7 +60,15 @@ module SolidObserver
     def status_badge(status)
       status_str = status.to_s
       color = STATUS_COLORS.fetch(status_str, "default")
-      content_tag(:span, status_str.humanize, class: "so-badge so-badge--#{color}")
+      dot = tag.svg(
+        tag.circle(r: 3, cx: 3, cy: 3),
+        class: "so-badge__dot",
+        viewBox: "0 0 6 6",
+        "aria-hidden": "true"
+      )
+      tag.span(class: "so-badge so-badge--pill so-badge--#{color}") do
+        safe_join([dot, status_str.humanize], " ")
+      end
     end
 
     def duration_with_semantic(value, event_type)
@@ -53,7 +80,15 @@ module SolidObserver
     def mode_badge
       config = SolidObserver.config
       color = config.persistence_mode? ? "info" : "warning"
-      content_tag(:span, config.storage_mode.to_s.capitalize, class: "so-badge so-badge--#{color}")
+      dot = tag.svg(
+        tag.circle(r: 3, cx: 3, cy: 3),
+        class: "so-badge__dot",
+        viewBox: "0 0 6 6",
+        "aria-hidden": "true"
+      )
+      tag.span(class: "so-badge so-badge--pill so-badge--#{color}") do
+        safe_join([dot, config.storage_mode.to_s.capitalize], " ")
+      end
     end
 
     def turbo_frame_tag(id, **options, &block)
@@ -73,14 +108,68 @@ module SolidObserver
     end
 
     def stability_badge(stats)
-      meta = STABILITY_STATES.fetch(stability_state(stats))
-      dot = tag.svg(tag.circle(r: 3, cx: 3, cy: 3),
-        class: "so-badge__dot", viewBox: "0 0 6 6", "aria-hidden": "true")
+      stability_badge_for(stability_state(stats))
+    end
+
+    def cache_stability_badge(state)
+      stability_badge_for(state.to_sym)
+    end
+
+    def cache_ratio_percent(value)
+      number_to_percentage(value.to_f * 100, precision: 1, strip_insignificant_zeros: true)
+    end
+
+    def cache_storage_summary(storage_components)
+      snapshots = Array(storage_components)
+      reason = cache_storage_unavailable_reason(snapshots)
+      return {value: "—", subtitle: "— #{reason}"} if reason
+
+      {
+        value: number_to_human_size(cache_storage_total_bytes(snapshots), precision: 1, significant: false, strip_insignificant_zeros: false),
+        subtitle: "SolidCache + cache observer"
+      }
+    end
+
+    def cache_event_outcome_badge(event)
+      meta = cache_event_outcome_meta(event)
+      dot = tag.svg(
+        tag.circle(r: 3, cx: 3, cy: 3),
+        class: "so-badge__dot",
+        viewBox: "0 0 6 6",
+        "aria-hidden": "true"
+      )
+
       tag.span(class: "so-badge so-badge--pill so-badge--#{meta[:tone]}") do
         safe_join([dot, meta[:label]], " ")
       end
     end
 
+    def cache_event_digest(key_digest, visible_chars: 10)
+      digest = key_digest.to_s
+      return "—" if digest.empty?
+      return digest if digest.length <= visible_chars
+
+      "#{digest.first(visible_chars)}…"
+    end
+
+    def cache_range_label(range_key)
+      CACHE_RANGE_LABELS.fetch(range_key.to_s, "in selected range")
+    end
+
+    def cache_stability_detail(stability)
+      state = (stability || {})[:state]&.to_sym
+      state = :stable unless STABILITY_STATES.key?(state)
+
+      case state
+      when :critical
+        critical_cache_stability_detail(stability)
+      when :degraded
+        degraded_cache_stability_detail(stability)
+      else
+        "No sampled cache errors or slow events in the selected range"
+      end
+    end
+
     def stability_detail(stats)
       failures_24h = stats[:failed_last_24h].to_i
       return "No failures in the last 24h" if failures_24h.zero?
@@ -91,5 +180,65 @@ module SolidObserver
     def latest_failure_phrase(timestamp)
       timestamp ? "#{time_ago_in_words(timestamp)} ago" : "unknown"
     end
+
+    def queue_component_enabled?
+      SolidObserver.config.solid_queue_enabled?
+    end
+
+    def cache_component_enabled?
+      SolidObserver.config.solid_cache_enabled?
+    end
+
+    def dashboard_section_active?(component)
+      current_component = @component.presence || "queue"
+      controller_name == "dashboard" && current_component == component.to_s
+    end
+
+    private
+
+    def stability_badge_for(state)
+      meta = STABILITY_STATES.fetch(state)
+      dot = tag.svg(tag.circle(r: 3, cx: 3, cy: 3),
+        class: "so-badge__dot", viewBox: "0 0 6 6", "aria-hidden": "true")
+      tag.span(class: "so-badge so-badge--pill so-badge--#{meta[:tone]}") do
+        safe_join([dot, meta[:label]], " ")
+      end
+    end
+
+    def critical_cache_stability_detail(stability)
+      detail = pluralize(stability[:error_count].to_i, "sampled cache error")
+      slow_count = stability[:slow_count].to_i
+      detail = "#{detail} and #{pluralize(slow_count, "slow event")}" if slow_count.positive?
+      "#{detail} in the selected range#{cache_stability_latest_suffix(stability[:latest_recorded_at])}"
+    end
+
+    def degraded_cache_stability_detail(stability)
+      detail = pluralize(stability[:slow_count].to_i, "slow sampled cache event")
+      "#{detail} in the selected range#{cache_stability_latest_suffix(stability[:latest_recorded_at])}"
+    end
+
+    def cache_stability_latest_suffix(timestamp)
+      timestamp ? ", latest #{time_ago_in_words(timestamp)} ago" : ""
+    end
+
+    def cache_storage_total_bytes(snapshots)
+      snapshots.sum { |snapshot| snapshot[:db_size_bytes].to_i }
+    end
+
+    def cache_storage_unavailable_reason(snapshots)
+      return "Storage snapshot unavailable" unless snapshots.size == 2
+
+      snapshots.find { |snapshot| !snapshot[:available] }&.[](:unavailable_reason)
+    end
+
+    def cache_event_outcome_meta(event)
+      hit = event.hit
+
+      return CACHE_OUTCOME_STATES.fetch(:error) if event.error_class.present?
+      return CACHE_OUTCOME_STATES.fetch(:hit) if hit == true
+      return CACHE_OUTCOME_STATES.fetch(:miss) if hit == false
+
+      CACHE_OUTCOME_STATES.fetch(:recorded)
+    end
   end
 end

data/app/helpers/solid_observer/dashboard_helper.rb

@@ -9,17 +9,36 @@ module SolidObserver
     def spark_points(series, width: SVG_W, height: SVG_H)
       return "" if series.blank?
 
-      t_min = series.first[:t]
-      t_max = series.last[:t]
-      v_max = [series.max_by { |point| point[:v] }[:v], 1].max
-      time_span = t_max - t_min
-
-      series.map { |point|
-        val = point[:v]
-        point_x = time_span.zero? ? width / 2.0 : ((point[:t] - t_min).to_f / time_span) * (width - 2) + 1
-        point_y = height - 1 - (val.to_f / v_max) * (height - 2)
-        format("%.1f,%.1f", point_x, point_y)
-      }.join(" ")
+      context = build_spark_context(series, width, height)
+      series.map { |point| format_spark_point(point: point, context: context) }.join(" ")
+    end
+
+    def build_spark_context(series, width, height)
+      first_point = series.first
+      last_point = series.last
+      min_time = first_point[:t]
+
+      {
+        min_time: min_time,
+        time_span: last_point[:t] - min_time,
+        max_value: [series.max_by { |point| point[:v] }[:v], 1].max,
+        width: width,
+        height: height,
+        inner_width: width - 2,
+        inner_height: height - 2
+      }
+    end
+
+    def format_spark_point(point:, context:)
+      time_span = context[:time_span]
+      coordinate_x = if time_span.zero?
+        context[:width] / 2.0
+      else
+        ((point[:t] - context[:min_time]).to_f / time_span) * context[:inner_width] + 1
+      end
+
+      coordinate_y = context[:height] - 1 - (point[:v].to_f / context[:max_value]) * context[:inner_height]
+      format("%.1f,%.1f", coordinate_x, coordinate_y)
     end
 
     RANGE_LABELS = {

data/app/models/solid_observer/cache_event.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  class CacheEvent < BaseEvent
+    self.table_name = "solid_observer_cache_events"
+
+    validates :event_type, presence: true
+    validates :key_digest, presence: true
+    validates :recorded_at, presence: true
+
+    scope :errored, -> { where.not(error_class: nil) }
+    scope :slow, ->(threshold = SolidObserver.config.cache_slow_threshold) { where("duration >= ?", threshold) }
+    scope :recent, ->(limit = 10) { order(recorded_at: :desc).limit(limit) }
+  end
+end

data/app/models/solid_observer/cache_metric.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  class CacheMetric < BaseMetric
+    self.table_name = "solid_observer_cache_metrics"
+    clear_validators!
+
+    validates :event_type, presence: true, length: {maximum: 64}
+    validates :period_start, presence: true
+    validates :operations_count, :hits_count, :misses_count, :errors_count,
+      numericality: {only_integer: true, greater_than_or_equal_to: 0}
+    validates :duration_total, numericality: {greater_than_or_equal_to: 0}
+  end
+end

data/app/models/solid_observer/storage_info.rb

@@ -6,16 +6,19 @@ module SolidObserver
 
     MB_TO_BYTES = 1_048_576
     GB_TO_BYTES = 1_073_741_824
+    COMPONENTS = %w[queue_observer cache_observer solid_cache].freeze
 
     validates :db_size_bytes, presence: true, numericality: {only_integer: true, greater_than_or_equal_to: 0}
     validates :event_count, presence: true, numericality: {only_integer: true, greater_than_or_equal_to: 0}
     validates :recorded_at, presence: true
+    validates :component, presence: true, inclusion: {in: COMPONENTS}
 
     scope :recent, ->(limit = 10) { order(recorded_at: :desc).limit(limit) }
     scope :since, ->(time) { where("recorded_at >= ?", time) }
 
-    def self.record_snapshot(db_size:, event_count:)
+    def self.record_snapshot(db_size:, event_count:, component: "queue_observer")
       create!(
+        component: component,
         db_size_bytes: db_size || 0,
         event_count: event_count,
         recorded_at: Time.current

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

@@ -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,73 @@
       .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 {
+      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 {
+      font-size: 0.875rem;
+      color: var(--so-text-subtle);
+      line-height: 1.5;
+    }
+    .so-cache-dashboard__range-form {
+      align-items: center;
+      margin-bottom: 2rem;
+    }
+    .so-cache-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 {
+      max-width: 420px;
+      margin-bottom: 0;
+    }
+    .so-cache-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 +534,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 +546,26 @@
   <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 persistence_mode? && (SolidObserver.config.solid_queue_enabled? || SolidObserver.config.solid_cache_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 +576,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/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>