feat: alerts view + created-at timestamps on decisions

Mirror cscli alerts list: new /alerts endpoint hits LAPI machine auth
with since/ip/scenario/origin filters, renders ID, scope:value, reason,
country, AS, events, decisions, created_at.

Decisions table gains a Created column derived from until - duration
(LAPI does not expose created_at on /v1/decisions). Both views format
timestamps locally and append a relative "x ago" via Intl.RelativeTimeFormat,
refreshed every 30s on the decisions view.

app/templates/_alerts.html

@@ -0,0 +1,84 @@
+{% if error %}
+  <p class="err">{{ error }}</p>
+{% endif %}
+{% if alerts %}
+  <p style="font-size:.8rem;color:#888;margin:.4rem 0;">
+    Showing <strong>{{ total }}</strong> alert{{ '' if total == 1 else 's' }}
+    since <code>{{ since }}</code>
+    (server limit {{ limit }}{% if total == limit %} — at cap, raise limit if more expected{% endif %}).
+  </p>
+  <table>
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Scope:Value</th>
+        <th>Reason</th>
+        <th>Country</th>
+        <th>AS</th>
+        <th>Events</th>
+        <th>Decisions</th>
+        <th>Created</th>
+      </tr>
+    </thead>
+    <tbody>
+    {% for a in alerts %}
+      {% set src = a.source or {} %}
+      <tr>
+        <td><code>{{ a.id }}</code></td>
+        <td><code>{{ src.scope or a.scope or '?' }}:{{ src.value or a.value or '?' }}</code></td>
+        <td>
+          {{ a.scenario }}
+          {% if a.events_count and a.events_count > 1 %}<span class="pill">×{{ a.events_count }}</span>{% endif %}
+        </td>
+        <td>{{ src.cn or '—' }}</td>
+        <td>{% if src.as_number %}{{ src.as_number }}{% if src.as_name %} {{ src.as_name }}{% endif %}{% else %}—{% endif %}</td>
+        <td>{{ a.events_count or 0 }}</td>
+        <td>
+          {% if a.decisions %}
+            {% for dec in a.decisions %}
+              <span class="pill" title="origin={{ dec.origin }} until={{ dec.until }}">{{ dec.type }} {{ dec.duration }}{% if dec.simulated %} sim{% endif %}</span>
+            {% endfor %}
+          {% else %}
+            —
+          {% endif %}
+        </td>
+        <td><time class="ts" datetime="{{ a.created_at }}">{{ a.created_at }}</time></td>
+      </tr>
+    {% endfor %}
+    </tbody>
+  </table>
+  <script>
+    (function(){
+      const RTF = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+      const FMT = new Intl.DateTimeFormat(undefined, {
+        year: 'numeric', month: 'short', day: '2-digit',
+        hour: '2-digit', minute: '2-digit', second: '2-digit',
+        hour12: false
+      });
+      const UNITS = [['year',31536000],['month',2592000],['day',86400],['hour',3600],['minute',60],['second',1]];
+      function relative(target, now){
+        const diff = (target - now) / 1000;
+        const abs = Math.abs(diff);
+        for (const [u, s] of UNITS) {
+          if (abs >= s || u === 'second') return RTF.format(Math.round(diff / s), u);
+        }
+      }
+      const now = new Date();
+      document.querySelectorAll('#alerts time.ts').forEach(t => {
+        const iso = t.getAttribute('datetime');
+        if (!iso) return;
+        const d = new Date(iso);
+        if (isNaN(d)) return;
+        t.textContent = FMT.format(d);
+        t.title = iso + '  (' + relative(d, now) + ')';
+        const small = document.createElement('small');
+        small.style.color = '#888';
+        small.style.marginLeft = '.35rem';
+        small.textContent = relative(d, now);
+        t.appendChild(small);
+      });
+    })();
+  </script>
+{% else %}
+  {% if not error %}<p>No alerts in window.</p>{% endif %}
+{% endif %}

app/templates/_decisions.html

@@ -16,7 +16,7 @@
       <thead>
         <tr>
           <th><input type="checkbox" id="sel-all"></th>
-          <th>ID</th><th>IP / value</th><th>Scope</th><th>Type</th><th>Reason</th><th>Until</th><th>Origin</th><th></th>
+          <th>ID</th><th>IP / value</th><th>Scope</th><th>Type</th><th>Reason</th><th>Created</th><th>Until</th><th>Origin</th><th></th>
         </tr>
       </thead>
       <tbody>
@@ -28,7 +28,8 @@
           <td>{{ d.scope }}</td>
           <td>{{ d.type }}</td>
           <td>{{ d.scenario }}</td>
-          <td>{{ d.until }}</td>
+          <td><time class="ts" datetime="{{ d.created_at }}">{{ d.created_at or '—' }}</time></td>
+          <td><time class="ts" datetime="{{ d.until }}">{{ d.until }}</time></td>
           <td>{{ d.origin }}</td>
           <td>
             <button class="danger" type="button"
@@ -42,6 +43,47 @@
     </table>
   </form>
   <script>
+    (function(){
+      const RTF = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+      const FMT = new Intl.DateTimeFormat(undefined, {
+        year: 'numeric', month: 'short', day: '2-digit',
+        hour: '2-digit', minute: '2-digit', second: '2-digit',
+        hour12: false
+      });
+      const UNITS = [
+        ['year',   31536000],
+        ['month',  2592000],
+        ['day',    86400],
+        ['hour',   3600],
+        ['minute', 60],
+        ['second', 1],
+      ];
+      function relative(target, now){
+        const diff = (target - now) / 1000;
+        const abs = Math.abs(diff);
+        for (const [u, s] of UNITS) {
+          if (abs >= s || u === 'second') return RTF.format(Math.round(diff / s), u);
+        }
+      }
+      function render(){
+        const now = new Date();
+        document.querySelectorAll('#decisions time.ts').forEach(t => {
+          const iso = t.getAttribute('datetime');
+          if (!iso) return;
+          const d = new Date(iso);
+          if (isNaN(d)) return;
+          t.textContent = FMT.format(d);
+          t.title = iso + '  (' + relative(d, now) + ')';
+          const small = document.createElement('small');
+          small.style.color = '#888';
+          small.style.marginLeft = '.35rem';
+          small.textContent = relative(d, now);
+          t.appendChild(small);
+        });
+      }
+      render();
+      setInterval(render, 30000);
+    })();
     (function(){
       const form = document.getElementById('bulk-form');
       const all = document.getElementById('sel-all');

app/templates/index.html

@@ -39,6 +39,37 @@
   </div>
   <div id="unban-me-result"></div>
 
+  <section>
+    <h2>Recent alerts</h2>
+    <form hx-get="/alerts" hx-target="#alerts" hx-trigger="submit, load delay:200ms" hx-swap="innerHTML" hx-indicator="#alerts" class="row">
+      <select name="since">
+        <option value="15m">15m</option>
+        <option value="1h" selected>1h</option>
+        <option value="6h">6h</option>
+        <option value="24h">24h</option>
+        <option value="168h">7d</option>
+        <option value="720h">30d</option>
+      </select>
+      <input type="text" name="ip" placeholder="IP (optional)">
+      <input type="text" name="scenario" placeholder="Scenario (optional)">
+      <select name="origin">
+        <option value="">any origin</option>
+        <option value="crowdsec">crowdsec</option>
+        <option value="cscli">cscli</option>
+        <option value="CAPI">CAPI</option>
+        <option value="lists">lists</option>
+      </select>
+      <select name="limit">
+        <option value="100">100</option>
+        <option value="200" selected>200</option>
+        <option value="500">500</option>
+        <option value="1000">1000</option>
+      </select>
+      <button type="submit">Search</button>
+    </form>
+    <div id="alerts">Loading…</div>
+  </section>
+
   <section>
     <h2>Active decisions</h2>
     <form hx-get="/decisions" hx-target="#decisions" hx-trigger="submit, load delay:200ms" hx-swap="innerHTML" hx-indicator="#decisions" class="row">