solid_stack_web 0.5.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3159278d6dd76fc0e54660ab9c11536a63037815771ff04206adca43b800c4ef
-  data.tar.gz: 05f47e20a15b2f70cbf216713cb4c18da3e3f569b64eb1a271543489fecb95c1
+  metadata.gz: 8466d9dd8464ac19cb839fa2a2396b28472564503cf07779368ba9fb784e1d5d
+  data.tar.gz: b4b3720aa4fb16a595d1670cc6f0f59c99da6ab19fab81aa52dc52119bca6edf
 SHA512:
-  metadata.gz: cdd04812d4cdfa1d3c48ff2a81319f8956b71afee1dded7dbce009797822248e422990f02134fbb4f3c88e6e2e2702c2c91c78d94a6d04e28ebd8d1a2b0022b9
-  data.tar.gz: 431b97295f3682b1512b09ece023c280997560d4b4f065ef742411fddc63275c8257f0d34d02f6bb0589a555c8677d0515301cabfc8b0768465fd42ff6599a54
+  metadata.gz: edb56bb1198b125201acc8bffb09a364c487890eab1eb6f18a6fc5759a3786e8748fcda239a83ef6e232064d538dc0d439f7c07775d022e42384de665b793644
+  data.tar.gz: e0f469d95f9d9fb03e1654110f7e9751859f735aa3402407f022eb75d2c4c6ad1546d398692324a6bb9c079b6f767fc901aa1e714f0d9e1c27a22b613ca2641b

data/README.md

@@ -48,6 +48,10 @@ The dashboard will be available at `/solid_stack` (or whatever path you choose).
 - **Job history view** — paginated list of all finished jobs with class name, queue, duration, and finished-at time; filterable by queue (click a badge), class substring, and time period; CSV export respects active filters
 - **Auto-refresh** — dashboard, jobs, processes, and history views poll automatically; pauses when the tab is hidden or a checkbox is checked; intervals configurable via `dashboard_refresh_interval` and `default_refresh_interval`
 - **Turbo Stream** job discard — removes the row inline without a full page reload
+- **Dark mode** — toggle button in the header switches between light and dark palettes; preference persisted in `localStorage`; respects `prefers-color-scheme` on first visit
+- **Responsive layout** — stats cards, tables, and two-column grids adapt to narrow viewports; tables scroll horizontally rather than overflow; split page headers stack on small screens
+- **Empty-state improvements** — all list views show a contextual title and an actionable hint; search empty states include a "Clear search" link; filters-active history view offers "Clear filters"; processes and recurring tasks explain the next step
+- **Inline notifications** — bulk and single-job actions surface a flash notice; Turbo Stream discard responses inject the message inline without a full page reload; bulk actions report the affected count ("3 jobs discarded")
 
 ### Configuration
 
@@ -114,7 +118,13 @@ Filters are preserved when switching between status tabs (Ready / Scheduled / Ru
 
 ## Solid Cable
 
-_Channel monitoring coming in v0.6.0. Currently shows active message count and distinct channel count on the overview dashboard._
+### Features
+
+- **Dashboard card** — the overview dashboard shows total messages, channels, messages per hour (last 60 minutes), oldest pending message age, and a top-3 channel breakdown by volume
+- **24-hour timeline** — bar chart of message volume on the Cable overview page; each bar represents one hour with a hover tooltip showing the exact count
+- **Channel browser** — `GET /cable` lists all active channels with per-channel message count and last-message timestamp, ordered by most recent activity; supports `?q=` filtering by channel name substring; empty state shown when no messages exist
+- **Per-channel message list** — `GET /cable/channels/:channel_hash` shows a paginated, reverse-chronological list of that channel's `SolidCable::Message` records; each row shows the message ID, a truncated payload preview (120 chars) with the full payload on hover, and a relative sent time with the exact timestamp on hover; supports `?q=` filtering by payload substring; **Purge Channel** button deletes all messages for the channel
+- **Message purge** — "Purge Old" form on the channel browser deletes all messages older than 1, 7, or 30 days; confirmation prompt before any destructive action
 
 ---
 
@@ -137,7 +147,7 @@ _Channel monitoring coming in v0.6.0. Currently shows active message count and d
     "slow_jobs": 7
   },
   "cache": { "entries": 1024, "byte_size": 2097152, "oldest_entry": "2026-05-20T10:00:00Z" },
-  "cable": { "messages": 50, "channels": 3 },
+  "cable": { "messages": 50, "channels": 3, "messages_per_hour": 12, "oldest_message": "2026-05-20T10:00:00Z", "top_channels": { "ActionCable::Channel::Base": 30, "ChatChannel": 15, "NotificationsChannel": 5 } },
   "generated_at": "2026-05-26T10:00:00Z"
 }
 ```

data/app/assets/stylesheets/solid_stack_web/_01_base.css

@@ -12,8 +12,9 @@
   --success: #198754;
   --info:    #0dcaf0;
   --purple:  #6f42c1;
-  --radius:  6px;
-  --shadow:  0 1px 3px rgba(0,0,0,.08);
+  --radius:        6px;
+  --shadow:        0 1px 3px rgba(0,0,0,.08);
+  --surface-hover: #f9fafb;
 }
 
 body {

data/app/assets/stylesheets/solid_stack_web/_02_layout.css

@@ -17,6 +17,27 @@
   height: 52px;
 }
 
+.sqw-header__inner .sqw-nav { flex: 1; }
+
+.sqw-theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--text);
+  line-height: 1;
+  flex-shrink: 0;
+  transition: background 0.1s, border-color 0.1s;
+}
+.sqw-theme-toggle:hover { background: var(--bg); }
+
 .sqw-header__logo {
   font-weight: 700;
   font-size: 16px;
@@ -71,6 +92,13 @@
 }
 
 .sqw-page-header { margin-bottom: 1.25rem; }
+.sqw-page-header--split {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
 .sqw-page-title  { font-size: 20px; font-weight: 600; }
 .sqw-page-title-row { display: flex; align-items: center; gap: 0.5rem; }
 

data/app/assets/stylesheets/solid_stack_web/_04_table.css

@@ -25,7 +25,7 @@
 }
 
 .sqw-table tbody tr:last-child td { border-bottom: none; }
-.sqw-table tbody tr:hover { background: #f9fafb; }
+.sqw-table tbody tr:hover { background: var(--surface-hover); }
 
 .sqw-actions { text-align: right; white-space: nowrap; }
 .sqw-actions form { display: inline; }
@@ -42,3 +42,15 @@
   text-align: center;
   color: var(--muted);
 }
+
+.sqw-empty__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.375rem;
+}
+
+.sqw-empty__hint {
+  font-size: 13px;
+  margin-top: 0.375rem;
+}

data/app/assets/stylesheets/solid_stack_web/_07_dashboard.css

@@ -114,6 +114,7 @@ a.sqw-inline-stat:hover { opacity: 0.7; text-decoration: none; }
   grid-template-columns: 1fr 1fr;
   gap: 0;
   margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
@@ -121,11 +122,19 @@ a.sqw-inline-stat:hover { opacity: 0.7; text-decoration: none; }
   overflow: hidden;
 }
 
+.sqw-timeline-grid--single {
+  grid-template-columns: 1fr;
+}
+
 .sqw-timeline-chart {
   border-top: none;
   color: var(--purple);
 }
 
+.sqw-timeline-chart--cable {
+  color: var(--info);
+}
+
 .sqw-timeline-chart + .sqw-timeline-chart {
   border-left: 1px solid var(--border);
 }
@@ -160,4 +169,43 @@ a.sqw-inline-stat:hover { opacity: 0.7; text-decoration: none; }
   color: var(--muted);
   margin-top: 3px;
   opacity: 0.7;
-}
+}
+
+.sqw-card-list {
+  padding: 0.75rem 1.25rem 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.sqw-card-list__label {
+  display: block;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--muted);
+  margin-bottom: 0.5rem;
+}
+
+.sqw-card-list__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.2rem 0;
+}
+
+.sqw-card-list__name {
+  font-size: 12px;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.sqw-card-list__count {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--info);
+  flex-shrink: 0;
+}

data/app/assets/stylesheets/solid_stack_web/_08_filters.css

@@ -30,6 +30,12 @@
   cursor: pointer;
 }
 
+.sqw-inline-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
 .sqw-period-filter {
   display: flex;
   border: 1px solid var(--border);

data/app/assets/stylesheets/solid_stack_web/_10_responsive.css

@@ -0,0 +1,54 @@
+@media (max-width: 768px) {
+  .sqw-size-grid { grid-template-columns: 1fr; }
+  .sqw-timeline-grid:not(.sqw-timeline-grid--single) { grid-template-columns: 1fr; }
+  .sqw-timeline-chart + .sqw-timeline-chart { border-left: none; border-top: 1px solid var(--border); }
+}
+
+@media (max-width: 640px) {
+  .sqw-main {
+    padding: 1rem;
+  }
+
+  .sqw-page-header--split {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .sqw-table {
+    display: block;
+    overflow-x: auto;
+    border-radius: 0;
+  }
+
+  .sqw-stats-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .sqw-gem-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sqw-truncate {
+    max-width: 160px;
+  }
+
+  .sqw-period-filter {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .sqw-header__inner {
+    padding: 0 1rem;
+    gap: 1rem;
+  }
+
+  .sqw-subnav__inner {
+    padding: 0 1rem;
+    height: auto;
+    min-height: 36px;
+    flex-wrap: wrap;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+}

data/app/assets/stylesheets/solid_stack_web/_12_dark_mode.css

@@ -0,0 +1,34 @@
+[data-theme="dark"] {
+  --bg:            #0d1117;
+  --surface:       #161b22;
+  --border:        #30363d;
+  --text:          #e6edf3;
+  --muted:         #8b949e;
+  --primary:       #58a6ff;
+  --danger:        #f85149;
+  --warning:       #d29922;
+  --success:       #3fb950;
+  --info:          #39c5cf;
+  --purple:        #bc8cff;
+  --shadow:        0 1px 3px rgba(0,0,0,.4);
+  --surface-hover: #1c2128;
+}
+
+[data-theme="dark"] .sqw-badge--ready      { background: rgba(63,185,80,.15);   color: var(--success); }
+[data-theme="dark"] .sqw-badge--scheduled  { background: rgba(57,197,207,.15);  color: var(--info); }
+[data-theme="dark"] .sqw-badge--claimed    { background: rgba(88,166,255,.15);  color: var(--primary); }
+[data-theme="dark"] .sqw-badge--blocked    { background: rgba(210,153,34,.15);  color: var(--warning); }
+[data-theme="dark"] .sqw-badge--failed     { background: rgba(248,81,73,.15);   color: var(--danger); }
+[data-theme="dark"] .sqw-badge--paused     { background: rgba(139,148,158,.15); color: var(--muted); }
+[data-theme="dark"] .sqw-badge--queue      { background: rgba(139,148,158,.15); color: var(--muted); }
+[data-theme="dark"] .sqw-badge--worker     { background: rgba(88,166,255,.15);  color: var(--primary); }
+[data-theme="dark"] .sqw-badge--supervisor { background: rgba(63,185,80,.15);   color: var(--success); }
+[data-theme="dark"] .sqw-badge--dispatcher { background: rgba(210,153,34,.15);  color: var(--warning); }
+
+[data-theme="dark"] .sqw-flash--notice { background: #1b3a2b; color: #3fb950; border-color: #2d6a4f; }
+[data-theme="dark"] .sqw-flash--alert  { background: #3d1118; color: #f85149; border-color: #6a2030; }
+
+[data-theme="dark"] .sqw-theme-toggle {
+  border-color: var(--border);
+  color: var(--text);
+}

data/app/controllers/solid_stack_web/cable/channel_purges_controller.rb

@@ -0,0 +1,8 @@
+module SolidStackWeb
+  class Cable::ChannelPurgesController < ApplicationController
+    def destroy
+      ::SolidCable::Message.where(channel_hash: params[:channel_hash]).delete_all
+      redirect_to cable_path, notice: "All messages for this channel have been purged."
+    end
+  end
+end

data/app/controllers/solid_stack_web/cable/purges_controller.rb

@@ -0,0 +1,9 @@
+module SolidStackWeb
+  class Cable::PurgesController < ApplicationController
+    def destroy
+      days = [params[:older_than].to_i, 1].max
+      ::SolidCable::Message.where("created_at < ?", days.days.ago).delete_all
+      redirect_to cable_path, notice: "Messages older than #{days} #{days == 1 ? "day" : "days"} purged."
+    end
+  end
+end

data/app/controllers/solid_stack_web/cable_controller.rb

@@ -1,8 +1,27 @@
 module SolidStackWeb
   class CableController < ApplicationController
     def index
+      @search         = params[:q].presence
       @total_messages = ::SolidCable::Message.count
-      @channels       = ::SolidCable::Message.distinct.pluck(:channel).sort
+      @channels       = channel_rows
+      @timeline       = CableTimeline.new
+    end
+
+    private
+
+    def channel_rows
+      scope = ::SolidCable::Message
+      if @search
+        scope = scope.where("channel LIKE ?", "%#{::ActiveRecord::Base.sanitize_sql_like(@search)}%")
+      end
+      scope
+        .group(:channel, :channel_hash)
+        .order(Arel.sql("MAX(created_at) DESC"))
+        .pluck(:channel, :channel_hash, Arel.sql("COUNT(*)"), Arel.sql("MAX(created_at)"))
+        .map do |ch, hash, cnt, last_at|
+          last_at = Time.zone.parse(last_at) if last_at.is_a?(String)
+          { channel: ch, channel_hash: hash, message_count: cnt, last_message_at: last_at }
+        end
     end
   end
 end

data/app/controllers/solid_stack_web/cable_messages_controller.rb

@@ -0,0 +1,13 @@
+module SolidStackWeb
+  class CableMessagesController < ApplicationController
+    def index
+      @search = params[:q].presence
+      scope   = ::SolidCable::Message.where(channel_hash: params[:channel_hash])
+      if @search
+        scope = scope.where("payload LIKE ?", "%#{::ActiveRecord::Base.sanitize_sql_like(@search)}%")
+      end
+      @channel_name    = ::SolidCable::Message.where(channel_hash: params[:channel_hash]).pick(:channel) || params[:channel_hash]
+      @pagy, @messages = pagy(scope.order(created_at: :desc))
+    end
+  end
+end

data/app/controllers/solid_stack_web/failed_jobs/selections_controller.rb

@@ -4,16 +4,17 @@ module SolidStackWeb
       before_action :set_ids
 
       def create
+        count = @ids.size
         SolidQueue::FailedExecution.where(id: @ids).each(&:retry)
-        redirect_to failed_jobs_path
+        redirect_to failed_jobs_path, notice: "#{count} #{count == 1 ? "job" : "jobs"} retried."
       rescue => e
         redirect_to failed_jobs_path, alert: "Could not retry jobs: #{e.message}"
       end
 
       def destroy
         job_ids = SolidQueue::FailedExecution.where(id: @ids).pluck(:job_id)
-        SolidQueue::Job.where(id: job_ids).destroy_all
-        redirect_to failed_jobs_path
+        count = SolidQueue::Job.where(id: job_ids).destroy_all.size
+        redirect_to failed_jobs_path, notice: "#{count} #{count == 1 ? "job" : "jobs"} discarded."
       rescue => e
         redirect_to failed_jobs_path, alert: "Could not discard jobs: #{e.message}"
       end

data/app/controllers/solid_stack_web/failed_jobs_controller.rb

@@ -25,6 +25,7 @@ module SolidStackWeb
       @execution = ::SolidQueue::FailedExecution.find(params[:id])
       @execution.job.destroy!
       @executions_remain = ::SolidQueue::FailedExecution.exists?
+      @notice = "Job discarded."
 
       respond_to do |format|
         format.html { redirect_to failed_jobs_path }
@@ -35,7 +36,7 @@ module SolidStackWeb
     def retry
       execution = ::SolidQueue::FailedExecution.find(params[:id])
       execution.retry
-      redirect_to failed_jobs_path
+      redirect_to failed_jobs_path, notice: "Job retried."
     end
 
     private

data/app/controllers/solid_stack_web/jobs/selections_controller.rb

@@ -7,7 +7,7 @@ module SolidStackWeb
 
         ids     = Array(params[:job_ids]).map(&:to_i).reject(&:zero?)
         job_ids = Job::EXECUTION_MODELS[status].where(id: ids).pluck(:job_id)
-        SolidQueue::Job.where(id: job_ids).destroy_all
+        count   = SolidQueue::Job.where(id: job_ids).destroy_all.size
 
         redirect_to jobs_path(
           status: status,
@@ -15,7 +15,7 @@ module SolidStackWeb
           queue:    params[:queue].presence,
           period:   params[:period].presence_in(PERIOD_DURATIONS.keys),
           priority: params[:priority].presence
-        )
+        ), notice: "#{count} #{count == 1 ? "job" : "jobs"} discarded."
       rescue ArgumentError => e
         redirect_to jobs_path(status: params[:status]), alert: e.message
       end

data/app/controllers/solid_stack_web/jobs_controller.rb

@@ -30,6 +30,7 @@ module SolidStackWeb
         @execution = Job::EXECUTION_MODELS[@status].find(params[:id])
         @execution.job.destroy!
         @executions_remain = Job::EXECUTION_MODELS[@status].exists?
+        @notice = "Job discarded."
 
         respond_to do |format|
           format.html { redirect_to jobs_path(status: @status, q: @search, queue: @queue, period: @period, priority: @priority) }
@@ -37,8 +38,9 @@ module SolidStackWeb
         end
       else
         job_ids = filtered_scope.pluck(:job_id)
-        SolidQueue::Job.where(id: job_ids).destroy_all
-        redirect_to jobs_path(status: @status, q: @search, queue: @queue, period: @period, priority: @priority)
+        count = SolidQueue::Job.where(id: job_ids).destroy_all.size
+        redirect_to jobs_path(status: @status, q: @search, queue: @queue, period: @period, priority: @priority),
+                    notice: "#{count} #{count == 1 ? "job" : "jobs"} discarded."
       end
     end
 

data/app/helpers/solid_stack_web/application_helper.rb

@@ -1,5 +1,18 @@
 module SolidStackWeb
   module ApplicationHelper
+    def local_time(time, format: :short, placeholder: "—")
+      return placeholder if time.nil?
+
+      iso = time.utc.iso8601
+      fallback = case format
+      when :long     then time.utc.strftime("%Y-%m-%d %H:%M:%S UTC")
+      when :relative then "#{time_ago_in_words(time)} ago"
+      else                time.utc.strftime("%b %-d %H:%M UTC")
+      end
+      tag.time(fallback, datetime: iso,
+               data: { controller: "timestamp", timestamp_format_value: format })
+    end
+
     def format_cache_value(raw)
       str = raw.to_s.encode("UTF-8", invalid: :replace, undef: :replace, replace: "?")
       parsed = JSON.parse(str)
@@ -42,6 +55,18 @@ module SolidStackWeb
       end
     end
 
+    def cable_messages_timeline_svg(timeline)
+      build_sparkline_svg(
+        Struct.new(:buckets, :max).new(timeline.message_buckets, timeline.message_max),
+        css_class: "sqw-sparkline sqw-sparkline--lg",
+        aria_label: "Cable messages over the last 24 hours"
+      ) do |count, i|
+        hours_ago = CableTimeline::HOURS - 1 - i
+        label = count == 1 ? "message" : "messages"
+        hours_ago.zero? ? "#{count} #{label} this hour" : "#{count} #{label} #{hours_ago}h ago"
+      end
+    end
+
     def throughput_sparkline_svg(sparkline)
       build_sparkline_svg(sparkline, aria_label: "Throughput over the last 12 hours") do |count, i|
         hours_ago = SolidStackWeb::ThroughputSparkline::HOURS - i

data/app/javascript/solid_stack_web/application.js

@@ -4,9 +4,13 @@ import RefreshController from "solid_stack_web/refresh_controller"
 import SearchController from "solid_stack_web/search_controller"
 import SelectionController from "solid_stack_web/selection_controller"
 import SparklineTooltipController from "solid_stack_web/sparkline_tooltip_controller"
+import ThemeController from "solid_stack_web/theme_controller"
+import TimestampController from "solid_stack_web/timestamp_controller"
 
 const application = Application.start()
 application.register("refresh", RefreshController)
 application.register("search", SearchController)
 application.register("selection", SelectionController)
-application.register("sparkline-tooltip", SparklineTooltipController)
+application.register("sparkline-tooltip", SparklineTooltipController)
+application.register("theme", ThemeController)
+application.register("timestamp", TimestampController)

data/app/javascript/solid_stack_web/theme_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["toggle"]
+
+  connect() {
+    const saved = localStorage.getItem("sqw-theme")
+    const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+    this.apply(saved || preferred)
+  }
+
+  toggle() {
+    const current = document.documentElement.getAttribute("data-theme") || "light"
+    const next = current === "dark" ? "light" : "dark"
+    localStorage.setItem("sqw-theme", next)
+    this.apply(next)
+  }
+
+  apply(theme) {
+    document.documentElement.setAttribute("data-theme", theme)
+    if (this.hasToggleTarget) {
+      this.toggleTarget.textContent = theme === "dark" ? "☀" : "☽"
+      this.toggleTarget.setAttribute("aria-label", theme === "dark" ? "Switch to light mode" : "Switch to dark mode")
+    }
+  }
+}

data/app/javascript/solid_stack_web/timestamp_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { format: { type: String, default: "short" } }
+
+  connect() {
+    const dt = this.element.getAttribute("datetime")
+    if (!dt) return
+    const date = new Date(dt)
+    if (isNaN(date.getTime())) return
+    this.element.textContent = this.formatDate(date)
+    if (this.formatValue === "relative") {
+      this.element.title = this.fullFormat(date)
+    }
+  }
+
+  formatDate(date) {
+    switch (this.formatValue) {
+      case "long":
+        return new Intl.DateTimeFormat(undefined, {
+          year: "numeric", month: "2-digit", day: "2-digit",
+          hour: "2-digit", minute: "2-digit", second: "2-digit"
+        }).format(date)
+      case "relative":
+        return this.relativeFormat(date)
+      default:
+        return new Intl.DateTimeFormat(undefined, {
+          month: "short", day: "numeric",
+          hour: "2-digit", minute: "2-digit"
+        }).format(date)
+    }
+  }
+
+  fullFormat(date) {
+    return new Intl.DateTimeFormat(undefined, {
+      year: "numeric", month: "short", day: "numeric",
+      hour: "2-digit", minute: "2-digit", second: "2-digit",
+      timeZoneName: "short"
+    }).format(date)
+  }
+
+  relativeFormat(date) {
+    const diff = date.getTime() - Date.now()
+    const absDiff = Math.abs(diff)
+    const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" })
+
+    const seconds = Math.floor(absDiff / 1000)
+    if (seconds < 60) return rtf.format(diff < 0 ? -seconds : seconds, "second")
+
+    const minutes = Math.floor(absDiff / 60000)
+    if (minutes < 60) return rtf.format(diff < 0 ? -minutes : minutes, "minute")
+
+    const hours = Math.floor(absDiff / 3600000)
+    if (hours < 24) return rtf.format(diff < 0 ? -hours : hours, "hour")
+
+    const days = Math.floor(absDiff / 86400000)
+    return rtf.format(diff < 0 ? -days : days, "day")
+  }
+}

data/app/models/solid_stack_web/cable_stats.rb

@@ -2,9 +2,22 @@ module SolidStackWeb
   class CableStats
     def to_h
       {
-        messages: ::SolidCable::Message.count,
-        channels: ::SolidCable::Message.distinct.count(:channel)
+        messages:          ::SolidCable::Message.count,
+        channels:          ::SolidCable::Message.distinct.count(:channel),
+        messages_per_hour: ::SolidCable::Message.where(created_at: 1.hour.ago..).count,
+        oldest_message:    ::SolidCable::Message.minimum(:created_at),
+        top_channels:      top_channels_by_volume
       }
     end
+
+    private
+
+    def top_channels_by_volume
+      ::SolidCable::Message
+        .group(:channel)
+        .order(Arel.sql("count(*) DESC"))
+        .limit(3)
+        .count
+    end
   end
 end

data/app/models/solid_stack_web/cable_timeline.rb

@@ -0,0 +1,32 @@
+module SolidStackWeb
+  class CableTimeline
+    HOURS = 24
+
+    def message_buckets
+      @message_buckets ||= build_buckets { |rows, from, to| rows.count { |t| t >= from && t < to } }
+    end
+
+    def message_max
+      message_buckets.max || 0
+    end
+
+    private
+
+    def rows
+      @rows ||= begin
+        origin = Time.current - HOURS.hours
+        ::SolidCable::Message.where(created_at: origin..Time.current).pluck(:created_at)
+      end
+    end
+
+    def build_buckets(&block)
+      now    = Time.current
+      origin = now - HOURS.hours
+      HOURS.times.map do |i|
+        from = origin + i.hours
+        to   = origin + (i + 1).hours
+        block.call(rows, from, to)
+      end
+    end
+  end
+end