Set the chart's placeholder version to 0.23.0

Cosmetic: make helm-package sets the published version and appVersion
from the tag, so these two fields decide nothing (see the comment
above them). Kept in step anyway, same as d2cdcc9 and 71d7e18, so a
tree heading for v0.23.0 doesn't say 0.22.1.

README.md

@@ -48,11 +48,12 @@ curl -H "Authorization: Bearer $KEY" http://localhost:8080/api/users
 The server serves a web UI at `/`: the incident queue, each incident's alerts
 and timeline with every action (acknowledge, assign, snooze, note, resolve,
 archive), who is on call, the alert feed, and an *Account* tab for your own
-password and the ntfy topic your pages go to. It is built for a phone first. On a phone it has a bottom tab bar and a sticky action
-bar, it follows the system's dark mode, and it can be added to the home screen.
-From 900px wide it switches to a sidebar with the queue and the incident side by
-side. Statistics remain in
-[terdut-tui](https://github.com/yeniklas/terdut-tui) for now.
+password and the ntfy topic your pages go to. It is built for a phone first. On a phone
+it navigates through a hamburger menu and has a sticky action bar, it follows the
+system's dark mode, and it can be added to the home screen. From 900px wide it switches
+to a sidebar with the queue and the incident side by side. The Stats page shows
+incident counts, MTTA and MTTR, and alert frequency by name, hour and day over a
+chosen range.
 
 You sign in with a username and password. Users have no password until one is
 set, and a user without one can only use API keys:
@@ -85,11 +86,16 @@ How a browser stays signed in:
 With `TERDUT_PUBLIC_URL` set, tapping a push notification opens the incident in
 the web UI (`/incidents/{id}`).
 
-A **Team** tab holds everything a team owns: the on-call rota, the escalation
-ladder, the alert sources with their keys, the dead man's switches and the
-membership. An owner edits it; a member sees the same page read-only, because
-the server refuses their writes anyway. Somebody in more than one team picks
-between them at the top.
+A **Team** tab holds everything a team owns, in five sub-sections with a URL
+each and a strip across the top to move between them: the on-call rota
+(`/team/rota`), the membership (`/team/members`), the escalation ladder
+(`/team/escalation`), the alert sources with their keys (`/team/sources`) and
+the dead man's switches (`/team/deadman`). `/team` itself is an overview — who
+is on call today, how many members and owners, how many ladder levels, how many
+keys and how many switches — so a page fetches only what it shows. An owner
+edits it; a member sees the same pages read-only, because the server refuses
+their writes anyway. Somebody in more than one team picks between them above
+the strip, since the choice changes the subject of all five.
 
 The rota is a month at a time, one coloured initial per day with a legend
 underneath, and it says how many days are left uncovered — the question a rota

charts/terdut-server/Chart.yaml

@@ -15,5 +15,5 @@ type: application
 # appVersion and image.tag in values.yaml no longer agree, and that is not an oversight:
 # image.tag stays "latest", which is what a local install actually pulls. appVersion is
 # metadata and drives nothing.
-version: 0.18.0
-appVersion: "v0.18.0"
+version: 0.23.0
+appVersion: "v0.23.0"

internal/api/alertmanager.go

@@ -384,10 +384,10 @@ func openIncident(ctx context.Context, q querier, notify NotifyConfig, teamID in
 
 	var id int64
 	err = q.QueryRowContext(ctx, `
-		INSERT INTO incidents (team_id, group_key, title, group_labels, status, severity, triggered_at, assigned_to)
-		VALUES ($1, $2, $3, $4::jsonb, 'triggered', $5, $6, $7)
+		INSERT INTO incidents (team_id, group_key, title, group_labels, signature, status, severity, triggered_at, assigned_to)
+		VALUES ($1, $2, $3, $4::jsonb, $5, 'triggered', $6, $7, $8)
 		RETURNING id`,
-		teamID, groupKey, title, string(labelsJSON), severity,
+		teamID, groupKey, title, string(labelsJSON), incidentSignature(groupLabels, title), severity,
 		time.Now().Unix(), onCall).Scan(&id)
 	if err != nil {
 		return 0, err

internal/api/incident_store.go

@@ -36,6 +36,10 @@ const (
 	evUnsnoozed      = "unsnoozed"
 	evResolved       = "resolved"
 	evNote           = "note"
+	// evResolutionNote is the note worth finding again: what fixed it. The
+	// similar-incidents lookup and the page lead with these; plain notes are
+	// the working chatter and stay one click away.
+	evResolutionNote = "resolution_note"
 	evDeadmanSilent  = "deadman_silent"
 )
 
@@ -295,6 +299,34 @@ func openIncidentForAlert(ctx context.Context, q querier, alertID int64) (int64,
 	return id, err
 }
 
+// volatileLabels say where a problem ran this time, not what the problem is, so
+// they stay out of the signature. Migration 008's backfill lists the same set.
+var volatileLabels = map[string]bool{
+	"instance": true, "pod": true, "pod_name": true, "pod_ip": true,
+	"container": true, "container_name": true, "endpoint": true,
+}
+
+// incidentSignature identifies "the same problem" across incidents: the alert
+// name plus the stable group labels, sorted. Incidents in one team with equal
+// signatures are what the similar-incidents lookup returns. title stands in for
+// the name when the payload carried no alertname (groupless and dead man's
+// switch incidents).
+func incidentSignature(groupLabels map[string]string, title string) string {
+	name := groupLabels["alertname"]
+	if name == "" {
+		name = title
+	}
+	rest := make([]string, 0, len(groupLabels))
+	for k, v := range groupLabels {
+		if k == "alertname" || volatileLabels[k] {
+			continue
+		}
+		rest = append(rest, k+"="+v)
+	}
+	sort.Strings(rest)
+	return name + "|" + strings.Join(rest, ",")
+}
+
 // incidentTitle renders a human-readable title from Alertmanager's groupLabels,
 // leading with the alert name and appending whatever else the operator grouped
 // by. Falls back to the alert's own name when the payload carried no groupLabels.

internal/api/incidents.go

@@ -3,6 +3,7 @@ package api
 import (
 	"database/sql"
 	"fmt"
+	"io"
 	"net/http"
 	"strconv"
 	"strings"
@@ -237,6 +238,15 @@ func handleIncidentResolve(db *sql.DB) http.HandlerFunc {
 			return
 		}
 		user, _ := userFromContext(r.Context())
+		// The body is optional: clients that predate resolution notes send none.
+		var req struct {
+			Resolution string `json:"resolution"`
+		}
+		if err := decodeJSON(r, &req); err != nil && err != io.EOF {
+			respond(w, http.StatusBadRequest, errResp("invalid request body"))
+			return
+		}
+		req.Resolution = strings.TrimSpace(req.Resolution)
 		if !updateOpenIncident(w, r, db, id,
 			`UPDATE incidents SET status = 'resolved', resolved_at = $1, resolution_source = $2
 			  WHERE id = $3 AND resolved_at IS NULL`,
@@ -252,6 +262,12 @@ func handleIncidentResolve(db *sql.DB) http.HandlerFunc {
 			respond(w, http.StatusInternalServerError, errResp("internal error"))
 			return
 		}
+		if req.Resolution != "" {
+			if err := logEvent(r.Context(), db, id, evResolutionNote, &user.ID, nil, &req.Resolution); err != nil {
+				respond(w, http.StatusInternalServerError, errResp("internal error"))
+				return
+			}
+		}
 		respondIncident(w, r, db, id)
 	}
 }
@@ -421,11 +437,17 @@ func handleCreateNote(db *sql.DB) http.HandlerFunc {
 		}
 		var req struct {
 			Content string `json:"content"`
+			// Pinned files the note as the resolution note: what fixed it.
+			Pinned bool `json:"pinned"`
 		}
 		if err := decodeJSON(r, &req); err != nil {
 			respond(w, http.StatusBadRequest, errResp("invalid request body"))
 			return
 		}
+		noteType := evNote
+		if req.Pinned {
+			noteType = evResolutionNote
+		}
 		if req.Content == "" {
 			respond(w, http.StatusBadRequest, errResp("content is required"))
 			return
@@ -440,7 +462,7 @@ func handleCreateNote(db *sql.DB) http.HandlerFunc {
 		err := db.QueryRowContext(r.Context(), `
 			INSERT INTO incident_events (incident_id, type, user_id, detail, created_at)
 			VALUES ($1, $2, $3, $4, $5)
-			RETURNING id`, id, evNote, user.ID, req.Content, now.Unix()).Scan(&eventID)
+			RETURNING id`, id, noteType, user.ID, req.Content, now.Unix()).Scan(&eventID)
 		if err != nil {
 			respond(w, http.StatusInternalServerError, errResp("internal error"))
 			return
@@ -449,7 +471,7 @@ func handleCreateNote(db *sql.DB) http.HandlerFunc {
 		respond(w, http.StatusCreated, models.IncidentEvent{
 			ID:         eventID,
 			IncidentID: id,
-			Type:       evNote,
+			Type:       noteType,
 			UserID:     &user.ID,
 			Username:   &user.Username,
 			Detail:     &req.Content,
@@ -475,8 +497,8 @@ func handleDeleteNote(db *sql.DB) http.HandlerFunc {
 		user, _ := userFromContext(r.Context())
 		res, err := db.ExecContext(r.Context(), `
 			DELETE FROM incident_events
-			 WHERE id = $1 AND incident_id = $2 AND type = $3 AND user_id = $4`,
-			eventID, id, evNote, user.ID)
+			 WHERE id = $1 AND incident_id = $2 AND type IN ($3, $4) AND user_id = $5`,
+			eventID, id, evNote, evResolutionNote, user.ID)
 		if err != nil {
 			respond(w, http.StatusInternalServerError, errResp("internal error"))
 			return

internal/api/notifier.go

@@ -330,6 +330,16 @@ func deliver(ctx context.Context, db *sql.DB, cfg NotifyConfig, n outboxRow) err
 
 	msg := renderNotification(inc, n, firing, cfg)
 
+	// The page that opens an incident carries what fixed it last time, so the
+	// person woken up starts from that. Best effort: a failed lookup must not
+	// hold back the page itself.
+	if n.kind == notifyTriggered {
+		if sim, err := similarIncidents(ctx, db, n.incidentID, 1); err == nil && len(sim) > 0 && len(sim[0].ResolutionNotes) > 0 {
+			notes := sim[0].ResolutionNotes
+			msg.Message += "\nLast time: " + shorten(derefString(notes[len(notes)-1].Detail), 160)
+		}
+	}
+
 	// An Acknowledge button needs both a user to attribute the acknowledgement
 	// to and a URL the phone can reach. Minted per delivery, so every push
 	// carries its own short-lived token rather than reusing one.
@@ -573,6 +583,17 @@ func plural(n int) string {
 	return "s"
 }
 
+// shorten cuts s to at most n runes, marking the cut, and flattens newlines so
+// a multi-line note stays one line in a push.
+func shorten(s string, n int) string {
+	s = strings.Join(strings.Fields(s), " ")
+	r := []rune(s)
+	if len(r) <= n {
+		return s
+	}
+	return string(r[:n-1]) + "…"
+}
+
 // derefString reads a nullable text column as a plain string.
 func derefString(s *string) string {
 	if s == nil {

internal/api/router.go

@@ -112,6 +112,7 @@ func NewRouter(db *sql.DB, notify NotifyConfig, cfg config.Config) http.Handler
 		r.Get("/api/incidents/{id}", handleGetIncident(db))
 		r.Get("/api/incidents/{id}/alerts", handleIncidentAlerts(db))
 		r.Get("/api/incidents/{id}/timeline", handleIncidentTimeline(db))
+		r.Get("/api/incidents/{id}/similar", handleIncidentSimilar(db))
 		r.Post("/api/incidents/{id}/acknowledge", handleIncidentAcknowledge(db))
 		r.Delete("/api/incidents/{id}/acknowledge", handleIncidentUnacknowledge(db))
 		r.Post("/api/incidents/{id}/resolve", handleIncidentResolve(db))

internal/api/similar.go

@@ -0,0 +1,113 @@
+package api
+
+import (
+	"context"
+	"database/sql"
+	"net/http"
+	"strconv"
+	"time"
+
+	"git.ryuvia.com/niklas/terdut-server/internal/models"
+)
+
+const (
+	similarDefaultLimit = 5
+	similarMaxLimit     = 20
+)
+
+// handleIncidentSimilar lists earlier, resolved incidents in the same team with
+// the same signature that someone left notes on, incidents with a resolution
+// note first. This is the "have we seen this before" answer for a responder
+// looking at a fresh incident; the plain notes are one timeline fetch away.
+func handleIncidentSimilar(db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		id, ok := incidentIDParam(w, r, db)
+		if !ok {
+			return
+		}
+		limit := similarDefaultLimit
+		if v := r.URL.Query().Get("limit"); v != "" {
+			n, err := strconv.Atoi(v)
+			if err != nil || n < 1 {
+				respond(w, http.StatusBadRequest, errResp("invalid limit"))
+				return
+			}
+			limit = min(n, similarMaxLimit)
+		}
+
+		out, err := similarIncidents(r.Context(), db, id, limit)
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		respond(w, http.StatusOK, out)
+	}
+}
+
+func similarIncidents(ctx context.Context, q querier, id int64, limit int) ([]models.SimilarIncident, error) {
+	rows, err := q.QueryContext(ctx, `
+		SELECT o.id, o.title, o.triggered_at, o.resolved_at,
+		       (SELECT COUNT(*) FROM incident_events e
+		         WHERE e.incident_id = o.id AND e.type = $3)
+		FROM   incidents i
+		JOIN   incidents o ON o.team_id = i.team_id AND o.signature = i.signature
+		WHERE  i.id = $1 AND o.id <> i.id AND o.resolved_at IS NOT NULL
+		  AND  EXISTS (SELECT 1 FROM incident_events e
+		                WHERE e.incident_id = o.id AND e.type IN ($3, $4))
+		ORDER  BY EXISTS (SELECT 1 FROM incident_events e
+		                   WHERE e.incident_id = o.id AND e.type = $4) DESC,
+		          o.triggered_at DESC
+		LIMIT  $2`, id, limit, evNote, evResolutionNote)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	out := []models.SimilarIncident{}
+	ids := []int64{}
+	for rows.Next() {
+		var s models.SimilarIncident
+		var triggered, resolved int64
+		if err := rows.Scan(&s.ID, &s.Title, &triggered, &resolved, &s.NoteCount); err != nil {
+			return nil, err
+		}
+		s.TriggeredAt = time.Unix(triggered, 0).UTC()
+		s.ResolvedAt = time.Unix(resolved, 0).UTC()
+		s.ResolutionNotes = []models.IncidentEvent{}
+		out = append(out, s)
+		ids = append(ids, s.ID)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	if len(out) == 0 {
+		return out, nil
+	}
+
+	nrows, err := q.QueryContext(ctx, `
+		SELECT e.id, e.incident_id, e.type, e.user_id, u.username, e.detail, e.created_at
+		FROM   incident_events e
+		LEFT   JOIN users u ON u.id = e.user_id
+		WHERE  e.incident_id = ANY($1) AND e.type = $2
+		ORDER  BY e.created_at, e.id`, ids, evResolutionNote)
+	if err != nil {
+		return nil, err
+	}
+	defer nrows.Close()
+
+	byID := make(map[int64]*models.SimilarIncident, len(out))
+	for i := range out {
+		byID[out[i].ID] = &out[i]
+	}
+	for nrows.Next() {
+		var e models.IncidentEvent
+		var ts int64
+		if err := nrows.Scan(&e.ID, &e.IncidentID, &e.Type, &e.UserID, &e.Username, &e.Detail, &ts); err != nil {
+			return nil, err
+		}
+		e.CreatedAt = time.Unix(ts, 0).UTC()
+		s := byID[e.IncidentID]
+		s.ResolutionNotes = append(s.ResolutionNotes, e)
+	}
+	return out, nrows.Err()
+}

internal/api/similar_test.go

@@ -0,0 +1,99 @@
+package api_test
+
+import (
+	"bytes"
+	"encoding/json"
+	"net/http"
+	"strconv"
+	"testing"
+)
+
+// postGrouped posts a firing webhook whose group labels are exactly the given
+// map, unlike postWebhook, which only ever groups by alertname.
+func postGrouped(t *testing.T, s *ts, fingerprint, startsAt string, groupLabels map[string]string) {
+	t.Helper()
+	labels := map[string]string{}
+	for k, v := range groupLabels {
+		labels[k] = v
+	}
+	payload := map[string]any{
+		"version": "4", "status": "firing",
+		"groupKey":    fingerprint,
+		"groupLabels": groupLabels,
+		"alerts": []map[string]any{
+			amAlert(fingerprint, groupLabels["alertname"], "firing", startsAt, zeroTime, labels),
+		},
+	}
+	data, _ := json.Marshal(payload)
+	resp, err := http.Post(s.URL+"/api/integrations/"+s.ingestKey+"/alertmanager",
+		"application/json", bytes.NewReader(data))
+	if err != nil {
+		t.Fatalf("post webhook: %v", err)
+	}
+	resp.Body.Close()
+}
+
+func similar(t *testing.T, s *ts, id int) []map[string]any {
+	t.Helper()
+	var out []map[string]any
+	decode(t, s.req(t, http.MethodGet, "/api/incidents/"+strconv.Itoa(id)+"/similar", nil), &out)
+	return out
+}
+
+// Same alert on another instance is the same problem; a resolution note left on
+// the first one is what the second one should be shown.
+func TestSimilar_IgnoresVolatileLabelsAndLeadsWithResolutionNote(t *testing.T) {
+	s := newTS(t)
+	postGrouped(t, s, "fp-a", "2026-05-20T10:00:00Z",
+		map[string]string{"alertname": "DiskFull", "instance": "web-1", "job": "node"})
+	s.req(t, http.MethodPost, "/api/incidents/1/resolve",
+		map[string]string{"resolution": "rotated the logs"}).Body.Close()
+
+	postGrouped(t, s, "fp-b", "2026-05-21T10:00:00Z",
+		map[string]string{"alertname": "DiskFull", "instance": "web-2", "job": "node"})
+
+	got := similar(t, s, 2)
+	if len(got) != 1 || int(got[0]["id"].(float64)) != 1 {
+		t.Fatalf("expected incident 1 as the only similar one, got %v", got)
+	}
+	notes := got[0]["resolution_notes"].([]any)
+	if len(notes) != 1 || notes[0].(map[string]any)["detail"] != "rotated the logs" {
+		t.Fatalf("expected the resolution note, got %v", notes)
+	}
+}
+
+// A different stable label (job) is a different problem, and an incident nobody
+// wrote a note on has nothing to show.
+func TestSimilar_DifferentSignatureOrNoNotesIsExcluded(t *testing.T) {
+	s := newTS(t)
+	postGrouped(t, s, "fp-1", "2026-05-20T10:00:00Z",
+		map[string]string{"alertname": "DiskFull", "job": "node"})
+	s.req(t, http.MethodPost, "/api/incidents/1/notes", map[string]string{"content": "checked"}).Body.Close()
+	s.req(t, http.MethodPost, "/api/incidents/1/resolve", nil).Body.Close()
+
+	postGrouped(t, s, "fp-2", "2026-05-20T11:00:00Z",
+		map[string]string{"alertname": "DiskFull", "job": "db"})
+	s.req(t, http.MethodPost, "/api/incidents/2/resolve", nil).Body.Close()
+
+	postGrouped(t, s, "fp-3", "2026-05-21T10:00:00Z",
+		map[string]string{"alertname": "DiskFull", "job": "db"})
+
+	// Incident 3 matches 2 by signature, but 2 has no notes.
+	if got := similar(t, s, 3); len(got) != 0 {
+		t.Fatalf("expected nothing similar to incident 3, got %v", got)
+	}
+}
+
+// An open incident is not "earlier experience" yet, and the incident itself is
+// never its own match.
+func TestSimilar_OpenIncidentsAreNotListed(t *testing.T) {
+	s := newTS(t)
+	postGrouped(t, s, "fp-o1", "2026-05-20T10:00:00Z", map[string]string{"alertname": "Flap"})
+	s.req(t, http.MethodPost, "/api/incidents/1/notes",
+		map[string]any{"content": "still open", "pinned": true}).Body.Close()
+	postGrouped(t, s, "fp-o2", "2026-05-21T10:00:00Z", map[string]string{"alertname": "Flap"})
+
+	if got := similar(t, s, 2); len(got) != 0 {
+		t.Fatalf("expected an open incident not to be listed, got %v", got)
+	}
+}

internal/db/db.go

@@ -5,6 +5,7 @@ import (
 	"embed"
 	"fmt"
 	"io/fs"
+	"log"
 	"sort"
 	"strings"
 	"time"
@@ -15,6 +16,19 @@ import (
 //go:embed migrations
 var migrationsFS embed.FS
 
+// pingAttempts and pingRetryDelay bound the retry on the first connection.
+// This pod's own IP can reach the Postgres pod's node before that node's
+// NetworkPolicy enforcement (kube-router, reacting to the pod's creation
+// event) has added it to the allowed-source set, which fails the ping with
+// "connection refused" rather than a timeout. That race resolves within
+// several seconds in practice; five attempts two seconds apart give it
+// comfortable room without turning a genuinely absent database into a long
+// hang.
+const (
+	pingAttempts   = 5
+	pingRetryDelay = 2 * time.Second
+)
+
 // Open connects to Postgres. dsn is a libpq connection string or URL, e.g.
 // postgres://terdut:secret@localhost:5432/terdut?sslmode=disable.
 //
@@ -33,11 +47,19 @@ func Open(dsn string) (*sql.DB, error) {
 	db.SetMaxOpenConns(10)
 	db.SetMaxIdleConns(5)
 	db.SetConnMaxLifetime(time.Hour)
-	if err := db.Ping(); err != nil {
-		db.Close()
-		return nil, fmt.Errorf("ping: %w", err)
+
+	for attempt := 1; ; attempt++ {
+		err = db.Ping()
+		if err == nil {
+			return db, nil
+		}
+		if attempt == pingAttempts {
+			db.Close()
+			return nil, fmt.Errorf("ping: %w", err)
+		}
+		log.Printf("open db: ping attempt %d/%d failed, retrying in %s: %v", attempt, pingAttempts, pingRetryDelay, err)
+		time.Sleep(pingRetryDelay)
 	}
-	return db, nil
 }
 
 // Migrate applies every embedded migration that has not been applied yet, in

internal/db/migrations/008_incident_signature.sql

@@ -0,0 +1,23 @@
+-- Similar incidents: a signature per incident, so "has this happened before"
+-- is an indexed equality instead of a search.
+--
+-- The signature is the alert name plus the group labels that identify WHAT is
+-- broken, minus the ones that only say WHERE it happened to run this time
+-- (instance, pod, ...). Two incidents with the same signature in the same team
+-- are the same problem for a responder's purposes.
+--
+-- Computed in Go for new incidents (incidentSignature in incident_store.go).
+-- The backfill below MUST produce the same string; keep the volatile list in
+-- both places in step.
+ALTER TABLE incidents ADD COLUMN signature TEXT NOT NULL DEFAULT '';
+
+UPDATE incidents SET signature =
+    COALESCE(NULLIF(group_labels->>'alertname', ''), title) || '|' ||
+    COALESCE((
+        SELECT string_agg(e.k || '=' || e.v, ',' ORDER BY e.k)
+          FROM jsonb_each_text(incidents.group_labels) AS e(k, v)
+         WHERE e.k <> 'alertname'
+           AND e.k NOT IN ('instance', 'pod', 'pod_name', 'pod_ip', 'container', 'container_name', 'endpoint')
+    ), '');
+
+CREATE INDEX incidents_signature_idx ON incidents(team_id, signature, triggered_at DESC);

internal/models/incident.go

@@ -79,3 +79,15 @@ type IncidentEvent struct {
 	Detail     *string   `json:"detail,omitempty"`
 	CreatedAt  time.Time `json:"created_at"`
 }
+
+// SimilarIncident is an earlier, resolved incident with the same signature as
+// the one being looked at. ResolutionNotes are the "what fixed it" notes;
+// NoteCount counts the plain working notes, which live on the timeline.
+type SimilarIncident struct {
+	ID              int64           `json:"id"`
+	Title           string          `json:"title"`
+	TriggeredAt     time.Time       `json:"triggered_at"`
+	ResolvedAt      time.Time       `json:"resolved_at"`
+	NoteCount       int             `json:"note_count"`
+	ResolutionNotes []IncidentEvent `json:"resolution_notes"`
+}

internal/web/incident_test.go

@@ -0,0 +1,26 @@
+package web
+
+import (
+	"io/fs"
+	"strings"
+	"testing"
+)
+
+func TestCopyIncidentIsEmbedded(t *testing.T) {
+	sub, err := fs.Sub(files, "static")
+	if err != nil {
+		t.Fatal(err)
+	}
+	for file, want := range map[string]string{
+		"js/incident.js": "copyIncident",
+		"js/ui.js":       "copy:",
+	} {
+		b, err := fs.ReadFile(sub, file)
+		if err != nil {
+			t.Fatal(err)
+		}
+		if !strings.Contains(string(b), want) {
+			t.Errorf("%s lacks %s", file, want)
+		}
+	}
+}

internal/web/static/app.css

@@ -48,7 +48,11 @@
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 
   --topbar-h: 52px;
-  --tabbar-h: 58px;
+  /* No bottom tab bar on any breakpoint any more — mobile uses the hamburger
+     menu in the topbar, desktop the sidebar — so this stays 0. Kept as a
+     variable rather than deleted since .view, .toast and .nav's own height
+     calc still read it. */
+  --tabbar-h: 0px;
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
@@ -196,7 +200,13 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   -webkit-backdrop-filter: saturate(1.4) blur(12px);
   border-bottom: 1px solid var(--border);
 }
-.topbar-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
+.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.topbar-title {
+  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+#menu-btn { position: relative; }
+.nav-badge.menu-btn-badge { top: 2px; left: auto; right: 2px; }
 
 .open-pill {
   display: inline-flex; align-items: center; gap: 6px;
@@ -209,15 +219,12 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 .open-pill.has-triggered::before { background: var(--crit); }
 .open-pill.all-acked::before { background: var(--warn); }
 
-/* Bottom tab bar on phones. */
+/* Hidden on phones — mobile navigates through the hamburger menu in the
+   topbar instead (see #menu-btn / openNavMenu in app.js). Reappears as the
+   left sidebar from 900px, where the desktop block below redeclares display. */
 .nav {
+  display: none;
   position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
-  /* One column per link, however many there are. This was repeat(4, 1fr) when
-     there were four tabs; Team and Admin arriving pushed six items into four
-     columns, which on a phone is how they stopped fitting. Auto columns mean
-     the next tab cannot break the row either — and Admin is only rendered for
-     an administrator, so the count genuinely varies between viewers. */
-  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
   height: calc(var(--tabbar-h) + var(--safe-bottom));
   padding-bottom: var(--safe-bottom);
   background: color-mix(in srgb, var(--surface) 92%, transparent);
@@ -239,16 +246,6 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 }
 .nav-link svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 
-/* Narrow phones, where six tabs each get about 55-65px. Tightening is enough:
-   the widest label, "On-call", is about 38px at this size, so nothing has to
-   be hidden. The ellipsis above is the backstop if a future tab is named
-   something longer. */
-@media (max-width: 420px) {
-  .nav-link { font-size: 10px; gap: 1px; }
-  .nav-link svg { width: 21px; height: 21px; }
-  .nav-badge { left: calc(50% + 4px); min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
-}
-
 .nav-link[aria-current="page"] { color: var(--accent); }
 .nav-badge {
   position: absolute; top: 6px; left: calc(50% + 6px);
@@ -380,6 +377,8 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   -webkit-backdrop-filter: saturate(1.4) blur(12px);
   border-bottom: 1px solid var(--border);
 }
+.detail-head .copy { margin-left: auto; }
+.clip-buffer { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }
 .detail-head .crumb { font-weight: 600; color: var(--muted); font-size: 14px; }
 .detail-title { font-size: 21px; font-weight: 750; letter-spacing: -0.01em; margin: 16px 0 8px; overflow-wrap: anywhere; }
 .detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
@@ -453,11 +452,16 @@ details[open] > summary { margin-bottom: 8px; }
 .tl-text { overflow-wrap: anywhere; }
 .tl-text .who { font-weight: 650; }
 .tl-time { color: var(--faint); font-size: 12px; }
-.tl-note .note {
+.note {
   margin-top: 6px; padding: 10px 12px;
   background: var(--surface-2); border-radius: var(--radius-sm);
   white-space: pre-wrap; overflow-wrap: anywhere;
 }
+.note-fix { background: var(--ok-soft); border-left: 3px solid var(--ok); }
+.similar { list-style: none; margin: 0; padding: 0; }
+.similar-item { padding: 10px 0; }
+.similar-item + .similar-item { border-top: 1px solid var(--border, var(--surface-2)); }
+.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
 .note-actions { display: flex; justify-content: flex-end; }
 .note-actions .btn { color: var(--muted); }
 
@@ -601,8 +605,6 @@ kbd {
 /* ---------- desktop ---------- */
 
 @media (min-width: 900px) {
-  :root { --tabbar-h: 0px; }
-
   .app { display: grid; grid-template-columns: 220px 1fr; height: 100dvh; }
 
   .nav {
@@ -638,6 +640,10 @@ kbd {
   .view-queue .pane { overflow: auto; height: 100dvh; }
   .pane-list { border-right: 1px solid var(--border); }
   .pane-list .chips { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-top: 16px; }
+  /* The pane is 340-420px wide and a mouse cannot scroll a row whose scrollbar
+     is hidden, so the chips wrap here instead: Archived stays reachable. */
+  .pane-list .chips { flex-wrap: wrap; overflow-x: visible; }
+  .pane-list .chip-sep { display: none; }
   .view-queue:not(.has-detail) .pane-detail { display: block; }
 
   /* On desktop the list stays visible next to the detail. */
@@ -836,11 +842,14 @@ button.rota-day:hover { background: var(--surface-2); }
 
 .signup-intro { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
 
-/* --- admin sub-navigation ------------------------------------------------
-   A strip of links across the top of every admin page, one per sub-section.
-   Deliberately not .chip: chips filter what a page already shows, here and in
-   the queue, and these four go somewhere. Same aria-current convention as the
-   tab bar, so the state lives on the attribute rather than in a class. */
+/* --- sub-navigation -------------------------------------------------------
+   A strip of links across the top of every Admin and every Team page, one per
+   sub-section. Deliberately not .chip: chips filter what a page already shows,
+   here and in the queue, and these go somewhere. Same aria-current convention
+   as the tab bar, so the state lives on the attribute rather than in a class.
+
+   Six entries do not fit a phone's width, which is what the horizontal scroll
+   below is for -- the Team tab's strip is the one that needs it. */
 .subnav {
   display: flex; gap: 2px;
   margin: 12px auto 0;
@@ -857,13 +866,52 @@ button.rota-day:hover { background: var(--surface-2); }
 .subnav-link:hover { color: var(--text); }
 .subnav-link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
 
-/* The overview at /admin. The strip above already links to the three, so these
-   carry the counts, which is the part a menu cannot say. */
-.admin-menu { display: grid; gap: 10px; margin-top: 16px; }
+/* The overview a tab opens on, at /admin and at /team. The strip above already
+   links to the sections, so these carry the counts, which is the part a menu
+   cannot say. Not named for either tab: both use it, and the one that renamed
+   .user-link to .row-link is the same rename for the same reason. */
+.overview-menu { display: grid; gap: 10px; margin-top: 16px; }
 /* The grid's gap is the spacing here, so .card + .card must not add its own. */
-.admin-menu .card + .card { margin-top: 0; }
-.admin-menu-item { display: block; padding: 14px; }
-.admin-menu-item:hover { background: var(--surface-hover); }
-.admin-menu-head { display: flex; align-items: baseline; gap: 8px; }
-.admin-menu-count { margin-left: auto; color: var(--muted); font-size: 18px; font-weight: 700; }
-.admin-menu-item p { margin: 4px 0 0; }
+.overview-menu .card + .card { margin-top: 0; }
+.overview-item { display: block; padding: 14px; }
+.overview-item:hover { background: var(--surface-hover); }
+.overview-head { display: flex; align-items: baseline; gap: 8px; }
+.overview-count { margin-left: auto; color: var(--muted); font-size: 18px; font-weight: 700; }
+.overview-item p { margin: 4px 0 0; }
+
+/* ---------- stats page ---------- */
+
+#view-stats .chips { padding-left: 0; padding-right: 0; }
+.stats { display: grid; gap: 14px; padding-bottom: 16px; }
+.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
+.stat-tile {
+  --sev: var(--border-strong);
+  background: var(--surface); border: 1px solid var(--border);
+  border-left: 3px solid var(--sev); border-radius: var(--radius);
+  box-shadow: var(--shadow); padding: 12px;
+}
+.stat-tile.st-triggered { --sev: var(--crit); }
+.stat-tile.st-acknowledged { --sev: var(--warn); }
+.stat-tile.st-resolved { --sev: var(--ok); }
+.stat-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.stat-label { margin-top: 2px; font-size: 12px; color: var(--muted); }
+.chart-card + .chart-card { margin-top: 0; }
+.chart-title {
+  margin-bottom: 10px; font-size: 13px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
+}
+.hbars { list-style: none; display: grid; gap: 6px; }
+.hbar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
+.hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hbar-track { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
+.hbar-fill { display: block; height: 100%; border-radius: 5px; background: var(--ok); }
+.hbar-count { min-width: 2ch; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
+.columns { display: block; width: 100%; height: auto; }
+.columns .axis { stroke: var(--border-strong); stroke-width: 1; }
+.columns .col-hit { fill: transparent; }
+.columns .col-bar { fill: var(--accent); }
+.columns .col:hover .col-bar { opacity: 0.75; }
+.columns .col-label { fill: var(--faint); font-size: 10px; font-family: var(--font); }
+@media (min-width: 900px) {
+  .stat-tiles { grid-template-columns: repeat(3, 1fr); }
+}

internal/web/static/index.html

@@ -90,6 +90,10 @@
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg>
         <span class="nav-label">Alerts</span>
       </a>
+      <a class="nav-link" href="/stats" data-section="stats" aria-label="Stats">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h16M7 20v-7M12 20V6M17 20v-10"/></svg>
+        <span class="nav-label">Stats</span>
+      </a>
       <a class="nav-link" href="/team" data-section="team" aria-label="Team">
         <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19a6 6 0 0 1 12 0M15 19a5 5 0 0 1 6-4"/></svg>
         <span class="nav-label">Team</span>
@@ -108,7 +112,13 @@
     </nav>
 
     <header class="topbar">
-      <h1 class="topbar-title" id="topbar-title">Queue</h1>
+      <div class="topbar-left">
+        <button class="btn btn-ghost btn-icon" id="menu-btn" type="button" aria-label="Menu" aria-haspopup="menu">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
+          <span class="nav-badge menu-btn-badge" data-badge hidden></span>
+        </button>
+        <h1 class="topbar-title" id="topbar-title">Queue</h1>
+      </div>
       <span class="open-pill" id="open-pill" hidden></span>
     </header>
 
@@ -122,6 +132,7 @@
 
     <section id="view-oncall" class="view view-page" data-view="oncall" hidden></section>
     <section id="view-alerts" class="view view-page" data-view="alerts" hidden></section>
+    <section id="view-stats" class="view view-page" data-view="stats" hidden></section>
     <section id="view-team" class="view view-page" data-view="team" hidden></section>
     <section id="view-admin" class="view view-page" data-view="admin" hidden></section>
     <!-- One person, at /admin/users/{id}: reached from the Admin tab's user

internal/web/static/js/account.js

@@ -35,7 +35,6 @@ function render() {
 
     h('div', { class: 'page-head' }),
     h('button', { class: 'btn btn-block', type: 'button', onclick: signOut }, icon('logout'), 'Sign out'),
-    h('p', { class: 'foot-note', text: 'Statistics are in terdut-tui for now.' }),
   );
 }
 

internal/web/static/js/admin.js

@@ -13,7 +13,7 @@
 // gate.
 
 import * as api from './api.js';
-import { h, clear, spinner, confirm } from './ui.js';
+import { h, clear, spinner, confirm, menuCard } from './ui.js';
 import { state, myID } from './state.js';
 
 const view = () => document.getElementById('view-admin');
@@ -123,26 +123,17 @@ function overview() {
   const people = [`${admins} ${admins === 1 ? 'administrator' : 'administrators'}`];
   if (disabled > 0) people.push(`${disabled} disabled`);
 
-  return h('div', { class: 'admin-menu' },
-    menuItem('/admin/teams', 'Teams', data.teams.length,
+  return h('div', { class: 'overview-menu' },
+    menuCard('/admin/teams', 'Teams', data.teams.length,
       open > 0
         ? `${open} open ${open === 1 ? 'incident' : 'incidents'} between them.`
         : 'Nothing open anywhere.'),
-    menuItem('/admin/users', 'Users', data.users.length, `${people.join(', ')}.`),
-    menuItem('/admin/settings', 'Settings', null,
+    menuCard('/admin/users', 'Users', data.users.length, `${people.join(', ')}.`),
+    menuCard('/admin/settings', 'Settings', null,
       'How the server behaves, and where it is plugged in.'),
   );
 }
 
-function menuItem(href, label, count, note) {
-  return h('a', { class: 'card admin-menu-item', href },
-    h('div', { class: 'admin-menu-head' },
-      h('strong', { text: label }),
-      count != null && h('span', { class: 'admin-menu-count', text: String(count) })),
-    h('p', { class: 'muted small', text: note }),
-  );
-}
-
 // --- teams -----------------------------------------------------------------
 
 function teamsCard() {

internal/web/static/js/api.js

@@ -83,15 +83,22 @@ export const timeline = (id) => call('GET', `/incidents/${id}/timeline`);
 
 export const acknowledge = (id) => call('POST', `/incidents/${id}/acknowledge`);
 export const unacknowledge = (id) => call('DELETE', `/incidents/${id}/acknowledge`);
-export const resolve = (id) => call('POST', `/incidents/${id}/resolve`);
+export const resolve = (id, resolution) => call('POST', `/incidents/${id}/resolve`, resolution ? { body: { resolution } } : {});
 export const assign = (id, userID) => call('POST', `/incidents/${id}/assign`, { body: { user_id: userID } });
 export const snooze = (id, spec) => call('POST', `/incidents/${id}/snooze`, { body: spec });
 export const unsnooze = (id) => call('DELETE', `/incidents/${id}/snooze`);
 export const archive = (id) => call('POST', `/incidents/${id}/archive`);
 export const unarchive = (id) => call('DELETE', `/incidents/${id}/archive`);
-export const addNote = (id, content) => call('POST', `/incidents/${id}/notes`, { body: { content } });
+export const addNote = (id, content, pinned = false) => call('POST', `/incidents/${id}/notes`, { body: { content, pinned } });
+export const similar = (id) => call('GET', `/incidents/${id}/similar`);
 export const deleteNote = (id, eventID) => call('DELETE', `/incidents/${id}/notes/${eventID}`);
 
+// stats
+export const statsIncidents = (query) => call('GET', '/stats/incidents', { query });
+export const statsTop = (query) => call('GET', '/stats/alerts/top', { query });
+export const statsByHour = (query) => call('GET', '/stats/alerts/by-hour', { query });
+export const statsByDay = (query) => call('GET', '/stats/alerts/by-day', { query });
+
 // alerts
 export const alerts = (query, opts) => call('GET', '/alerts', { query, ...opts });
 

internal/web/static/js/app.js

@@ -8,6 +8,7 @@ import * as queue from './queue.js';
 import * as incident from './incident.js';
 import * as oncall from './oncall.js';
 import * as alerts from './alerts.js';
+import * as stats from './stats.js';
 import * as account from './account.js';
 import * as team from './team.js';
 import * as admin from './admin.js';
@@ -23,6 +24,7 @@ const SECTIONS = {
   queue: { title: 'Queue', view: queue },
   oncall: { title: 'On-call', view: oncall },
   alerts: { title: 'Alerts', view: alerts },
+  stats: { title: 'Stats', view: stats },
   team: { title: 'Team', view: team },
   admin: { title: 'Admin', view: admin },
   adminuser: { title: 'User', view: adminuser, nav: 'admin' },
@@ -30,6 +32,18 @@ const SECTIONS = {
   more: { title: 'Account', view: account },
 };
 
+// The mobile hamburger menu's contents — the same sections the desktop
+// sidebar's .nav-link list carries in index.html, in the same order.
+const NAV_ITEMS = [
+  { path: '/', section: 'queue', label: 'Queue', icon: 'queueList' },
+  { path: '/oncall', section: 'oncall', label: 'On-call', icon: 'calendar' },
+  { path: '/alerts', section: 'alerts', label: 'Alerts', icon: 'bell' },
+  { path: '/stats', section: 'stats', label: 'Stats', icon: 'chart' },
+  { path: '/team', section: 'team', label: 'Team', icon: 'team' },
+  { path: '/admin', section: 'admin', label: 'Admin', icon: 'shield', adminOnly: true },
+  { path: '/more', section: 'more', label: 'Account', icon: 'user' },
+];
+
 function parseRoute(pathname) {
   const m = pathname.match(/^\/incidents\/(\d+)\/?$/);
   if (m) return { section: 'queue', incident: Number(m[1]) };
@@ -40,22 +54,26 @@ function parseRoute(pathname) {
   const g = pathname.match(/^\/admin\/teams\/(\d+)\/?$/);
   if (g) return { section: 'adminteam', team: Number(g[1]) };
   const name = pathname.replace(/^\/|\/$/g, '');
-  // The Admin tab's sub-sections are routes of their own. admin.js owns the
-  // table of them, since it also builds the strip that links to them.
+  // The Admin and Team tabs' sub-sections are routes of their own. Each view
+  // owns the table of its own, since each also builds the strip that links to
+  // them; /team is in team.TABS as the overview, so it is matched here too.
   const t = admin.TABS.find((x) => x.path === `/${name}`);
   if (t) return { section: 'admin', tab: t.tab };
-  if (name === 'oncall' || name === 'alerts' || name === 'team' || name === 'more') return { section: name };
+  const tt = team.TABS.find((x) => x.path === `/${name}`);
+  if (tt) return { section: 'team', tab: tt.tab };
+  if (name === 'oncall' || name === 'alerts' || name === 'stats' || name === 'more') return { section: name };
   return { section: 'queue', incident: null };
 }
 
-// What the top bar and the document title call this route. Admin's sub-sections
-// are pages in their own right, so they say which one rather than "Admin" four
-// times; the overview keeps the tab's own name.
+// What the top bar and the document title call this route. The sub-sections of
+// Admin and Team are pages in their own right, so they say which one rather
+// than the tab's name four or six times; either overview keeps the tab's own
+// name. A tab may carry a `title` where its strip label is too short to name a
+// page on its own.
 function title(r) {
-  const t = r.section === 'admin' && r.tab
-    ? admin.TABS.find((x) => x.tab === r.tab)
-    : null;
-  return t ? t.label : SECTIONS[r.section].title;
+  const tabs = r.section === 'admin' ? admin.TABS : r.section === 'team' ? team.TABS : null;
+  const t = tabs && r.tab ? tabs.find((x) => x.tab === r.tab) : null;
+  return t ? (t.title || t.label) : SECTIONS[r.section].title;
 }
 
 let route = parseRoute(location.pathname);
@@ -128,6 +146,35 @@ function render() {
   updateTitle();
 }
 
+// ---------- nav menu ----------
+
+// The mobile hamburger menu: same shape as the sheet-based action menus in
+// incident.js (openSheet + a <ul class="menu"> of menu-item buttons), one
+// item per NAV_ITEMS entry, resolving with a path for navigate() to use.
+function openNavMenu() {
+  const current = SECTIONS[route.section].nav || route.section;
+  const triggered = state.open.filter((i) => i.status === 'triggered').length;
+  const items = NAV_ITEMS.filter((n) => !n.adminOnly || state.me?.user?.is_admin);
+  ui.openSheet(() => [
+    ui.h('h2', { class: 'sheet-title', text: 'Sections' }),
+    ui.h('ul', { class: 'menu', role: 'menu' }, items.map((n) =>
+      ui.h('li', {}, ui.h('button', {
+        class: 'menu-item',
+        type: 'button',
+        role: 'menuitemradio',
+        'aria-checked': String(n.section === current),
+        onclick: () => ui.closeSheet(n.path),
+      },
+        ui.icon(n.icon),
+        n.label,
+        n.section === 'queue' && triggered > 0 && ui.badge(String(triggered), 'st-triggered menu-sub'),
+      ))),
+    ),
+  ]).then((path) => {
+    if (path) navigate(path);
+  });
+}
+
 // ---------- refresh + badges ----------
 
 async function refresh() {
@@ -154,9 +201,12 @@ function updateBadges() {
   pill.classList.toggle('has-triggered', triggered > 0);
   pill.classList.toggle('all-acked', open > 0 && triggered === 0);
 
-  const badge = document.querySelector('[data-badge]');
-  badge.hidden = triggered === 0;
-  badge.textContent = String(triggered);
+  // Two badges carry this count: the sidebar's Queue tab (desktop) and the
+  // hamburger button (mobile) — only one of the two is ever visible at once.
+  for (const badge of document.querySelectorAll('[data-badge]')) {
+    badge.hidden = triggered === 0;
+    badge.textContent = String(triggered);
+  }
   updateTitle();
 }
 
@@ -176,6 +226,7 @@ async function boot() {
   document.addEventListener('keydown', onKey);
   $('login-form').addEventListener('submit', onLogin);
   $('signup-form').addEventListener('submit', onSignup);
+  $('menu-btn').addEventListener('click', openNavMenu);
 
   // /signup is the one route that works without a session.
   if (location.pathname.replace(/\/$/, '') === '/signup') {

internal/web/static/js/incident.js

@@ -17,6 +17,7 @@ const pane = () => document.getElementById('detail');
 let currentID = null;
 let inc = null;
 let events = [];
+let similarList = [];
 let error = null;
 let busy = false;
 
@@ -38,10 +39,15 @@ export async function refresh() {
   const id = currentID;
   if (id == null) return;
   try {
-    const [i, t] = await Promise.all([api.incident(id), api.timeline(id)]);
+    // Similar incidents are a courtesy: an older server answers 404 and a
+    // failure here must not hide the incident itself.
+    const [i, t, sim] = await Promise.all([
+      api.incident(id), api.timeline(id), api.similar(id).catch(() => []),
+    ]);
     if (id !== currentID) return;
     inc = i;
     events = t;
+    similarList = sim;
     error = null;
   } catch (err) {
     if (id !== currentID) return;
@@ -60,6 +66,8 @@ function render() {
     h('button', { class: 'btn btn-ghost btn-icon back', type: 'button', 'aria-label': 'Back to queue', onclick: back },
       icon('back')),
     h('span', { class: 'crumb', text: currentID != null ? `Incident #${currentID}` : '' }),
+    inc && h('button', { class: 'btn btn-ghost btn-icon copy', type: 'button', 'aria-label': 'Copy incident', title: 'Copy incident (y)', onclick: copyIncident },
+      icon('copy')),
   );
 
   if (!inc) {
@@ -81,6 +89,7 @@ function render() {
       facts(),
       groupLabels(),
       alertsSection(),
+      similarSection(),
       timelineSection(),
     ),
     actionBar(),
@@ -179,8 +188,9 @@ function alertItem(a) {
 
 // ---------- timeline ----------
 
-function eventText(ev) {
-  const person = ev.user_id != null ? who(ev.user_id, ev.username) : null;
+// named spells users out instead of "you", for text that leaves this page.
+function eventText(ev, named = false) {
+  const person = ev.user_id != null ? (named ? ev.username || 'someone' : who(ev.user_id, ev.username)) : null;
   const strong = (t) => h('span', { class: 'who', text: t || 'someone' });
   const alertName = () => {
     const a = (inc.alerts || []).find((x) => x.id === ev.alert_id);
@@ -197,6 +207,7 @@ function eventText(ev) {
     case 'unsnoozed': return [strong(person), ' ended the snooze'];
     case 'resolved': return person ? [strong(person), ' resolved the incident'] : ['Resolved: every alert stopped firing'];
     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];
@@ -209,6 +220,22 @@ function eventText(ev) {
   }
 }
 
+// Earlier incidents with the same signature that someone left notes on, the
+// ones that recorded what fixed it first. Plain notes are on that incident's
+// own page.
+function similarSection() {
+  if (!similarList.length) return null;
+  return h('section', { class: 'section' },
+    h('h2', { class: 'section-title' }, h('span', { text: 'Seen before' })),
+    h('div', { class: 'card' },
+      h('ul', { class: 'similar' }, similarList.map((s) => h('li', { class: 'similar-item' },
+        h('a', { href: `/incidents/${s.id}`, text: `#${s.id} ${s.title}` }),
+        h('div', { class: 'sub', text: `${when(s.resolved_at)} · ${ago(s.resolved_at)}${s.note_count ? ` · ${s.note_count} note${s.note_count === 1 ? '' : 's'}` : ''}` }),
+        ...s.resolution_notes.map((n) => h('div', { class: 'note note-fix', text: n.detail || '' })),
+      )))),
+  );
+}
+
 function timelineSection() {
   const sorted = [...events].sort((a, b) => Date.parse(a.created_at) - Date.parse(b.created_at) || a.id - b.id);
   return h('section', { class: 'section' },
@@ -223,20 +250,116 @@ function timelineSection() {
   );
 }
 
+const isNote = (ev) => ev.type === 'note' || ev.type === 'resolution_note';
+
 function timelineItem(ev) {
-  const mine = ev.type === 'note' && ev.user_id === myID();
+  const mine = isNote(ev) && ev.user_id === myID();
   return h('li', { class: `tl-item tl-${ev.type}` },
     h('span', { class: 'tl-dot' }),
     h('div', { class: 'tl-body' },
       h('div', { class: 'tl-text' }, eventText(ev)),
       h('div', { class: 'tl-time', title: ev.created_at, text: `${when(ev.created_at)} · ${ago(ev.created_at)}` }),
-      ev.type === 'note' && h('div', { class: 'note', text: ev.detail || '' }),
+      isNote(ev) && h('div', { class: ev.type === 'resolution_note' ? 'note note-fix' : 'note', text: ev.detail || '' }),
       mine && h('div', { class: 'note-actions' },
         h('button', { class: 'btn btn-ghost btn-sm', type: 'button', onclick: () => deleteNote(ev) }, icon('trash'), 'Delete')),
     ),
   );
 }
 
+// ---------- copy ----------
+
+const fence = (rows) => ['```', ...rows, '```'];
+const pairs = (obj) => Object.entries(obj || {}).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}=${v}`);
+
+// incidentMarkdown is everything on this page as text that reads well in a chat
+// or an agent prompt. Times are ISO 8601, since "3 min ago" means nothing once
+// it has been pasted somewhere else.
+function incidentMarkdown() {
+  const out = [`# Incident #${inc.id}: ${inc.title}`, ''];
+  const add = (k, v) => { if (v != null && v !== '') out.push(`- ${k}: ${v}`); };
+  add('Status', inc.status);
+  add('Severity', inc.severity);
+  add('Team', inc.team_name);
+  add('Assigned to', inc.assigned_to_id != null ? inc.assigned_to || 'someone' : 'unassigned');
+  add('Triggered', inc.triggered_at);
+  if (inc.acknowledged_at) add('Acknowledged', `${inc.acknowledged_at} by ${inc.acknowledged_by || 'someone'}`);
+  if (isOpen() && isFuture(inc.snoozed_until)) add('Snoozed until', inc.snoozed_until);
+  if (inc.escalation_level > 0) add('Escalation level', inc.escalation_level);
+  if (inc.resolved_at) add('Resolved', `${inc.resolved_at} (${inc.resolution_source === 'manual' ? 'manually' : 'all alerts stopped firing'})`);
+  if (inc.archived_at) add('Archived', inc.archived_at);
+  const group = pairs(inc.group_labels);
+  if (group.length) out.push('- Grouped by:', ...group.map((g) => `  - ${g}`));
+
+  const alerts = inc.alerts || [];
+  out.push('', `## Alerts (${alerts.length})`);
+  for (const a of alerts) {
+    out.push('', `### ${a.name} (${a.status})`);
+    out.push(`- Started: ${a.starts_at}`);
+    if (a.status === 'resolved' && a.ends_at) out.push(`- Ended: ${a.ends_at}`);
+    if (a.generator_url) out.push(`- Source: ${a.generator_url}`);
+    const labels = pairs(a.labels);
+    if (labels.length) out.push('', 'Labels:', ...fence(labels));
+    const annotations = Object.entries(a.annotations || {}).sort(([x], [y]) => x.localeCompare(y));
+    if (annotations.length) out.push('', 'Annotations:', ...fence(annotations.map(([k, v]) => `${k}: ${v}`)));
+  }
+
+  const sorted = [...events].sort((a, b) => Date.parse(a.created_at) - Date.parse(b.created_at) || a.id - b.id);
+  if (sorted.length) {
+    out.push('', '## Timeline', '');
+    for (const ev of sorted) {
+      const text = eventText(ev, true).map((f) => (f instanceof Node ? f.textContent : f)).join('');
+      out.push(`- ${ev.created_at} ${text}`);
+      if (isNote(ev) && ev.detail) {
+        const label = ev.type === 'resolution_note' ? '  (what fixed it)' : '';
+        out.push(...(label ? [label] : []), ...ev.detail.split('\n').map((l) => `  > ${l}`));
+      }
+    }
+  }
+
+  if (similarList.length) {
+    out.push('', '## Seen before', '', 'Earlier incidents with the same signature:');
+    for (const s of similarList) {
+      out.push(`- #${s.id} ${s.title} (resolved ${s.resolved_at})`);
+      for (const n of s.resolution_notes || []) {
+        out.push('  - What fixed it:', ...(n.detail || '').split('\n').map((l) => `    > ${l}`));
+      }
+    }
+  }
+
+  out.push('', `_Copied from Terminal Duty at ${new Date().toISOString()}_`, '');
+  return out.join('\n');
+}
+
+// writeClipboard falls back to execCommand: the async API needs a secure
+// context, and this server is often reached over plain HTTP.
+async function writeClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return;
+  } catch {
+    // fall through
+  }
+  const ta = h('textarea', { readonly: true, 'aria-hidden': 'true', class: 'clip-buffer' });
+  ta.value = text;
+  document.body.append(ta);
+  ta.select();
+  try {
+    if (!document.execCommand('copy')) throw new Error('copy refused');
+  } finally {
+    ta.remove();
+  }
+}
+
+async function copyIncident() {
+  if (!inc) return;
+  try {
+    await writeClipboard(incidentMarkdown());
+    toast('Copied incident');
+  } catch {
+    toast('Could not copy', 'error');
+  }
+}
+
 // ---------- actions ----------
 
 const isOpen = () => inc.status !== 'resolved';
@@ -296,15 +419,35 @@ function unacknowledge() {
 
 async function resolve() {
   const id = inc.id;
-  const ok = await confirm({
-    title: 'Resolve this incident?',
-    text: 'Resolving is final. If these alerts fire again they open a new incident, '
-      + 'and if any are still firing this one stays closed regardless. '
-      + 'Use snooze if you only need it out of the way.',
-    confirmLabel: 'Resolve',
-    danger: true,
+  const res = await openSheet(() => {
+    const textarea = h('textarea', {
+      name: 'resolution', autofocus: true, maxlength: '10000',
+      placeholder: 'What fixed it? Optional, shown on the next similar incident.',
+    });
+    const form = h('form', {
+      class: 'sheet-form',
+      onsubmit: (e) => {
+        e.preventDefault();
+        closeSheet({ resolution: textarea.value.trim() });
+      },
+    },
+      h('h2', { class: 'sheet-title', text: 'Resolve this incident?' }),
+      h('p', {
+        text: 'Resolving is final. If these alerts fire again they open a new incident, '
+          + 'and if any are still firing this one stays closed regardless. '
+          + 'Use snooze if you only need it out of the way.',
+      }),
+      textarea,
+      h('div', { class: 'sheet-actions' },
+        h('button', { class: 'btn', type: 'button', onclick: () => closeSheet(null), text: 'Cancel' }),
+        h('button', { class: 'btn btn-danger', type: 'submit', text: 'Resolve' })),
+    );
+    textarea.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) form.requestSubmit();
+    });
+    return form;
   });
-  if (ok) await run(() => api.resolve(id), 'Resolved');
+  if (res) await run(() => api.resolve(id, res.resolution), 'Resolved');
 }
 
 function archive() {
@@ -382,16 +525,18 @@ async function addNote() {
     const textarea = h('textarea', {
       name: 'content', required: true, autofocus: true, placeholder: 'What did you find? What did you do?', maxlength: '10000',
     });
+    const fix = h('input', { type: 'checkbox', name: 'fix' });
     const form = h('form', {
       class: 'sheet-form',
       onsubmit: (e) => {
         e.preventDefault();
         const v = textarea.value.trim();
-        if (v) closeSheet(v);
+        if (v) closeSheet({ content: v, pinned: fix.checked });
       },
     },
       h('h2', { class: 'sheet-title', text: 'Add note' }),
       textarea,
+      h('label', { class: 'check' }, fix, ' This is what fixed it (shown on similar incidents)'),
       h('div', { class: 'sheet-actions' },
         h('button', { class: 'btn', type: 'button', onclick: () => closeSheet(null), text: 'Cancel' }),
         h('button', { class: 'btn btn-primary', type: 'submit', text: 'Save note' })),
@@ -402,7 +547,7 @@ async function addNote() {
     });
     return form;
   });
-  if (content) await run(() => api.addNote(id, content), 'Note added');
+  if (content) await run(() => api.addNote(id, content.content, content.pinned), 'Note added');
 }
 
 async function deleteNote(ev) {
@@ -422,10 +567,12 @@ async function moreMenu() {
     items.push(item('user', 'Assign…', assign));
     items.push(isSnoozed() ? item('bell', 'End snooze', unsnooze) : item('clock', 'Snooze…', snooze));
     items.push(item('note', 'Add note…', addNote));
+    items.push(item('copy', 'Copy incident', copyIncident));
     items.push(h('li', { class: 'menu-sep', role: 'separator' }));
     items.push(item('checkCircle', 'Resolve…', resolve, 'danger'));
   } else {
     items.push(item('note', 'Add note…', addNote));
+    items.push(item('copy', 'Copy incident', copyIncident));
     items.push(inc.archived_at ? item('undo', 'Unarchive', unarchive) : item('archive', 'Archive', archive));
   }
 
@@ -454,6 +601,7 @@ export function key(e) {
     case 'z': if (isOpen() && !isSnoozed()) snooze(); return true;
     case 'Z': if (isSnoozed()) unsnooze(); return true;
     case 'c': addNote(); return true;
+    case 'y': copyIncident(); return true;
     case 'x': if (!isOpen()) (inc.archived_at ? unarchive() : archive()); return true;
     default: return false;
   }

internal/web/static/js/stats.js

@@ -0,0 +1,168 @@
+// Statistics: how many incidents, how fast they are answered, and when and
+// what the alerts are. The same figures the TUI's Stats tab shows, over a
+// range picked with the chips. The server scopes them to the caller's teams.
+
+import * as api from './api.js';
+import { h, clear, emptyState, spinner } from './ui.js';
+import { duration } from './format.js';
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+// `days` counts back from today, inclusive; the server reads from/to as UTC
+// dates, so these are too.
+const RANGES = [
+  { id: 'today', label: 'Today', days: 1 },
+  { id: '7d', label: '7d', days: 7 },
+  { id: '30d', label: '30d', days: 30 },
+  { id: '90d', label: '90d', days: 90 },
+  { id: 'all', label: 'All', days: null },
+];
+
+const view = () => document.getElementById('view-stats');
+
+let range = '30d';
+let data = null;
+let error = null;
+
+const utcDate = (ms) => new Date(ms).toISOString().slice(0, 10);
+
+function query(r) {
+  if (!r.days) return {};
+  const now = Date.now();
+  return { from: utcDate(now - (r.days - 1) * DAY_MS), to: utcDate(now) };
+}
+
+export function show() {
+  render();
+  refresh();
+}
+
+export async function refresh() {
+  const requested = range;
+  const q = query(RANGES.find((x) => x.id === range));
+  try {
+    const [incidents, top, byHour, byDay] = await Promise.all([
+      api.statsIncidents(q),
+      api.statsTop({ ...q, limit: 10 }),
+      api.statsByHour(q),
+      api.statsByDay(q),
+    ]);
+    if (requested !== range) return;
+    data = { incidents, top, byHour, byDay };
+    error = null;
+  } catch (err) {
+    if (requested !== range) return;
+    error = err.message;
+  }
+  render();
+}
+
+function setRange(id) {
+  if (id === range) return;
+  range = id;
+  data = null;
+  render();
+  refresh();
+}
+
+function render() {
+  const chips = h('div', { class: 'chips', role: 'tablist', 'aria-label': 'Time range' },
+    RANGES.map((r) => h('button', {
+      class: 'chip',
+      type: 'button',
+      role: 'tab',
+      'aria-selected': String(r.id === range),
+      onclick: () => setRange(r.id),
+      text: r.label,
+    })));
+
+  let body;
+  if (error && !data) body = h('div', { class: 'load-error', text: error });
+  else if (!data) body = spinner();
+  else if (!data.incidents.total && !data.byHour.some((x) => x.count)) {
+    body = emptyState('No data in this range', '', 'chart');
+  } else {
+    body = h('div', { class: 'stats' },
+      error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
+      tiles(data.incidents),
+      data.top.length > 0 && card('Top alerts', topAlerts(data.top)),
+      card('Alerts by hour (UTC)', columns(
+        data.byHour.map((x) => ({ label: String(x.hour), value: x.count, tick: x.hour % 6 === 0 })),
+        'Alerts by hour of day')),
+      card('Alerts by day', columns(
+        data.byDay.map((x) => ({ label: x.day_name.slice(0, 3), value: x.count, tick: true })),
+        'Alerts by day of week')));
+  }
+  clear(view(), h('div', {}, chips, body));
+}
+
+// A missing mean means nothing has been acknowledged or resolved yet.
+const mean = (s) => (s == null ? '—' : duration(s * 1000));
+
+function tiles(s) {
+  const tile = (label, value, cls = '') => h('div', { class: `stat-tile ${cls}` },
+    h('div', { class: 'stat-value', text: String(value) }),
+    h('div', { class: 'stat-label', text: label }));
+  return h('div', { class: 'stat-tiles' },
+    tile('Incidents', s.total),
+    tile('Triggered', s.triggered, 'st-triggered'),
+    tile('Acknowledged', s.acknowledged, 'st-acknowledged'),
+    tile('Resolved', s.resolved, 'st-resolved'),
+    tile('Mean time to acknowledge', mean(s.mtta_seconds)),
+    tile('Mean time to resolve', mean(s.mttr_seconds)));
+}
+
+function card(title, content) {
+  return h('section', { class: 'chart-card card card-pad' },
+    h('h3', { class: 'chart-title', text: title }), content);
+}
+
+// Ranked names with a bar scaled to the busiest one.
+function topAlerts(items) {
+  const max = Math.max(...items.map((x) => x.count), 1);
+  return h('ol', { class: 'hbars' }, items.map((x) => {
+    const fill = h('span', { class: 'hbar-fill' });
+    fill.style.width = `${Math.max(2, (x.count / max) * 100)}%`;
+    return h('li', { class: 'hbar' },
+      h('span', { class: 'hbar-name', title: x.name, text: x.name }),
+      h('span', { class: 'hbar-track' }, fill),
+      h('span', { class: 'hbar-count', text: String(x.count) }));
+  }));
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function svg(tag, attrs = {}, text) {
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
+  if (text != null) el.textContent = text;
+  return el;
+}
+
+// A column chart: one bar per item, the value in a tooltip, and a label under
+// the items marked `tick`.
+function columns(items, label) {
+  const W = 480;
+  const H = 140;
+  const base = H - 18;
+  const step = W / items.length;
+  const max = Math.max(...items.map((x) => x.value), 1);
+  const root = svg('svg', {
+    class: 'columns', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': label,
+  });
+  root.appendChild(svg('line', { class: 'axis', x1: 0, x2: W, y1: base, y2: base }));
+  items.forEach((it, i) => {
+    const bh = it.value ? Math.max(2, (it.value / max) * (base - 6)) : 0;
+    const x = i * step + step * 0.15;
+    const g = svg('g', { class: 'col' });
+    g.appendChild(svg('title', {}, `${it.label}: ${it.value}`));
+    // A full-height transparent hit area, so a tiny bar is still hoverable.
+    g.appendChild(svg('rect', { class: 'col-hit', x: i * step, y: 0, width: step, height: base }));
+    if (bh) g.appendChild(svg('rect', { class: 'col-bar', x, y: base - bh, width: step * 0.7, height: bh, rx: 2 }));
+    root.appendChild(g);
+    if (it.tick) {
+      root.appendChild(svg('text', { class: 'col-label', x: i * step + step / 2, y: H - 4, 'text-anchor': 'middle' }, it.label));
+    }
+  });
+  return root;
+}

internal/web/static/js/team.js

@@ -1,8 +1,16 @@
-// Team settings: the rota, who is in the team, where its alerts come from,
-// what it escalates through, and which of its alerts are heartbeats.
+// One team: the rota, who is in it, where its alerts come from, what it
+// escalates through, and which of its alerts are heartbeats.
 //
-// Everything here was API-only until now, which meant a team owner had to use
-// curl to set up escalation — the feature this whole line of work exists for.
+// Everything here was API-only until v0.12.0, which meant a team owner had to
+// use curl to set up escalation — the feature this whole line of work exists
+// for.
+//
+// Each of those five is a route of its own behind a strip across the top, with
+// /team an overview, the way 07914d5 split the Admin tab. The same reasons
+// applied here and more sharply: five cards on one page meant no way to link
+// somebody to the escalation ladder, no way to the switches but past a month
+// of rota, and a poll that refetched six endpoints however little of the page
+// you were looking at.
 //
 // The server decides what a role may do: an owner's edits succeed, a member's
 // are refused with 403, and a non-member gets 404 for the lot. This view hides
@@ -10,19 +18,48 @@
 // than no form, but it is not the thing enforcing anything.
 
 import * as api from './api.js';
-import { h, clear, spinner, confirm, icon, openSheet, closeSheet } from './ui.js';
+import { h, clear, spinner, confirm, icon, openSheet, closeSheet, menuCard } from './ui.js';
 import { state, currentTeam, users as allUsers, myID } from './state.js';
 import { isoDate, addDays, mondayOf, initial } from './format.js';
 
 const view = () => document.getElementById('view-team');
 
+// The sub-sections, in the order the strip shows them. The overview is /team
+// itself, so it has no tab of its own. This table is the only place the six
+// routes are written down: app.js parses against it and the strip is built
+// from it, the same contract admin.js has.
+//
+// `label` is what the strip says and `title` what the top bar and the document
+// title say, where a strip label alone would be too thin to name a page —
+// "Sources · terdut" in a browser tab does not say sources of what.
+export const TABS = [
+  { tab: null, path: '/team', label: 'Overview' },
+  { tab: 'rota', path: '/team/rota', label: 'Rota', title: 'On-call rota' },
+  { tab: 'members', path: '/team/members', label: 'Members' },
+  { tab: 'escalation', path: '/team/escalation', label: 'Escalation' },
+  { tab: 'sources', path: '/team/sources', label: 'Sources', title: 'Alert sources' },
+  { tab: 'deadman', path: '/team/deadman', label: 'Switches', title: 'Dead man’s switches' },
+];
+
 let teamID = null;
-let data = null; // { team, members, integrations, escalation, deadman, schedule, users }
+// Which sub-section is open. Remembered rather than passed, because the poll
+// loop calls refresh() with no route.
+let tab = null;
+let data = null; // { team, ... }; which fields are present varies by tab
 let error = null;
 let freshKey = null; // an integration key, shown once, until the view is left
 
-export function show() {
-  if (!data) clear(view(), spinner());
+export function show(route) {
+  const next = route?.tab ?? null;
+  // A different sub-section wants different data, so the old answer goes
+  // rather than being shown under the new heading until the fetch lands. The
+  // ladder draft goes with it: it is an edit of the page being left.
+  if (next !== tab) {
+    tab = next;
+    data = null;
+    draft = null;
+  }
+  if (!data) clear(view(), subnav(), spinner());
   refresh();
 }
 
@@ -39,18 +76,8 @@ export async function refresh() {
     return;
   }
   teamID = team.id;
-  const grid = gridDays();
   try {
-    // A member may read all of this; only the writes are owner-only.
-    const [members, integrations, escalation, deadman, schedule, users] = await Promise.all([
-      api.teamMembers(team.id),
-      api.integrations(team.id),
-      api.escalation(team.id),
-      api.deadman(team.id),
-      api.schedule(team.id, isoDate(grid.start), isoDate(addDays(grid.start, grid.count - 1))),
-      allUsers(),
-    ]);
-    data = { team, members, integrations, escalation, deadman, schedule, users };
+    data = { team, ...(await load(team.id)) };
     error = null;
   } catch (err) {
     error = err.message;
@@ -58,6 +85,45 @@ export async function refresh() {
   render();
 }
 
+// Only what the open sub-section shows. A member may read all of it; only the
+// writes are owner-only.
+//
+// Three of the five need the member list besides their own endpoint, and for
+// the same reason each time: a rota, a ladder target and a role are all a
+// person, and the page has to be able to name them. The overview is the one
+// that fetches everything, because saying how much of each there is means
+// asking each of them.
+async function load(id) {
+  if (tab === 'rota') {
+    const grid = gridDays();
+    const [members, schedule] = await Promise.all([
+      api.teamMembers(id),
+      api.schedule(id, isoDate(grid.start), isoDate(addDays(grid.start, grid.count - 1))),
+    ]);
+    return { members, schedule };
+  }
+  if (tab === 'members') {
+    const [members, users] = await Promise.all([api.teamMembers(id), allUsers()]);
+    return { members, users };
+  }
+  if (tab === 'escalation') {
+    const [members, escalation] = await Promise.all([api.teamMembers(id), api.escalation(id)]);
+    return { members, escalation };
+  }
+  if (tab === 'sources') return { integrations: await api.integrations(id) };
+  if (tab === 'deadman') return { deadman: await api.deadman(id) };
+
+  const grid = gridDays();
+  const [members, integrations, escalation, deadman, schedule] = await Promise.all([
+    api.teamMembers(id),
+    api.integrations(id),
+    api.escalation(id),
+    api.deadman(id),
+    api.schedule(id, isoDate(grid.start), isoDate(addDays(grid.start, grid.count - 1))),
+  ]);
+  return { members, integrations, escalation, deadman, schedule };
+}
+
 function isOwner() {
   return data?.team?.role === 'owner' || state.me?.user?.is_admin;
 }
@@ -70,19 +136,43 @@ function render() {
     return;
   }
   clear(view(),
-    error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
+    subnav(),
     teamPicker(),
-    !isOwner() && h('div', { class: 'card' },
+    // Said once on the overview rather than on all six pages: it explains why
+    // the controls further down are missing, and a page of nothing but the
+    // rota has no controls to explain.
+    !isOwner() && tab === null && h('div', { class: 'card' },
       h('p', { class: 'muted small', text: 'You are a member of this team. Only an owner can change its settings.' })),
-    scheduleCard(),
-    escalationCard(),
-    integrationsCard(),
-    deadmanCard(),
-    membersCard(),
+    error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
+    section(),
   );
 }
 
+function section() {
+  if (tab === 'rota') return scheduleCard();
+  if (tab === 'members') return membersCard();
+  if (tab === 'escalation') return escalationCard();
+  if (tab === 'sources') return integrationsCard();
+  if (tab === 'deadman') return deadmanCard();
+  return overview();
+}
+
+// The strip across the top of every team page. Ordinary links rather than
+// buttons, because these are six URLs: app.js intercepts the click, the
+// browser's Back walks them, and a reload lands where you were.
+function subnav() {
+  return h('nav', { class: 'subnav', 'aria-label': 'Team' },
+    TABS.map((t) => h('a', {
+      class: 'subnav-link',
+      href: t.path,
+      text: t.label,
+      'aria-current': t.tab === tab ? 'page' : null,
+    })));
+}
+
 // Only shown to somebody in more than one team, like the queue's filter chips.
+// It is above the sections rather than inside one because it changes the
+// subject of all six.
 function teamPicker() {
   if ((state.teams || []).length < 2) {
     return h('div', { class: 'card' }, h('h2', { text: data.team.name }));
@@ -95,11 +185,45 @@ function teamPicker() {
     teamID = Number(select.value);
     data = null;
     freshKey = null;
-    show();
+    draft = null;
+    refresh();
   });
   return h('div', { class: 'card' }, h('h2', { text: 'Team' }), select);
 }
 
+// --- overview --------------------------------------------------------------
+
+// /team itself. The strip already links to the five, so this earns its place
+// the way /admin's does: by saying how much of each there is, which is the one
+// thing a menu cannot.
+function overview() {
+  const today = isoDate(new Date());
+  const onToday = (data.schedule || []).find((e) => e.date === today);
+  const owners = (data.members || []).filter((m) => m.role === 'owner').length;
+  const levels = (data.escalation?.levels || []).length;
+  const keys = (data.integrations || []).length;
+  const unused = (data.integrations || []).filter((i) => !i.last_used_at).length;
+  const switches = (data.deadman?.matchers || '')
+    .split(';').map((x) => x.trim()).filter(Boolean).length;
+
+  return h('div', { class: 'overview-menu' },
+    menuCard('/team/rota', 'Rota', null,
+      onToday ? `${onToday.username} is on call today.` : 'Nobody is on call today.'),
+    menuCard('/team/members', 'Members', (data.members || []).length,
+      owners === 1 ? 'One owner.' : `${owners} owners.`),
+    menuCard('/team/escalation', 'Escalation', levels || null,
+      levels
+        ? `${levels === 1 ? 'One level' : `${levels} levels`}${data.escalation.fallback_topic ? ', then a fallback topic.' : '.'}`
+        : 'No ladder — nobody but the first person is woken.'),
+    menuCard('/team/sources', 'Alert sources', keys || null,
+      keys
+        ? (unused ? `${unused} of them never used.` : 'All in use.')
+        : 'No key yet, so nothing can reach this team.'),
+    menuCard('/team/deadman', 'Dead man’s switches', switches || null,
+      switches ? 'Alerts whose absence opens an incident.' : 'Nothing watched.'),
+  );
+}
+
 // --- schedule --------------------------------------------------------------
 
 // The rota is one person per UTC day. The on-call page shows it; this is where

internal/web/static/js/ui.js

@@ -34,15 +34,21 @@ export function clear(el, ...children) {
 const ICONS = {
   back: ['M15 18l-6-6 6-6'],
   more: ['M5 12h.01M12 12h.01M19 12h.01'],
+  queueList: ['M4 6h16M4 12h16M4 18h10'],
+  calendar: ['rect:3.5,5,17,15,2', 'M3.5 10h17M8 3v4M16 3v4'],
+  team: ['circle:9,8,3', 'circle:17,9,2.5', 'M3 19a6 6 0 0 1 12 0M15 19a5 5 0 0 1 6-4'],
+  shield: ['M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z'],
   check: ['M5 12.5l4.5 4.5L19 7'],
   checkCircle: ['M8 12.5l3 3 5-6', 'circle:12,12,9'],
   undo: ['M9 14L4 9l5-5', 'M4 9h10a6 6 0 0 1 0 12h-3'],
   user: ['circle:12,8,3.5', 'M5 20a7 7 0 0 1 14 0'],
   clock: ['circle:12,12,9', 'M12 7v5l3 2'],
+  chart: ['M4 20h16M7 20v-7M12 20V6M17 20v-10'],
   bell: ['M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z', 'M10 20.5a2 2 0 0 0 4 0'],
   note: ['M5 4h14v12l-4 4H5z', 'M15 20v-4h4', 'M9 9h6M9 13h4'],
   archive: ['M3.5 5h17v4h-17z', 'M5 9v10h14V9', 'M10 13h4'],
   flag: ['M5 21V4', 'M5 4h11l-2 4 2 4H5'],
+  copy: ['rect:9,9,11,11,2', 'M5 15V6a2 2 0 0 1 2-2h9'],
   trash: ['M4 7h16', 'M9 7V4h6v3', 'M6 7l1 13h10l1-13'],
   chevronLeft: ['M15 18l-6-6 6-6'],
   chevronRight: ['M9 6l6 6-6 6'],
@@ -64,6 +70,14 @@ export function icon(name, cls = 'icon') {
       node.setAttribute('cx', cx);
       node.setAttribute('cy', cy);
       node.setAttribute('r', r);
+    } else if (d.startsWith('rect:')) {
+      const [x, y, w, hgt, rx] = d.slice(5).split(',');
+      node = document.createElementNS(SVG, 'rect');
+      node.setAttribute('x', x);
+      node.setAttribute('y', y);
+      node.setAttribute('width', w);
+      node.setAttribute('height', hgt);
+      if (rx) node.setAttribute('rx', rx);
     } else {
       node = document.createElementNS(SVG, 'path');
       node.setAttribute('d', d);
@@ -160,6 +174,18 @@ export function labelChip(k, v) {
   return h('span', { class: 'label', title: `${k}=${v}` }, h('span', { text: k }), h('span', { text: v }));
 }
 
+// One entry in a section's overview: a card that is a link, carrying the count
+// only that section can state. Both the Admin tab and the Team tab open on one
+// of these menus, and a menu item is a shape rather than a page's own idea.
+export function menuCard(href, label, count, note) {
+  return h('a', { class: 'card overview-item', href },
+    h('div', { class: 'overview-head' },
+      h('strong', { text: label }),
+      count != null && h('span', { class: 'overview-count', text: String(count) })),
+    h('p', { class: 'muted small', text: note }),
+  );
+}
+
 export function emptyState(title, text, iconName) {
   return h('div', { class: 'empty' },
     iconName && icon(iconName),

internal/web/stats_test.go

@@ -0,0 +1,26 @@
+package web
+
+import (
+	"io/fs"
+	"strings"
+	"testing"
+)
+
+func TestStatsPageIsEmbedded(t *testing.T) {
+	sub, err := fs.Sub(files, "static")
+	if err != nil {
+		t.Fatal(err)
+	}
+	index, err := fs.ReadFile(sub, "index.html")
+	if err != nil {
+		t.Fatal(err)
+	}
+	for _, want := range []string{`id="view-stats"`, `data-section="stats"`} {
+		if !strings.Contains(string(index), want) {
+			t.Errorf("index.html lacks %s", want)
+		}
+	}
+	if _, err := fs.Stat(sub, "js/stats.js"); err != nil {
+		t.Errorf("js/stats.js not embedded: %v", err)
+	}
+}