solid_ops 0.1.0

data/app/controllers/solid_ops/dashboard_controller.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class DashboardController < ApplicationController
+    def index
+      @window = time_window
+      base = SolidOps::Event.where("occurred_at >= ?", @window)
+
+      @total_events = base.count
+      @stats = base.group(:event_type)
+                   .select("event_type, COUNT(*) as event_count, AVG(duration_ms) as avg_duration, MAX(duration_ms) as max_duration")
+                   .index_by(&:event_type)
+
+      @recent_events = base.recent.limit(10)
+      @unique_correlations = base.where.not(correlation_id: nil).distinct.count(:correlation_id)
+    end
+
+    def jobs
+      @window = time_window
+      base = SolidOps::Event.job_events.where("occurred_at >= ?", @window).limit(100_000)
+
+      @enqueued = base.where(event_type: "job.enqueue")
+      @performed = base.where(event_type: "job.perform")
+      @enqueue_count = @enqueued.count
+      @perform_count = @performed.count
+      @avg_perform_ms = @performed.average(:duration_ms)
+      @max_perform_ms = @performed.maximum(:duration_ms)
+      @error_count = @performed.where("metadata LIKE ?", '%"exception"%').where.not("metadata LIKE ?", '%"exception":null%').count
+      @top_jobs = base.where(event_type: "job.perform")
+                      .group(:name)
+                      .select("name, COUNT(*) as event_count, AVG(duration_ms) as avg_duration")
+                      .order("event_count DESC")
+                      .limit(20)
+      @recent = base.recent.limit(50)
+    end
+
+    def cache
+      @window = time_window
+      base = SolidOps::Event.cache_events.where("occurred_at >= ?", @window)
+
+      @reads = base.where(event_type: "cache.read")
+      @writes = base.where(event_type: "cache.write")
+      @deletes = base.where(event_type: "cache.delete")
+      @read_count = @reads.count
+      @write_count = @writes.count
+      @delete_count = @deletes.count
+      @hit_count = @reads.where("metadata LIKE ?", '%"hit":true%').count
+      @miss_count = @read_count - @hit_count
+      @hit_rate = @read_count.positive? ? (@hit_count.to_f / @read_count * 100).round(1) : nil
+      @top_keys = base.group(:name)
+                      .select("name, COUNT(*) as event_count")
+                      .order("event_count DESC")
+                      .limit(20)
+      @recent = base.recent.limit(50)
+    end
+
+    def cable
+      @window = time_window
+      base = SolidOps::Event.cable_events.where("occurred_at >= ?", @window)
+
+      @broadcast_count = base.count
+      @avg_duration = base.average(:duration_ms)
+      @streams = base.group(:name)
+                     .select("name, COUNT(*) as event_count, AVG(duration_ms) as avg_duration")
+                     .order("event_count DESC")
+                     .limit(20)
+      @recent = base.recent.limit(50)
+    end
+
+    private
+
+    def time_window
+      windows = {
+        "5m" => 5.minutes.ago, "15m" => 15.minutes.ago, "30m" => 30.minutes.ago,
+        "1h" => 1.hour.ago, "6h" => 6.hours.ago, "24h" => 24.hours.ago, "7d" => 7.days.ago
+      }
+      windows[params[:window]] || 1.hour.ago
+    end
+  end
+end

data/app/controllers/solid_ops/events_controller.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class EventsController < ApplicationController
+    def index
+      scope = SolidOps::Event.all
+      scope = scope.for_type(params[:event_type])
+      scope = scope.for_correlation(params[:correlation_id])
+      scope = scope.for_request(params[:request_id])
+      scope = scope.for_tenant(params[:tenant_id])
+      scope = scope.for_actor(params[:actor_id])
+      scope = scope.search_name(params[:q])
+      scope = scope.since(parse_time(params[:since]))
+      scope = scope.before(parse_time(params[:before]))
+
+      @events = paginate(scope.recent)
+    end
+
+    def show
+      @event = SolidOps::Event.find(params[:id])
+      @related = SolidOps::Event
+                 .where(correlation_id: @event.correlation_id)
+                 .chronological
+                 .limit(200)
+    end
+
+    private
+
+    def parse_time(val)
+      return nil if val.blank?
+
+      Time.zone.parse(val)
+    rescue StandardError
+      nil
+    end
+  end
+end

data/app/controllers/solid_ops/jobs_controller.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class JobsController < ApplicationController
+    before_action :require_solid_queue!
+
+    def show
+      @job = SolidQueue::Job.find(params[:id])
+    end
+
+    def running
+      base = SolidQueue::Job
+             .joins(:claimed_execution)
+             .includes(:claimed_execution)
+             .order("solid_queue_claimed_executions.created_at ASC")
+      @running_count = base.count
+      @running_jobs  = base.limit(500)
+    end
+
+    def failed
+      scope = SolidQueue::Job
+              .joins(:failed_execution)
+              .includes(:failed_execution)
+              .order("solid_queue_failed_executions.created_at DESC")
+      @failed_jobs = paginate(scope)
+    end
+
+    def retry
+      job = SolidQueue::Job.find(params[:id])
+      job.retry
+      redirect_back fallback_location: failed_jobs_path, notice: "Job #{job.id} queued for retry."
+    end
+
+    def discard
+      job = SolidQueue::Job.find(params[:id])
+      job.failed_execution&.discard
+      redirect_back fallback_location: failed_jobs_path, notice: "Job #{job.id} discarded."
+    end
+
+    def retry_all
+      count = SolidQueue::FailedExecution.count
+      SolidQueue::FailedExecution.find_each(batch_size: 100, &:retry)
+      redirect_to failed_jobs_path, notice: "#{count} failed jobs queued for retry."
+    end
+
+    def discard_all
+      count = SolidQueue::FailedExecution.count
+      SolidQueue::FailedExecution.discard_all_in_batches
+      redirect_to failed_jobs_path, notice: "#{count} failed jobs discarded."
+    end
+
+    def clear_finished
+      count = SolidQueue::Job.where.not(finished_at: nil).count
+      SolidQueue::Job.clear_finished_in_batches
+      redirect_to queues_path, notice: "#{count} finished jobs cleared."
+    end
+
+    def destroy
+      job = SolidQueue::Job.find(params[:id])
+      job.destroy
+      redirect_to queues_path, notice: "Job #{params[:id]} deleted."
+    end
+  end
+end

data/app/controllers/solid_ops/processes_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class ProcessesController < ApplicationController
+    before_action :require_solid_queue!
+
+    def index
+      @processes = SolidQueue::Process.order(created_at: :desc)
+    end
+  end
+end

data/app/controllers/solid_ops/queues_controller.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class QueuesController < ApplicationController
+    before_action :require_solid_queue!
+
+    def index
+      @queues = queue_stats
+      @paused_queues = SolidQueue::Pause.all.map(&:queue_name)
+      @total_jobs = SolidQueue::Job.count
+      @ready_count = SolidQueue::ReadyExecution.count
+      @scheduled_count = SolidQueue::ScheduledExecution.count
+      @claimed_count = SolidQueue::ClaimedExecution.count
+      @failed_count = SolidQueue::FailedExecution.count
+      @blocked_count = SolidQueue::BlockedExecution.count
+      @finished_count = SolidQueue::Job.where.not(finished_at: nil).count
+    end
+
+    def show
+      @queue_name = params[:id]
+      @paused = SolidQueue::Pause.exists?(queue_name: @queue_name)
+      @jobs = paginate(SolidQueue::Job.where(queue_name: @queue_name).order(created_at: :desc))
+      @ready_count = SolidQueue::ReadyExecution.where(queue_name: @queue_name).count
+      @scheduled_count = SolidQueue::ScheduledExecution.joins(:job).where(solid_queue_jobs: { queue_name: @queue_name }).count
+      @claimed_count = SolidQueue::ClaimedExecution.joins(:job).where(solid_queue_jobs: { queue_name: @queue_name }).count
+      @failed_count = SolidQueue::FailedExecution.joins(:job).where(solid_queue_jobs: { queue_name: @queue_name }).count
+    end
+
+    def pause
+      SolidQueue::Pause.create!(queue_name: params[:id])
+      redirect_to queues_path, notice: "Queue '#{params[:id]}' paused."
+    rescue ActiveRecord::RecordNotUnique
+      redirect_to queues_path, notice: "Queue '#{params[:id]}' is already paused."
+    end
+
+    def resume
+      SolidQueue::Pause.where(queue_name: params[:id]).delete_all
+      redirect_to queues_path, notice: "Queue '#{params[:id]}' resumed."
+    end
+
+    private
+
+    def queue_stats
+      queues = SolidQueue::Job.group(:queue_name)
+                              .select("queue_name, COUNT(*) as total_count")
+                              .order(Arel.sql("COUNT(*) DESC"))
+                              .map { |q| { name: q.queue_name, total: q.total_count } }
+
+      paused = SolidQueue::Pause.pluck(:queue_name)
+
+      # Batch count queries to avoid N+1
+      queue_names = queues.map { |q| q[:name] }
+      ready_counts = SolidQueue::ReadyExecution.where(queue_name: queue_names).group(:queue_name).count
+      failed_counts = SolidQueue::FailedExecution.joins(:job)
+                                                 .where(solid_queue_jobs: { queue_name: queue_names })
+                                                 .group("solid_queue_jobs.queue_name").count
+      scheduled_counts = SolidQueue::ScheduledExecution.joins(:job)
+                                                       .where(solid_queue_jobs: { queue_name: queue_names })
+                                                       .group("solid_queue_jobs.queue_name").count
+      claimed_counts = SolidQueue::ClaimedExecution.joins(:job)
+                                                   .where(solid_queue_jobs: { queue_name: queue_names })
+                                                   .group("solid_queue_jobs.queue_name").count
+
+      queues.each do |q|
+        q[:ready] = ready_counts[q[:name]] || 0
+        q[:failed] = failed_counts[q[:name]] || 0
+        q[:scheduled] = scheduled_counts[q[:name]] || 0
+        q[:claimed] = claimed_counts[q[:name]] || 0
+        q[:paused] = paused.include?(q[:name])
+      end
+
+      queues
+    end
+  end
+end

data/app/controllers/solid_ops/recurring_tasks_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class RecurringTasksController < ApplicationController
+    before_action :require_solid_queue!
+
+    def index
+      @tasks = SolidQueue::RecurringTask.all.order(:key)
+    end
+  end
+end

data/app/helpers/solid_ops/application_helper.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module SolidOps
+  module ApplicationHelper
+    def event_pill_class(event_type)
+      base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold ring-1 ring-inset"
+      case event_type.to_s
+      when /^cable\./  then "#{base} bg-purple-50 text-purple-700 ring-purple-600/20"
+      when /^job\./    then "#{base} bg-blue-50 text-blue-700 ring-blue-700/10"
+      when /^cache\./  then "#{base} bg-emerald-50 text-emerald-700 ring-emerald-600/20"
+      else "#{base} bg-gray-50 text-gray-600 ring-gray-500/10"
+      end
+    end
+
+    def status_pill(status)
+      base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold ring-1 ring-inset"
+      colors = {
+        "ready" => "bg-yellow-50 text-yellow-800 ring-yellow-600/20",
+        "claimed" => "bg-blue-50 text-blue-700 ring-blue-700/10",
+        "failed" => "bg-red-50 text-red-700 ring-red-600/10",
+        "blocked" => "bg-orange-50 text-orange-700 ring-orange-600/20",
+        "scheduled" => "bg-indigo-50 text-indigo-700 ring-indigo-700/10",
+        "finished" => "bg-emerald-50 text-emerald-700 ring-emerald-600/20",
+        "paused" => "bg-gray-50 text-gray-600 ring-gray-500/10"
+      }
+      "#{base} #{colors.fetch(status.to_s, "bg-gray-50 text-gray-600 ring-gray-500/10")}"
+    end
+
+    def format_duration(ms)
+      return "—" unless ms
+
+      if ms < 1
+        format("%.3fms", ms)
+      elsif ms < 1000
+        format("%.1fms", ms)
+      else
+        format("%.2fs", ms / 1000.0)
+      end
+    end
+
+    def format_time(t)
+      t&.strftime("%H:%M:%S.%L")
+    end
+
+    def format_datetime(t)
+      t&.strftime("%Y-%m-%d %H:%M:%S")
+    end
+
+    def format_bytes(bytes)
+      return "—" unless bytes
+
+      if bytes < 1024
+        "#{bytes} B"
+      elsif bytes < 1024 * 1024
+        format("%.1f KB", bytes / 1024.0)
+      elsif bytes < 1024 * 1024 * 1024
+        format("%.1f MB", bytes / (1024.0 * 1024))
+      else
+        format("%.2f GB", bytes / (1024.0 * 1024 * 1024))
+      end
+    end
+
+    def solid_component_available?(component)
+      case component
+      when :queue then defined?(SolidQueue)
+      when :cache then defined?(SolidCache)
+      when :cable then defined?(SolidCable)
+      else false
+      end
+    end
+
+    def time_ago_short(time)
+      return "—" unless time
+
+      time = Time.zone.parse(time) if time.is_a?(String)
+      seconds = (Time.current - time).to_i
+      case seconds
+      when 0..59 then "#{seconds}s ago"
+      when 60..3599 then "#{seconds / 60}m ago"
+      when 3600..86_399 then "#{seconds / 3600}h ago"
+      else "#{seconds / 86_400}d ago"
+      end
+    end
+
+    def duration_since(time)
+      return "—" unless time
+
+      seconds = (Time.current - time).to_i
+      if seconds < 60
+        "#{seconds}s"
+      elsif seconds < 3600
+        "#{seconds / 60}m #{seconds % 60}s"
+      elsif seconds < 86_400
+        "#{seconds / 3600}h #{(seconds % 3600) / 60}m"
+      else
+        "#{seconds / 86_400}d #{(seconds % 86_400) / 3600}h"
+      end
+    end
+
+    # Pagination page-number list with ellipsis gaps
+    def pages_to_show(current, total)
+      return (1..total).to_a if total <= 7
+
+      pages = [1]
+      pages << :gap if current > 3
+      ((current - 1)..(current + 1)).each { |p| pages << p if p > 1 && p < total }
+      pages << :gap if current < total - 2
+      pages << total
+      pages.uniq
+    end
+  end
+end

data/app/jobs/solid_ops/purge_job.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class PurgeJob < ActiveJob::Base
+    queue_as :default
+
+    def perform
+      retention = SolidOps.configuration.retention_period
+      return unless retention
+
+      cutoff = retention.ago
+      deleted = SolidOps::Event.purge!(before: cutoff)
+      Rails.logger.info { "[SolidOps] Purged #{deleted} events older than #{cutoff}" }
+    end
+  end
+end

data/app/models/solid_ops/event.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module SolidOps
+  class Event < ActiveRecord::Base
+    self.table_name = "solid_ops_events"
+
+    scope :recent, -> { order(occurred_at: :desc) }
+    scope :chronological, -> { order(occurred_at: :asc) }
+    scope :for_type, ->(t) { t.present? ? where(event_type: t) : all }
+    scope :for_correlation, ->(cid) { cid.present? ? where(correlation_id: cid) : all }
+    scope :for_request, ->(rid) { rid.present? ? where(request_id: rid) : all }
+    scope :for_tenant, ->(tid) { tid.present? ? where(tenant_id: tid) : all }
+    scope :for_actor, ->(aid) { aid.present? ? where(actor_id: aid) : all }
+    scope :search_name, ->(q) { q.present? ? where("name LIKE ?", "%#{sanitize_sql_like(q)}%") : all }
+    scope :since, ->(t) { t.present? ? where("occurred_at >= ?", t) : all }
+    scope :before, ->(t) { t.present? ? where("occurred_at <= ?", t) : all }
+    scope :older_than, ->(t) { where("occurred_at < ?", t) }
+
+    # Component scopes
+    scope :cable_events, -> { where("event_type LIKE ?", "cable.%") }
+    scope :job_events, -> { where("event_type LIKE ?", "job.%") }
+    scope :cache_events, -> { where("event_type LIKE ?", "cache.%") }
+
+    def self.purge!(before:)
+      older_than(before).delete_all
+    end
+
+    def self.stats_since(since = 1.hour.ago)
+      where("occurred_at >= ?", since)
+        .group(:event_type)
+        .select("event_type, COUNT(*) as event_count, AVG(duration_ms) as avg_duration")
+    end
+  end
+end

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

@@ -0,0 +1,118 @@
+<% # Shared layout wrapper for all SolidOps pages %>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>SolidOps<%= " – #{content_for(:title)}" if content_for?(:title) %></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <%= stylesheet_link_tag "solid_ops/application", media: "all" %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+<div class="solid-ops">
+
+<%= render "solid_ops/shared/nav" %>
+
+<main class="min-h-[calc(100vh-8rem)]">
+  <% if flash[:notice] %>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4 animate-slide-in">
+      <div class="flex items-center gap-3 rounded-lg bg-emerald-50 border border-emerald-200 px-4 py-3 text-emerald-800 text-sm shadow-sm">
+        <svg class="w-5 h-5 text-emerald-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
+        <%= flash[:notice] %>
+      </div>
+    </div>
+  <% end %>
+  <% if flash[:alert] %>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4 animate-slide-in">
+      <div class="flex items-center gap-3 rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-red-800 text-sm shadow-sm">
+        <svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
+        <%= flash[:alert] %>
+      </div>
+    </div>
+  <% end %>
+
+  <%= yield %>
+</main>
+
+<footer class="border-t border-gray-200 mt-12 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
+    <div class="flex items-center gap-2 text-xs text-gray-400">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
+      <span>SolidOps &mdash; Rails-native observability for the Solid Trifecta</span>
+    </div>
+    <span class="text-[10px] text-gray-300 font-mono">v<%= SolidOps::VERSION %></span>
+  </div>
+</footer>
+</div><!-- /.solid-ops -->
+<script>
+(function(){
+  // ── Client-side table search ──
+  document.querySelectorAll('[data-solid-search]').forEach(function(input){
+    var tid = input.dataset.solidSearch;
+    var table = document.getElementById(tid);
+    if(!table) return;
+    input.addEventListener('input', function(){
+      var term = this.value.toLowerCase();
+      var rows = table.querySelectorAll('tbody tr');
+      var count = 0;
+      rows.forEach(function(row){
+        var match = !term || row.textContent.toLowerCase().indexOf(term) !== -1;
+        row.style.display = match ? '' : 'none';
+        if(match) count++;
+      });
+      var el = document.querySelector('[data-solid-count="'+tid+'"]');
+      if(el) el.textContent = count;
+    });
+  });
+
+  // ── Client-side column sorting ──
+  document.querySelectorAll('th[data-sort]').forEach(function(th){
+    th.style.cursor = 'pointer';
+    th.style.userSelect = 'none';
+    var arrow = document.createElement('span');
+    arrow.className = 'so-sort';
+    arrow.textContent = ' \u21C5';
+    arrow.style.opacity = '0.3';
+    arrow.style.fontSize = '10px';
+    th.appendChild(arrow);
+
+    th.addEventListener('click', function(){
+      var table = th.closest('table');
+      var tbody = table.querySelector('tbody');
+      var rows = Array.from(tbody.querySelectorAll('tr'));
+      var idx = Array.from(th.parentNode.children).indexOf(th);
+      var type = th.dataset.sort;
+      var asc = th.dataset.dir !== 'asc';
+
+      th.parentNode.querySelectorAll('th[data-sort]').forEach(function(h){
+        h.dataset.dir = '';
+        var a = h.querySelector('.so-sort');
+        if(a){ a.textContent = ' \u21C5'; a.style.opacity = '0.3'; }
+      });
+
+      th.dataset.dir = asc ? 'asc' : 'desc';
+      arrow.textContent = asc ? ' \u2191' : ' \u2193';
+      arrow.style.opacity = '0.7';
+
+      rows.sort(function(a,b){
+        var av = a.children[idx] ? a.children[idx].textContent.trim() : '';
+        var bv = b.children[idx] ? b.children[idx].textContent.trim() : '';
+        if(type === 'num'){
+          av = parseFloat(av.replace(/[^0-9.\-]/g,'')) || 0;
+          bv = parseFloat(bv.replace(/[^0-9.\-]/g,'')) || 0;
+        } else {
+          av = av.toLowerCase();
+          bv = bv.toLowerCase();
+        }
+        return av < bv ? (asc?-1:1) : av > bv ? (asc?1:-1) : 0;
+      });
+
+      rows.forEach(function(r){ tbody.appendChild(r); });
+    });
+  });
+})();
+</script>
+</body></html>

data/app/views/solid_ops/cache_entries/index.html.erb

@@ -0,0 +1,86 @@
+
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 animate-fade-in">
+  <div class="flex items-center justify-between mb-8">
+    <div>
+      <h1 class="text-2xl font-extrabold text-gray-900 tracking-tight">Cache Management</h1>
+      <p class="text-sm text-gray-500 mt-1">Solid Cache &mdash; browse and manage cache entries</p>
+    </div>
+    <% if @total_entries > 0 %>
+      <%= form_tag(solid_ops.clear_all_cache_entries_path, method: :post, class: "inline") do %>
+        <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-red-700 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors ring-1 ring-inset ring-red-600/10"
+                onclick="return confirm('Clear ALL <%= @total_entries %> cache entries? This cannot be undone.')">
+          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+          Clear All Cache
+        </button>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
+    <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+      <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-400 to-emerald-600"></div>
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Total Entries</p>
+      <p class="text-3xl font-extrabold font-mono mt-2"><%= number_with_delimiter(@total_entries) %></p>
+    </div>
+    <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+      <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-blue-600"></div>
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Storage Used</p>
+      <p class="text-3xl font-extrabold font-mono mt-2 text-blue-600"><%= format_bytes(@total_bytes) %></p>
+    </div>
+    <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
+      <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-400 to-amber-600"></div>
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Avg Entry Size</p>
+      <p class="text-3xl font-extrabold font-mono mt-2 text-emerald-600"><%= @total_entries > 0 ? format_bytes(@total_bytes / @total_entries) : "—" %></p>
+    </div>
+  </div>
+
+  <!-- Entries table -->
+  <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+    <% if @entries.any? %>
+      <div style="padding: 0.625rem 1rem; border-bottom: 1px solid rgb(243 244 246);">
+        <div style="position: relative; display: inline-block;">
+          <svg style="position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: #9ca3af; pointer-events: none;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+          <input type="text" data-solid-search="cache-table" placeholder="Filter cache keys…" style="padding: 0.375rem 0.75rem 0.375rem 2rem; font-size: 0.875rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; width: 18rem; background: rgba(249,250,251,0.5);">
+        </div>
+      </div>
+      <table id="cache-table" class="min-w-full divide-y divide-gray-100">
+        <thead>
+          <tr class="bg-gray-50">
+            <th class="px-6 py-3 text-left text-[11px] font-bold text-gray-500 uppercase tracking-wider" data-sort="text">Key</th>
+            <th class="px-6 py-3 text-left text-[11px] font-bold text-gray-500 uppercase tracking-wider" data-sort="num">Size</th>
+            <th class="px-6 py-3 text-left text-[11px] font-bold text-gray-500 uppercase tracking-wider" data-sort="text">Created</th>
+            <th class="px-6 py-3 text-right text-[11px] font-bold text-gray-500 uppercase tracking-wider">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-50">
+          <% @entries.each do |entry| %>
+            <tr class="hover:bg-gray-50/80 transition-colors group" style="cursor: pointer;" onclick="window.location='<%= solid_ops.cache_entry_path(entry.id) %>'">
+              <td class="px-6 py-3.5 font-mono text-xs text-blue-600 max-w-md truncate"><%= entry.key %></td>
+              <td class="px-6 py-3.5 font-mono text-xs text-gray-500"><%= format_bytes(entry.byte_size) %></td>
+              <td class="px-6 py-3.5 font-mono text-xs text-gray-500"><%= time_ago_short(entry.created_at) %></td>
+              <td class="px-6 py-3.5 text-right" onclick="event.stopPropagation()">
+                <%= form_tag(solid_ops.cache_entry_path(entry.id), method: :delete, class: "inline") do %>
+                  <button type="submit" class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium text-red-700 bg-red-50 border border-red-200 rounded-md hover:bg-red-100 transition-colors ring-1 ring-inset ring-red-600/10"
+                          onclick="if(!confirm('Delete this cache entry?')){event.preventDefault();}">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+                    Delete
+                  </button>
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+      <%= render "solid_ops/shared/pagination", current_page: @current_page, total_pages: @total_pages, total_count: @total_count %>
+    <% else %>
+      <div class="py-20 text-center">
+        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gray-100 mb-4">
+          <svg class="h-7 w-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
+        </div>
+        <p class="text-sm text-gray-500 font-medium">Cache is empty</p>
+        <p class="text-xs text-gray-400 mt-1">Cache entries will appear here when your app writes to the cache</p>
+      </div>
+    <% end %>
+  </div>
+</div>
+