feat(settings): Settings brought into line with the rest of Steward (milestone 493)

The last page of #5214's walk. Settings still described Steward as it was
before monitors were unified and SNMP was rebuilt, drew its tabs below the
breadcrumb, and showed the report schedule in UTC.

- Tabs (#5377): settings/_tabs.html is a settings_tabs() macro called in
  each page's section_tabs block, above the trail, as Ansible's are. The
  breadcrumb guard also fails any page that {% include %}s a tab strip.
- Report time (#5378): reports.schedule_tz keeps the zone of whoever saved
  the schedule; check_and_send compares in it (report_due), and the form shows
  the day and hour on the reader's clock (schedule_in) under their zone's
  name. "Last sent" uses |when.
- Wording (#5379): the report contents list what the report holds (monitors,
  not ping-enabled hosts); "Ping latency" is "Response time" and says what it
  grades; plugin detail says enabling loads now and disabling needs a
  restart; the monitor interval says it applies on the next check (the
  scheduler reads it every pass); the dead list-config branch is gone.
- Traefik (#5380): the 5xx and 4xx cutoffs are settings
  (traefik.threshold.error_5xx_pct 0.1, error_4xx_pct 1.0) in a "Traefik
  routers" group on Thresholds while the plugin runs, read by router_state
  through error_cutoffs(). The Traefik page has a Thresholds button for
  admins, to /settings/thresholds/#traefik.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

steward/templates/settings/_tabs.html

@@ -1,20 +1,13 @@
-{# settings/_tabs.html — include at top of each settings section.
-   No section <h1>: the breadcrumb kicker ("Settings › …") names the section and
-   the tab strip is the visual header, so we don't stack a redundant title. #}
-<div style="display:flex;gap:0;border-bottom:1px solid var(--border-mid);margin-bottom:1.5rem;">
-  {% set tabs = [
-    ("general",       "General",        "/settings/general/"),
-    ("thresholds",    "Thresholds & Retention", "/settings/thresholds/"),
-    ("notifications", "Notifications",  "/settings/notifications/"),
-    ("reports",       "Reports",        "/settings/reports/"),
-    ("auth",          "Authentication", "/settings/auth/"),
-    ("ansible",       "Ansible",        "/settings/ansible/"),
-    ("plugins",       "Plugins",        "/settings/plugins/"),
-  ] %}
-  {% for key, label, href in tabs %}
-  <a href="{{ href }}"
-     style="padding:0.6rem 1.1rem;font-size:0.875rem;border-bottom:2px solid {{ 'var(--accent)' if active_tab == key else 'transparent' }};color:{{ 'var(--text)' if active_tab == key else 'var(--text-muted)' }};font-weight:{{ '500' if active_tab == key else 'normal' }};text-decoration:none;">
-    {{ label }}
-  </a>
-  {% endfor %}
-</div>
+{# settings/_tabs.html — the Settings section's pages as one strip of tabs, in
+   each page's section_tabs block above the trail, as Ansible's are (#5377).
+   `active` names the page or the one it sits under. #}
+{% from "_macros.html" import section_tabs %}
+{% macro settings_tabs(active) -%}
+{{ section_tabs([("general", "General", "/settings/general/"),
+                 ("thresholds", "Thresholds & Retention", "/settings/thresholds/"),
+                 ("notifications", "Notifications", "/settings/notifications/"),
+                 ("reports", "Reports", "/settings/reports/"),
+                 ("auth", "Authentication", "/settings/auth/"),
+                 ("ansible", "Ansible", "/settings/ansible/"),
+                 ("plugins", "Plugins", "/settings/plugins/")], active, "Settings") }}
+{%- endmacro %}

steward/templates/settings/ansible.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}Settings — Ansible — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("ansible") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Ansible", "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "ansible" %}
-{% include "settings/_tabs.html" %}
 
 <div style="max-width:720px;">
   <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:0.75rem;">

steward/templates/settings/auth.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}Settings — Auth — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("auth") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Authentication", "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "auth" %}
-{% include "settings/_tabs.html" %}
 
 <form method="post" action="/settings/auth/">{{ csrf_field() }}
 <div style="display:grid;gap:1.25rem;max-width:640px;">

steward/templates/settings/general.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}Settings — General — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("general") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("General", "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "general" %}
-{% include "settings/_tabs.html" %}
 
 <form method="post" action="/settings/general/">{{ csrf_field() }}
 <div class="card" style="max-width:640px;">
@@ -72,7 +72,7 @@
     <label>Monitor poll interval <span style="color:var(--text-muted);font-size:0.8rem;">(seconds)</span></label>
     <input type="number" name="monitors.poll_interval_seconds" min="10"
            value="{{ settings['monitors.poll_interval_seconds'] }}" style="max-width:120px;">
-    <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">Requires restart to take effect.</div>
+    <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">How often each monitor is checked, unless it sets its own. Takes effect on the next check.</div>
   </div>
 
   <div class="form-group">

steward/templates/settings/notifications.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}Settings — Notifications — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("notifications") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Notifications", "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "notifications" %}
-{% include "settings/_tabs.html" %}
 
 <form method="post" action="/settings/notifications/">{{ csrf_field() }}
 <div style="display:grid;gap:1.25rem;max-width:640px;">

steward/templates/settings/plugin_detail.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}{{ plugin.get('name', plugin._dir) }} Settings — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("plugins") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Plugins", "/settings/plugins/"), (plugin.get('name', plugin._dir), "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "plugins" %}
-{% include "settings/_tabs.html" %}
 
 <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
   <h1 class="page-title" style="margin-bottom:0;">{{ plugin.get('name', plugin._dir) }}</h1>
@@ -18,7 +18,7 @@
                  background:color-mix(in srgb,var(--green) 12%,var(--bg));color:var(--green);">Loaded</span>
   {% elif plugin._enabled %}
     <span style="font-size:0.75rem;padding:0.15em 0.55em;border-radius:3px;
-                 background:var(--bg-elevated);color:var(--text-muted);">Enabled (restart required)</span>
+                 background:var(--bg-elevated);color:var(--text-muted);">Enabled, not loaded</span>
   {% else %}
     <span style="font-size:0.75rem;padding:0.15em 0.55em;border-radius:3px;
                  background:var(--bg-elevated);color:var(--text-muted);">Disabled</span>
@@ -55,7 +55,7 @@
       </label>
     </div>
     <div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.4rem;margin-left:1.6rem;">
-      Enable/disable changes take effect after a restart.
+      Enabling loads the plugin straight away. Disabling takes effect after a restart.
     </div>
   </div>
 
@@ -67,16 +67,7 @@
 
       {% for cfg_key, cfg_default in plugin.config.items() %}
 
-        {% if cfg_default is iterable and cfg_default is not string and cfg_default is not mapping %}
-          <div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.5rem 0.75rem;
-                      background:var(--bg);border-radius:5px;border:1px solid var(--border);
-                      font-size:0.82rem;color:var(--text-muted);">
-            <span style="flex-shrink:0;">📋</span>
-            <span><strong style="color:var(--text);">{{ field_label(cfg_key) }}</strong> — list config, edit in
-              <code>plugin.yaml</code> ({{ cfg_default | length }} item{{ 's' if cfg_default | length != 1 }}).</span>
-          </div>
-
-        {% elif cfg_default is mapping %}
+        {% if cfg_default is mapping %}
           <div style="padding:0.75rem;background:var(--bg);border-radius:5px;border:1px solid var(--border);">
             <div style="font-size:0.74rem;color:var(--text-muted);text-transform:uppercase;
                         letter-spacing:0.05em;margin-bottom:0.6rem;">{{ field_label(cfg_key) }}</div>

steward/templates/settings/plugins.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}Settings — Plugins — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("plugins") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Plugins", "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "plugins" %}
-{% include "settings/_tabs.html" %}
 
 {# ── Restart banner ────────────────────────────────────────────────────────── #}
 <div id="restart-banner"></div>

steward/templates/settings/reports.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}Settings — Reports — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("reports") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Reports", "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "reports" %}
-{% include "settings/_tabs.html" %}
 
 {% if flash %}
 <div style="padding:0.75rem 1rem;border-radius:6px;margin-bottom:1.25rem;
@@ -35,17 +35,17 @@
         <label>Send on day</label>
         <select name="reports.schedule_day">
           {% for i, day in [(0,"Monday"),(1,"Tuesday"),(2,"Wednesday"),(3,"Thursday"),(4,"Friday"),(5,"Saturday"),(6,"Sunday")] %}
-          <option value="{{ i }}" {% if settings['reports.schedule_day'] == i %}selected{% endif %}>
+          <option value="{{ i }}" {% if shown_day == i %}selected{% endif %}>
             {{ day }}
           </option>
           {% endfor %}
         </select>
       </div>
       <div class="form-group">
-        <label>At hour (UTC)</label>
+        <label>At hour ({{ tz_label() }})</label>
         <select name="reports.schedule_hour">
           {% for h in range(24) %}
-          <option value="{{ h }}" {% if settings['reports.schedule_hour'] == h %}selected{% endif %}>
+          <option value="{{ h }}" {% if shown_hour == h %}selected{% endif %}>
             {{ "%02d:00"|format(h) }}
           </option>
           {% endfor %}
@@ -55,9 +55,7 @@
 
     <p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.25rem;">
       Requires SMTP configured in <a href="/settings/notifications/">Notifications</a>.
-      {% if settings['reports.last_sent_at'] %}
-      Last sent: {{ settings['reports.last_sent_at'][:16]|replace("T", " ") }} UTC.
-      {% endif %}
+      {% if last_sent %}Last sent {{ last_sent|when }}.{% endif %}
     </p>
 
     <div style="margin-top:1rem;">
@@ -70,11 +68,11 @@
   <div class="card" style="margin-bottom:1.25rem;">
     <h2 class="section-title" style="margin-bottom:0.75rem;">Report contents</h2>
     <div style="display:grid;gap:0.35rem;font-size:0.85rem;color:var(--text-muted);">
-      <div>• <strong style="color:var(--text);">Uptime summary</strong> — 7-day % per ping-enabled host</div>
-      <div>• <strong style="color:var(--text);">Hosts currently down</strong> — highlighted at top if any</div>
-      <div>• <strong style="color:var(--text);">Active alerts</strong> — firing, acknowledged, pending rules</div>
-      <div>• <strong style="color:var(--text);">Alert events (7d)</strong> — fired and resolved counts</div>
-      <div>• <strong style="color:var(--text);">Top Traefik routers</strong> — avg req/s over last 24h (if plugin enabled)</div>
+      <div>• <strong style="color:var(--text);">Monitors down now</strong> — named at the top, when any are</div>
+      <div>• <strong style="color:var(--text);">Uptime</strong> — each enabled monitor's share of checks up over 7 days</div>
+      <div>• <strong style="color:var(--text);">Active alerts</strong> — firing, acknowledged and pending rules</div>
+      <div>• <strong style="color:var(--text);">Alert events</strong> — how many fired and resolved over 7 days</div>
+      <div>• <strong style="color:var(--text);">Busiest Traefik routers</strong> — average requests per second over 24 hours, while Traefik is on</div>
     </div>
   </div>
 

steward/templates/settings/thresholds.html

@@ -2,10 +2,10 @@
 {% extends "base.html" %}
 {% from "_macros.html" import crumbs %}
 {% block title %}Settings — Thresholds & Retention — Steward{% endblock %}
+{% from "settings/_tabs.html" import settings_tabs %}
+{% block section_tabs %}{{ settings_tabs("thresholds") }}{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Thresholds & retention", "")]) }}{% endblock %}
 {% block content %}
-{% set active_tab = "thresholds" %}
-{% include "settings/_tabs.html" %}
 
 {% macro pair(label, warn_field, warn_key, crit_field, crit_key, unit, hint, step="1") %}
 <div class="form-group" style="margin-bottom:1.1rem;">
@@ -40,7 +40,7 @@
   {{ pair("Disk usage",   "disk_warn", "thresholds.disk_warn", "disk_crit", "thresholds.disk_crit", "%", "Filesystem usage.") }}
   {{ pair("Load",         "load_warn", "thresholds.load_warn", "load_crit", "thresholds.load_crit", "% per core", "Load average normalized by core count (100% = one full core per core).") }}
   {{ pair("Temperature",  "temp_warn", "thresholds.temp_warn", "temp_crit", "thresholds.temp_crit", "°C", "Hottest reported sensor per host.") }}
-  {{ pair("Ping latency", "latency_warn", "ping.threshold.good_ms", "latency_crit", "ping.threshold.warn_ms", "ms", "Round-trip time. Shared with the Ping widget's good/warn colouring.") }}
+  {{ pair("Response time", "latency_warn", "ping.threshold.good_ms", "latency_crit", "ping.threshold.warn_ms", "ms", "How long a monitor's check takes to answer. Also grades Traefik routers' p95 and the UniFi WAN round trip.") }}
   {{ pair("Uptime / SLA", "uptime_warn", "thresholds.uptime_warn", "uptime_crit", "thresholds.uptime_crit", "%", "Lower is worse — amber below warn, red below crit.", step="0.1") }}
   {{ pair("TLS certificate expiry", "tls_warn", "thresholds.tls_warn_days", "tls_crit", "thresholds.tls_crit_days", "days left", "HTTPS monitors whose certificate expires within these many days are flagged. Lower is worse.") }}
   {{ pair("Clock drift", "clock_warn", "thresholds.clock_warn_s", "clock_crit", "thresholds.clock_crit_s", "seconds", "How far a host's clock may be from Steward's, either way, before its page and the Hosts list call it out.") }}
@@ -57,6 +57,29 @@
   </div>
 </div>
 
+{# Traefik's router cutoffs, while the plugin runs; its page links here (#5380). #}
+{% if traefik_on %}
+<div class="card" id="traefik" style="max-width:640px;margin-top:1.25rem;">
+  <h2 class="section-title" style="margin-bottom:0.5rem;">Traefik routers</h2>
+  <p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1.25rem;">
+    How much of a router's traffic, over the last 15 minutes, may end in an error before the
+    <a href="/plugins/traefik/">Traefik page</a> and the Routers widget list it.
+  </p>
+  <div class="form-group" style="margin-bottom:1.1rem;">
+    <label for="error_5xx_pct">Server errors (5xx) <span style="color:var(--text-muted);font-size:0.8rem;">(% of responses)</span></label>
+    <input type="number" id="error_5xx_pct" name="error_5xx_pct" min="0" max="100" step="0.01"
+           value="{{ settings['traefik.threshold.error_5xx_pct'] }}" style="max-width:110px;margin-top:0.25rem;">
+    <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem;">Above this share, a router is failing (red).</div>
+  </div>
+  <div class="form-group" style="margin-bottom:0.25rem;">
+    <label for="error_4xx_pct">Client errors (4xx) <span style="color:var(--text-muted);font-size:0.8rem;">(% of responses)</span></label>
+    <input type="number" id="error_4xx_pct" name="error_4xx_pct" min="0" max="100" step="0.1"
+           value="{{ settings['traefik.threshold.error_4xx_pct'] }}" style="max-width:110px;margin-top:0.25rem;">
+    <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem;">Above this share, a router is worth a look (amber): missing routes, failed sign-ins.</div>
+  </div>
+</div>
+{% endif %}
+
 {% macro days(label, field, key, hint) %}
 <div class="form-group" style="margin-bottom:1.1rem;">
   <label>{{ label }} <span style="color:var(--text-muted);font-size:0.8rem;">(days)</span></label>