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/incident.js

@@ -7,7 +7,7 @@ import {
   h, clear, icon, badge, labelChip, openSheet, closeSheet, confirm, toast, spinner, emptyState,
 } from './ui.js';
 import {
-  ago, when, until, isFuture, severityClass, STATUS_LABEL,
+  ago, when, until, duration, isFuture, severityClass, STATUS_LABEL,
 } from './format.js';
 import { myID, users } from './state.js';
 import { back } from './app.js';
@@ -86,6 +86,7 @@ function render() {
       error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
       h('h1', { class: 'detail-title', text: inc.title }),
       h('div', { class: 'detail-badges' }, statusBadges()),
+      quickActions(),
       facts(),
       groupLabels(),
       alertsSection(),
@@ -125,6 +126,20 @@ function who(id, name) {
 function facts() {
   const rows = [];
   const add = (k, ...v) => rows.push(h('dt', { text: k }), h('dd', {}, ...v));
+
+  // Duration, severity and who's on it, in one scannable row up top — the
+  // rest of this card has each of those too, but spread across rows that
+  // take reading top to bottom to piece together.
+  const elapsedTo = inc.resolved_at ? Date.parse(inc.resolved_at) : Date.now();
+  const responsible = inc.assigned_to_id != null ? who(inc.assigned_to_id, inc.assigned_to)
+    : inc.acknowledged_by_id != null ? who(inc.acknowledged_by_id, inc.acknowledged_by)
+      : 'Unassigned';
+  rows.push(h('dt', { text: 'At a glance' }), h('dd', { class: 'fact-summary' },
+    h('span', { class: 'fact-chip' }, icon('clock', 'icon fact-icon'), duration(elapsedTo - Date.parse(inc.triggered_at))),
+    inc.severity && badge(inc.severity, `plain ${severityClass(inc.severity)}`),
+    h('span', { class: 'fact-chip' }, icon('user', 'icon fact-icon'), responsible),
+  ));
+
   add('Triggered', when(inc.triggered_at), h('span', { class: 'sub', text: ` · ${ago(inc.triggered_at)}` }));
   if (inc.acknowledged_at) {
     add('Acknowledged', `${who(inc.acknowledged_by_id, inc.acknowledged_by)} · ${when(inc.acknowledged_at)}`);
@@ -148,9 +163,12 @@ function facts() {
 function groupLabels() {
   const entries = Object.entries(inc.group_labels || {});
   if (!entries.length) return null;
+  // Collapsed by default, the same disclosure alertItem() below uses for an
+  // alert's own labels — this is background, not something to scan past.
   return h('section', { class: 'section' },
-    h('h2', { class: 'section-title', text: 'Grouped by' }),
-    h('div', { class: 'labels-wrap' }, entries.map(([k, v]) => labelChip(k, v))),
+    h('details', {},
+      h('summary', { text: `Grouped by (${entries.length})` }),
+      h('div', { class: 'labels-wrap' }, entries.map(([k, v]) => labelChip(k, v)))),
   );
 }
 
@@ -206,12 +224,20 @@ function eventText(ev, named = false) {
     case 'snoozed': return [strong(person), ` snoozed until ${ev.detail ? when(ev.detail) : '…'}`];
     case 'unsnoozed': return [strong(person), ' ended the snooze'];
     case 'resolved': return person ? [strong(person), ' resolved the incident'] : ['Resolved: every alert stopped firing'];
+    // Falls through to the generic `${ev.type}: ${ev.detail}` below otherwise
+    // — this just capitalises it and drops the redundant "escalated:" prefix
+    // from detail (already "level 2: alice, bob" or "escalation exhausted: …").
+    case 'escalated': return [`Escalated — ${ev.detail}`];
     case 'note': return [strong(person), ' added a note'];
     case 'resolution_note': return [strong(person), ' noted what fixed it'];
     case 'notified': {
       const to = person ? strong(person) : 'the fallback topic';
       if (ev.detail === 'reminder') return ['Reminder sent to ', to];
       if (ev.detail === 'resolved') return ['Resolution sent to ', to];
+      // 'escalated' is a second, later page — the next level firing, not the
+      // same page landing twice — so it reads as a bug unless told apart
+      // from the initial 'triggered' page below.
+      if (ev.detail === 'escalated') return ['Escalation paged ', to];
       return ['Paged ', to];
     }
     case 'notify_failed': return ['Notification failed', ev.detail ? `: ${ev.detail}` : ''];
@@ -236,8 +262,34 @@ function similarSection() {
   );
 }
 
+// Splits the already-sorted timeline on the status transitions that matter —
+// first acknowledged, then resolved — so a long incident reads as "before
+// anyone had it" / "while someone did" / "after it closed" instead of one
+// undifferentiated list. A later re-acknowledge (after an unacknowledge)
+// doesn't open a second "Acknowledged" phase; it's still the same spell of
+// somebody owning it.
+function timelinePhases(sorted) {
+  const phases = [{ label: 'Triggered', events: [] }];
+  let acked = false;
+  for (const ev of sorted) {
+    if (ev.type === 'acknowledged' && !acked) {
+      phases.push({ label: 'Acknowledged', events: [] });
+      acked = true;
+    } else if (ev.type === 'resolved') {
+      phases.push({ label: 'Resolved', events: [] });
+    }
+    phases[phases.length - 1].events.push(ev);
+  }
+  return phases.filter((p) => p.events.length);
+}
+
 function timelineSection() {
   const sorted = [...events].sort((a, b) => Date.parse(a.created_at) - Date.parse(b.created_at) || a.id - b.id);
+  const phases = timelinePhases(sorted);
+  // A single phase (the common case: most incidents are acked once and
+  // resolved) names nothing extra — only a split timeline needs the
+  // headings to make sense of.
+  const named = phases.length > 1;
   return h('section', { class: 'section' },
     h('h2', { class: 'section-title' },
       h('span', { text: 'Timeline' }),
@@ -245,8 +297,10 @@ function timelineSection() {
         icon('note'), 'Add note')),
     h('div', { class: 'card' },
       sorted.length
-        ? h('ol', { class: 'timeline' }, sorted.map(timelineItem))
-        : emptyState('No events yet', '')),
+        ? phases.map((p) => h('div', { class: 'tl-phase' },
+          named && h('div', { class: 'tl-phase-title', text: p.label }),
+          h('ol', { class: 'timeline' }, p.events.map(timelineItem))))
+        : emptyState('No events yet', 'Nothing has happened on this incident yet.', 'clock')),
   );
 }
 
@@ -365,27 +419,43 @@ async function copyIncident() {
 const isOpen = () => inc.status !== 'resolved';
 const isSnoozed = () => isOpen() && isFuture(inc.snoozed_until);
 
-function actionBar() {
-  let primary;
-  let secondary;
+// primaryAction and secondaryAction are factories, not shared nodes — a
+// button can only live in one place, and quickActions() below needs its own
+// copy of the primary one rather than the actionbar's.
+function primaryAction() {
   if (inc.status === 'triggered') {
-    primary = h('button', { class: 'btn btn-primary', type: 'button', onclick: acknowledge }, icon('check'), 'Acknowledge');
-  } else if (inc.status === 'acknowledged') {
-    primary = h('button', { class: 'btn btn-primary', type: 'button', onclick: resolve }, icon('checkCircle'), 'Resolve');
-  } else {
-    primary = inc.archived_at
-      ? h('button', { class: 'btn btn-primary', type: 'button', onclick: unarchive }, icon('undo'), 'Unarchive')
-      : h('button', { class: 'btn btn-primary', type: 'button', onclick: archive }, icon('archive'), 'Archive');
+    return h('button', { class: 'btn btn-primary', type: 'button', onclick: acknowledge }, icon('check'), 'Acknowledge');
   }
+  if (inc.status === 'acknowledged') {
+    return h('button', { class: 'btn btn-primary', type: 'button', onclick: resolve }, icon('checkCircle'), 'Resolve');
+  }
+  return inc.archived_at
+    ? h('button', { class: 'btn btn-primary', type: 'button', onclick: unarchive }, icon('undo'), 'Unarchive')
+    : h('button', { class: 'btn btn-primary', type: 'button', onclick: archive }, icon('archive'), 'Archive');
+}
+
+function secondaryAction() {
   if (isOpen()) {
-    secondary = isSnoozed()
+    return isSnoozed()
       ? h('button', { class: 'btn', type: 'button', onclick: unsnooze }, icon('bell'), 'Unsnooze')
       : h('button', { class: 'btn', type: 'button', onclick: snooze }, icon('clock'), 'Snooze');
-  } else {
-    secondary = h('button', { class: 'btn', type: 'button', onclick: addNote }, icon('note'), 'Note');
   }
-  const more = h('button', { class: 'btn btn-icon', type: 'button', 'aria-label': 'More actions', onclick: moreMenu }, icon('more'));
-  const bar = h('div', { class: 'actionbar' }, primary, secondary, more);
+  return h('button', { class: 'btn', type: 'button', onclick: addNote }, icon('note'), 'Note');
+}
+
+// A copy of the primary action (Acknowledge/Resolve/…) up where it's seen
+// right away, next to the status it responds to. The sticky actionbar below
+// keeps carrying every action, primary included, for whenever the page has
+// been scrolled past it.
+function quickActions() {
+  const div = h('div', { class: 'detail-quick-actions' }, primaryAction());
+  if (busy) for (const b of div.querySelectorAll('button')) b.disabled = true;
+  return div;
+}
+
+function actionBar() {
+  const more = h('button', { class: 'btn', type: 'button', 'aria-label': 'More actions', onclick: moreMenu }, icon('more'), 'More');
+  const bar = h('div', { class: 'actionbar' }, primaryAction(), secondaryAction(), more);
   if (busy) for (const b of bar.querySelectorAll('button')) b.disabled = true;
   return bar;
 }