Web: visual design pass (issue #26)

Addresses the screenshot-review feedback in #26. No framework or build
step added — all of this stays within the existing plain HTML/CSS/
vanilla-JS + go:embed architecture.

- Nav: re-enable the bottom tab bar that was already built and
  switched off (Queue/On-call/Alerts/Team + a "More" sheet for
  Stats/Admin/Account), replacing the hamburger on phone width.
- Queue: chip counts, a scroll fade on the filter row, a
  "Triggered Xh ago" + severity label per row, a chevron on the team
  switcher so it reads as a dropdown.
- On-call: collapse repeated same-person days into shift bars (week
  view and "your shifts" both), show the week as a date range with
  the ISO week number as secondary text, split "Current shift" out
  from "Next shifts" with "ends in Nd", a pill badge + row highlight
  for "you".
- Incident detail: fix the actual bug behind the duplicate
  "acknowledged" timeline entries (acknowledgeIncident's UPDATE had no
  guard on the incident's current status, so acknowledging an
  already-acknowledged incident silently re-logged the event — now
  idempotent, with regression tests on both the authenticated route
  and the ntfy ack-button route). Relabel escalation re-pages so they
  don't look like the same page landing twice. Copy the primary action
  up near the top. Label the "···" button. Group the timeline by
  phase (triggered/acknowledged/resolved). Add an "at a glance"
  summary row (duration/severity/responsible) and collapse the group
  labels by default.
- Team overview: reword the vague copy ("One owner." etc.) into plain
  labels.
- Empty states: fill in missing icons/one-liners across queue,
  alerts, stats and the incident timeline.
- CSS: fix card padding bugs, verify link contrast already passes AA,
  introduce a --fs-* type-scale token set and migrate the few
  genuinely isolated cases onto it (left sizes tied to a fixed shape,
  a deliberately prominent display, or a non-negotiable constraint
  like the iOS-zoom-prevention input size as documented exceptions
  rather than guess at a render this change can't see).

Verified with the full fmt/lint/test/helm-lint gate, plus a live
instance against the test DB with seeded incidents and schedule data
to trace the on-call grouping and timeline phase-splitting logic
against real API responses.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

internal/web/static/js/queue.js

@@ -2,7 +2,7 @@
 
 import * as api from './api.js';
 import { h, clear, badge, emptyState, spinner } from './ui.js';
-import { age, until, isFuture, severityClass, labelSummary, teamColorClass } from './format.js';
+import { ago, until, isFuture, severityClass, labelSummary, teamColorClass } from './format.js';
 import { state, myID, setSelectedTeam, onTeamChange } from './state.js';
 import * as onboarding from './onboarding.js';
 import { navigate } from './app.js';
@@ -18,12 +18,12 @@ const FILTERS = [
 ];
 
 const EMPTY = {
-  open: ['All clear', 'Nothing open right now.'],
-  triggered: ['Nothing triggered', 'Every open incident has been acknowledged.'],
-  acknowledged: ['Nothing acknowledged', 'No one is working an incident right now.'],
-  snoozed: ['Nothing snoozed', 'Snoozed incidents show up here until the snooze runs out.'],
-  resolved: ['Nothing resolved', 'Resolved incidents are archived after a while.'],
-  archived: ['Nothing archived', ''],
+  open: ['All clear', 'Nothing open right now.', 'checkCircle'],
+  triggered: ['Nothing triggered', 'Every open incident has been acknowledged.', 'checkCircle'],
+  acknowledged: ['Nothing acknowledged', 'No one is working an incident right now.', 'checkCircle'],
+  snoozed: ['Nothing snoozed', 'Snoozed incidents show up here until the snooze runs out.', 'clock'],
+  resolved: ['Nothing resolved', 'Resolved incidents are archived after a while.', null],
+  archived: ['Nothing archived', 'Resolved incidents land here once archived.', 'archive'],
 };
 
 onboarding.onRerender(() => renderList());
@@ -87,6 +87,10 @@ export async function refresh({ fresh = false } = {}) {
     if (requested !== filter) return;
     error = err.message;
   }
+  // state.open (what the chip counts read) has just been refreshed too, by
+  // whichever caller updated it before calling here — app.js's poll, or the
+  // `cached` branch above.
+  renderChips();
   renderList();
 }
 
@@ -101,18 +105,32 @@ function setFilter(id) {
   refresh({ fresh: true });
 }
 
+// Counts for the three chips derivable from the open list already fetched
+// for the badges — Snoozed/Resolved/Archived would need a request of their
+// own, so those chips stay count-less for now.
+function chipCount(id) {
+  const open = state.selectedTeamID == null
+    ? state.open
+    : state.open.filter((i) => i.team_id === state.selectedTeamID);
+  if (id === 'open') return open.length;
+  if (id === 'triggered') return open.filter((i) => i.status === 'triggered').length;
+  if (id === 'acknowledged') return open.filter((i) => i.status === 'acknowledged').length;
+  return null;
+}
+
 function renderChips() {
   const el = document.getElementById('queue-filters');
-  const chips = FILTERS.map((f) =>
-    h('button', {
+  const chips = FILTERS.map((f) => {
+    const count = chipCount(f.id);
+    return h('button', {
       class: 'chip',
       type: 'button',
       role: 'tab',
       'aria-selected': String(f.id === filter),
       onclick: () => setFilter(f.id),
       text: f.label,
-    }),
-  );
+    }, count != null && h('span', { class: 'count', text: String(count) }));
+  });
 
   // Somebody in one team has nothing to choose between, so the row of team
   // chips appears only when there is more than one. The default is all of
@@ -140,6 +158,12 @@ function renderChips() {
     }
   }
 
+  // A scroll hint for the phone-width row, where the chips can run off the
+  // right edge with nothing to suggest there's more; the desktop sidebar
+  // wraps instead of scrolling (see .pane-list .chips), so this fades out
+  // there via CSS rather than being left out here.
+  chips.push(h('span', { class: 'chips-fade', 'aria-hidden': 'true' }));
+
   clear(el, chips);
 }
 
@@ -155,8 +179,8 @@ function renderList() {
     return;
   }
   if (!items.length) {
-    const [title, text] = EMPTY[filter];
-    clear(el, checklist, emptyState(title, text, filter === 'open' ? 'checkCircle' : null));
+    const [title, text, iconName] = EMPTY[filter];
+    clear(el, checklist, emptyState(title, text, iconName));
     return;
   }
   clear(el,
@@ -201,9 +225,12 @@ function row(inc, index) {
     dataset: { index: String(index) },
   },
     h('div', { class: 'row-title', text: inc.title }),
-    h('div', { class: 'row-age', title: inc.triggered_at, text: age(inc.triggered_at) }),
+    h('div', { class: 'row-age', title: inc.triggered_at, text: `Triggered ${ago(inc.triggered_at)}` }),
     h('div', { class: 'row-meta' },
       status,
+      // The left-border colour alone doesn't say what it means; spell it out
+      // too, same badge the incident detail page uses for severity.
+      inc.severity && badge(inc.severity, `plain ${severityClass(inc.severity)}`),
       assignee,
       team,
       labels && h('span', { class: 'labels', text: labels }),