solid_stack_web 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d16b6a549b38e32fd792d4bff55d990ae5a80d458dcbc47df54759c947536c6
-  data.tar.gz: 2ff73287be32fa8a3d3a1089ebd71656bed2ce80742cd11296a3458e0ebeaae3
+  metadata.gz: 8466d9dd8464ac19cb839fa2a2396b28472564503cf07779368ba9fb784e1d5d
+  data.tar.gz: b4b3720aa4fb16a595d1670cc6f0f59c99da6ab19fab81aa52dc52119bca6edf
 SHA512:
-  metadata.gz: bd5aefe87facc4b0ac5f9c2265fa714d6d70127b4c785fc450a210dbcb0958bd03b7aef09de7b0555d4b54de7defe702a464c296357fdb49411b5b532dce341d
-  data.tar.gz: 8a0527f29907807f16711e72bbfc13833a0be47481d4e540e1ad1a324dad63eb73da4c5f5c0043bfcdfd6ae458d5163af66e2e350fd9c5ecd76fe13c70b35913
+  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
 

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/_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/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)

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/views/layouts/solid_stack_web/application.html.erb

@@ -10,7 +10,7 @@
   <%= inline_styles %>
   <%= javascript_importmap_tags "solid_stack_web" %>
 </head>
-<body>
+<body data-controller="theme">
   <header class="sqw-header">
     <div class="sqw-header__inner">
       <%= link_to "Solid Stack", root_path, class: "sqw-header__logo" %>
@@ -22,6 +22,8 @@
         <%= link_to "Cable", cable_path,
               class: "sqw-nav__link#{" sqw-nav__link--active" if current_section == :cable}" %>
       </nav>
+      <button class="sqw-theme-toggle" aria-label="Switch to dark mode"
+              data-theme-target="toggle" data-action="theme#toggle">☽</button>
     </div>
   </header>
 
@@ -67,9 +69,11 @@
   <% end %>
 
   <main class="sqw-main">
-    <% flash.each do |type, message| %>
-      <div class="sqw-flash sqw-flash--<%= type %>"><%= message %></div>
-    <% end %>
+    <div id="sqw-flash-container">
+      <% flash.each do |type, message| %>
+        <div class="sqw-flash sqw-flash--<%= type %>"><%= message %></div>
+      <% end %>
+    </div>
     <%= yield %>
   </main>
 </body>

data/app/views/solid_stack_web/cable/index.html.erb

@@ -62,13 +62,19 @@
             <%= link_to channel[:channel], cable_channel_messages_path(channel[:channel_hash]), class: "sqw-link" %>
           </td>
           <td><%= channel[:message_count] %></td>
-          <td class="sqw-muted"><%= channel[:last_message_at]&.strftime("%b %d %H:%M") %></td>
+          <td class="sqw-muted"><%= local_time(channel[:last_message_at]) %></td>
         </tr>
       <% end %>
     </tbody>
   </table>
 <% else %>
   <div class="sqw-empty">
-    <p><%= @search.present? ? "No channels matching &ldquo;#{@search}&rdquo;.".html_safe : "No cable messages." %></p>
+    <% if @search.present? %>
+      <p class="sqw-empty__title">No channels matching &ldquo;<%= @search %>&rdquo;</p>
+      <p class="sqw-empty__hint"><%= link_to "Clear search", cable_path %></p>
+    <% else %>
+      <p class="sqw-empty__title">No cable messages</p>
+      <p class="sqw-empty__hint">Messages will appear here once clients connect and broadcast over Action Cable.</p>
+    <% end %>
   </div>
 <% end %>

data/app/views/solid_stack_web/cable_messages/index.html.erb

@@ -35,8 +35,8 @@
           <td class="sqw-monospace sqw-truncate" title="<%= message.payload %>">
             <%= truncate(message.payload.to_s, length: 120) %>
           </td>
-          <td class="sqw-muted" title="<%= message.created_at.strftime("%b %d, %Y %H:%M:%S %Z") %>">
-            <%= time_ago_in_words(message.created_at) %> ago
+          <td class="sqw-muted">
+            <%= local_time(message.created_at, format: :relative) %>
           </td>
         </tr>
       <% end %>
@@ -45,6 +45,12 @@
   <%== @pagy.series_nav if @pagy.pages > 1 %>
 <% else %>
   <div class="sqw-empty">
-    <p><%= @search.present? ? "No messages matching &ldquo;#{@search}&rdquo;.".html_safe : "No messages for this channel." %></p>
+    <% if @search.present? %>
+      <p class="sqw-empty__title">No messages matching &ldquo;<%= @search %>&rdquo;</p>
+      <p class="sqw-empty__hint"><%= link_to "Clear search", cable_channel_messages_path(params[:channel_hash]) %></p>
+    <% else %>
+      <p class="sqw-empty__title">No messages for this channel</p>
+      <p class="sqw-empty__hint">Messages may have been purged or the channel has gone quiet. <%= link_to "Back to channels →", cable_path %></p>
+    <% end %>
   </div>
 <% end %>

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

@@ -46,7 +46,7 @@
             <%= link_to entry.key, cache_entry_path(entry), class: "sqw-link" %>
           </td>
           <td><%= number_to_human_size(entry.byte_size) %></td>
-          <td class="sqw-muted"><%= entry.created_at.strftime("%b %d %H:%M") %></td>
+          <td class="sqw-muted"><%= local_time(entry.created_at) %></td>
           <td class="sqw-actions">
             <%= button_to "Delete",
                   cache_entry_path(entry, q: @search, column: @sort["column"], direction: @sort["direction"]),
@@ -61,6 +61,12 @@
   <%== @pagy.series_nav if @pagy.pages > 1 %>
 <% else %>
   <div class="sqw-empty">
-    <p><%= @search.present? ? "No entries matching &ldquo;#{@search}&rdquo;.".html_safe : "No cache entries." %></p>
+    <% if @search.present? %>
+      <p class="sqw-empty__title">No entries matching &ldquo;<%= @search %>&rdquo;</p>
+      <p class="sqw-empty__hint"><%= link_to "Clear search", cache_entries_path %></p>
+    <% else %>
+      <p class="sqw-empty__title">No cache entries</p>
+      <p class="sqw-empty__hint">Entries will appear here once your application writes to the cache.</p>
+    <% end %>
   </div>
 <% end %>

data/app/views/solid_stack_web/cache_entries/show.html.erb

@@ -21,7 +21,7 @@
   </div>
   <div class="sqw-detail__row">
     <dt>Created</dt>
-    <dd class="sqw-muted"><%= @entry.created_at.strftime("%b %d, %Y %H:%M:%S %Z") %></dd>
+    <dd class="sqw-muted"><%= local_time(@entry.created_at, format: :long) %></dd>
   </div>
 </dl>
 

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

@@ -87,7 +87,7 @@
       <% if @cache_stats[:oldest_entry] %>
         <div class="sqw-inline-stat sqw-inline-stat--cache">
           <span class="sqw-inline-stat__label">Oldest</span>
-          <span class="sqw-inline-stat__value sqw-inline-stat__value--sm" title="<%= @cache_stats[:oldest_entry].strftime("%b %d, %Y %H:%M") %>"><%= time_ago_in_words(@cache_stats[:oldest_entry]) %></span>
+          <span class="sqw-inline-stat__value sqw-inline-stat__value--sm"><%= local_time(@cache_stats[:oldest_entry], format: :relative) %></span>
         </div>
       <% end %>
     </div>
@@ -114,7 +114,7 @@
       <% if @cable_stats[:oldest_message] %>
         <div class="sqw-inline-stat sqw-inline-stat--cable">
           <span class="sqw-inline-stat__label">Oldest</span>
-          <span class="sqw-inline-stat__value sqw-inline-stat__value--sm" title="<%= @cable_stats[:oldest_message].strftime("%b %d, %Y %H:%M") %>"><%= time_ago_in_words(@cable_stats[:oldest_message]) %></span>
+          <span class="sqw-inline-stat__value sqw-inline-stat__value--sm"><%= local_time(@cable_stats[:oldest_message], format: :relative) %></span>
         </div>
       <% end %>
     </div>

data/app/views/solid_stack_web/failed_jobs/destroy.turbo_stream.erb

@@ -1,3 +1,6 @@
+<%= turbo_stream.prepend "sqw-flash-container",
+      partial: "solid_stack_web/shared/flash",
+      locals: { type: "notice", message: @notice } %>
 <% if @executions_remain %>
   <%= turbo_stream.remove "execution_#{@execution.id}" %>
 <% else %>

data/app/views/solid_stack_web/failed_jobs/index.html.erb

@@ -50,7 +50,7 @@
               <td class="sqw-monospace"><%= link_to execution.job.class_name, failed_job_path(execution) %></td>
               <td><span class="sqw-badge sqw-badge--queue"><%= execution.job.queue_name %></span></td>
               <td class="sqw-muted sqw-truncate" title="<%= execution.exception_class %>: <%= execution.message %>"><%= execution.exception_class %></td>
-              <td class="sqw-muted"><%= execution.created_at.strftime("%b %d %H:%M") %></td>
+              <td class="sqw-muted"><%= local_time(execution.created_at) %></td>
               <td class="sqw-actions">
                 <%= button_to "Retry", retry_failed_job_path(execution),
                       method: :post, class: "sqw-btn sqw-btn--sm" %>
@@ -66,7 +66,8 @@
     </div>
   <% else %>
     <div class="sqw-empty">
-      <p>No failed jobs.</p>
+      <p class="sqw-empty__title">No failed jobs</p>
+      <p class="sqw-empty__hint">All clear — your jobs are running without errors.</p>
     </div>
   <% end %>
 </div>

data/app/views/solid_stack_web/failed_jobs/show.html.erb

@@ -29,7 +29,7 @@
       <dd class="sqw-monospace sqw-truncate" title="<%= @execution.job.active_job_id %>"><%= @execution.job.active_job_id.presence || "—" %></dd>
 
       <dt>Failed At</dt>
-      <dd class="sqw-monospace"><%= @execution.created_at.strftime("%Y-%m-%d %H:%M:%S UTC") %></dd>
+      <dd class="sqw-monospace"><%= local_time(@execution.created_at, format: :long) %></dd>
 
       <dt>Error</dt>
       <dd class="sqw-monospace"><%= @execution.exception_class %></dd>

data/app/views/solid_stack_web/history/index.html.erb

@@ -61,7 +61,7 @@
                     class: "sqw-badge sqw-badge--queue" %>
             </td>
             <td class="sqw-monospace"><%= format_duration(job.finished_at - job.created_at) %></td>
-            <td class="sqw-muted"><%= job.finished_at.strftime("%b %d %H:%M:%S") %></td>
+            <td class="sqw-muted"><%= local_time(job.finished_at) %></td>
           </tr>
         <% end %>
       </tbody>
@@ -70,7 +70,13 @@
   </div>
 <% else %>
   <div class="sqw-empty">
-    <p>No finished jobs found.</p>
+    <% if @search.present? || @queue.present? || @period.present? %>
+      <p class="sqw-empty__title">No finished jobs match your filters</p>
+      <p class="sqw-empty__hint"><%= link_to "Clear filters", history_path %></p>
+    <% else %>
+      <p class="sqw-empty__title">No finished jobs yet</p>
+      <p class="sqw-empty__hint">Completed jobs will appear here once workers process them.</p>
+    <% end %>
   </div>
 <% end %>
 <% end %>

data/app/views/solid_stack_web/jobs/_empty.html.erb

@@ -1,3 +1,20 @@
 <div id="sqw-empty" class="sqw-empty">
-  <p>No <strong><%= @status %></strong> jobs.</p>
-</div>
+  <% if @search.present? %>
+    <p class="sqw-empty__title">No <strong><%= @status %></strong> jobs matching &ldquo;<%= @search %>&rdquo;</p>
+    <p class="sqw-empty__hint"><%= link_to "Clear search", jobs_path(status: @status) %></p>
+  <% else %>
+    <p class="sqw-empty__title">No <strong><%= @status %></strong> jobs</p>
+    <p class="sqw-empty__hint">
+      <% case @status %>
+      <% when "ready" %>
+        Jobs will appear here once they are enqueued and ready to be picked up.
+      <% when "scheduled" %>
+        No jobs are scheduled to run in the future.
+      <% when "claimed" %>
+        No jobs are currently being processed by a worker.
+      <% when "blocked" %>
+        No jobs are blocked by concurrency controls.
+      <% end %>
+    </p>
+  <% end %>
+</div>

data/app/views/solid_stack_web/jobs/destroy.turbo_stream.erb

@@ -1,3 +1,6 @@
+<%= turbo_stream.prepend "sqw-flash-container",
+      partial: "solid_stack_web/shared/flash",
+      locals: { type: "notice", message: @notice } %>
 <% if @executions_remain %>
   <%= turbo_stream.remove "execution_#{@execution.id}" %>
 <% else %>

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

@@ -121,9 +121,9 @@
               <td class="sqw-monospace"><%= link_to execution.job.class_name, job_path(execution.id, status: @status), data: { turbo_frame: "_top" } %></td>
               <td><span class="sqw-badge sqw-badge--queue"><%= execution.job.queue_name %></span></td>
               <td><%= execution.job.priority %></td>
-              <td class="sqw-muted"><%= execution.created_at.strftime("%b %d %H:%M") %></td>
+              <td class="sqw-muted"><%= local_time(execution.created_at) %></td>
               <% if @status == "scheduled" %>
-                <td id="scheduled_at_<%= execution.id %>" class="sqw-muted"><%= execution.scheduled_at&.strftime("%b %d %H:%M") %></td>
+                <td id="scheduled_at_<%= execution.id %>" class="sqw-muted"><%= local_time(execution.scheduled_at) %></td>
               <% end %>
               <td class="sqw-actions">
                 <% if @status == "scheduled" %>

data/app/views/solid_stack_web/jobs/show.html.erb

@@ -36,17 +36,17 @@
 
       <% if @status == "blocked" %>
         <dt>Blocked Until</dt>
-        <dd class="sqw-monospace"><%= @execution.expires_at ? @execution.expires_at.strftime("%Y-%m-%d %H:%M:%S UTC") : "—" %></dd>
+        <dd class="sqw-monospace"><%= local_time(@execution.expires_at, format: :long) %></dd>
       <% end %>
 
       <dt>Enqueued At</dt>
-      <dd class="sqw-monospace"><%= @execution.job.created_at.strftime("%Y-%m-%d %H:%M:%S UTC") %></dd>
+      <dd class="sqw-monospace"><%= local_time(@execution.job.created_at, format: :long) %></dd>
 
       <dt>Scheduled At</dt>
-      <dd class="sqw-monospace"><%= @execution.job.scheduled_at ? @execution.job.scheduled_at.strftime("%Y-%m-%d %H:%M:%S UTC") : "—" %></dd>
+      <dd class="sqw-monospace"><%= local_time(@execution.job.scheduled_at, format: :long) %></dd>
 
       <dt>Finished At</dt>
-      <dd class="sqw-monospace"><%= @execution.job.finished_at ? @execution.job.finished_at.strftime("%Y-%m-%d %H:%M:%S UTC") : "—" %></dd>
+      <dd class="sqw-monospace"><%= local_time(@execution.job.finished_at, format: :long) %></dd>
     </dl>
   </div>
 

data/app/views/solid_stack_web/processes/index.html.erb

@@ -22,14 +22,15 @@
           <td class="sqw-monospace"><%= process.name %></td>
           <td class="sqw-monospace"><%= process.pid %></td>
           <td class="sqw-muted"><%= process.hostname %></td>
-          <td class="sqw-muted"><%= process.last_heartbeat_at&.strftime("%b %d %H:%M:%S") %></td>
+          <td class="sqw-muted"><%= local_time(process.last_heartbeat_at) %></td>
         </tr>
       <% end %>
     </tbody>
   </table>
 <% else %>
   <div class="sqw-empty">
-    <p>No active processes.</p>
+    <p class="sqw-empty__title">No active processes</p>
+    <p class="sqw-empty__hint">Start a Solid Queue worker to begin processing jobs.</p>
   </div>
 <% end %>
 <% end %>

data/app/views/solid_stack_web/queues/index.html.erb

@@ -44,6 +44,7 @@
   </table>
 <% else %>
   <div class="sqw-empty">
-    <p>No queues with ready jobs.</p>
+    <p class="sqw-empty__title">No queues with ready jobs</p>
+    <p class="sqw-empty__hint">Workers are idle or all jobs are in another state. <%= link_to "Check job statuses →", jobs_path %></p>
   </div>
 <% end %>

data/app/views/solid_stack_web/queues/show.html.erb

@@ -49,7 +49,7 @@
                   data: { turbo_frame: "_top" } %>
           </td>
           <td><%= execution.job.priority %></td>
-          <td class="sqw-muted"><%= execution.created_at.strftime("%b %d %H:%M") %></td>
+          <td class="sqw-muted"><%= local_time(execution.created_at) %></td>
           <td class="sqw-actions">
             <%= button_to "Discard", job_path(execution, status: "ready", queue: @queue_name),
                   method: :delete, class: "sqw-btn sqw-btn--danger sqw-btn--sm",

data/app/views/solid_stack_web/recurring_tasks/index.html.erb

@@ -36,12 +36,11 @@
           </td>
           <td><span class="sqw-badge sqw-badge--queue"><%= task.queue_name.presence || "default" %></span></td>
           <td class="sqw-muted sqw-monospace">
-            <% next_run = begin; task.next_time.strftime("%b %d %H:%M"); rescue; nil; end %>
-            <%= next_run || "—" %>
+            <% next_run = begin; task.next_time; rescue; nil; end %>
+            <%= local_time(next_run) %>
           </td>
           <td class="sqw-muted sqw-monospace">
-            <% last_run = task.last_enqueued_time %>
-            <%= last_run ? last_run.strftime("%b %d %H:%M") : "—" %>
+            <%= local_time(task.last_enqueued_time) %>
           </td>
           <td>
             <% if task.static? %>
@@ -62,6 +61,7 @@
   </table>
 <% else %>
   <div class="sqw-empty">
-    <p>No recurring tasks configured.</p>
+    <p class="sqw-empty__title">No recurring tasks configured</p>
+    <p class="sqw-empty__hint">Define recurring tasks in your Solid Queue configuration to see them here.</p>
   </div>
 <% end %>

data/app/views/solid_stack_web/scheduled_jobs/update.turbo_stream.erb

@@ -3,7 +3,7 @@
 <% else %>
   <%= turbo_stream.replace "scheduled_at_#{@execution.id}" do %>
     <td id="scheduled_at_<%= @execution.id %>" class="sqw-muted">
-      <%= @execution.scheduled_at.strftime("%b %d %H:%M") %>
+      <%= local_time(@execution.scheduled_at) %>
     </td>
   <% end %>
 <% end %>

data/app/views/solid_stack_web/shared/_flash.html.erb

@@ -0,0 +1 @@
+<div class="sqw-flash sqw-flash--<%= type %>"><%= message %></div>

data/app/views/solid_stack_web/stats/index.html.erb

@@ -43,6 +43,7 @@
   </table>
 <% else %>
   <div class="sqw-empty">
-    <p>No finished jobs yet.</p>
+    <p class="sqw-empty__title">No finished jobs yet</p>
+    <p class="sqw-empty__hint">Performance stats appear here once jobs complete. <%= link_to "View active jobs →", jobs_path %></p>
   </div>
 <% end %>

data/config/importmap.rb

@@ -5,3 +5,5 @@ pin "solid_stack_web/refresh_controller", to: "solid_stack_web/refresh_controlle
 pin "solid_stack_web/search_controller", to: "solid_stack_web/search_controller.js"
 pin "solid_stack_web/selection_controller", to: "solid_stack_web/selection_controller.js"
 pin "solid_stack_web/sparkline_tooltip_controller", to: "solid_stack_web/sparkline_tooltip_controller.js"
+pin "solid_stack_web/theme_controller", to: "solid_stack_web/theme_controller.js"
+pin "solid_stack_web/timestamp_controller", to: "solid_stack_web/timestamp_controller.js"

data/lib/solid_stack_web/version.rb

@@ -1,3 +1,3 @@
 module SolidStackWeb
-  VERSION = "0.6.0"
+  VERSION = "0.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solid_stack_web
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Chuck Smith
@@ -142,6 +142,8 @@ files:
 - app/assets/stylesheets/solid_stack_web/_07_dashboard.css
 - app/assets/stylesheets/solid_stack_web/_08_filters.css
 - app/assets/stylesheets/solid_stack_web/_09_detail.css
+- app/assets/stylesheets/solid_stack_web/_10_responsive.css
+- app/assets/stylesheets/solid_stack_web/_12_dark_mode.css
 - app/assets/stylesheets/solid_stack_web/application.css
 - app/controllers/solid_stack_web/application_controller.rb
 - app/controllers/solid_stack_web/cable/channel_purges_controller.rb
@@ -172,6 +174,8 @@ files:
 - app/javascript/solid_stack_web/search_controller.js
 - app/javascript/solid_stack_web/selection_controller.js
 - app/javascript/solid_stack_web/sparkline_tooltip_controller.js
+- app/javascript/solid_stack_web/theme_controller.js
+- app/javascript/solid_stack_web/timestamp_controller.js
 - app/models/solid_stack_web/alert_webhook.rb
 - app/models/solid_stack_web/cable_stats.rb
 - app/models/solid_stack_web/cable_timeline.rb
@@ -202,6 +206,7 @@ files:
 - app/views/solid_stack_web/queues/show.html.erb
 - app/views/solid_stack_web/recurring_tasks/index.html.erb
 - app/views/solid_stack_web/scheduled_jobs/update.turbo_stream.erb
+- app/views/solid_stack_web/shared/_flash.html.erb
 - app/views/solid_stack_web/stats/index.html.erb
 - config/importmap.rb
 - config/routes.rb