cosmonats 0.8.0 → 0.9.0

data/lib/cosmo/web/views/jobs/_enqueued.erb

@@ -1,116 +1,36 @@
-<div id="enqueued-poller">
-  <div class="nav">
-    <% @stream_names.each do |stream_name| -%>
-      <button hx-get="<%= url_for('/jobs/enqueued', { stream_name: }) %>"
-              hx-target="#content"
-              hx-swap="innerHTML"
-              hx-push-url="true"
-              hx-indicator="#global-spinner"
-              class="btn <%= "btn-primary" if @stream_name.to_s == stream_name.to_s %>">
-        <%= h(stream_name) %>
-      </button>
+<div class="subbar">
+  <div class="seg">
+    <% @stream_names.each do |name| -%>
+      <a class="<%= 'on' if @stream_name.to_s == name.to_s %>" href="<%= url_for('/jobs/enqueued', stream_name: u(name)) %>"
+         hx-get="<%= url_for('/jobs/enqueued', stream_name: u(name)) %>" hx-target="#jobs-panel" hx-swap="outerHTML"
+         hx-push-url="true" hx-indicator="#global-spinner"><%= h(name) %></a>
     <% end -%>
   </div>
-
-  <div class="pending">
-    <span></span>
-    <span class="text-muted"><%= @total.to_i %> message(s) pending</span>
-  </div>
-
-  <% if @jobs.nil? -%>
-    <div class="alert alert-success">No streams found</div>
-  <% elsif @jobs.empty? -%>
-    <div class="alert alert-success">Stream <code><%= h(@stream_name) %></code> is empty</div>
-  <% else -%>
-    <div class="table-container">
-      <table>
-        <thead>
-          <tr>
-            <th>Job</th>
-            <th>JID[Args]</th>
-            <th>Stream</th>
-            <th>Seq</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <% @jobs.each do |job| -%>
-          <tr>
-            <td>
-              <div class="job-class">
-                <%= h(job.data[:class].to_s) %>
-              </div>
-            </td>
-            <td>
-              <div class="job-id">
-                <details>
-                  <summary>
-                    <code><%= h(job.data[:jid].to_s) %></code>
-                  </summary>
-                  <code><%= h((JSON.pretty_generate(job.data[:args]) rescue job.data[:args].to_s)) %></code>
-                </details>
-              </div>
-            </td>
-            <td>
-              <code><%= h(job.stream) %></code>
-            </td>
-            <td>
-              <code><%= job.seq %></code>
-            </td>
-            <td>
-              <a hx-delete="<%= url_for("/jobs/enqueued/#{job.seq}", { stream_name: @stream_name, page: @page, limit: @limit }) %>"
-                 hx-target="#enqueued-poller"
-                 hx-swap="outerHTML"
-                 hx-indicator="#global-spinner"
-                 hx-confirm="Remove message #<%= job.seq %> from <%= h(@stream_name) %>?"
-                 title="Remove message"
-                 class="btn btn-danger btn-sm">&#x2715;</a>
-            </td>
-          </tr>
-          <% end -%>
-        </tbody>
-      </table>
-    </div>
-  <% end -%>
-
-  <% if @total_pages.to_i > 1 -%>
-    <div class="pagination">
-      <% if @page > 1 -%>
-        <a hx-get="<%= url_for('/jobs/enqueued', stream_name: @stream_name, page: @page - 1, limit: @limit) %>"
-           hx-target="#enqueued-poller"
-           hx-swap="outerHTML"
-           hx-push-url="true"
-           hx-indicator="#global-spinner"
-           class="btn">&#x2190; Prev</a>
-      <% else -%>
-        <span class="btn btn-disabled">&#x2190; Prev</span>
-      <% end -%>
-
-      <% pages(@page, @total_pages).each do |p| -%>
-        <% if p == :gap -%>
-          <span class="pagination-gap">&hellip;</span>
-        <% elsif p == @page -%>
-          <span class="btn btn-primary btn-disabled"><%= p %></span>
-        <% else -%>
-          <a hx-get="<%= url_for('/jobs/enqueued', stream_name: @stream_name, page: p, limit: @limit) %>"
-             hx-target="#enqueued-poller"
-             hx-swap="outerHTML"
-             hx-push-url="true"
-             hx-indicator="#global-spinner"
-             class="btn"><%= p %></a>
-        <% end -%>
-      <% end -%>
-
-      <% if @page < @total_pages -%>
-        <a hx-get="<%= url_for('/jobs/enqueued', stream_name: @stream_name, page: @page + 1, limit: @limit) %>"
-           hx-target="#enqueued-poller"
-           hx-swap="outerHTML"
-           hx-push-url="true"
-           hx-indicator="#global-spinner"
-           class="btn">Next &#x2192;</a>
-      <% else -%>
-        <span class="btn btn-disabled">Next &#x2192;</span>
-      <% end -%>
-    </div>
-  <% end -%>
+  <span class="spacer"></span>
+  <span class="small-mono"><%= format_numbers(@total.to_i) %> message(s) pending</span>
 </div>
+<% if @jobs.nil? -%>
+  <div class="empty"><b>No job streams</b>Run <code>cosmo --setup</code> to create them.</div>
+<% elsif @jobs.empty? -%>
+  <div class="empty"><b>Queue is empty</b><code><%= h(@stream_name) %></code> has nothing waiting.</div>
+<% else -%>
+  <div class="scroll"><div style="min-width:860px">
+    <div class="thead t-jobs actions"><span>JID</span><span>Class</span><span>Args</span><span>Seq</span><span>Status</span><span class="r">Enqueued</span><span></span></div>
+    <% @jobs.each do |job| -%>
+      <div class="trow hover t-jobs actions">
+        <span class="mono mute ellip" style="font-size:11.5px" title="<%= h(job.data[:jid]) %>"><%= h(job.data[:jid]) %></span>
+        <span class="strong ellip"><%= h(job.data[:class]) %></span>
+        <%= render('jobs/_args', { args: job.data[:args] }) %>
+        <span class="mono mute" style="font-size:12px">#<%= job.seq %></span>
+        <span class="pill" style="--tone:var(--mute)">enqueued</span>
+        <span class="mono mute r" style="font-size:11.5px"><%= (at = job.stored_at) ? "#{elapsed(at)} ago" : '—' %></span>
+        <div class="btns">
+          <button type="button" class="btn danger" title="Remove message"
+                  hx-delete="<%= url_for("/jobs/enqueued/#{job.seq}", { stream_name: u(@stream_name), page: @page, limit: @limit }) %>"
+                  hx-target="#jobs-panel" hx-swap="outerHTML" hx-indicator="#global-spinner"
+                  hx-confirm="Remove message #<%= job.seq %> from <%= h(@stream_name) %>?">✕</button>
+        </div>
+      </div>
+    <% end -%>
+  </div></div>
+<% end -%>

data/lib/cosmo/web/views/jobs/_panel.erb

@@ -0,0 +1,29 @@
+<% tabs = { busy: 'Busy', enqueued: 'Enqueued', scheduled: 'Scheduled', dead: 'Dead' }.slice(*@counts.keys) -%>
+<% tab_path = "/jobs/#{@tab}" -%>
+<section class="card" id="jobs-panel"
+  <% if @polling -%>
+         hx-get="<%= url_for(tab_path, @query.merge(page: @page)) %>" hx-trigger="cosmo:poll" data-poll="<%= poll_interval %>" hx-swap="outerHTML"
+  <% end -%>>
+  <div class="tabs">
+    <% tabs.each do |key, label| -%>
+      <a class="<%= 'on' if key.to_s == @tab %>" href="<%= url_for("/jobs/#{key}") %>"
+         hx-get="<%= url_for("/jobs/#{key}") %>" hx-target="#jobs-panel" hx-swap="outerHTML" hx-push-url="true"
+         hx-indicator="#global-spinner"><%= label %><span><%= compact_number(@counts[key]) %></span></a>
+    <% end -%>
+    <div class="tools">
+      <% if @tab == 'busy' -%>
+        <% if @polling -%>
+          <button type="button" class="btn quiet" hx-get="<%= url_for(tab_path, @query.merge(page: @page, poll: 0)) %>"
+                  hx-target="#jobs-panel" hx-swap="outerHTML" hx-indicator="#global-spinner">⏸ Stop polling</button>
+        <% else -%>
+          <button type="button" class="btn" hx-get="<%= url_for(tab_path, @query.except(:poll).merge(page: @page)) %>"
+                  hx-target="#jobs-panel" hx-swap="outerHTML" hx-indicator="#global-spinner">▶ Live poll</button>
+        <% end -%>
+      <% end -%>
+    </div>
+  </div>
+
+  <%= render("jobs/_#{@tab}", { jobs: @jobs, total: @total, page: @page, limit: @limit, stream_name: @stream_name, stream_names: @stream_names }) %>
+
+  <%= render('shared/_pager', { path: tab_path, query: @query, page: @page, total_pages: @total_pages, target: '#jobs-panel' }) %>
+</section>

data/lib/cosmo/web/views/jobs/_queue_row.erb

@@ -0,0 +1,18 @@
+<% q = @queue -%>
+<div class="trow hover <%= @compact ? 't-queues' : 't-queues-full' %>">
+  <div class="qname">
+    <span class="dot" style="background:<%= q[:paused] ? 'var(--warn)' : hue(q[:name]) %>"></span>
+    <a class="mono ellip" style="color:var(--ink)" href="<%= url_for('/jobs/enqueued', stream_name: u(q[:name])) %>"><%= h(q[:name]) %></a>
+  </div>
+  <div class="r"><%= format_numbers(q[:size]) %></div>
+  <div class="r mute"><%= format_numbers(q[:busy]) %></div>
+  <div class="r" style="color:<%= q[:retries].positive? ? 'var(--warn)' : 'var(--mute)' %>"><%= format_numbers(q[:retries]) %></div>
+  <% if @compact -%>
+    <div class="r"><% if q[:paused] -%><span class="paused-tag">paused</span><% end -%></div>
+  <% else -%>
+    <span class="pill" style="--tone:<%= q[:paused] ? 'var(--warn)' : 'var(--ok)' %>"><%= q[:paused] ? 'paused' : 'active' %></span>
+    <button type="button" class="btn<%= ' quiet' unless q[:paused] %>" style="justify-self:end"
+            hx-patch="<%= url_for(q[:paused] ? '/streams/unpause' : '/streams/pause', name: u(q[:name]), view: 'queue') %>"
+            hx-target="closest .trow" hx-swap="outerHTML" hx-indicator="#global-spinner"><%= q[:paused] ? '▶ Resume' : '⏸ Pause' %></button>
+  <% end -%>
+</div>

data/lib/cosmo/web/views/jobs/_queues.erb

@@ -0,0 +1,20 @@
+<% grid = @compact ? 't-queues' : 't-queues-full' -%>
+<% if @compact -%>
+  <div class="card-head bar">
+    <div class="card-title">Queues</div>
+    <a class="small-mono" href="<%= url_for('/jobs') %>">All queues &rarr;</a>
+  </div>
+<% end -%>
+<% if @queues.empty? -%>
+  <div class="empty"><b>No job streams</b>Run <code>cosmo --setup</code> to create them.</div>
+<% else -%>
+  <div class="scroll"><div style="min-width:<%= @compact ? 520 : 680 %>px">
+    <div class="thead<%= ' top' if @compact %> <%= grid %>">
+      <span>Queue</span><span class="r">Size</span><span class="r">Busy</span><span class="r">Retries</span>
+      <% if @compact -%><span></span><% else -%><span>Status</span><span></span><% end -%>
+    </div>
+    <% @queues.each do |queue| -%>
+      <%= render('jobs/_queue_row', { queue:, compact: @compact }) %>
+    <% end -%>
+  </div></div>
+<% end -%>

data/lib/cosmo/web/views/jobs/_scheduled.erb

@@ -1,54 +1,20 @@
-<div id="scheduled-poller"
-     hx-get="<%= url_for('/jobs/_scheduled') %>"
-     hx-trigger="every <%= poll_interval %>s"
-     hx-swap="outerHTML">
-  <div class="pending">
-    <span></span>
-    <span class="text-muted"><%= @total %> job(s) scheduled</span>
-  </div>
-
-  <% if @jobs.empty? -%>
-    <div class="alert alert-success">No scheduled jobs found</div>
-  <% else -%>
-    <div class="table-container">
-      <table>
-        <thead>
-          <tr>
-            <th>Job</th>
-            <th>JID[Args]</th>
-            <th>Stream</th>
-            <th>When</th>
-          </tr>
-        </thead>
-        <tbody>
-          <% @jobs.each do |job| -%>
-          <tr>
-            <td>
-              <div class="job-class">
-                <%= h(job.data[:class].to_s) %>
-              </div>
-            </td>
-            <td>
-              <div class="job-id">
-                <details>
-                  <summary>
-                    <code><%= h(job.data[:jid].to_s) %></code>
-                  </summary>
-                  <code><%= h((JSON.pretty_generate(job.data[:args]) rescue job.data[:args].to_s)) %></code>
-                </details>
-              </div>
-            </td>
-            <td>
-              <code><%= h(job.x_stream) %></code>
-            </td>
-            <td style="white-space: nowrap;">
-              <div class="time-badge"><%= h(time_until(job.execute_at)) %></div>
-              <time><%= h(format_timestamp(job.execute_at)) %></time>
-            </td>
-          </tr>
-          <% end -%>
-        </tbody>
-      </table>
-    </div>
-  <% end -%>
-</div>
+<% if @jobs.empty? -%>
+  <div class="empty"><b>Nothing scheduled</b>No delayed jobs are waiting for their time.</div>
+<% else -%>
+  <div class="scroll"><div style="min-width:820px">
+    <div class="thead t-jobs plain"><span>JID</span><span>Class</span><span>Args</span><span>Queue</span><span>Status</span><span class="r">When</span></div>
+    <% @jobs.each do |job| -%>
+      <div class="trow hover t-jobs plain">
+        <span class="mono mute ellip" style="font-size:11.5px" title="<%= h(job.data[:jid]) %>"><%= h(job.data[:jid]) %></span>
+        <span class="strong ellip"><%= h(job.data[:class]) %></span>
+        <%= render('jobs/_args', { args: job.data[:args] }) %>
+        <span class="mono ellip" style="font-size:12px"><%= h(job.x_stream) %></span>
+        <span class="pill" style="--tone:var(--warn)">scheduled</span>
+        <div class="stack r" style="text-align:right">
+          <span class="mono" style="font-size:12px"><%= h(time_until(job.execute_at)) %></span>
+          <span class="small-mono"><%= h(format_timestamp(job.execute_at)) %></span>
+        </div>
+      </div>
+    <% end -%>
+  </div></div>
+<% end -%>

data/lib/cosmo/web/views/jobs/index.erb

@@ -1,18 +1,5 @@
-<section>
-  <header><%= render('jobs/_tabs') %></header>
-
-  <div hx-get="<%= url_for('/jobs/_stats') %>"
-       hx-trigger="load, every <%= poll_interval %>s"
-       hx-swap="innerHTML">
-    <div class="alert alert-info">Loading statistics…</div>
-  </div>
-
-  <div id="content">
-    <div id="processes-poller"
-         hx-get="<%= url_for('/jobs/_processes', (@processes_query unless @processes_query.empty?)) %>"
-         hx-trigger="load"
-         hx-swap="outerHTML">
-      <div class="alert alert-info">Loading processes&hellip;</div>
-    </div>
-  </div>
+<section class="card" hx-get="<%= url_for('/jobs/_queues') %>" hx-trigger="load, cosmo:poll" data-poll="<%= poll_interval %>" hx-swap="innerHTML">
+  <div class="loading">Loading queues&hellip;</div>
 </section>
+
+<%= @panel %>

data/lib/cosmo/web/views/layout.erb

@@ -3,32 +3,83 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Cosmo<%= " — #{h(content_for :title)}" if content_for?(:title) %></title>
-  <script src="<%= url_for('/assets/htmx.min.js.gz') %>" defer></script>
+  <title>Cosmonats<%= " · #{h(content_for :title)}" if content_for?(:title) %></title>
+  <script>(function(r){var m='auto';try{m=localStorage.getItem('cosmo-theme')||'auto'}catch(e){}r.dataset.themeMode=m;r.dataset.theme=m==='auto'?(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):m})(document.documentElement)</script>
+  <link rel="preload" href="<%= url_for('/assets/fonts/geist.woff2') %>" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="<%= url_for('/assets/app.css') %>">
+  <link rel="icon" href="<%= url_for('/assets/logo.svg') %>" type="image/svg+xml">
+  <script src="<%= url_for('/assets/htmx.min.js.gz') %>" defer></script>
+  <script src="<%= url_for('/assets/app.js') %>" defer></script>
 </head>
 <body>
-  <header>
-    <div class="container">
+<% server = nats_server -%>
+<% section = current_section -%>
+  <div class="backdrop" data-action="close-menu"></div>
+  <div class="app">
+    <aside class="sidebar">
+      <a class="brand" href="<%= url_for('/') %>">
+        <img src="<%= url_for('/assets/logo.svg') %>" alt="">
+        <div class="brand-text">
+          <div class="brand-name">cosmonats</div>
+          <div class="eyebrow">mission control</div>
+        </div>
+      </a>
       <nav class="nav">
-        <a href="<%= url_for('/jobs') %>" class="navbar-brand">🚀 Cosmo</a>
-        <ul class="nav-list">
-          <li>
-            <a href="<%= url_for('/jobs') %>" class="<%= "active" if path_prefix?('/jobs', '/crons', '/batches', '/metrics') %>">Jobs</a>
-          </li>
-          <li>
-            <a href="<%= url_for('/streams') %>" class="<%= "active" if current_page?('/streams') %>">Streams</a>
-          </li>
-          <li>
-            <a href="<%= url_for('/actions') %>" class="<%= "active" if current_page?('/actions') %>">Actions</a>
-          </li>
-        </ul>
+        <% nav_items.each_with_index do |item, index| -%>
+          <a class="nav-item<%= ' active' if item[:key] == section %>" style="--hue:var(--c<%= (index % 5) + 1 %>)"
+             href="<%= url_for(item[:path]) %>">
+            <span class="bar"></span><span class="n"><%= format('%02d', index + 1) %></span>
+            <span class="label"><%= item[:label] %></span><span class="badge" id="badge-<%= item[:key] %>"></span>
+          </a>
+        <% end -%>
       </nav>
-    </div>
-  </header>
-  <main class="container">
-    <%= content_for :view %>
-    <div id="global-spinner" class="htmx-indicator" aria-hidden="true"></div>
-  </main>
+      <div hx-get="<%= url_for('/_badges') %>" hx-trigger="load, cosmo:poll" data-poll="30" hx-swap="none"></div>
+      <div class="side-foot">
+        <div class="conn">
+          <div class="conn-title"><span class="conn-dot<%= ' down' if server.empty? %>"></span><%= server.empty? ? 'NATS unreachable' : 'NATS connected' %></div>
+          <div class="conn-meta">
+            <%= h(server[:url] || "unknown server") %><br>
+            <% if server[:name] -%><%= h(server[:name]) %> · <% end -%><% if server[:version] -%>v<%= h(server[:version]) %> · <% end -%>R<%= Cosmo::Config.replicas %>
+          </div>
+        </div>
+        <div class="theme-toggle" role="group" aria-label="Theme">
+          <button type="button" data-action="theme" data-theme-set="light" title="Light" aria-label="Light theme">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5" fill="currentColor"/><path d="M12 1.5v2.5M12 20v2.5M1.5 12H4M20 12h2.5M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8"/></svg>
+          </button>
+          <button type="button" data-action="theme" data-theme-set="dark" title="Dark" aria-label="Dark theme">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 14.5A8.5 8.5 0 1 1 9.5 3.5a12 12 0 0 0 11 11z" fill="currentColor" stroke="none"/></svg>
+          </button>
+          <button type="button" data-action="theme" data-theme-set="auto" title="Auto (follow the system)" aria-label="Automatic theme">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 7a5 5 0 0 0 0 10z" fill="currentColor"/><path d="M1.5 12H4M4.6 4.6l1.8 1.8M4.6 19.4l1.8-1.8"/><path d="M13.5 3a9 9 0 0 1 0 18a12 12 0 0 0 0-18z" fill="currentColor" stroke="none"/></svg>
+          </button>
+        </div>
+        <div class="version">cosmonats v<%= Cosmo::VERSION %> · ruby <%= RUBY_VERSION %></div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <button type="button" class="icon-btn" data-action="open-menu" aria-label="Open menu"><span></span><span></span><span></span></button>
+        <img class="logo-sm" src="<%= url_for('/assets/logo.svg') %>" alt="">
+        <div class="crumb"><%= h(server[:name] || server[:url] || "nats") %> <span class="sep">/</span> <span class="cur"><%= h(content_for(:title).to_s.downcase) %></span></div>
+        <div class="spacer"></div>
+        <div id="global-spinner" class="spinner" aria-hidden="true"></div>
+        <div class="live"><span class="live-label">live</span><span class="t" id="clock"></span></div>
+      </header>
+
+      <div class="content">
+        <div class="page-head">
+          <div class="titles">
+            <h1><%= h(content_for :title) %></h1>
+            <% if content_for?(:subtitle) -%><p><%= h(content_for :subtitle) %></p><% end -%>
+          </div>
+          <div class="flash" id="flash"></div>
+        </div>
+        <div class="view">
+          <%= content_for :view %>
+        </div>
+      </div>
+    </main>
+  </div>
 </body>
 </html>

data/lib/cosmo/web/views/metrics/_chart.erb

@@ -1,36 +1,41 @@
-<div class="metrics-chart">
-  <div class="metrics-chart-header">
-    <span><code><%= h(@job) %></code> <span class="text-muted">last <%= @days %> days</span></span>
-    <span class="metrics-legend">
-      <span class="metrics-legend-runs">runs per day</span>
-      <span class="metrics-legend-exec">avg execution (ms)</span>
-    </span>
+<section class="card card-pad">
+  <div class="card-head">
+    <div class="card-title"><span class="mono"><%= h(@job) %></span> <span class="mute" style="font-size:13px">last <%= @days %> days</span></div>
+    <div class="legend"><i class="bars"></i>runs / day</div>
+    <div class="legend"><i class="line"></i>avg execution</div>
   </div>
   <% if @chart.empty? -%>
-    <div class="alert alert-info">No runs of <code><%= h(@job) %></code> in this period.</div>
+    <div class="empty"><b>No runs</b><code><%= h(@job) %></code> didn't run in this period.</div>
   <% else -%>
-    <svg viewBox="0 0 <%= Cosmo::Web::Chart::WIDTH %> <%= Cosmo::Web::Chart::HEIGHT %>" role="img"
-         aria-label="Runs per day and average execution time of <%= h(@job) %>">
-      <% @chart.ticks.each do |tick| -%>
-        <line class="chart-grid" x1="<%= Cosmo::Web::Chart::LEFT %>" x2="<%= Cosmo::Web::Chart::RIGHT %>"
-              y1="<%= tick[:y] %>" y2="<%= tick[:y] %>"/>
-        <text class="chart-axis" x="<%= Cosmo::Web::Chart::LEFT - 6 %>" y="<%= tick[:y] + 4 %>"
-              text-anchor="end"><%= format_numbers(tick[:count]) %></text>
-        <text class="chart-axis chart-axis-exec" x="<%= Cosmo::Web::Chart::RIGHT + 6 %>" y="<%= tick[:y] + 4 %>"
-              text-anchor="start"><%= format_numbers(tick[:exec_ms]) %></text>
-      <% end -%>
-      <% @chart.bars.each do |bar| -%>
-        <rect class="chart-bar" x="<%= bar[:x] %>" y="<%= bar[:y] %>" width="<%= bar[:width] %>"
-              height="<%= bar[:height] %>"><title><%= h(bar[:title]) %></title></rect>
-      <% end -%>
-      <polyline class="chart-line" points="<%= @chart.line %>"/>
-      <% @chart.points.each do |point| -%>
-        <circle class="chart-point" cx="<%= point[:x] %>" cy="<%= point[:y] %>" r="4"><title><%= h(point[:title]) %></title></circle>
-      <% end -%>
-      <% @chart.labels.each do |label| -%>
-        <text class="chart-axis" x="<%= label[:x] %>" y="<%= Cosmo::Web::Chart::BOTTOM + 18 %>"
-              text-anchor="middle"><%= label[:text] %></text>
-      <% end -%>
-    </svg>
+    <div class="chart dual">
+      <div class="yaxis"><% @chart.ticks.each do |tick| -%><span><%= compact_number(tick[:count]) %></span><% end -%></div>
+      <div class="plot-col">
+        <div class="plot">
+          <svg viewBox="0 0 <%= Cosmo::Web::Chart::WIDTH %> <%= Cosmo::Web::Chart::HEIGHT %>" preserveAspectRatio="none" aria-hidden="true">
+            <defs>
+              <linearGradient id="runsFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="var(--c1)" stop-opacity="0.55"/><stop offset="1" stop-color="var(--c1)" stop-opacity="0.18"/></linearGradient>
+            </defs>
+            <path d="<%= @chart.grid %>" stroke="var(--line)" stroke-width="1" vector-effect="non-scaling-stroke" fill="none"/>
+            <path d="<%= @chart.bars %>" fill="url(#runsFill)"/>
+            <path d="<%= @chart.line %>" stroke="var(--c4)" stroke-width="1.75" vector-effect="non-scaling-stroke" fill="none" stroke-linejoin="round"/>
+          </svg>
+          <% @chart.points.each do |point| -%>
+            <% if point[:dot] -%><i class="pt" style="left:<%= point[:center] %>%;top:<%= point[:dot] %>%"></i><% end -%>
+            <div class="hit band<%= ' flip' if point[:center] > 62 %>" style="left:<%= point[:left] %>%;width:<%= point[:width] %>%">
+              <div class="hv-dot" style="top:<%= point[:dot] || point[:top] %>%;border-color:<%= point[:dot] ? 'var(--c4)' : 'var(--c1)' %>"></div>
+              <div class="tip">
+                <span class="mono mute" style="font-size:10.5px"><%= point[:label] %></span>
+                <div><span class="mute">runs</span><span class="num"><%= format_numbers(point[:count]) %></span></div>
+                <div><span class="mute">failed</span><span class="num" style="color:var(--err)"><%= format_numbers(point[:failed]) %></span></div>
+                <div><span class="mute">avg exec</span><span class="num" style="color:var(--c4)"><%= duration(point[:exec_ms]) %></span></div>
+                <div><span class="mute">avg wait</span><span class="num"><%= duration(point[:wait_ms]) %></span></div>
+              </div>
+            </div>
+          <% end -%>
+        </div>
+        <div class="xaxis abs"><% @chart.labels.each do |label| -%><span style="left:<%= label[:left] %>%"><%= label[:text] %></span><% end -%></div>
+      </div>
+      <div class="yaxis right"><% @chart.ticks.each do |tick| -%><span><%= duration(tick[:exec_ms]) %></span><% end -%></div>
+    </div>
   <% end -%>
-</div>
+</section>

data/lib/cosmo/web/views/metrics/_panel.erb

@@ -1,9 +1,9 @@
-<div id="metrics-panel"
+<div id="metrics-panel" class="view"
      hx-get="<%= url_for('/metrics/_panel', { days: @days, job: u(@job) }) %>"
-     hx-trigger="every 30s"
+     hx-trigger="cosmo:poll" data-poll="30"
      hx-swap="outerHTML">
   <% if @rows.empty? -%>
-    <div class="alert alert-success">No metrics recorded in this period.</div>
+    <section class="card"><div class="empty"><b>No metrics yet</b>Nothing recorded in this period.</div></section>
   <% else -%>
     <% if @chart -%>
       <%= render('metrics/_chart', { job: @job, days: @days, chart: @chart }) %>

data/lib/cosmo/web/views/metrics/_table.erb

@@ -1,41 +1,25 @@
 <% selectable = @days > 1 -%>
-<% if selectable -%>
-  <p class="metrics-hint">Click a job to chart it.</p>
-<% end -%>
-<div class="table-container">
-  <table class="metrics-table">
-    <thead>
-      <tr>
-        <th>Job</th>
-        <th>Runs</th>
-        <th>Failed</th>
-        <th>Avg execution</th>
-        <th>Avg wait</th>
-      </tr>
-    </thead>
-    <tbody>
-      <% @rows.each do |row| -%>
-        <% selected = selectable && row[:job] == @job -%>
-        <tr<% if selectable -%>
-            class="selectable<%= ' selected' if selected %>"
-            hx-get="<%= url_for('/metrics/_panel', { days: @days, job: u(row[:job]) }) %>"
-            hx-target="#metrics-panel"
-            hx-swap="outerHTML"
-            <% if selected -%>aria-selected="true"<% end -%>
-          <% end -%>>
-          <td><code><%= h(row[:job]) %></code></td>
-          <td><%= format_numbers(row[:count]) %></td>
-          <td>
-            <% if row[:failed].positive? -%>
-              <span class="badge badge-danger"><%= format_numbers(row[:failed]) %></span>
-            <% else -%>
-              <span class="text-muted">0</span>
-            <% end -%>
-          </td>
-          <td><%= duration(row[:exec_ms]) %></td>
-          <td><%= duration(row[:wait_ms]) %></td>
-        </tr>
-      <% end -%>
-    </tbody>
-  </table>
-</div>
+<section class="card">
+  <div class="card-head bar ruled">
+    <div class="card-title">Job classes</div>
+    <% if selectable -%><span class="small-mono">click a job to chart it</span><% end -%>
+  </div>
+  <div class="scroll"><div style="min-width:620px">
+    <div class="thead t-metrics"><span>Job</span><span class="r">Runs</span><span class="r">Failed</span><span class="r">Avg execution</span><span class="r">Avg wait</span></div>
+    <% @rows.each do |row| -%>
+      <% selected = selectable && row[:job] == @job -%>
+      <div class="trow hover t-metrics<%= ' selectable' if selectable %><%= ' selected' if selected %>"
+           <% if selectable -%>
+           hx-get="<%= url_for('/metrics/_panel', { days: @days, job: u(row[:job]) }) %>"
+           hx-target="#metrics-panel" hx-swap="outerHTML" hx-indicator="#global-spinner"
+           <% if selected -%>aria-selected="true"<% end -%>
+           <% end -%>>
+        <span class="mono ellip"><%= h(row[:job]) %></span>
+        <span class="r"><%= format_numbers(row[:count]) %></span>
+        <span class="r" style="color:<%= row[:failed].positive? ? 'var(--err)' : 'var(--faint)' %>"><%= format_numbers(row[:failed]) %></span>
+        <span class="r mute"><%= duration(row[:exec_ms]) %></span>
+        <span class="r mute"><%= duration(row[:wait_ms]) %></span>
+      </div>
+    <% end -%>
+  </div></div>
+</section>

data/lib/cosmo/web/views/metrics/index.erb

@@ -1,17 +1,9 @@
-<section>
-  <header><%= render('jobs/_tabs') %></header>
+<div class="seg" style="align-self:flex-start">
+  <% @ranges.each do |range, name| -%>
+    <a class="<%= 'on' if @days == range %>" href="<%= url_for('/metrics', { days: range }) %>"><%= h(name) %></a>
+  <% end -%>
+</div>
 
-  <div class="nav">
-    <% @ranges.each do |range, name| -%>
-      <a href="<%= url_for('/metrics', { days: range }) %>"
-         class="btn <%= 'btn-primary' if @days == range %>"><%= h(name) %></a>
-    <% end -%>
-  </div>
-
-  <div id="metrics-panel"
-       hx-get="<%= url_for('/metrics/_panel', { days: @days }) %>"
-       hx-trigger="load"
-       hx-swap="outerHTML">
-    <div class="alert alert-info">Loading metrics&hellip;</div>
-  </div>
-</section>
+<div id="metrics-panel" class="view" hx-get="<%= url_for('/metrics/_panel', { days: @days }) %>" hx-trigger="load" hx-swap="outerHTML">
+  <section class="card"><div class="loading">Loading metrics&hellip;</div></section>
+</div>