roundhouse_ui 0.10.0 → 0.11.0

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

@@ -12,6 +12,19 @@
       --accent:#6E8BFF; --accent-2:#9B8CFC; --good:#44C58C; --warn:#E2A53F; --crit:#E66A60;
       --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
       --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+
+      /* Control scale (#65). Two heights and nothing between them: a row
+         affordance and a page action. Every dimension on every control comes
+         from here, and control_scale_test.rb fails on a raw pixel in a control
+         rule — three hand-matched button pairs in one day is how we got here.
+         Deliberately not in Theme::TOKENS: colour is the host's to override,
+         structure is not. */
+      --ctl-h-sm:20px; --ctl-h-md:30px; --ctl-h-lg:34px;
+      --ctl-px-sm:7px; --ctl-px-md:11px;
+      --ctl-fs-sm:11px; --ctl-fs-md:12px;
+      --ctl-r:6px; --ctl-r-lg:8px; --ctl-r-pill:999px;
+      --ctl-icon-sm:12px; --ctl-icon-md:14px;
+      --ctl-gap:5px;
     }
     :root[data-theme="light"]{
       --bg:#F5F6F9; --panel:#FFFFFF; --panel-2:#EEF1F6; --panel-3:#E6EAF2;
@@ -40,7 +53,6 @@
     .rh-nav.is-active { background:var(--panel-2); color:var(--text); border-color:var(--line); }
     .rh-nav .rh-ico { width:18px; text-align:center; font-size:14px; opacity:.85; }
     .rh-nav .rh-lbl { flex:1; }
-    .rh-badge { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; padding:1px 7px; border-radius:999px; background:var(--panel-2); color:var(--muted); min-width:8px; text-align:center; }
     .rh-badge:empty { display:none; }
     .rh-badge.warn { background:rgba(226,165,63,.16); color:var(--warn); }
     .rh-badge.crit { background:rgba(230,106,96,.16); color:var(--crit); }
@@ -57,9 +69,7 @@
     .rh-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--good); animation:rh-ping 2.4s ease-out infinite; }
     @keyframes rh-ping { 0%{transform:scale(1);opacity:.7} 70%{transform:scale(3.4);opacity:0} 100%{opacity:0} }
     @media (prefers-reduced-motion:reduce){ .rh-dot::after{animation:none} }
-    .rh-iconbtn { width:34px; height:34px; border-radius:9px; cursor:pointer; background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:15px; }
     .rh-iconbtn:hover { color:var(--text); border-color:var(--accent); }
-    .rh-ro { font-size:11px; padding:3px 9px; border-radius:7px; background:rgba(226,165,63,.16); color:var(--warn); font-weight:600; }
 
     .rh-flash { padding:10px 14px; font-size:13px; border-radius:10px; margin-bottom:16px; }
     .rh-flash-ok { background:rgba(68,197,140,.12); color:var(--good); border:1px solid rgba(68,197,140,.3); }
@@ -70,15 +80,25 @@
     .rh-panel { background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
 
     table.rh-table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
-    .rh-table th { text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:11px 16px; border-bottom:1px solid var(--line-soft); }
+    .rh-table th { text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:8px 14px; border-bottom:1px solid var(--line-soft); }
     .rh-table th.r, .rh-table td.r { text-align:right; }
-    .rh-table td { padding:12px 16px; border-bottom:1px solid var(--line-soft); }
+
+    /* The Actions cell holds up to five controls, and text-align:right alone lets
+       it break between them — Delete dropped onto a second line the moment the
+       "find more like this" glass and Edit both appeared. The column takes the
+       width it needs instead; auto table layout gives it back to the error
+       message column, which has it to spare. */
+    .rh-table td.rh-cell-actions { white-space:nowrap; }
+    .rh-table td.rh-cell-actions > * { vertical-align:middle; }
+    .rh-table td { padding:8px 14px; border-bottom:1px solid var(--line-soft); }
     .rh-table tr:last-child td { border-bottom:none; }
     .rh-mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
     .rh-sub { color:var(--faint); font-size:12px; }
     .rh-err { color:var(--crit); font-family:var(--mono); font-size:12px; }
     .rh-empty { color:var(--faint); text-align:center; padding:30px 16px; }
-    .rh-trace { color:var(--accent); text-decoration:none; font-size:11px; }
+    .rh-trace { color:var(--accent); text-decoration:none; font-size:11.5px;
+                 display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
+    .rh-trace .rh-ico { width:14px; height:14px; flex:0 0 14px; }
     .rh-trace:hover { text-decoration:underline; }
 
     .rh-st { display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:2px 9px; border-radius:6px; }
@@ -86,7 +106,6 @@
     .rh-st-warn { background:rgba(226,165,63,.16); color:var(--warn); }
     .rh-st-crit { background:rgba(230,106,96,.16); color:var(--crit); }
     .rh-st-paused { background:var(--panel-3); color:var(--muted); }
-    .rh-pill { font-size:11px; padding:2px 8px; border-radius:999px; font-family:var(--mono); background:var(--panel-2); color:var(--muted); }
     .rh-pill-warn { background:rgba(226,165,63,.16); color:var(--warn); }
     .rh-pill-tag { background:var(--panel-2); color:var(--text); border:1px solid var(--line); max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
     /* jid sits inline after the class now; dim it so it reads as a copy target
@@ -104,16 +123,260 @@
                       font-weight:600; margin-right:3px; max-width:34ch; overflow:hidden; text-overflow:ellipsis;
                       white-space:nowrap; }
     .rh-actiongroup form { display:inline; margin:0; }
-    /* Icon-only observability link for table rows. Sized like a button so it
-       sits on the Actions baseline without stretching the row. */
-    .rh-trace-ico { display:inline-block; width:24px; text-align:center; padding:5px 0; border-radius:7px;
-                    border:1px solid transparent; text-decoration:none; }
-    .rh-trace-ico:hover { border-color:var(--accent); background:var(--panel-2); }
+    /* A vendor's own mark, where the adapter supplies one. No border and no
+       background: a logo encased in a box breaks most brand guidelines,
+       Datadog's included, so this affordance is deliberately the one control in
+       an Actions column without a border. Opacity carries the hover instead.
+       Height is set here and width follows the artwork's own aspect ratio, so
+       nothing is ever stretched. */
+    /* The row affordance in a dense list. It carries .rh-btn (or .rh-runbook when
+       inline in a text cell), so the box, border, radius, padding and font come
+       from the control it sits beside and cannot drift from it. Everything here
+       is icon centring and the horizontal trim an icon needs that a word does
+       not. Never holds a vendor mark: boxing a logo is against most brand
+       guidelines, Datadog's included. */
+    .rh-trace-btn:hover { border-color:var(--accent); text-decoration:none; }
+    /* Said once above a table instead of on every row. */
+    .rh-trace-legend { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--faint);
+                       margin:0 0 9px 1px; }
+    .rh-trace-mark { text-decoration:none; opacity:.9; transition:opacity .12s ease; }
+    .rh-trace-mark:hover { opacity:1; text-decoration:none; }
+    /* Scoped to the mark itself, not to a parent affordance class. These rules
+       once hung off .rh-trace-mark, so the legend — which renders the same mark
+       inside .rh-trace-legend — matched none of them and drew both variants at
+       full size. A vendor mark has to size and resolve wherever it is placed. */
+    .rh-mark-dd { height:13px; width:auto; }
+    .rh-trace-legend .rh-mark-dd { height:14px; }
+    /* Datadog's white lockup is different artwork, not the purple one recoloured
+       — different viewBox, different fill-rule mix — so both ship and CSS picks
+       one. Recolouring the purple paths white renders Bits as a solid tile with
+       the dog knocked out of him.
+
+       Light is the default: a viewer on the system setting has stamped no theme
+       at all, so there is nothing to branch on server-side. Dark is written
+       twice — once for prefers-color-scheme, once for the explicit stamp — so the
+       toggle wins in both directions. Every display rule is a bare class so a
+       container rule can change the size without silently unhiding a variant. */
+    .rh-mark-on-light { display:block; }
+    .rh-mark-on-dark { display:none; }
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) .rh-mark-on-light { display:none; }
+      :root:not([data-theme="light"]) .rh-mark-on-dark { display:block; }
+    }
+    :root[data-theme="dark"] .rh-mark-on-light { display:none; }
+    :root[data-theme="dark"] .rh-mark-on-dark { display:block; }
+    :root[data-theme="light"] .rh-mark-on-light { display:block; }
+    :root[data-theme="light"] .rh-mark-on-dark { display:none; }
+    /* Active structured filters, dismissible. They cannot live in the search box
+       (see shared/_active_filters), so they live beside it. */
+    .rh-active-filters { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 10px 1px; }
+    .rh-filter-chip { display:inline-flex; align-items:center; gap:var(--ctl-gap);
+                      height:var(--ctl-h-sm); padding:0 var(--ctl-px-sm);
+                      font-size:var(--ctl-fs-sm); border:1px solid var(--line);
+                      border-radius:var(--ctl-r); background:var(--panel-2); color:var(--text); }
+    .rh-filter-chip .k { color:var(--faint); font-family:var(--mono); }
+    .rh-filter-chip .v { font-family:var(--mono); max-width:34ch; overflow:hidden;
+                         text-overflow:ellipsis; white-space:nowrap; }
+    /* A real hit target, not a 13px glyph at --faint. The chip is the only way
+       back out of a filter you cannot see in the search box, so the way out has to
+       look like one. */
+    .rh-filter-chip .x { display:inline-flex; align-items:center; justify-content:center;
+                         width:16px; height:16px; margin-right:-3px; border-radius:4px;
+                         color:var(--muted); text-decoration:none; font-size:14px;
+                         line-height:1; }
+    .rh-filter-chip .x:hover { color:var(--crit); background:color-mix(in srgb, var(--crit) 16%, transparent); }
+    .rh-filter-chip:hover { border-color:var(--muted); }
+    .rh-active-filters .clear-all { font-size:var(--ctl-fs-sm); color:var(--muted); text-decoration:none; }
+    .rh-active-filters .clear-all:hover { color:var(--crit); text-decoration:underline; }
+
     .rh-pill-link { text-decoration:none; border:1px solid transparent; }
     .rh-pill-link:hover { border-color:var(--accent); color:var(--text); }
     .rh-pill-link.is-on { border-color:var(--accent); color:var(--text); background:var(--panel-3); }
 
     /* Quick filters: counts by tag, from the scan that already ran. */
+    /* Motion. Every effect here is meant to carry information rather than
+       decorate: a value that changed, a queue that will not drain, time until
+       the next refresh. All of it is dropped for prefers-reduced-motion. */
+    .rh-ico { display:inline-grid; place-items:center; width:16px; height:16px; flex:0 0 16px; }
+    .rh-ico svg { display:block; }
+
+    /* A polled number that actually changed. The only effect on this page that
+       tells you something you could not otherwise see. */
+    @keyframes rh-flash { from { background:color-mix(in srgb, var(--accent) 32%, transparent); } to { background:transparent; } }
+    .rh-changed { animation:rh-flash 1.4s ease-out; border-radius:4px; }
+
+    /* No entrance animation on rows, deliberately. Navigation is the frequent
+       action in an ops console — Queues to Errors to Dead and back, all day —
+       so choreographing it turns every click into a small wait. Motion here
+       signals that the DATA changed, never that the page did. */
+
+    /* The one row that will not fix itself. Slow on purpose — faster reads as an
+       alarm, and an alarm you see all day is one you stop seeing. */
+    @keyframes rh-pulse { 0%, 100% { opacity:1; } 50% { opacity:.58; } }
+    .rh-fc-growing { animation:rh-pulse 2.6s ease-in-out infinite; }
+
+    .rh-btn, .rh-iconbtn { transition:transform .09s ease, border-color .12s ease, background .12s ease; }
+    .rh-btn:active, .rh-iconbtn:active { transform:scale(.95); }
+
+    @keyframes rh-toastin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
+    .rh-flash { animation:rh-toastin .3s cubic-bezier(.2,.8,.3,1); }
+
+    .rh-nav { transition:background .16s ease, color .16s ease, border-color .16s ease; }
+
+    @media (prefers-reduced-motion: reduce) {
+      .rh-fc-growing, .rh-flash, .rh-changed { animation:none !important; }
+      .rh-btn, .rh-iconbtn, .rh-nav { transition:none !important; }
+      .rh-btn:active, .rh-iconbtn:active { transform:none; }
+    }
+
+    /* Retry attempt as a ladder. A count tells you a number; a ladder tells you
+       how close this job is to giving up, without reading. */
+    .rh-ladder { display:inline-flex; gap:2px; vertical-align:middle; }
+    .rh-ladder i { width:4px; height:10px; border-radius:1px; background:var(--panel-3); }
+    .rh-ladder i.is-on { background:var(--warn); }
+    .rh-ladder i.is-hot { background:var(--crit); }
+    .rh-ladder-n { margin-left:6px; font-variant-numeric:tabular-nums; }
+
+    /* Next-attempt ring. The label is fixed-width so every ring lands on the
+       same x — right-aligning the pair leaves them ragged, because "in 6h" and
+       "in 40s" are different widths. */
+    .rh-next { display:inline-flex; align-items:center; gap:6px; }
+    .rh-next .rh-sub { font-variant-numeric:tabular-nums; white-space:nowrap; }
+    .rh-ring { width:15px; height:15px; border-radius:50%; flex:0 0 15px;
+               background:conic-gradient(var(--accent) var(--rh-turn,0turn), var(--panel-2) 0); }
+
+    /* A ranked table wants lengths, not a column of figures: the point of
+       "slowest classes" is proportion, and proportion is a length. */
+    .rh-dbar { display:flex; align-items:center; gap:8px; }
+    .rh-dbar .t { flex:1; min-width:70px; height:6px; border-radius:3px; background:var(--panel-2); overflow:hidden; }
+    .rh-dbar .t i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
+    .rh-dbar .n { min-width:3.6rem; text-align:right; font-family:var(--mono); font-size:11.5px;
+                  font-variant-numeric:tabular-nums; }
+
+    /* A count is also a magnitude. 340 and 2 should not look the same. */
+    .rh-count { position:relative; height:16px; min-width:52px; border-radius:3px;
+                background:var(--panel-2); overflow:hidden; display:inline-block; width:100%; }
+    .rh-count i { position:absolute; inset:0 auto 0 0; background:var(--accent); opacity:.34; }
+    .rh-count[data-rh-sev="crit"] i { background:var(--crit); opacity:.42; }
+    .rh-count[data-rh-sev="warn"] i { background:var(--warn); opacity:.38; }
+    .rh-count span { position:relative; display:block; text-align:right; padding:0 5px;
+                     font:500 11px var(--mono); line-height:16px; font-variant-numeric:tabular-nums; }
+
+    /* Elapsed against what is typical for that class. "4m 12s" means nothing on
+       its own — fine for a nightly rollup, a hang for a webhook. */
+    .rh-elapsed { display:flex; align-items:center; gap:7px; }
+    .rh-elapsed .t { flex:1; min-width:56px; height:4px; border-radius:2px; background:var(--panel-2); overflow:hidden; }
+    .rh-elapsed .t i { display:block; height:100%; background:var(--good); transition:width .6s linear; }
+    .rh-elapsed .t[data-rh-sev="warn"] i { background:var(--warn); }
+    .rh-elapsed .t[data-rh-sev="crit"] i { background:var(--crit); }
+    .rh-elapsed .n { min-width:3.4rem; text-align:right; }
+
+    /* Health verdict. The one thing someone opening this page needs in the first
+       second, so it gets the full width and a rank rather than a middle column
+       and a disclosure. */
+    /* One vertical, down the whole component. The rail used to stop at the top
+       row while each tile drew its own narrower stripe at the same x, so the
+       left edge stepped from 4px to 2px — two red lines competing to mean the
+       same thing. */
+    .rh-health { background:var(--panel); border:1px solid var(--line-soft);
+                 border-left:4px solid var(--faint); border-radius:12px;
+                 overflow:hidden; margin-bottom:18px; }
+    .rh-health.is-ok   { border-left-color:var(--good); }
+    .rh-health.is-warn { border-left-color:var(--warn); }
+    .rh-health.is-crit { border-left-color:var(--crit); }
+    .rh-health-top { display:flex; align-items:center; gap:14px; padding:13px 16px; }
+    .rh-health-verdict { font-weight:700; font-size:15px; letter-spacing:-.01em; }
+    .rh-health.is-ok   .rh-health-verdict { color:var(--good); }
+    .rh-health.is-warn .rh-health-verdict { color:var(--warn); }
+    .rh-health.is-crit .rh-health-verdict { color:var(--crit); }
+    .rh-health-reason { font-size:13.5px; color:var(--text); }
+    .rh-health-meta { margin-left:auto; font:500 11px var(--mono); color:var(--faint); white-space:nowrap; }
+
+    /* One tile per check, filling the width. Label above value, so pairing them
+       is a glance rather than a scan across a gap. */
+    .rh-health-signals { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
+                         gap:1px; background:var(--line-soft); border-top:1px solid var(--line-soft); }
+    /* Per-tile severity is carried by the icon and a wash, not a second stripe.
+       Both washes are present so warn is distinguishable from ok, which a stripe
+       was doing before. */
+    .rh-sig { background:var(--panel); padding:10px 14px; display:flex; flex-direction:column; gap:3px;
+              min-width:0; }
+    .rh-sig[data-rh-sev="warn"] { background:color-mix(in srgb, var(--warn) 6%, var(--panel)); }
+    .rh-sig[data-rh-sev="crit"] { background:color-mix(in srgb, var(--crit) 6%, var(--panel)); }
+    .rh-sig-name { display:flex; align-items:center; gap:7px; font:600 12px var(--sans); color:var(--text); }
+    .rh-sig-name .rh-ico { width:13px; height:13px; flex:0 0 13px; }
+    .rh-sig[data-rh-sev="ok"]   .rh-sig-name .rh-ico { color:var(--good); }
+    .rh-sig[data-rh-sev="warn"] .rh-sig-name .rh-ico { color:var(--warn); }
+    .rh-sig[data-rh-sev="crit"] .rh-sig-name .rh-ico { color:var(--crit); }
+    .rh-sig-detail { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
+    .rh-sig[data-rh-sev="crit"] .rh-sig-detail { color:var(--text); }
+
+    /* Trend on a stat card: "8,420,118" becomes "8.4M and climbing" without a
+       second number to read. */
+    .rh-card canvas { display:block; width:100%; height:26px; margin-top:6px; }
+
+    /* Daily history (#61). Two series, two units — a count and a rate — so each
+       gets its own vertical scale and the rate is the one drawn on top. */
+    .rh-hist-ranges { margin-left:auto; display:flex; gap:5px; }
+    canvas#rh-history { display:block; width:100%; height:150px; }
+    .rh-hist-legend { display:flex; align-items:center; gap:14px; margin-top:8px; font-size:11.5px; color:var(--muted); }
+    .rh-hist-legend span { display:inline-flex; align-items:center; gap:5px; }
+    .rh-swatch { width:9px; height:9px; border-radius:2px; display:inline-block; }
+    .rh-swatch.is-proc { background:var(--accent); }
+    .rh-swatch.is-rate { background:var(--crit); }
+    .rh-hist-hover { margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums; }
+
+    /* Per-queue trend. A table of numbers tells you values; a column of shapes
+       tells you what the system is doing. Fed from the depths the poll already
+       reads, held in the browser for the session — no storage, no retention. */
+    .rh-trend, .rh-trend-h { width:100px; }
+    .rh-trend canvas { display:block; width:88px; height:22px; }
+    .rh-trend-empty { display:inline-block; width:88px; height:22px; border-radius:3px;
+                      background:linear-gradient(90deg,var(--panel-2) 30%,var(--panel-3) 50%,var(--panel-2) 70%);
+                      background-size:220% 100%; animation:rh-shimmer 2.6s linear infinite; }
+    /* Setting `display` on these beats the user-agent's `[hidden] { display:none }`,
+       so without this the placeholder and the drawn sparkline both render, stacked.
+       An attribute selector outranks the bare class, so no !important is needed. */
+    .rh-trend canvas[hidden], .rh-trend-empty[hidden] { display:none; }
+    /* A placeholder that moves reads as "working"; the word "measuring" reads as
+       "broken". Slow, because this sits in a column of eight and anything quick
+       enough to notice individually is exhausting in aggregate. */
+    @keyframes rh-shimmer { from { background-position:220% 0; } to { background-position:-220% 0; } }
+
+    /* Severity as form, not only colour: you find the bad row before reading it.
+       Also the one cue that survives a red-green colour deficiency. */
+    .rh-table tbody tr > td:first-child { border-left:3px solid transparent; }
+    .rh-table tbody tr[data-rh-sev="crit"] > td:first-child { border-left-color:var(--crit); }
+    .rh-table tbody tr[data-rh-sev="warn"] > td:first-child { border-left-color:var(--warn); }
+    .rh-table tbody tr[data-rh-sev="ok"]   > td:first-child { border-left-color:var(--good); }
+
+    @media (prefers-reduced-motion: reduce) { .rh-trend-empty { animation:none; } }
+
+    /* Drain forecast (#35). "Growing" is the state that matters during an
+       incident, so it is the only one that gets a colour that demands attention. */
+    .rh-sort { cursor:pointer; user-select:none; white-space:nowrap; }
+    .rh-sort:hover { color:var(--muted); }
+    .rh-sort::after { content:"↕"; opacity:.28; margin-left:5px; font-size:10px; }
+    .rh-sort.is-asc::after  { content:"↑"; opacity:1; color:var(--accent); }
+    .rh-sort.is-desc::after { content:"↓"; opacity:1; color:var(--accent); }
+
+    .rh-runbook:hover { border-color:var(--accent); background:var(--panel-2); }
+
+
+    .rh-fc { font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
+    .rh-fc-wait { color:var(--faint); }
+    .rh-fc-draining { color:var(--good); }
+    .rh-fc-stalled { color:var(--warn); }
+    .rh-fc-growing { color:var(--crit); font-weight:600; }
+
+    .rh-settings { padding:4px 0; }
+    .rh-setting { display:flex; align-items:center; gap:24px; padding:16px 18px; border-bottom:1px solid var(--line-soft); }
+    .rh-setting:last-child { border-bottom:none; }
+    .rh-setting-label { flex:1; display:flex; flex-direction:column; gap:3px; }
+    .rh-setting-label b { font-size:13px; font-weight:600; }
+    .rh-setting-control { flex:0 0 auto; }
+    .rh-setting-control select { min-width:190px; }
+
     .rh-quickfilters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
     .rh-qf { display:inline-flex; align-items:center; gap:7px; font-size:12px; text-decoration:none;
              background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--muted); }
@@ -122,14 +385,166 @@
     .rh-qf-n { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; color:var(--faint); }
     .rh-qf.is-on .rh-qf-n { color:var(--accent); }
 
-    .rh-btn { font:inherit; font-size:12px; background:var(--panel-2); color:var(--text); border:1px solid var(--line); padding:5px 11px; border-radius:7px; cursor:pointer; text-decoration:none; display:inline-block; }
+    /* ── Controls ────────────────────────────────────────────────────────────
+       One box, eight names. Every control is this rule plus a role, and the only
+       dimensions anywhere are the --ctl-* tokens — so two controls cannot
+       disagree by a pixel of padding, which is exactly how .rh-trace-btn ended
+       up 2px taller than .rh-runbook while sitting beside it.
+
+       Sized by HEIGHT, never by line-height plus padding. That is the whole
+       trick: it makes an icon-only control and a text control the same height by
+       construction rather than by coincidence, and the flexbox centres both, so
+       a 12px glyph and an 11px word share a line without either knowing about
+       the other. Matching paddings can never achieve that across different
+       content, which is why hand-fixing pairs kept not holding. */
+    .rh-btn, .rh-runbook, .rh-pill, .rh-badge, .rh-kbd, .rh-iconbtn, .rh-ro, .rh-trace-btn {
+      display:inline-flex; align-items:center; justify-content:center; gap:var(--ctl-gap);
+      height:var(--ctl-h-md); padding:0 var(--ctl-px-md);
+      font-family:inherit; font-size:var(--ctl-fs-md); font-weight:500; line-height:1;
+      border:1px solid var(--line); border-radius:var(--ctl-r);
+      background:var(--panel-2); color:var(--text);
+      text-decoration:none; white-space:nowrap; vertical-align:middle;
+    }
+    /* Interactive ones only. A badge is not a button and should not claim to be. */
+    .rh-btn, .rh-kbd, .rh-iconbtn, .rh-runbook, .rh-trace-btn { cursor:pointer; }
+
+    /* The row scale: anything that lives inside a table cell. */
+    .rh-btn--sm, .rh-runbook, .rh-pill, .rh-badge, .rh-ro, .rh-cap-pick {
+      height:var(--ctl-h-sm); padding:0 var(--ctl-px-sm); font-size:var(--ctl-fs-sm);
+    }
+
+    /* Icon-only: square, so the width IS the height. */
+    .rh-btn--icon, .rh-trace-btn { padding:0; width:var(--ctl-h-md); }
+    .rh-btn--icon.rh-btn--sm, .rh-trace-btn.rh-btn--sm { width:var(--ctl-h-sm); }
+
+    /* Header controls at one size, so ⌘K and the two icon buttons read as
+       siblings. They were 25px and 34px before, which nobody had reported yet. */
+    .rh-kbd, .rh-iconbtn { height:var(--ctl-h-lg); border-radius:var(--ctl-r-lg);
+                           color:var(--muted); background:var(--panel); }
+    .rh-iconbtn { width:var(--ctl-h-lg); padding:0; }
+    .rh-kbd { font-family:var(--mono); }
+    .rh-cap-pick { margin-left:var(--ctl-gap); }
+
+    /* Roles. */
+    .rh-runbook, .rh-trace-btn { color:var(--accent); }
+    .rh-pill, .rh-badge { border-radius:var(--ctl-r-pill); border-color:transparent;
+                          font-family:var(--mono); font-variant-numeric:tabular-nums;
+                          color:var(--muted); }
+    .rh-ro { color:var(--warn); background:rgba(226,165,63,.16); border-color:transparent;
+             font-weight:600; }
+
+    /* Icons are sized on the glyph, not on a wrapper. Every shipped mark carries
+       its own width attribute, and nothing overrode it — so a 15px svg sat in a
+       12px slot and read as oversized, which no amount of padding could fix. */
+    .rh-btn > .rh-ico, .rh-iconbtn > .rh-ico, .rh-runbook > .rh-ico, .rh-trace-btn > .rh-ico {
+      width:var(--ctl-icon-md); height:var(--ctl-icon-md); flex:0 0 var(--ctl-icon-md);
+    }
+    .rh-btn--sm > .rh-ico, .rh-trace-btn.rh-btn--sm > .rh-ico {
+      width:var(--ctl-icon-sm); height:var(--ctl-icon-sm); flex-basis:var(--ctl-icon-sm);
+    }
+    .rh-btn > .rh-ico > svg, .rh-iconbtn > .rh-ico > svg,
+    .rh-runbook > .rh-ico > svg, .rh-trace-btn > .rh-ico > svg { width:100%; height:100%; display:block; }
+
     .rh-btn:hover { border-color:var(--accent); }
-    .rh-btn-danger:hover { border-color:var(--crit); color:var(--crit); }
+    .rh-btn-danger { color:var(--crit); border-color:color-mix(in srgb, var(--crit) 38%, var(--line)); }
+    .rh-btn-danger:hover { border-color:var(--crit); background:color-mix(in srgb, var(--crit) 10%, var(--panel-2)); }
     .rh-inline { display:inline; margin:0; }
 
-    .rh-search { margin-bottom:16px; }
-    .rh-search input { width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; color:var(--text); font:13px var(--mono); }
-    .rh-search input:focus { outline:none; border-color:var(--accent); }
+    .rh-search { margin-bottom:16px; position:relative; display:flex; align-items:flex-start; gap:8px; }
+
+    /* Input group, the old Bootstrap way: the bar and its help button are ONE
+       control, sharing a border, with the meeting corners squared and a single
+       divider between them. align-items:stretch is what makes it hold up — the bar
+       grows taller as pills wrap, and the button has to grow with it or the group
+       comes apart at exactly the moment it has the most in it. */
+    .rh-group { flex:1; min-width:0; display:flex; align-items:stretch; }
+    .rh-group .rh-bar { flex:1; min-width:0; border-radius:var(--ctl-r-lg) 0 0 var(--ctl-r-lg); border-right:0; }
+    .rh-group .rh-help { display:flex; }
+    .rh-group .rh-help > button {
+      height:auto; width:auto; align-self:stretch;
+      padding:0 var(--ctl-px-md); border-radius:0 var(--ctl-r-lg) var(--ctl-r-lg) 0;
+    }
+    /* The whole group lights up together. Highlighting only the half that holds the
+       caret is what makes two adjacent controls read as two controls. */
+    .rh-group:focus-within .rh-bar,
+    .rh-group:focus-within .rh-help > button { border-color:var(--accent); }
+    .rh-group .rh-help > button:hover { background:var(--panel-2); }
+    /* Plain box, still used where q is a substring (Queues index, Errors). */
+    .rh-search > input[type="search"] { flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; color:var(--text); font:13px var(--mono); }
+    .rh-search > input[type="search"]:focus { outline:none; border-color:var(--accent); }
+
+    /* The filter bar: pills and the input are one control, because they are one
+       value. The border lives here, not on the input. */
+    .rh-bar {
+      flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px;
+      background:var(--panel); border:1px solid var(--line); border-radius:var(--ctl-r-lg);
+      padding:6px 10px; min-height:42px; cursor:text; position:relative;
+    }
+    .rh-bar:focus-within { border-color:var(--accent); }
+    .rh-bar > svg { flex:0 0 auto; width:var(--ctl-icon-md); height:var(--ctl-icon-md); color:var(--faint); }
+    .rh-bar input[type="search"] {
+      flex:1 1 9rem; min-width:7rem; background:none; border:0; outline:none;
+      color:var(--text); font:13px var(--mono); padding:5px 2px;
+      -webkit-appearance:none; appearance:none;
+    }
+    .rh-bar input[type="search"]::-webkit-search-cancel-button { display:none; }
+    .rh-bar input::placeholder { color:var(--faint); }
+    .rh-bar-clear { flex:0 0 auto; font:var(--ctl-fs-sm)/1 var(--sans); color:var(--muted); text-decoration:none; padding:0 4px; }
+    .rh-bar-clear:hover { color:var(--crit); text-decoration:underline; }
+
+    /* A facet pill. Height from the control scale, like every other control. */
+    .rh-pillf {
+      display:inline-flex; align-items:center; height:var(--ctl-h-sm);
+      border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
+      border-radius:var(--ctl-r); background:color-mix(in srgb, var(--accent) 10%, transparent);
+      font:var(--ctl-fs-sm)/1 var(--mono); white-space:nowrap; overflow:hidden; max-width:26rem;
+    }
+    .rh-pillf .k { padding:0 5px; height:100%; display:inline-flex; align-items:center; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
+    .rh-pillf .v { padding:0 6px; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
+    .rh-pillf .x { flex:0 0 auto; width:16px; height:100%; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; }
+    .rh-pillf .x:hover { color:var(--crit); background:color-mix(in srgb, var(--crit) 16%, transparent); }
+
+    /* Typeahead. Positioned against .rh-bar, which is the positioned ancestor. */
+    .rh-ac {
+      position:absolute; left:8px; top:calc(100% + 5px); z-index:38; min-width:17rem; max-width:min(34rem,90vw);
+      background:var(--panel); border:1px solid var(--line); border-radius:9px;
+      box-shadow:0 14px 40px rgba(0,0,0,.45); padding:4px; max-height:17rem; overflow-y:auto;
+    }
+    .rh-ac[hidden] { display:none; }
+    .rh-ac-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 9px; border-radius:6px; font:var(--ctl-fs-md)/1.3 var(--mono); color:var(--text); cursor:pointer; }
+    .rh-ac-row[aria-selected="true"], .rh-ac-row:hover { background:var(--panel-3); }
+    .rh-ac-row .rh-ac-why { font:var(--ctl-fs-sm)/1 var(--sans); color:var(--faint); }
+    .rh-ac-grp { padding:6px 9px 3px; font:600 10px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
+
+    /* Search help. Revealed on hover, as asked — and on :focus-within too, so it is
+       reachable by keyboard and on touch, where there is no hover at all. Pure CSS:
+       a popover that needs JS to open is a popover that does not open under a strict
+       CSP if the nonce ever slips. */
+    .rh-help { position:relative; flex:0 0 auto; }
+    .rh-help > button {
+      height:var(--ctl-h-md); width:var(--ctl-h-md); padding:0;
+      display:inline-flex; align-items:center; justify-content:center;
+      background:var(--panel); border:1px solid var(--line); border-radius:var(--ctl-r);
+      color:var(--muted); font:600 var(--ctl-fs-md)/1 var(--sans); cursor:help;
+    }
+    .rh-help > button:hover, .rh-help:focus-within > button { color:var(--text); border-color:var(--accent); }
+    .rh-help-panel {
+      position:absolute; right:0; top:calc(100% + 6px); z-index:40; width:min(30rem, 88vw);
+      background:var(--panel); border:1px solid var(--line); border-radius:10px;
+      padding:14px 16px; box-shadow:0 16px 44px rgba(0,0,0,.45);
+      opacity:0; visibility:hidden; transform:translateY(-3px);
+      transition:opacity .12s ease, transform .12s ease, visibility .12s;
+    }
+    .rh-help:hover .rh-help-panel, .rh-help:focus-within .rh-help-panel {
+      opacity:1; visibility:visible; transform:none;
+    }
+    @media (prefers-reduced-motion: reduce) { .rh-help-panel { transition:none; } }
+    .rh-help-panel h4 { margin:0 0 8px; font:600 12px var(--sans); color:var(--text); }
+    .rh-help-panel dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; align-items:baseline; }
+    .rh-help-panel dt { font:12px var(--mono); color:var(--accent); white-space:nowrap; }
+    .rh-help-panel dd { margin:0; font-size:12px; color:var(--muted); }
+    .rh-help-panel .rh-help-note { margin:11px 0 0; padding-top:10px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--faint); }
+    .rh-help-panel code { font:11.5px var(--mono); color:var(--text); background:var(--panel-2); padding:1px 4px; border-radius:3px; }
     .rh-bulkbar { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
     .rh-note { color:var(--faint); font-size:12px; margin-top:14px; }
     .rh-warn { background:rgba(226,165,63,.12); border:1px solid rgba(226,165,63,.4); color:var(--warn); border-radius:10px; padding:11px 14px; margin-bottom:18px; font-size:13px; }
@@ -159,44 +574,51 @@
     canvas#rh-chart { display:block; width:100%; height:90px; }
     .rh-cb { width:15px; height:15px; }
 
-    /* composite health banner */
-    .rh-health { background:var(--panel); border:1px solid var(--line-soft); border-left:3px solid var(--faint); border-radius:12px; margin-bottom:18px; }
-    .rh-health-ok { border-left-color:var(--good); }
-    .rh-health-warn { border-left-color:var(--warn); }
-    .rh-health-crit { border-left-color:var(--crit); }
-    .rh-health summary { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; list-style:none; }
-    .rh-health summary::-webkit-details-marker { display:none; }
-    .rh-health-dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--faint); }
-    .rh-health-ok .rh-health-dot { background:var(--good); }
-    .rh-health-warn .rh-health-dot { background:var(--warn); }
-    .rh-health-crit .rh-health-dot { background:var(--crit); }
-    .rh-health-verdict { font-weight:650; font-size:15px; }
-    .rh-health-ok .rh-health-verdict { color:var(--good); }
-    .rh-health-warn .rh-health-verdict { color:var(--warn); }
-    .rh-health-crit .rh-health-verdict { color:var(--crit); }
-    .rh-health-reason { color:var(--muted); font-size:13px; }
-    .rh-health-cta { margin-left:auto; font:11px var(--mono); color:var(--faint); }
-    .rh-health[open] .rh-health-cta { color:var(--accent); }
-    .rh-health-signals { padding:2px 16px 14px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line-soft); margin-top:2px; padding-top:12px; }
-    .rh-sig { display:flex; align-items:center; gap:10px; font-size:13px; }
-    .rh-sig b { min-width:170px; font-weight:600; }
-
     /* insight panels */
     .rh-insights { display:grid; gap:14px; margin-bottom:24px; }
     @media(min-width:760px){ .rh-insights { grid-template-columns:1fr 1fr; } }
     .rh-insight { padding:6px 0; }
     .rh-insight-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; padding:13px 16px 10px; }
-    .rh-insight-row { display:flex; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--line-soft); }
+    /* One divider you can actually see, and room to breathe. --line-soft is for
+       separating a cell from its neighbour inside a table; between two entries in
+       a list it disappears and the rows read as one block of text. */
+    .rh-insight-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); }
+    .rh-insight-row:first-of-type { border-top:1px solid var(--line-soft); }
+    /* The error is subordinate to the class, not a second heading. */
+    .rh-insight-row .rh-err { display:block; margin-top:3px; }
     .rh-insight-row .rh-insight-main { flex:1; min-width:0; font-size:13px; }
     .rh-insight-row .rh-pill { font-variant-numeric:tabular-nums; }
     .rh-insight .rh-empty { padding:18px 16px; }
+    .rh-insight-legend .rh-trace-legend { margin:0 16px 8px; }
+    .rh-insight-legend:empty { display:none; }
 
     /* collapsible disclosure (large args, full backtrace) */
-    .rh-disclose summary { cursor:pointer; font:12px var(--mono); color:var(--accent); padding:6px 0; list-style:none; }
+    .rh-disclose summary { cursor:pointer; font:12.5px var(--sans); color:var(--accent); padding:6px 0; list-style:none; }
     .rh-disclose summary::-webkit-details-marker { display:none; }
     .rh-disclose summary::before { content:"▸ "; }
     .rh-disclose[open] summary::before { content:"▾ "; }
 
+    /* Time until the next refresh. The numbers on every page are a few seconds
+       old at best, and with the interval configurable (2–300s) there was no way
+       to tell a fresh number from a stale one. A depleting arc reads as time
+       remaining rather than progress toward something. */
+    .rh-tick { position:relative; width:12px; height:12px; border-radius:50%; flex:0 0 auto;
+               background:var(--panel-2); display:inline-block; }
+    .rh-tick-fill { position:absolute; inset:0; border-radius:50%;
+                    background:conic-gradient(var(--good) var(--rh-tick-turn, 1turn), transparent 0);
+                    transition:none; }
+    /* The arc is driven by one linear transition per poll rather than a rAF loop
+       or an animation whose duration has to be kept in sync with the timer. */
+    .rh-tick-fill.is-running { transition:--rh-tick-turn linear; }
+    .rh-live.is-stale .rh-tick { background:var(--crit); }
+    .rh-live.is-stale .rh-tick-fill { background:none; }
+    @property --rh-tick-turn { syntax: "<angle>"; inherits: false; initial-value: 1turn; }
+    /* No smoothly sweeping arc for anyone who asked for less motion — it snaps
+       full on each refresh instead, which still says "just updated". */
+    @media (prefers-reduced-motion: reduce) {
+      .rh-tick-fill, .rh-tick-fill.is-running { transition:none !important; }
+    }
+
     /* connection state — poll failures surface here instead of silently going stale */
     .rh-live.is-stale .rh-dot { background:var(--crit); }
     .rh-live.is-stale .rh-dot::after { animation:none; }
@@ -231,7 +653,6 @@
     .rh-sec { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600; margin:22px 0 8px; }
     .rh-joblink { color:inherit; text-decoration:none; }
     .rh-joblink:hover { text-decoration:underline; }
-    .rh-kbd { font:11px var(--mono); color:var(--faint); background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:6px 9px; cursor:pointer; }
     .rh-kbd:hover { color:var(--text); border-color:var(--accent); }
     .rh-palette[hidden] { display:none; }
     .rh-palette { position:fixed; inset:0; background:rgba(5,7,11,.55); z-index:80; display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; backdrop-filter:blur(2px); }
@@ -241,10 +662,14 @@
     .rh-palette-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; cursor:pointer; font-size:13px; }
     .rh-palette-item.sel { background:var(--panel-2); }
     .rh-palette-ico { width:20px; text-align:center; color:var(--muted); }
+    <%# Host colour overrides, emitted last so they win without !important. Only
+        known tokens, values shape-checked — see lib/roundhouse_ui/theme.rb %>
+    <%= RoundhouseUi::Theme.css&.html_safe %>
+    <%= RoundhouseUi::Theme.selectable_css&.html_safe %>
   </style>
   <%# Apply the saved theme before first paint so it persists across navigations with no flash. %>
   <script nonce="<%= content_nonce %>">
-    (function () { try { var t = localStorage.getItem("rh-theme"); if (t) document.documentElement.setAttribute("data-theme", t); var w = localStorage.getItem("rh-width"); if (w) document.documentElement.setAttribute("data-width", w); } catch (e) {} })();
+    (function () { try { var t = localStorage.getItem("rh-theme"); if (t) document.documentElement.setAttribute("data-theme", t); var w = localStorage.getItem("rh-width"); if (w) document.documentElement.setAttribute("data-width", w); var p = localStorage.getItem("rh-palette"); if (p) document.documentElement.setAttribute("data-rh-palette", p); } catch (e) {} })();
   </script>
   <%# Turbo Drive: link navigation without full-page reloads (kills the flicker). %>
   <script src="<%= turbo_js_path %>"></script>
@@ -252,10 +677,74 @@
     (function () {
       var fmt = function (n) { return Number(n).toLocaleString(); };
       var started = false, lastProcessed = null, lastFailed = null, lastBacklog = null, lastT = null;
-      var POLL_MS = <%= (RoundhouseUi.poll_interval.to_f * 1000).round %>;
+      var HOST_POLL_MS = <%= (RoundhouseUi.poll_interval.to_f * 1000).round %>;
+      function storedPollMs() {
+        try {
+          var v = parseFloat(localStorage.getItem("rh-poll"));
+          // Clamped: this comes from the browser, and 0 would hammer the mount.
+          if (!isNaN(v) && v > 0) return Math.min(Math.max(v, 2), 300) * 1000;
+        } catch (_) {}
+        return HOST_POLL_MS;
+      }
+      var POLL_MS = storedPollMs();
       var samples = [], buckets = [], bucketStart = null; // samples = current bucket; buckets = finalized per-interval averages
       var lastPts = []; // points last drawn, for the hover tooltip to read
       function setText(id, t) { var el = document.getElementById(id); if (el) el.textContent = t; }
+      // Drain forecast (#35). The question during a backlog is not "how long if
+      // arrivals stopped" — it is "will this clear at all", and that needs *net*
+      // velocity, not throughput. Three answers, because a signed number is the
+      // whole point: draining, stalled, or growing.
+      //
+      // Depth is an integer and dt is a few seconds, so a single sample's
+      // velocity is quantised and noisy — one unlucky poll would flip the label.
+      // Smoothed with an EWMA so the label reflects a trend rather than a tick.
+      var lastDepths = null, smoothVel = {}, lastCapacity = null;
+      var STALLED_PER_MIN = 1; // below one job a minute either way, nothing is happening
+
+      function smooth(key, v) {
+        var prev = smoothVel[key];
+        return (smoothVel[key] = prev == null ? v : (prev * 0.7) + (v * 0.3));
+      }
+
+      // vel is jobs/second, signed: negative drains, positive grows.
+      function forecast(depth, vel) {
+        if (depth === 0) return { text: "clear", cls: "" };
+        if (vel == null) return { text: "measuring…", cls: "rh-fc-wait" };
+        if (Math.abs(vel) * 60 < STALLED_PER_MIN) return { text: "stalled", cls: "rh-fc-stalled" };
+        if (vel > 0) return { text: "growing " + rateLabel(vel) + " — will not drain", cls: "rh-fc-growing" };
+        return { text: "clears in " + humanizeEta(depth / -vel), cls: "rh-fc-draining" };
+      }
+
+      // One urgency scale for the Forecast column, low = healthy, so an ascending
+      // sort reads best-first like every other column. Bands are kept far apart
+      // rather than blended, because "draining in 3 days" and "growing slowly"
+      // are different kinds of problem and should not interleave.
+      //
+      //   clear      -1
+      //   draining   seconds to clear   (sooner is better)
+      //   stalled    1e12
+      //   growing    1e13 + jobs/sec    (faster is worse)
+      //
+      // An unmeasured queue returns "", which the sorter puts last in both
+      // directions — see sortRows.
+      function forecastSort(depth, vel) {
+        if (depth === 0) return -1;
+        if (vel == null) return "";
+        if (Math.abs(vel) * 60 < STALLED_PER_MIN) return 1e12;
+        return vel > 0 ? 1e13 + vel : depth / -vel;
+      }
+
+      function rateLabel(vel) {
+        var v = Math.abs(vel);
+        return v >= 1 ? v.toFixed(0) + "/s" : Math.round(v * 60) + "/min";
+      }
+
+      function paintForecast(el, depth, vel) {
+        var f = forecast(depth, vel);
+        el.textContent = f.text;
+        el.className = "rh-fc " + f.cls;
+      }
+
       function humanizeEta(s) {
         if (s < 60) return "~" + Math.round(s) + "s";
         if (s < 3600) return "~" + Math.round(s / 60) + "m";
@@ -279,6 +768,9 @@
         var peak = Math.max.apply(null, pts);
         var max = peak * 1.25 || 1;
         var x = function (i) { return i / (n - 1) * w; }, y = function (v) { return h - pad - v / max * (h - pad * 2); };
+        // Faint horizontal rules. Reading a value off a bare sparkline is guesswork.
+        ctx.strokeStyle = "rgba(255,255,255,.05)"; ctx.lineWidth = 1;
+        for (var gi = 1; gi < 4; gi++) { var gy = h / 4 * gi; ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(w, gy); ctx.stroke(); }
         var g = ctx.createLinearGradient(0, 0, 0, h); g.addColorStop(0, "rgba(110,139,255,.30)"); g.addColorStop(1, "rgba(110,139,255,0)");
         ctx.beginPath(); ctx.moveTo(0, h); pts.forEach(function (v, i) { ctx.lineTo(x(i), y(v)); }); ctx.lineTo(w, h); ctx.closePath(); ctx.fillStyle = g; ctx.fill();
         ctx.beginPath(); pts.forEach(function (v, i) { i ? ctx.lineTo(x(i), y(v)) : ctx.moveTo(x(i), y(v)); }); ctx.strokeStyle = "#6E8BFF"; ctx.lineWidth = 2; ctx.lineJoin = "round"; ctx.stroke();
@@ -297,10 +789,18 @@
         tip.style.left = (e.clientX - rect.left) + "px";
         tip.hidden = false;
       }
+      function setValue(el, text) {
+        if (el.textContent === text) return; // unchanged: no flash, or the page blinks constantly
+        el.textContent = text;
+        el.classList.remove("rh-changed");
+        void el.offsetWidth;
+        el.classList.add("rh-changed");
+      }
       function apply(d) {
         Object.keys(d).forEach(function (k) {
-          document.querySelectorAll('[data-stat="' + k + '"]').forEach(function (el) { el.textContent = fmt(d[k]); });
-          document.querySelectorAll('[data-nav="' + k + '"]').forEach(function (el) { el.textContent = fmt(d[k]); });
+          var text = fmt(d[k]);
+          document.querySelectorAll('[data-stat="' + k + '"]').forEach(function (el) { setValue(el, text); });
+          document.querySelectorAll('[data-nav="' + k + '"]').forEach(function (el) { setValue(el, text); });
         });
       }
       function poll() {
@@ -309,15 +809,23 @@
           .then(function (r) { return r.json(); })
           .then(function (d) {
             setConn(true);
+            restartTick();
             apply(d);
-            if (d.queue_names) QUEUE_NAMES = d.queue_names; // feeds the ⌘K palette
+            paintCards(d);
+            // Feeds the ⌘K palette. Derived from the depth keys rather than sent
+            // twice — see the stats endpoint.
+            if (d.queue_depths) QUEUE_NAMES = Object.keys(d.queue_depths).sort();
             var now = Date.now();
             var backlog = d.enqueued + d.scheduled + d.retries;
             if (lastProcessed != null) {
               var dt = (now - lastT) / 1000;
               var dp = d.processed - lastProcessed;
               var rate = dt > 0 ? Math.max(0, dp / dt) : 0;
-              var re = document.querySelector('[data-stat="rate"]'); if (re) re.textContent = fmt(Math.round(rate * 60));
+              // querySelectorAll: the header and the Processed card both carry this
+              // attribute, and querySelector only ever matched the header — so the
+              // card read "— / min" forever.
+              var perMin = fmt(Math.round(rate * 60));
+              document.querySelectorAll('[data-stat="rate"]').forEach(function (el) { el.textContent = perMin; });
               var ne = document.getElementById("rh-chart-now"); if (ne) ne.textContent = Math.round(rate);
               // Accumulate into the current bucket; finalize it (one averaged point)
               // once the chosen interval has elapsed. Live "/s" still updates each poll.
@@ -337,19 +845,358 @@
                 var vel = (backlog - lastBacklog) / dt;
                 setText("rh-m-velocity", (vel >= 0 ? "+" : "") + vel.toFixed(1) + "/s");
               }
-              setText("rh-m-eta", backlog === 0 ? "clear" : (rate > 0 ? humanizeEta(backlog / rate) : "—"));
+              // Was backlog/throughput, which answers "how long if nothing else
+              // arrives" — a number that stays reassuring while the backlog grows.
+              var netVel = lastBacklog != null && dt > 0 ? smooth("__total", (backlog - lastBacklog) / dt) : null;
+              setText("rh-m-eta", forecast(backlog, netVel).text);
+
+              var pick = document.getElementById("rh-m-deadline");
+              if (pick) {
+                var c = capacity(backlog, rate, netVel, d.concurrency, parseInt(pick.value, 10));
+                setText("rh-m-capacity", c.text);
+                setText("rh-m-capacity-note", c.note);
+                // Remember the last inputs so changing the deadline answers
+                // immediately rather than waiting for the next poll.
+                lastCapacity = { backlog: backlog, rate: rate, vel: netVel, concurrency: d.concurrency };
+              }
+            }
+            // Per-queue forecast. Rendered wherever a cell asks for one, so the
+            // Queues table, a queue page and the dashboard all read the same
+            // number rather than three approximations of it.
+            if (d.queue_depths) {
+              var dtq = lastT ? (now - lastT) / 1000 : 0;
+              document.querySelectorAll("[data-rh-forecast]").forEach(function (el) {
+                var name = el.getAttribute("data-rh-forecast");
+                var depth = d.queue_depths[name];
+                if (depth == null) return;
+                var vel = null;
+                if (lastDepths && lastDepths[name] != null && dtq > 0) {
+                  vel = smooth(name, (depth - lastDepths[name]) / dtq);
+                }
+                paintForecast(el, depth, vel);
+                var cell = el.closest("td");
+                if (cell) cell.setAttribute("data-sort-value", forecastSort(depth, vel));
+
+                var hist = depthHistory[name] || (depthHistory[name] = []);
+                hist.push(depth);
+                if (hist.length > SPARK_SAMPLES) hist.shift();
+
+                var row = el.closest("tr");
+                var sev = severity(depth, vel);
+                if (row && sev) row.setAttribute("data-rh-sev", sev);
+
+                var spark = row && row.querySelector("[data-rh-spark]");
+                if (spark && hist.length >= 2) {
+                  var wait = row.querySelector("[data-rh-spark-wait]");
+                  if (wait) wait.hidden = true;
+                  spark.hidden = false;
+                  drawSpark(spark, hist, token(SEV_COLOUR[sev] || "--accent"));
+                }
+              });
+              // Drop state for queues that no longer exist. A queue that goes
+              // away and comes back must start measuring afresh, or its old
+              // smoothed velocity is blended into the first new sample.
+              Object.keys(smoothVel).forEach(function (k) {
+                if (k !== "__total" && !(k in d.queue_depths)) delete smoothVel[k];
+              });
+              Object.keys(depthHistory).forEach(function (k) {
+                if (!(k in d.queue_depths)) delete depthHistory[k];
+              });
+              lastDepths = d.queue_depths;
             }
             lastProcessed = d.processed; lastFailed = d.failed; lastBacklog = backlog; lastT = now;
           })
           .catch(function () { setConn(false); });
       }
+      // Restart the countdown arc. One transition per poll, so there is no rAF
+      // loop and nothing to keep in sync with the timer — and because it is
+      // driven off the same POLL_MS the timer uses, changing the interval in
+      // Settings is reflected immediately rather than on the next page load.
+      function restartTick() {
+        var el = document.getElementById("rh-tick");
+        if (!el) return;
+        el.classList.remove("is-running");
+        el.style.transitionDuration = "0s";
+        el.style.setProperty("--rh-tick-turn", "1turn");
+        void el.offsetWidth; // flush, or the reset coalesces with the sweep below
+        el.classList.add("is-running");
+        el.style.transitionDuration = POLL_MS + "ms";
+        el.style.setProperty("--rh-tick-turn", "0turn");
+      }
+
+      // Capacity (#36). The forecast says whether a backlog clears; this says what
+      // to do about it. Whole-fleet only — Sidekiq counts processed jobs
+      // globally, so claiming a per-queue thread count would be inventing the
+      // split.
+      //
+      //   arrivals   = throughput + net velocity   (what is coming in)
+      //   need       = backlog / deadline + arrivals   (rate to clear in time)
+      //   perThread  = throughput / concurrency
+      //
+      // Arrivals are included on purpose: sizing to backlog alone under-provisions
+      // exactly when it matters, because work keeps arriving while you drain.
+      function capacity(backlog, rate, vel, concurrency, deadlineSecs) {
+        if (!concurrency) return { text: "—", note: "no workers reporting in" };
+        if (backlog === 0) return { text: "0", note: "nothing waiting" };
+        if (!rate) return { text: "—", note: "no throughput to measure from" };
+
+        var perThread = rate / concurrency;
+        var arrivals = Math.max(0, rate + (vel || 0));
+        var need = Math.ceil((backlog / deadlineSecs + arrivals) / perThread);
+        var extra = need - concurrency;
+        if (extra <= 0) {
+          return { text: concurrency + " ✓", note: "current fleet clears it in time" };
+        }
+        return { text: "+" + extra,
+                 note: "on top of " + concurrency + " — " + need + " threads to clear in time" };
+      }
+
+      // Sortable tables (#queues). Client-side on purpose: the Forecast column
+      // has no server-side value at all — it is computed from two polls — so a
+      // server sort could not order by it. Doing all columns the same way keeps
+      // one behaviour rather than two.
+      //
+      // Comparison reads data-sort-value, never the cell text: latency renders
+      // as "3h 19m" and the forecast as a sentence, and parsing those back would
+      // be re-deriving what the server already knew.
+      function sortRows(table, col, dir) {
+        var tbody = table.tBodies[0];
+        if (!tbody) return;
+        var rows = Array.prototype.slice.call(tbody.rows).filter(function (r) {
+          return !r.querySelector(".rh-empty");
+        });
+        var type = table.tHead.rows[0].cells[col].getAttribute("data-sort-type");
+        rows.sort(function (a, b) {
+          var x = cellValue(a, col), y = cellValue(b, col);
+          // Rows with no value yet ("measuring…") sort last in both directions
+          // rather than clustering at whichever end zero happens to fall.
+          if (x === "" && y === "") return 0;
+          if (x === "") return 1;
+          if (y === "") return -1;
+          var cmp = type === "num" ? parseFloat(x) - parseFloat(y) : String(x).localeCompare(String(y));
+          return dir === "asc" ? cmp : -cmp;
+        });
+        rows.forEach(function (r) { tbody.appendChild(r); });
+      }
+
+      function cellValue(row, col) {
+        var cell = row.cells[col];
+        if (!cell) return "";
+        var v = cell.getAttribute("data-sort-value");
+        return v == null ? cell.textContent.trim() : v;
+      }
+
+      document.addEventListener("click", function (e) {
+        var th = e.target.closest && e.target.closest("th.rh-sort");
+        if (!th) return;
+        var table = th.closest("table");
+        var wasAsc = th.classList.contains("is-asc");
+        table.querySelectorAll("th.rh-sort").forEach(function (o) {
+          o.classList.remove("is-asc", "is-desc");
+        });
+        // Numbers open descending: on this page the interesting end of Size and
+        // Latency is the big one, which is the same reason the default order is
+        // worst-first.
+        var dir = wasAsc ? "desc" : (th.classList.contains("is-desc") ? "asc"
+                                     : (th.getAttribute("data-sort-type") === "num" ? "desc" : "asc"));
+        th.classList.add(dir === "asc" ? "is-asc" : "is-desc");
+        sortRows(table, parseInt(th.getAttribute("data-sort-col"), 10), dir);
+      });
+
+      // Per-queue depth history. The poll already reads every queue's depth and
+      // was keeping only the previous value; keeping a window instead costs one
+      // array per queue and turns the Size column into a trend.
+      //
+      // Session-local on purpose. Closing the tab restarts the trend, which is
+      // the honest behaviour for something computed in a browser — persisting it
+      // is the retention question in #34, not this.
+      var SPARK_SAMPLES = 40;
+      var depthHistory = {};
+      // Stat-card trends. Same idea as the queue trends and the same window:
+      // the poll already returns these numbers, so a card can show direction
+      // rather than only a value.
+      var CARD_SERIES = { processed: "processed", failed: "failed", busy: "busy", backlog: null };
+      // Which of those are lifetime counters. Their trend is the RATE; plotting the
+      // counter itself draws a line that can only ever go up, whose slope carries
+      // the whole signal and whose level is what the eye actually reads. On Failed
+      // it is worse than useless: auto-scaled around 131,000, a few hundred new
+      // failures render as a flat line with a step at the start.
+      //
+      // Busy threads and Backlog are levels already — they rise and fall on their
+      // own, and differencing them would throw away the thing worth seeing.
+      var CARD_CUMULATIVE = { processed: true, failed: true };
+      var cardHistory = {};
+      var cardPrev = {};
+      var SEV_COLOUR = { crit: "--crit", warn: "--warn", ok: "--good" };
+
+      function token(name) {
+        return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || "#6E8BFF";
+      }
+
+      // Urgency from the same rule the Forecast column uses, so a stripe and the
+      // sentence beside it can never disagree.
+      function severity(depth, vel) {
+        if (depth === 0) return "ok";
+        if (vel == null) return null;
+        if (vel > 0 && Math.abs(vel) * 60 >= STALLED_PER_MIN) return "crit";
+        if (Math.abs(vel) * 60 < STALLED_PER_MIN) return "warn";
+        return "ok";
+      }
+
+      function drawSpark(cv, hist, colour) {
+        var ctx = cv.getContext("2d");
+        var w = cv.width, h = cv.height, pad = 4;
+        ctx.clearRect(0, 0, w, h);
+        if (hist.length < 2) return;
+
+        var lo = Math.min.apply(null, hist), hi = Math.max.apply(null, hist);
+        // A queue that has not moved has span 0, and (v - lo) / 1 puts every
+        // point on the floor — a flat line at the bottom looks like an axis, or
+        // like zero. Pad the range so an unchanging series sits mid-height.
+        var span = hi - lo;
+        if (span <= 0) { lo -= 1; span = 2; }
+        var x = function (i) { return pad + i / (hist.length - 1) * (w - pad * 2); };
+        var y = function (v) { return h - pad - (v - lo) / span * (h - pad * 2); };
+
+        // Area first: a filled shape reads as volume, where a bare line reads as
+        // noise at this size.
+        var g = ctx.createLinearGradient(0, 0, 0, h);
+        g.addColorStop(0, colour + "66"); g.addColorStop(1, colour + "00");
+        ctx.beginPath(); ctx.moveTo(x(0), h);
+        hist.forEach(function (v, i) { ctx.lineTo(x(i), y(v)); });
+        ctx.lineTo(x(hist.length - 1), h); ctx.closePath();
+        ctx.fillStyle = g; ctx.fill();
+
+        ctx.beginPath();
+        hist.forEach(function (v, i) { i ? ctx.lineTo(x(i), y(v)) : ctx.moveTo(x(i), y(v)); });
+        ctx.strokeStyle = colour; ctx.lineWidth = 2; ctx.lineJoin = "round"; ctx.stroke();
+
+        // Emphasised endpoint — "now" is the only point anyone acts on.
+        ctx.beginPath();
+        ctx.arc(x(hist.length - 1), y(hist[hist.length - 1]), 2.6, 0, Math.PI * 2);
+        ctx.fillStyle = colour; ctx.fill();
+      }
+
+      // Backlog is derived rather than sent, so it is computed here to keep the
+      // card and the number above it from disagreeing.
+      function cardValue(key, d) {
+        if (key === "backlog") return d.enqueued + d.scheduled + d.retries;
+        return d[CARD_SERIES[key]];
+      }
+
+      // The point a sparkline should plot for one poll. Pure, so test/js can lift it
+      // out of this file rather than keep a copy that drifts.
+      //   - a level plots as itself
+      //   - a counter plots what arrived since the last sample
+      //   - a counter's first sample plots nothing: there is no delta yet
+      // Clamped at zero because Sidekiq's counters can be reset underneath us, and
+      // a negative arrival rate is not a thing.
+      function cardPoint(key, value, previous) {
+        if (!CARD_CUMULATIVE[key]) return value;
+        if (previous == null || value == null) return null;
+        return Math.max(0, value - previous);
+      }
+
+      var CARD_COLOUR = { processed: "--accent", failed: "--crit", busy: "--good", backlog: "--warn" };
+
+      function paintCards(d) {
+        document.querySelectorAll("[data-rh-card]").forEach(function (cv) {
+          var key = cv.getAttribute("data-rh-card");
+          var raw = cardValue(key, d);
+          if (raw == null) return;
+          var point = cardPoint(key, raw, cardPrev[key]);
+          cardPrev[key] = raw;
+          if (point == null) return;
+          var hist = cardHistory[key] || (cardHistory[key] = []);
+          hist.push(point);
+          if (hist.length > SPARK_SAMPLES) hist.shift();
+          if (hist.length >= 2) drawSpark(cv, hist, token(CARD_COLOUR[key] || "--accent"));
+        });
+      }
+
+      // Daily history. Counts and a failure rate share one canvas but not one
+      // scale: plotted together on a single axis the rate would be a flat line
+      // at zero, because 0.4% and 900 jobs are not comparable numbers.
+      //
+      // Drawn once on load, not on the poll — a six-month window does not change
+      // between two five-second ticks.
+      function drawHistory() {
+        var cv = document.getElementById("rh-history");
+        if (!cv) return;
+        var raw = cv.getAttribute("data-rh-history");
+        if (!raw) return;
+        var days;
+        try { days = JSON.parse(raw); } catch (_) { return; }
+        if (!days.length) return;
+
+        var dpr = window.devicePixelRatio || 1;
+        var w = cv.clientWidth, h = 150;
+        if (cv.width !== Math.round(w * dpr)) { cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr); }
+        var ctx = cv.getContext("2d");
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, w, h);
+
+        var pad = 8;
+        var maxP = Math.max.apply(null, days.map(function (d) { return d.p; })) || 1;
+        var maxR = Math.max.apply(null, days.map(function (d) { return d.r; })) || 0.01;
+        var x = function (i) { return days.length === 1 ? w / 2 : i / (days.length - 1) * (w - pad * 2) + pad; };
+        var yP = function (v) { return h - pad - v / (maxP * 1.15) * (h - pad * 2); };
+        var yR = function (v) { return h - pad - v / (maxR * 1.35) * (h - pad * 2); };
+
+        ctx.strokeStyle = "rgba(128,128,128,.13)"; ctx.lineWidth = 1;
+        for (var g = 1; g < 4; g++) { var gy = h / 4 * g; ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(w, gy); ctx.stroke(); }
+
+        // Processed as filled area: it is context, not the point.
+        var accent = token("--accent");
+        var grad = ctx.createLinearGradient(0, 0, 0, h);
+        grad.addColorStop(0, accent + "44"); grad.addColorStop(1, accent + "00");
+        ctx.beginPath(); ctx.moveTo(x(0), h);
+        days.forEach(function (d, i) { ctx.lineTo(x(i), yP(d.p)); });
+        ctx.lineTo(x(days.length - 1), h); ctx.closePath(); ctx.fillStyle = grad; ctx.fill();
+        ctx.beginPath();
+        days.forEach(function (d, i) { i ? ctx.lineTo(x(i), yP(d.p)) : ctx.moveTo(x(i), yP(d.p)); });
+        ctx.strokeStyle = accent; ctx.lineWidth = 1.6; ctx.stroke();
+
+        // The typical rate as a dashed baseline, so today has something to be
+        // compared against rather than just a number.
+        var typical = parseFloat(cv.getAttribute("data-rh-typical"));
+        if (!isNaN(typical) && typical > 0) {
+          ctx.save(); ctx.setLineDash([ 3, 3 ]);
+          ctx.beginPath(); ctx.moveTo(pad, yR(typical)); ctx.lineTo(w - pad, yR(typical));
+          ctx.strokeStyle = token("--faint"); ctx.lineWidth = 1; ctx.stroke(); ctx.restore();
+        }
+
+        // Failure rate on top, because it is the line worth reading.
+        ctx.beginPath();
+        days.forEach(function (d, i) { i ? ctx.lineTo(x(i), yR(d.r)) : ctx.moveTo(x(i), yR(d.r)); });
+        ctx.strokeStyle = token("--crit"); ctx.lineWidth = 2; ctx.lineJoin = "round"; ctx.stroke();
+
+        cv.onmousemove = function (e) {
+          var rect = cv.getBoundingClientRect();
+          var i = Math.round((e.clientX - rect.left - pad) / ((w - pad * 2) || 1) * (days.length - 1));
+          var d = days[Math.max(0, Math.min(days.length - 1, i))];
+          if (d) setText("rh-hist-read", d.d + " · " + Number(d.p).toLocaleString() + " processed · " +
+                                        (d.r * 100).toFixed(2) + "% failed");
+        };
+        cv.onmouseleave = function () { setText("rh-hist-read", ""); };
+      }
+
       // Surface a failed poll instead of letting the numbers silently go stale.
       function setConn(ok) {
         var el = document.getElementById("rh-live"), lbl = document.getElementById("rh-live-label");
         if (el) el.classList.toggle("is-stale", !ok);
         if (lbl) lbl.textContent = ok ? "live" : "reconnecting…";
       }
-      function startOnce() { if (started) return; started = true; poll(); setInterval(poll, POLL_MS); }
+      // The timer handle is kept so a viewer changing the refresh interval in
+      // Settings takes effect immediately, rather than on the next full page load.
+      var pollHandle = null;
+      function startOnce() { if (started) return; started = true; poll(); restartPoll(); }
+      function restartPoll() {
+        if (pollHandle) clearInterval(pollHandle);
+        POLL_MS = storedPollMs();
+        pollHandle = setInterval(poll, POLL_MS);
+        restartTick();
+      }
       function wireChart() {
         var cv = document.getElementById("rh-chart"); if (!cv) return;
         cv.onmousemove = chartHover;
@@ -376,7 +1223,7 @@
         var next = document.documentElement.getAttribute("data-theme") === "light" ? "dark" : "light";
         document.documentElement.setAttribute("data-theme", next);
         try { localStorage.setItem("rh-theme", next); } catch (_) {}
-        syncTheme();
+        syncTheme(); syncSettingsForm();
       });
       // width toggle (compact 1180px ⟷ full) — same persistence pattern as theme
       document.addEventListener("click", function (e) {
@@ -384,7 +1231,7 @@
         var next = document.documentElement.getAttribute("data-width") === "full" ? "compact" : "full";
         document.documentElement.setAttribute("data-width", next);
         try { localStorage.setItem("rh-width", next); } catch (_) {}
-        syncWidth();
+        syncWidth(); syncSettingsForm();
       });
       // command palette (⌘K). Two halves: static navigation, and search actions
       // built from whatever you type — paste a JID, a queue, or a squad and the
@@ -393,10 +1240,10 @@
       // Capability-gated exactly like the sidebar: a backend without a retry
       // set must not be offered a search into one.
       var SETS = [
-        { label: "Dead",      path: "<%= dead_set_path %>",  icon: "✕" },
-        <% if RoundhouseUi.backend.supports?(:retries) %>{ label: "Retries", path: "<%= retries_path %>", icon: "↻" },<% end %>
-        { label: "Scheduled", path: "<%= scheduled_path %>", icon: "◔" },
-        { label: "Errors",    path: "<%= errors_path %>",    icon: "⚠" }
+        { label: "Dead",      path: "<%= dead_set_path %>",  ico: "dead" },
+        <% if RoundhouseUi.backend.supports?(:retries) %>{ label: "Retries", path: "<%= retries_path %>", ico: "retries" },<% end %>
+        { label: "Scheduled", path: "<%= scheduled_path %>", ico: "scheduled" },
+        { label: "Errors",    path: "<%= errors_path %>",    ico: "errors" }
       ];
       // Declared tag vocabulary and live queue names, so the palette can tell a
       // squad from a queue from a free-text term.
@@ -422,7 +1269,7 @@
             if (value.toLowerCase().indexOf(q) !== 0) return;
             seen[value] = true;
             SETS.forEach(function (s) {
-              out.push({ label: key + ": " + value + " — " + s.label, icon: "◆",
+              out.push({ label: key + ": " + value + " — " + s.label, ico: "dashboard",
                          path: s.path + "?tag=" + encodeURIComponent(key + ":" + value) });
             });
           });
@@ -431,7 +1278,7 @@
         QUEUE_NAMES.forEach(function (name) {
           if (name.toLowerCase().indexOf(q) !== 0) return;
           SETS.slice(0, 3).forEach(function (s) {
-            out.push({ label: "Queue " + name + " — " + s.label, icon: "≣",
+            out.push({ label: "Queue " + name + " — " + s.label, ico: "queues",
                        path: s.path + "?queue=" + encodeURIComponent(name) });
           });
         });
@@ -444,24 +1291,35 @@
       }
 
       var CMDS = [
-        { label: "Dashboard", path: "<%= root_path %>", icon: "▦" },
-        { label: "Metrics", path: "<%= metrics_path %>", icon: "▤" },
-        { label: "Busy", path: "<%= busy_path %>", icon: "◐" },
-        <% if RoundhouseUi.backend.supports?(:workers) %>{ label: "Workers", path: "<%= workers_path %>", icon: "◷" },<% end %>
-        { label: "Queues", path: "<%= queues_path %>", icon: "≡" },
-        { label: "Scheduled", path: "<%= scheduled_path %>", icon: "◔" },
-        <% if RoundhouseUi.backend.supports?(:retries) %>{ label: "Retries", path: "<%= retries_path %>", icon: "↻" },<% end %>
-        { label: "Errors", path: "<%= errors_path %>", icon: "⚠" },
-        { label: "Dead", path: "<%= dead_set_path %>", icon: "✕" },
-        <% if defined?(Sidekiq::Capsule) && RoundhouseUi.backend.supports?(:capsules) %>{ label: "Capsules", path: "<%= capsules_path %>", icon: "⊞" },<% end %>
-        <% if RoundhouseUi.backend.supports?(:redis) %>{ label: "Redis", path: "<%= redis_info_path %>", icon: "◈" },<% end %>
-        { label: "Snapshots", path: "<%= snapshots_path %>", icon: "⛁" },
-        { label: "Audit log", path: "<%= audit_log_path %>", icon: "☷" },
-        <% if RoundhouseUi.allow_job_editing %>{ label: "Enqueue job", path: "<%= new_job_path %>", icon: "＋" },<% end %>
-        { label: "Toggle theme", action: "theme", icon: "◐" },
-        { label: "Toggle full width", action: "width", icon: "⟷" }
+        { label: "Dashboard", path: "<%= root_path %>", ico: "dashboard" },
+        { label: "Metrics", path: "<%= metrics_path %>", ico: "metrics" },
+        { label: "Busy", path: "<%= busy_path %>", ico: "busy" },
+        <% if RoundhouseUi.backend.supports?(:workers) %>{ label: "Workers", path: "<%= workers_path %>", ico: "workers" },<% end %>
+        { label: "Queues", path: "<%= queues_path %>", ico: "queues" },
+        { label: "Scheduled", path: "<%= scheduled_path %>", ico: "scheduled" },
+        <% if RoundhouseUi.backend.supports?(:retries) %>{ label: "Retries", path: "<%= retries_path %>", ico: "retries" },<% end %>
+        { label: "Errors", path: "<%= errors_path %>", ico: "errors" },
+        { label: "Dead", path: "<%= dead_set_path %>", ico: "dead" },
+        <% if defined?(Sidekiq::Capsule) && RoundhouseUi.backend.supports?(:capsules) %>{ label: "Capsules", path: "<%= capsules_path %>", ico: "capsules" },<% end %>
+        <% if RoundhouseUi.backend.supports?(:redis) %>{ label: "Redis", path: "<%= redis_info_path %>", ico: "redis" },<% end %>
+        <% if RoundhouseUi::Recurring.any? %>{ label: "Recurring", path: "<%= recurring_path %>", ico: "scheduled" },<% end %>
+        <% if RoundhouseUi.backend.supports?(:snapshots) %>{ label: "Snapshots", path: "<%= snapshots_path %>", ico: "snapshots" },<% end %>
+        <% if RoundhouseUi.backend.supports?(:redis) %>{ label: "Audit log", path: "<%= audit_log_path %>", ico: "audit" },<% end %>
+        { label: "Settings", path: "<%= settings_path %>", ico: "settings" },
+        <% if job_editing? %>{ label: "Enqueue job", path: "<%= new_job_path %>", ico: "enqueue" },<% end %>
+        { label: "Toggle theme", action: "theme", ico: "busy" },
+        { label: "Toggle full width", action: "width", ico: "width" }
       ];
       var palSel = 0, palFiltered = [];
+      // A cloned <svg> node, by name, from the server-rendered store. Never a
+      // markup string — a string is exactly what put escaped SVG source in every row.
+      function icoNode(name) {
+        if (!name) return null;
+        var store = document.getElementById("rh-ico-store");
+        if (!store || !store.content) return null;
+        var holder = store.content.querySelector('[data-ico="' + name + '"]');
+        return holder && holder.firstElementChild ? holder.firstElementChild.cloneNode(true) : null;
+      }
       function palEl() { return document.getElementById("rh-palette"); }
       function palInputEl() { return document.getElementById("rh-palette-input"); }
       function palListEl() { return document.getElementById("rh-palette-list"); }
@@ -483,7 +1341,8 @@
         palFiltered.forEach(function (c, i) {
           var d = document.createElement("div");
           d.className = "rh-palette-item" + (i === palSel ? " sel" : "");
-          var s = document.createElement("span"); s.className = "rh-palette-ico"; s.textContent = c.icon;
+          var s = document.createElement("span"); s.className = "rh-palette-ico";
+          var glyph = icoNode(c.ico); if (glyph) s.appendChild(glyph);
           d.appendChild(s); d.appendChild(document.createTextNode(c.label));
           d.addEventListener("click", function () { palRun(c); });
           d.addEventListener("mousemove", function () { palSel = i; palMark(); });
@@ -504,6 +1363,43 @@
         if (e.target && e.target.id === "rh-palette") { palClose(); return; }
         if (e.target.closest && e.target.closest("#rh-palette-open")) { e.preventDefault(); palOpen(); }
       });
+      // Settings page. Delegated from document so it survives Turbo body swaps,
+      // the same reason select-all is (#26). Every control writes local storage
+      // and applies immediately — there is no Save button because there is
+      // nothing to submit.
+      function prefRead(key) { try { return localStorage.getItem(key) || ""; } catch (_) { return ""; } }
+      function prefWrite(key, value) {
+        try { value === "" ? localStorage.removeItem(key) : localStorage.setItem(key, value); } catch (_) {}
+      }
+      function syncSettingsForm() {
+        var t = document.getElementById("rh-set-theme"); if (t) t.value = prefRead("rh-theme") || "dark";
+        var p = document.getElementById("rh-set-palette"); if (p) p.value = prefRead("rh-palette");
+        var w = document.getElementById("rh-set-width"); if (w) w.value = prefRead("rh-width") || "compact";
+        var i = document.getElementById("rh-set-poll"); if (i) i.value = prefRead("rh-poll");
+      }
+      function applyAttr(name, value) {
+        value ? document.documentElement.setAttribute(name, value)
+              : document.documentElement.removeAttribute(name);
+      }
+      document.addEventListener("change", function (e) {
+        var el = e.target; if (!el || !el.id) return;
+        if (el.id === "rh-m-deadline" && lastCapacity) {
+          var c = capacity(lastCapacity.backlog, lastCapacity.rate, lastCapacity.vel,
+                           lastCapacity.concurrency, parseInt(el.value, 10));
+          setText("rh-m-capacity", c.text); setText("rh-m-capacity-note", c.note);
+        }
+        if (el.id === "rh-set-theme")   { prefWrite("rh-theme", el.value);   applyAttr("data-theme", el.value); syncTheme(); }
+        if (el.id === "rh-set-palette") { prefWrite("rh-palette", el.value); applyAttr("data-rh-palette", el.value); }
+        if (el.id === "rh-set-width")   { prefWrite("rh-width", el.value);   applyAttr("data-width", el.value); syncWidth(); }
+        if (el.id === "rh-set-poll")    { prefWrite("rh-poll", el.value);    restartPoll(); }
+      });
+      document.addEventListener("click", function (e) {
+        if (!e.target.closest || !e.target.closest("#rh-set-reset")) return;
+        [ "rh-theme", "rh-palette", "rh-width", "rh-poll" ].forEach(function (k) { prefWrite(k, ""); });
+        [ "data-theme", "data-rh-palette", "data-width" ].forEach(function (a) { applyAttr(a, null); });
+        syncTheme(); syncWidth(); restartPoll(); syncSettingsForm();
+      });
+
       // Throughput interval picker — persist the choice; changing it re-buckets
       // from here on, so reset the in-progress bucket and redraw.
       function restoreChartInterval() {
@@ -525,7 +1421,7 @@
         else if (e.key === "Enter") { e.preventDefault(); if (palFiltered[palSel]) palRun(palFiltered[palSel]); }
       });
 
-      document.addEventListener("turbo:load", function () { startOnce(); syncTheme(); syncWidth(); setActiveNav(); restoreChartInterval(); wireChart(); draw(); });
+      document.addEventListener("turbo:load", function () { startOnce(); syncTheme(); syncWidth(); syncSettingsForm(); setActiveNav(); restoreChartInterval(); wireChart(); draw(); drawHistory(); });
 
       // Dead set "select all". Delegated from document rather than bound to the
       // checkbox, because a Turbo visit (searching, paging, arriving via the
@@ -537,6 +1433,186 @@
         if (!e.target || e.target.id !== "rh-all") return;
         document.querySelectorAll(".rh-check").forEach(function (cb) { cb.checked = e.target.checked; });
       });
+      // ── Filter bar: Tab completes, Enter applies ──────────────────────────
+      //
+      // Tab completes a key or a value WITHOUT submitting. Enter submits, and the
+      // pill appears because the server rendered it from the filter that is now in
+      // force. A pill therefore exists if and only if its filter is applied.
+      //
+      // That ordering is the point. A pill drawn on Tab, before the request, would
+      // show a filter that is not applied — the invisible-filter bug inverted, and
+      // this bar sits directly above "delete all matching". Nothing here holds
+      // filter state: the box is a string, the URL is the truth.
+      //
+      // Delegated from document for the same reason as the select-all above: a
+      // Turbo visit replaces <body>, discarding elements and their listeners, and a
+      // re-inserted body script would carry a nonce this page's CSP rejects.
+      var acItems = [], acSel = 0;
+
+      function acBox() { return document.querySelector(".rh-bar input[type=search]"); }
+      function acMenu(make) {
+        var bar = document.querySelector(".rh-bar");
+        if (!bar) return null;
+        var m = bar.querySelector(".rh-ac");
+        if (!m && make) {
+          m = document.createElement("div");
+          m.className = "rh-ac";
+          m.setAttribute("role", "listbox");
+          m.hidden = true;
+          bar.appendChild(m);
+        }
+        return m;
+      }
+      function acHide() {
+        var m = acMenu(false);
+        if (m) { m.hidden = true; m.innerHTML = ""; }
+        acItems = []; acSel = 0;
+      }
+      function acData(box, attr, fallback) {
+        try { return JSON.parse(box.getAttribute(attr) || fallback); } catch (e) { return JSON.parse(fallback); }
+      }
+      // The typed text splits into "everything already settled" and the last token,
+      // which is the only thing being completed.
+      function acSplit(value) {
+        var caretless = value.replace(/^\s+/, "");
+        var cut = caretless.lastIndexOf(" ");
+        return { head: cut === -1 ? "" : caretless.slice(0, cut + 1), token: cut === -1 ? caretless : caretless.slice(cut + 1) };
+      }
+      function acSuggest(box, token) {
+        var keys = (box.getAttribute("data-rh-filter-keys") || "").split(",").filter(Boolean);
+        var values = acData(box, "data-rh-filter-values", "{}");
+        var eq = token.indexOf("=");
+        if (eq === -1) {
+          if (!token) return [];
+          return keys.filter(function (k) { return k.indexOf(token) === 0 && k !== token; })
+                     .map(function (k) { return { insert: k + "=", label: k + "=", why: "filter" }; });
+        }
+        var key = token.slice(0, eq), typed = token.slice(eq + 1).toLowerCase();
+        return (values[key] || [])
+          .filter(function (v) { return v.toLowerCase().indexOf(typed) === 0 && v !== token.slice(eq + 1); })
+          .slice(0, 12)
+          .map(function (v) { return { insert: key + "=" + (/\s/.test(v) ? '"' + v + '"' : v), label: v, why: key }; });
+      }
+      function acRender(list) {
+        var m = acMenu(true);
+        if (!m) return;
+        acItems = list; acSel = 0;
+        if (!list.length) { acHide(); return; }
+        m.innerHTML = "";
+        list.forEach(function (s, i) {
+          var row = document.createElement("div");
+          row.className = "rh-ac-row";
+          row.setAttribute("role", "option");
+          row.setAttribute("aria-selected", i === 0 ? "true" : "false");
+          row.setAttribute("data-rh-ac-i", String(i));
+          var label = document.createElement("span");
+          label.textContent = s.label;
+          var why = document.createElement("span");
+          why.className = "rh-ac-why";
+          why.textContent = s.why;
+          row.appendChild(label); row.appendChild(why);
+          m.appendChild(row);
+        });
+        m.hidden = false;
+      }
+      function acMark() {
+        var m = acMenu(false);
+        if (!m) return;
+        Array.prototype.forEach.call(m.children, function (c, i) {
+          c.setAttribute("aria-selected", i === acSel ? "true" : "false");
+        });
+      }
+      function acRefresh() {
+        var box = acBox();
+        if (!box) return;
+        acRender(acSuggest(box, acSplit(box.value).token));
+      }
+      // Completing leaves a trailing space, so the next keystroke starts a new token
+      // rather than extending a finished facet. Then re-suggest: after `class=` that
+      // offers values, and after a complete value it offers nothing, which is what
+      // lets Enter fall through to submitting instead of re-completing forever.
+      function acAccept(box, s) {
+        box.value = acSplit(box.value).head + s.insert + (s.insert.slice(-1) === "=" ? "" : " ");
+        acHide();
+        acRefresh();
+      }
+
+      document.addEventListener("input", function (e) {
+        if (!e.target.matches || !e.target.matches(".rh-bar input[type=search]")) return;
+        acRefresh();
+      });
+      // Focusing an EMPTY box offers the keys straight away. Reported as "not
+      // completing the tag, nor the typeahead": with nothing typed there was nothing
+      // to suggest, so Tab had no target and fell through to the next tab stop — the
+      // help button — which reads as the bar rejecting you. Opening on focus makes
+      // the vocabulary discoverable without hovering help, and means Tab always has
+      // something to do the moment the caret is in the box.
+      document.addEventListener("focusin", function (e) {
+        if (!e.target.matches || !e.target.matches(".rh-bar input[type=search]")) return;
+        if (e.target.value === "") {
+          var keys = (e.target.getAttribute("data-rh-filter-keys") || "").split(",").filter(Boolean);
+          acRender(keys.filter(function (k) { return k !== "text"; }).map(function (k) {
+            return { insert: k + "=", label: k + "=", why: "filter" };
+          }));
+          return;
+        }
+        acRefresh();
+      });
+      document.addEventListener("keydown", function (e) {
+        var box = e.target;
+        if (!box.matches || !box.matches(".rh-bar input[type=search]")) return;
+
+        if (e.key === "Escape" && acItems.length) { e.preventDefault(); acHide(); return; }
+        if (e.key === "ArrowDown" && acItems.length) { e.preventDefault(); acSel = (acSel + 1) % acItems.length; acMark(); return; }
+        if (e.key === "ArrowUp" && acItems.length) { e.preventDefault(); acSel = (acSel - 1 + acItems.length) % acItems.length; acMark(); return; }
+
+        // Tab completes and stays put. Only when there is something to complete —
+        // otherwise it must move focus, or the bar becomes a keyboard trap.
+        if (e.key === "Tab" && !e.shiftKey && acItems.length) {
+          e.preventDefault();
+          acAccept(box, acItems[acSel]);
+          return;
+        }
+        if (e.key === "Enter") {
+          // A highlighted KEY completion is mid-facet: finish it and wait. Anything
+          // else submits, and the server decides what the pills say.
+          if (acItems.length && acItems[acSel].insert.slice(-1) === "=") {
+            e.preventDefault();
+            acAccept(box, acItems[acSel]);
+            return;
+          }
+          if (acItems.length) { acAccept(box, acItems[acSel]); }
+          acHide();
+          return; // let the form submit
+        }
+        // Backspace on an empty box removes the last pill by NAVIGATING to the
+        // without-that-facet URL the server already rendered. No client-side filter
+        // state to fall out of step with the server's.
+        if (e.key === "Backspace" && box.value === "") {
+          var xs = document.querySelectorAll(".rh-pillf .x");
+          if (xs.length) { e.preventDefault(); xs[xs.length - 1].click(); }
+        }
+      });
+      document.addEventListener("mousedown", function (e) {
+        var row = e.target.closest && e.target.closest(".rh-ac-row");
+        var box = acBox();
+        if (row && box) {
+          e.preventDefault();
+          acSel = parseInt(row.getAttribute("data-rh-ac-i"), 10) || 0;
+          acAccept(box, acItems[acSel]);
+          box.focus();
+          return;
+        }
+        if (!e.target.closest || !e.target.closest(".rh-bar")) acHide();
+      });
+      // Clicking the bar's padding should focus the box, the way a single control does.
+      document.addEventListener("click", function (e) {
+        if (e.target.classList && e.target.classList.contains("rh-bar")) {
+          var box = acBox();
+          if (box) box.focus();
+        }
+      });
+
       document.addEventListener("DOMContentLoaded", function () { startOnce(); syncTheme(); syncWidth(); setActiveNav(); restoreChartInterval(); wireChart(); });
       document.addEventListener("visibilitychange", function () { if (!document.hidden) poll(); });
     })();
@@ -549,37 +1625,39 @@
 
       <nav class="rh-grp">
         <div class="rh-grp-label">Overview</div>
-        <%= nav_link "Dashboard", root_path, icon: "▦" %>
-        <%= nav_link "Metrics", metrics_path, icon: "▤" %>
-        <%= nav_link "Busy", busy_path, icon: "◐", badge: "busy" %>
+        <%= nav_link "Dashboard", root_path, icon: :dashboard %>
+        <%= nav_link "Metrics", metrics_path, icon: :metrics %>
+        <%= nav_link "Busy", busy_path, icon: :busy, badge: "busy", badge_title: "Jobs running right now" %>
         <% if RoundhouseUi.backend.supports?(:workers) %>
-          <%= nav_link "Workers", workers_path, icon: "◷" %>
+          <%= nav_link "Workers", workers_path, icon: :workers %>
         <% end %>
       </nav>
       <nav class="rh-grp">
         <div class="rh-grp-label">Work</div>
-        <%= nav_link "Queues", queues_path, icon: "≡", badge: "queues" %>
-        <%= nav_link "Scheduled", scheduled_path, icon: "◔", badge: "scheduled" %>
+        <%= nav_link "Queues", queues_path, icon: :queues, badge: "enqueued", badge_title: "Jobs enqueued across all queues" %>
+        <%= nav_link "Scheduled", scheduled_path, icon: :scheduled, badge: "scheduled", badge_title: "Jobs scheduled for later" %>
         <% if RoundhouseUi.backend.supports?(:retries) %>
-          <%= nav_link "Retries", retries_path, icon: "↻", badge: "retries", badge_class: "warn" %>
+          <%= nav_link "Retries", retries_path, icon: :retries, badge: "retries", badge_class: "warn", badge_title: "Jobs waiting to retry" %>
         <% end %>
-        <%= nav_link "Errors", errors_path, icon: "⚠" %>
-        <%= nav_link "Dead", dead_set_path, icon: "✕", badge: "dead", badge_class: "crit" %>
-        <% if RoundhouseUi.allow_job_editing %>
-          <%= nav_link "Enqueue job", new_job_path, icon: "＋" %>
+        <%= nav_link "Errors", errors_path, icon: :errors %>
+        <%= nav_link "Dead", dead_set_path, icon: :dead, badge: "dead", badge_class: "crit", badge_title: "Jobs that exhausted their retries" %>
+        <% if job_editing? %>
+          <%= nav_link "Enqueue job", new_job_path, icon: :enqueue %>
         <% end %>
       </nav>
       <nav class="rh-grp">
         <div class="rh-grp-label">Infrastructure</div>
         <%# Capsules are a Sidekiq 7+ concept — hide on 6.x and on non-Sidekiq backends. %>
         <% if defined?(Sidekiq::Capsule) && RoundhouseUi.backend.supports?(:capsules) %>
-          <%= nav_link "Capsules", capsules_path, icon: "⊞" %>
+          <%= nav_link "Capsules", capsules_path, icon: :capsules %>
         <% end %>
         <% if RoundhouseUi.backend.supports?(:redis) %>
-          <%= nav_link "Redis", redis_info_path, icon: "◈" %>
+          <%= nav_link "Redis", redis_info_path, icon: :redis %>
         <% end %>
-        <%= nav_link "Snapshots", snapshots_path, icon: "⛁" %>
-        <%= nav_link "Audit log", audit_log_path, icon: "☷" %>
+        <% if RoundhouseUi.backend.supports?(:snapshots) %><%= nav_link "Snapshots", snapshots_path, icon: :snapshots %><% end %>
+        <% if RoundhouseUi::Recurring.any? %><%= nav_link "Recurring", recurring_path, icon: :scheduled %><% end %>
+        <% if RoundhouseUi.backend.supports?(:redis) %><%= nav_link "Audit log", audit_log_path, icon: :audit %><% end %>
+          <%= nav_link "Settings", settings_path, icon: :settings %>
       </nav>
     </aside>
 
@@ -588,7 +1666,9 @@
         <h1><%= yield :title %></h1>
         <span class="rh-crumb"><%= yield :crumb %></span>
         <span class="rh-spacer"></span>
-        <span class="rh-live" id="rh-live"><span class="rh-dot"></span> <span id="rh-live-label">live</span> · <span class="num" data-stat="rate">—</span>/min</span>
+        <span class="rh-live" id="rh-live" title="Refreshes automatically — change the interval in Settings">
+          <span class="rh-tick"><span class="rh-tick-fill" id="rh-tick"></span></span>
+          <span id="rh-live-label">live</span> · <span class="num" data-stat="rate">—</span>/min</span>
         <% if RoundhouseUi.read_only %><span class="rh-ro">read-only</span><% end %>
         <button class="rh-kbd" id="rh-palette-open" type="button" title="Command palette (⌘K)">⌘K</button>
         <button class="rh-iconbtn" id="rh-width" type="button" title="Toggle full width" aria-label="Toggle full width">⟷</button>
@@ -602,6 +1682,15 @@
     </main>
   </div>
 
+  <%# Icons for the palette, rendered once by the same `icon` helper the rest of
+      the UI uses. The palette used to interpolate the icon markup straight into a
+      JS string, and that markup is NOT html_safe — so ERB escaped it, and every row
+      rendered a wall of `&lt;svg viewBox=&quot;…` as literal text, because the
+      palette assigns it with textContent. It broke silently when icons stopped
+      being single Unicode glyphs. No markup travels through JS now; JS clones a
+      node instead. %>
+  <template id="rh-ico-store"><% RoundhouseUi::Icons::PATHS.each_key do |ico_name| %><span data-ico="<%= ico_name %>"><%= icon(ico_name) %></span><% end %></template>
+
   <div id="rh-palette" class="rh-palette" data-turbo-permanent hidden>
     <div class="rh-palette-box">
       <input id="rh-palette-input" type="text" placeholder="Search a job ID, queue, squad, or class — or jump to a page" autocomplete="off">