Set the chart's placeholder version to 0.20.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 429d5fd and 6a03698, so a
tree heading for v0.20.0 doesn't say 0.19.0.

Claude-Session: https://claude.ai/code/session_01RHPj4ggeFdEjKKfm4SHbD7

README.md

@@ -47,11 +47,11 @@ 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 changing your own password. 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. Schedule editing, statistics and user management remain in
+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 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. Statistics remain in
 [terdut-tui](https://github.com/yeniklas/terdut-tui) for now.
 
 You sign in with a username and password. Users have no password until one is
@@ -85,6 +85,52 @@ 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, 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
+is read for is who holds which stretch, and a run of one colour answers it
+where a list of dates does not. An owner taps a day to hand it to somebody or
+empty it, and fills a whole shift from the range form folded in below.
+
+The **Admin** tab appears only for a system administrator, and holds what
+belongs to the whole server rather than to one team. It has three sub-sections,
+each with a URL of its own and a strip across the top to move between them:
+every team (`/admin/teams`), every user (`/admin/users`), and the settings that
+used to be environment variables (`/admin/settings`). `/admin` itself is an
+overview — how many of each, and what each section is for. Adding somebody is
+minting them an invite link into a team, rather than creating a bare account:
+the person who accepts it picks their own password, so one never passes through
+an administrator, and the link carries the team, so they land somewhere with a
+queue in it. That happens on the team's own page, since an invite is a fact
+about a team; the user list points there rather than asking which team beside a
+form.
+
+A name in the team list opens **that team's page**, at `/admin/teams/{id}`: when it
+was created, how many are in it and how much is open, a field to rename it, the
+members with their roles, the invites into it, and deletion. The member list is the
+one thing there that needed a new endpoint — `GET /api/teams/{id}/members` is
+member-only and answers `404` to an administrator who is not in the team, which is
+the rule and not an oversight, so the page reads `GET /api/admin/teams/{id}` instead.
+An administrator still sees none of that team's incidents, alerts or rota.
+
+A name in the user list opens **that person's page**, at `/admin/users/{id}`: their
+email and when they joined, where their notifications go, whether they are an
+administrator, whether the account is disabled, the teams they are in with their
+role in each, a password field for a first or forgotten one, and deletion. It is
+the one place membership is edited from the person's side — the Team tab answers
+"who is in this team", and answering "which teams is this person in" there means
+visiting each team in turn.
+
 ### Docker
 
 ```bash
@@ -329,10 +375,20 @@ exactly as it was rather than with a hole in it.
 ### Push notifications
 
 With `TERDUT_NTFY_URL` set, an incident that opens is pushed to the on-call
-person's phone through [ntfy](https://ntfy.sh). Set each user's topic with
-`PUT /api/users/{id}/notify`; a user with no topic falls back to
-`TERDUT_NTFY_FALLBACK_TOPIC`, as does an incident that opens with nobody on call.
-If neither yields a topic, nothing is queued.
+person's phone through [ntfy](https://ntfy.sh). Everybody sets their own topic
+under *Account* in the web UI, where a **Send a test push** button proves it
+before an incident has to; `PUT /api/users/{id}/notify` is the same thing over
+the API, and an administrator may set somebody else's. A user with no topic
+falls back to `TERDUT_NTFY_FALLBACK_TOPIC`, as does an incident that opens with
+nobody on call. If neither yields a topic, nothing is queued.
+
+The **server** is the install's one ntfy, from `TERDUT_NTFY_URL`, and is not
+something a user picks. Only the topic is per-person.
+
+A topic is a shared secret with the ntfy server: anyone who knows it can both
+read the pages and publish to it, so an unguessable one is worth the trouble.
+That is also why the topic never appears in an incident's timeline, which every
+API key can read.
 
 Three things get pushed:
 
@@ -540,6 +596,25 @@ granting the flag itself. Everybody else works incidents — acknowledging,
 assigning, snoozing, resolving, noting — and manages their own account and
 nobody else's. An API key carries exactly the rights of the user it belongs to.
 
+**Getting an account.** The first one comes from `/api/bootstrap`. After that
+it depends on `signup_mode`, an administrator setting:
+
+- `invite_only` (the default) — a team owner mints a link with
+  `POST /api/teams/{teamID}/invites`, and the person who opens it picks a
+  username and password and lands in that team with the role the link carries.
+  Links are single-use unless told otherwise, expire after seven days, and can
+  be revoked before that.
+- `open` — anybody who can reach the server can create an account, and must
+  name a team, which they then own.
+
+Invites are **links, not email**: this server has no SMTP, and adding it to send
+one message would be a subsystem to run, secure and monitor. Send the link
+however you already talk to the person.
+
+A domain-restricted third mode was considered and dropped: with no email there
+is nothing to verify an address against, so it would only check the domain of a
+string somebody typed.
+
 The first user, from `/api/bootstrap`, is an administrator. Users created
 afterwards are not, until an administrator says so. An install always keeps at
 least one: the last administrator can be neither deleted nor demoted, and
@@ -550,10 +625,16 @@ Endpoints that require the flag answer `403` with
 
 **Teams** are the unit of tenancy, and are a separate axis from the administrator
 flag. A team owns its incidents, alerts, schedule and integrations, and a user
-sees exactly the teams they belong to — an administrator is not implicitly in
-every team, because administration is about accounts, not about reading other
-people's incidents. Within a team an **owner** configures it (schedule,
-integrations, membership) and a **member** works its incidents.
+sees exactly the teams they belong to. Within a team an **owner** configures it
+(schedule, integrations, membership) and a **member** works its incidents.
+
+An administrator crosses that line in one direction only. They **configure any
+team** without being in it — every owner-only endpoint accepts the flag, because
+otherwise a team whose last owner left could never be repaired. They do **not
+read any team**: the queue, the alerts and the incidents are filtered by real
+membership, so an administrator sees a team's work only by joining it, which is
+a membership change and shows up as one. Administration is about accounts and
+the shape of a team, not about reading other people's incidents.
 
 Anything belonging to a team you are not in answers `404`, not `403`: whether an
 incident exists is itself something only its team should learn.
@@ -574,8 +655,11 @@ on anybody's.
 
 | Method | Path | Who | Description |
 |---|---|---|---|
+| `GET` | `/api/signup` | — | Whether sign-up is open, and whether `?invite=` is usable. No session needed: the caller has no account yet |
+| `POST` | `/api/signup` | — | Create an account `{"username","email","password","invite"?,"team_name"?}` and sign in. `403` without a usable invite when the mode is invite-only |
 | `POST` | `/api/bootstrap` | — | Create first user + API key `{"username","email","password"?}` (only works on empty DB). The user is an administrator |
 | `GET` | `/api/users` | any | List users. Open to everybody: the queue's assignment control and the schedule both have to name people |
+| `GET` | `/api/users/{id}/teams` | self or admin | The teams that user is in, each with their role. `/api/teams` is always about the caller; this one answers it about somebody else, for the admin page's per-user view. `404` for a user who does not exist, so "no teams" and "no such person" are distinguishable |
 | `POST` | `/api/users` | **admin** | Create user `{"username","email"}`. Not an administrator |
 | `DELETE` | `/api/users/{id}` | **admin** | Delete user (cascades to keys). `409` for yourself or the last administrator |
 | `PUT` | `/api/users/{id}/admin` | **admin** | Grant or revoke the administrator flag `{"is_admin"}`. `409` for yourself or the last administrator |
@@ -590,8 +674,9 @@ on anybody's.
 | Method | Path | Who | Description |
 |---|---|---|---|
 | `GET` | `/api/admin/teams` | **admin** | Every team on the server, with its member and open-incident counts. `/api/teams` answers "what am I in"; this answers "what is there" |
+| `GET` | `/api/admin/teams/{teamID}` | **admin** | One team and who is in it: `{"team", "members"}`. `404` for a team that does not exist. `GET /api/teams/{teamID}/members` is **member**-only and still `404`s an administrator from outside the team — reading a team's shape and reading its work are different questions, so they are different endpoints |
 | `GET` | `/api/admin/settings` | **admin** | The editable settings with their bounds, plus the environment-configured ones, read-only. Never credentials |
-| `PUT` | `/api/admin/settings` | **admin** | Change one or more `{"key": seconds}`. `400` for an unknown key or a value outside its bounds |
+| `PUT` | `/api/admin/settings` | **admin** | Change one or more `{"key": seconds}`, or `{"signup_mode": "open"\|"invite_only"}`. `400` for an unknown key or a value outside its bounds |
 
 ### Alert ingestion
 
@@ -610,6 +695,11 @@ and was removed in v0.13.0 once senders had moved onto keys.
 
 ### Teams
 
+**owner** below means an owner of that team *or* a system administrator, who
+passes every one of these without being a member — see
+[Authentication](#authentication). **member** means membership and nothing else: an
+administrator who is not in the team gets the same `404` as anybody else.
+
 | Method | Path | Who | Description |
 |---|---|---|---|
 | `GET` | `/api/teams` | any | The caller's own teams, each with their role |
@@ -622,6 +712,9 @@ and was removed in v0.13.0 once senders had moved onto keys.
 | `GET` | `/api/teams/{teamID}/integrations` | member | List integrations. Never returns keys |
 | `POST` | `/api/teams/{teamID}/integrations` | **owner** | Mint an integration `{"name","kind"}` — key and URL shown once |
 | `DELETE` | `/api/teams/{teamID}/integrations/{integrationID}` | **owner** | Revoke an integration |
+| `GET` | `/api/teams/{teamID}/invites` | **owner** | The team's invite links, with their uses and expiry. Never the tokens |
+| `POST` | `/api/teams/{teamID}/invites` | **owner** | Mint one `{"role","max_uses"}` — the full URL is returned once |
+| `DELETE` | `/api/teams/{teamID}/invites/{inviteID}` | **owner** | Revoke a link before it expires |
 | `GET` | `/api/teams/{teamID}/escalation` | member | The team's [escalation ladder](#escalation) `{repeat_count, fallback_topic, levels[]}`. Empty levels means the team has none |
 | `PUT` | `/api/teams/{teamID}/escalation` | **owner** | Replace it wholesale. `400` for a level with no targets or no timeout — a rung that pages nobody is a silence with a number on it |
 | `GET` | `/api/teams/{teamID}/deadman` | member | The team's [dead man's switch](#dead-mans-switch) configuration `{matchers, timeout_seconds, severity}` |

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.13.0
-appVersion: "v0.13.0"
+version: 0.20.0
+appVersion: "v0.20.0"

internal/api/admin_test.go

@@ -237,6 +237,246 @@ func TestAdmin_GrantAndRevokeChangeWhatIsAllowed(t *testing.T) {
 	}
 }
 
+// An administrator passes every team-owner check without being in the team,
+// which is what lets them repair a team whose owner has left. It has been true
+// since teams landed and nothing pinned it, so a later reading of the epic's
+// "an admin is not implicitly in every team" could quietly take it away.
+//
+// The line it draws: configuring a team, yes; reading what the team owns, no.
+// The queue below is the half that stays shut.
+func TestAdmin_ConfiguresATeamTheyAreNotIn(t *testing.T) {
+	s := newTS(t)
+
+	// A team the admin is deliberately not a member of. It is created by
+	// somebody else, so the admin's only claim on it is the flag.
+	_, call := member(t, s, "founder")
+	var team struct {
+		ID int64 `json:"id"`
+	}
+	decode(t, call(http.MethodPost, "/api/teams", map[string]string{"name": "theirs"}), &team)
+	if team.ID == 0 {
+		t.Fatal("no team was created")
+	}
+
+	var mine []struct {
+		ID int64 `json:"id"`
+	}
+	decode(t, s.req(t, http.MethodGet, "/api/teams", nil), &mine)
+	for _, m := range mine {
+		if m.ID == team.ID {
+			t.Fatalf("the admin should not be a member of team %d", team.ID)
+		}
+	}
+
+	path := "/api/teams/" + id64(team.ID)
+	for _, c := range []struct {
+		name   string
+		method string
+		path   string
+		body   any
+		want   int
+	}{
+		{"rename it", http.MethodPut, path,
+			map[string]string{"name": "theirs, renamed"}, http.StatusNoContent},
+		{"mint an invite", http.MethodPost, path + "/invites",
+			map[string]any{"role": "member", "max_uses": 1}, http.StatusCreated},
+		{"add a member", http.MethodPost, path + "/members",
+			map[string]any{"user_id": 1, "role": "member"}, http.StatusNoContent},
+		{"remove a member", http.MethodDelete, path + "/members/1", nil, http.StatusNoContent},
+	} {
+		resp := s.req(t, c.method, c.path, c.body)
+		resp.Body.Close()
+		if resp.StatusCode != c.want {
+			t.Errorf("%s: expected %d, got %d", c.name, c.want, resp.StatusCode)
+		}
+	}
+
+	// The other half of the rule. An incident in that team is not the admin's
+	// to read, because administration is about accounts — and the last case
+	// above has just taken the admin back out of the membership.
+	var integration struct {
+		Key string `json:"key"`
+	}
+	decode(t, call(http.MethodPost, path+"/integrations",
+		map[string]string{"name": "theirs alertmanager"}), &integration)
+	postToIntegration(t, s, integration.Key, "fp-theirs", "TheirDiskFull")
+
+	var incidents []struct {
+		ID int64 `json:"id"`
+	}
+	decode(t, s.req(t, http.MethodGet, "/api/incidents", nil), &incidents)
+	if len(incidents) != 0 {
+		t.Errorf("the admin should see none of that team's incidents, got %d", len(incidents))
+	}
+}
+
+// The team page at /admin/teams/{id} needs the one question the test above
+// leaves shut: who is in a team the administrator is not in.
+//
+// It is answered by a separate endpoint under AdminOnly rather than by letting
+// the admin flag through requireTeamMember, and the second half of this test is
+// the reason — /api/teams/{id}/members must keep answering 404, so that "member
+// means membership and nothing else" stays true of the endpoint it was said
+// about. Reading a team's shape and reading a team's work are different things.
+func TestAdminGetTeam_ReadsAnyTeamWithoutJoiningIt(t *testing.T) {
+	s := newTS(t)
+
+	founderID, call := member(t, s, "founder")
+	var team struct {
+		ID int64 `json:"id"`
+	}
+	decode(t, call(http.MethodPost, "/api/teams", map[string]string{"name": "theirs"}), &team)
+	if team.ID == 0 {
+		t.Fatal("no team was created")
+	}
+
+	// The admin reads it whole, without being in it.
+	var got struct {
+		Team struct {
+			ID            int64  `json:"id"`
+			Name          string `json:"name"`
+			Members       int64  `json:"members"`
+			OpenIncidents int64  `json:"open_incidents"`
+		} `json:"team"`
+		Members []struct {
+			UserID   int64  `json:"user_id"`
+			Username string `json:"username"`
+			Role     string `json:"role"`
+		} `json:"members"`
+	}
+	decode(t, s.req(t, http.MethodGet, "/api/admin/teams/"+id64(team.ID), nil), &got)
+
+	if got.Team.ID != team.ID || got.Team.Name != "theirs" {
+		t.Errorf("expected team %d named theirs, got %d named %q", team.ID, got.Team.ID, got.Team.Name)
+	}
+	if got.Team.Members != 1 {
+		t.Errorf("expected a member count of 1, got %d", got.Team.Members)
+	}
+	if len(got.Members) != 1 {
+		t.Fatalf("expected one member, got %d", len(got.Members))
+	}
+	if got.Members[0].UserID != founderID || got.Members[0].Username != "founder" {
+		t.Errorf("expected founder (%d), got %q (%d)",
+			founderID, got.Members[0].Username, got.Members[0].UserID)
+	}
+	// Whoever creates a team owns it, and the page's role toggle depends on
+	// that being reported rather than assumed.
+	if got.Members[0].Role != "owner" {
+		t.Errorf("expected the creator to be owner, got %q", got.Members[0].Role)
+	}
+
+	// The rule this endpoint exists in order not to break. Same admin, same
+	// team, the member-only endpoint: still not found.
+	resp := s.req(t, http.MethodGet, "/api/teams/"+id64(team.ID)+"/members", nil)
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusNotFound {
+		t.Errorf("an admin outside the team must still get 404 from the member-only list, got %d",
+			resp.StatusCode)
+	}
+
+	// And the new one is administration, not membership: being in the team is
+	// not enough.
+	resp = call(http.MethodGet, "/api/admin/teams/"+id64(team.ID), nil)
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusForbidden {
+		t.Errorf("a non-admin member must get 403, got %d", resp.StatusCode)
+	}
+
+	for _, c := range []struct {
+		name string
+		path string
+		want int
+	}{
+		{"a team that does not exist", "/api/admin/teams/999999", http.StatusNotFound},
+		{"a team id that is not a number", "/api/admin/teams/nonsense", http.StatusBadRequest},
+	} {
+		resp := s.req(t, http.MethodGet, c.path, nil)
+		resp.Body.Close()
+		if resp.StatusCode != c.want {
+			t.Errorf("%s: expected %d, got %d", c.name, c.want, resp.StatusCode)
+		}
+	}
+}
+
+// A team name is trimmed when it is created, and renaming had not been, so " "
+// was a legal name to rename to and an illegal one to start with.
+func TestRenameTeam_TrimsTheName(t *testing.T) {
+	s := newTS(t)
+	var team struct {
+		ID int64 `json:"id"`
+	}
+	decode(t, s.req(t, http.MethodPost, "/api/teams", map[string]string{"name": "trimmed"}), &team)
+
+	path := "/api/teams/" + id64(team.ID)
+	resp := s.req(t, http.MethodPut, path, map[string]string{"name": "   "})
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusBadRequest {
+		t.Errorf("a blank name must be refused, got %d", resp.StatusCode)
+	}
+
+	resp = s.req(t, http.MethodPut, path, map[string]string{"name": "  padded  "})
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusNoContent {
+		t.Fatalf("expected 204, got %d", resp.StatusCode)
+	}
+
+	var got struct {
+		Team struct {
+			Name string `json:"name"`
+		} `json:"team"`
+	}
+	decode(t, s.req(t, http.MethodGet, "/api/admin/teams/"+id64(team.ID), nil), &got)
+	if got.Team.Name != "padded" {
+		t.Errorf("expected the name to be trimmed to %q, got %q", "padded", got.Team.Name)
+	}
+}
+
+// The admin page's per-user view asks what somebody is in. Self or admin, like
+// the rest of the per-user endpoints.
+func TestUserTeams_SelfOrAdmin(t *testing.T) {
+	s := newTS(t)
+	memberID, call := member(t, s, "joiner")
+	path := "/api/users/" + id64(memberID) + "/teams"
+
+	// member() puts them in the default team, so both readings agree on one.
+	for _, c := range []struct {
+		name string
+		do   func() *http.Response
+	}{
+		{"the admin reading somebody else's", func() *http.Response { return s.req(t, http.MethodGet, path, nil) }},
+		{"the user reading their own", func() *http.Response { return call(http.MethodGet, path, nil) }},
+	} {
+		var teams []struct {
+			ID   int64  `json:"id"`
+			Name string `json:"name"`
+			Role string `json:"role"`
+		}
+		decode(t, c.do(), &teams)
+		if len(teams) != 1 {
+			t.Fatalf("%s: expected 1 team, got %d", c.name, len(teams))
+		}
+		if teams[0].Role != "member" {
+			t.Errorf("%s: expected role member, got %q", c.name, teams[0].Role)
+		}
+	}
+
+	// Somebody else's is not theirs to read.
+	otherID, _ := member(t, s, "nosy")
+	resp := call(http.MethodGet, "/api/users/"+id64(otherID)+"/teams", nil)
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusForbidden {
+		t.Errorf("reading another user's teams: expected 403, got %d", resp.StatusCode)
+	}
+
+	// A user who does not exist is a 404 rather than an empty list, which is
+	// how the page tells "no teams" from "no such person".
+	resp = s.req(t, http.MethodGet, "/api/users/9999/teams", nil)
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusNotFound {
+		t.Errorf("a missing user: expected 404, got %d", resp.StatusCode)
+	}
+}
+
 // The flag has to reach the client, or the web UI cannot decide what to show.
 func TestAdmin_MeReportsTheFlag(t *testing.T) {
 	s := newTS(t)

internal/api/auth.go

@@ -139,6 +139,34 @@ func hashPassword(pw string) (string, error) {
 	return string(h), err
 }
 
+// startSession mints a session and sets the cookie. Shared by login and
+// sign-up: somebody who has just chosen a password is signed in, rather than
+// being sent to a form to type the same credential again.
+func startSession(w http.ResponseWriter, r *http.Request, db *sql.DB, userID int64, publicURL string) error {
+	raw, tokenHash, err := randomToken()
+	if err != nil {
+		return err
+	}
+	now := time.Now()
+	if _, err := db.ExecContext(r.Context(), `
+		INSERT INTO sessions (token_hash, user_id, created_at, last_seen_at, expires_at, user_agent)
+		VALUES ($1, $2, $3, $4, $5, $6)`,
+		tokenHash, userID, now.Unix(), now.Unix(), now.Add(sessionTTL).Unix(), r.UserAgent()); err != nil {
+		return err
+	}
+
+	http.SetCookie(w, &http.Cookie{
+		Name:     sessionCookie,
+		Value:    raw,
+		Path:     "/",
+		MaxAge:   int(sessionTTL.Seconds()),
+		HttpOnly: true,
+		Secure:   cookieSecure(publicURL, r),
+		SameSite: http.SameSiteLaxMode,
+	})
+	return nil
+}
+
 // handleLogin exchanges a username and password for a session cookie.
 func handleLogin(db *sql.DB, limiter *loginLimiter, publicURL string) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
@@ -182,29 +210,10 @@ func handleLogin(db *sql.DB, limiter *loginLimiter, publicURL string) http.Handl
 		}
 		limiter.clear(userKey)
 
-		raw, tokenHash, err := randomToken()
-		if err != nil {
+		if err := startSession(w, r, db, userID, publicURL); err != nil {
 			respond(w, http.StatusInternalServerError, errResp("internal error"))
 			return
 		}
-		now := time.Now()
-		if _, err := db.ExecContext(r.Context(), `
-			INSERT INTO sessions (token_hash, user_id, created_at, last_seen_at, expires_at, user_agent)
-			VALUES ($1, $2, $3, $4, $5, $6)`,
-			tokenHash, userID, now.Unix(), now.Unix(), now.Add(sessionTTL).Unix(), r.UserAgent()); err != nil {
-			respond(w, http.StatusInternalServerError, errResp("internal error"))
-			return
-		}
-
-		http.SetCookie(w, &http.Cookie{
-			Name:     sessionCookie,
-			Value:    raw,
-			Path:     "/",
-			MaxAge:   int(sessionTTL.Seconds()),
-			HttpOnly: true,
-			Secure:   cookieSecure(publicURL, r),
-			SameSite: http.SameSiteLaxMode,
-		})
 
 		user, err := fetchUser(r.Context(), db, userID)
 		if err != nil {
@@ -243,6 +252,11 @@ func handleLogout(db *sql.DB, publicURL string) http.HandlerFunc {
 type meResponse struct {
 	User        any  `json:"user"`
 	HasPassword bool `json:"has_password"`
+
+	// OnboardingDismissed is whether this person has put the first-run
+	// checklist away. Per user rather than per browser: somebody who finishes
+	// setting up on a laptop should not be nagged again on their phone.
+	OnboardingDismissed bool `json:"onboarding_dismissed"`
 }
 
 // handleMe says who the caller is. The web UI calls it on load to decide
@@ -256,9 +270,15 @@ func handleMe(db *sql.DB) http.HandlerFunc {
 			return
 		}
 		var hash sql.NullString
+		var dismissed *int64
 		db.QueryRowContext(r.Context(),
-			"SELECT password_hash FROM users WHERE id = $1", caller.ID).Scan(&hash)
-		respond(w, http.StatusOK, meResponse{User: user, HasPassword: hash.Valid})
+			"SELECT password_hash, onboarding_dismissed_at FROM users WHERE id = $1",
+			caller.ID).Scan(&hash, &dismissed)
+		respond(w, http.StatusOK, meResponse{
+			User:                user,
+			HasPassword:         hash.Valid,
+			OnboardingDismissed: dismissed != nil,
+		})
 	}
 }
 

internal/api/incident_store.go

@@ -52,6 +52,13 @@ type querier interface {
 
 const incidentSelectFrom = `
 	SELECT i.id, i.team_id, t.name, i.group_key, i.title, i.group_labels, i.status, i.severity,
+	       i.escalation_level,
+	       -- When this level runs out. Computed here rather than in Go because
+	       -- the timeout lives beside the level in the policy, and one join is
+	       -- cheaper than a second query per incident in a list.
+	       (SELECT i.escalation_level_at + el.timeout_seconds
+	          FROM escalation_levels el
+	         WHERE el.team_id = i.team_id AND el.position = i.escalation_level),
 	       i.triggered_at,
 	       i.acknowledged_by, i.acknowledged_at, ack.username,
 	       i.assigned_to, asg.username, i.snoozed_until,
@@ -65,10 +72,11 @@ func scanIncident(s scanner) (models.Incident, error) {
 	var i models.Incident
 	var groupLabelsJSON string
 	var triggeredAt int64
-	var ackAt, snoozedUntil, resolvedAt, archivedAt *int64
+	var ackAt, snoozedUntil, resolvedAt, archivedAt, escalationDue *int64
 
 	if err := s.Scan(
 		&i.ID, &i.TeamID, &i.TeamName, &i.GroupKey, &i.Title, &groupLabelsJSON, &i.Status, &i.Severity,
+		&i.EscalationLevel, &escalationDue,
 		&triggeredAt,
 		&i.AcknowledgedByID, &ackAt, &i.AcknowledgedByUser,
 		&i.AssignedToID, &i.AssignedToUser, &snoozedUntil,
@@ -83,6 +91,7 @@ func scanIncident(s scanner) (models.Incident, error) {
 	i.SnoozedUntil = unixPtr(snoozedUntil)
 	i.ResolvedAt = unixPtr(resolvedAt)
 	i.ArchivedAt = unixPtr(archivedAt)
+	i.EscalationDueAt = unixPtr(escalationDue)
 	return i, nil
 }
 

internal/api/router.go

@@ -15,6 +15,12 @@ import (
 // notify disables notifications. Dead man's switches are per team and read from
 // the database, so nothing about them is wired in here.
 func NewRouter(db *sql.DB, notify NotifyConfig, cfg config.Config) http.Handler {
+	// One limiter each, both process-wide for the life of the router: login
+	// counts failed passwords, sign-up counts account creation, and mixing the
+	// two would let a burst of sign-ups lock somebody out of logging in.
+	loginLimit := newLoginLimiter()
+	signupLimiter := newLoginLimiter()
+
 	r := chi.NewRouter()
 	r.Use(middleware.Logger)
 	r.Use(middleware.Recoverer)
@@ -39,9 +45,16 @@ func NewRouter(db *sql.DB, notify NotifyConfig, cfg config.Config) http.Handler
 	// JSON 404 every unknown /api path gets.
 	r.Post("/api/integrations/{key}/alertmanager", handleIntegrationWebhook(db, notify))
 
+	// Signing up. Both are unauthenticated by necessity: the caller has no
+	// account yet. The info endpoint says whether the door is open and whether
+	// an invite link is good, so the form can say so before somebody picks a
+	// password.
+	r.Get("/api/signup", handleSignupInfo(db))
+	r.Post("/api/signup", handleSignup(db, signupLimiter, notify.PublicURL))
+
 	// Signing in to the web UI. Login trades a password for a session cookie,
 	// which AuthMiddleware accepts in place of an API key.
-	r.Post("/api/login", handleLogin(db, newLoginLimiter(), notify.PublicURL))
+	r.Post("/api/login", handleLogin(db, loginLimit, notify.PublicURL))
 	r.Post("/api/logout", handleLogout(db, notify.PublicURL))
 
 	// All other /api routes require a valid API key.
@@ -49,6 +62,10 @@ func NewRouter(db *sql.DB, notify NotifyConfig, cfg config.Config) http.Handler
 		r.Use(AuthMiddleware(db))
 
 		r.Get("/api/me", handleMe(db))
+		r.Put("/api/me/onboarding", handleDismissOnboarding(db))
+		// Proves the topic works, which is the only part of "notifications are
+		// set up" that the person holding the phone can confirm.
+		r.Post("/api/me/notify/test", handleTestNotification(notify, db))
 
 		// Readable by anyone signed in: the queue's assignment control and the
 		// on-call schedule both need to name people.
@@ -57,6 +74,7 @@ func NewRouter(db *sql.DB, notify NotifyConfig, cfg config.Config) http.Handler
 		// Your own account, or anybody's if you are an admin. The handlers call
 		// requireSelfOrAdmin rather than sitting behind AdminOnly, because
 		// which rule applies depends on the {id} in the path.
+		r.Get("/api/users/{id}/teams", handleUserTeams(db))
 		r.Put("/api/users/{id}/notify", handleSetNotifyTarget(db))
 		r.Put("/api/users/{id}/password", handleSetPassword(db))
 		r.Post("/api/users/{id}/api-keys", handleCreateAPIKey(db))
@@ -76,6 +94,11 @@ func NewRouter(db *sql.DB, notify NotifyConfig, cfg config.Config) http.Handler
 			// What exists on this server, and how it behaves. /api/teams
 			// answers "what am I in"; this one answers "what is there".
 			r.Get("/api/admin/teams", handleAdminListTeams(db))
+			// One team and who is in it. The member list under
+			// /api/teams/{id}/members stays member-only and still 404s
+			// an administrator from outside; this is a different
+			// question, so it is a different endpoint.
+			r.Get("/api/admin/teams/{teamID}", handleAdminGetTeam(db))
 			r.Get("/api/admin/settings", handleGetSettings(db, cfg))
 			r.Put("/api/admin/settings", handleSetSettings(db))
 		})
@@ -109,6 +132,11 @@ func NewRouter(db *sql.DB, notify NotifyConfig, cfg config.Config) http.Handler
 		r.Post("/api/teams/{teamID}/members", handleAddTeamMember(db))
 		r.Delete("/api/teams/{teamID}/members/{userID}", handleRemoveTeamMember(db))
 
+		// Invite links into this team.
+		r.Get("/api/teams/{teamID}/invites", handleListInvites(db))
+		r.Post("/api/teams/{teamID}/invites", handleCreateInvite(db, notify.PublicURL))
+		r.Delete("/api/teams/{teamID}/invites/{inviteID}", handleRevokeInvite(db))
+
 		// A team's escalation ladder: who is paged when nobody answers.
 		r.Get("/api/teams/{teamID}/escalation", handleGetEscalation(db))
 		r.Put("/api/teams/{teamID}/escalation", handleSetEscalation(db))

internal/api/settings.go

@@ -6,9 +6,11 @@ import (
 	"errors"
 	"net/http"
 	"strconv"
+	"strings"
 	"time"
 
 	"git.ryuvia.com/niklas/terdut-server/internal/config"
+	"git.ryuvia.com/niklas/terdut-server/internal/models"
 	"github.com/go-chi/chi/v5"
 )
 
@@ -90,6 +92,16 @@ func SeedSettings(ctx context.Context, db *sql.DB, cfg config.Config) error {
 type settingsResponse struct {
 	Editable map[string]settingValue `json:"editable"`
 	FromEnv  map[string]string       `json:"from_env"`
+
+	// Choices are settings that are a word from a fixed list rather than a
+	// duration. One so far: who may create an account.
+	Choices map[string]choiceValue `json:"choices"`
+}
+
+type choiceValue struct {
+	Value       string   `json:"value"`
+	Options     []string `json:"options"`
+	Description string   `json:"description"`
 }
 
 type settingValue struct {
@@ -104,6 +116,14 @@ func handleGetSettings(db *sql.DB, cfg config.Config) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		out := settingsResponse{
 			Editable: map[string]settingValue{},
+			Choices: map[string]choiceValue{
+				SettingSignupMode: {
+					Value:   signupMode(r.Context(), db),
+					Options: []string{SignupInviteOnly, SignupOpen},
+					Description: "who may create an account: invite_only means a link from a team owner, " +
+						"open means anybody who can reach this server",
+				},
+			},
 			FromEnv: map[string]string{
 				// Never the ntfy token or the DSN: both are credentials, and an
 				// admin page that renders them turns a browser tab into a place
@@ -137,7 +157,7 @@ func handleGetSettings(db *sql.DB, cfg config.Config) http.HandlerFunc {
 // sit in the table looking like configuration and doing nothing.
 func handleSetSettings(db *sql.DB) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		var req map[string]int64
+		var req map[string]any
 		if err := decodeJSON(r, &req); err != nil {
 			respond(w, http.StatusBadRequest, errResp("invalid request body"))
 			return
@@ -147,17 +167,37 @@ func handleSetSettings(db *sql.DB) http.HandlerFunc {
 			return
 		}
 
-		for key, secs := range req {
-			b, known := settingBounds[key]
-			if !known {
-				respond(w, http.StatusBadRequest, errResp("unknown setting: "+key))
-				return
-			}
-			d := time.Duration(secs) * time.Second
-			if d < b.min || d > b.max {
-				respond(w, http.StatusBadRequest, errResp(
-					key+" must be between "+b.min.String()+" and "+b.max.String()))
-				return
+		// Validate everything before writing anything: a request that sets two
+		// settings and gets one wrong should change neither.
+		values := map[string]string{}
+		for key, raw := range req {
+			switch key {
+			case SettingSignupMode:
+				mode, _ := raw.(string)
+				if mode != SignupOpen && mode != SignupInviteOnly {
+					respond(w, http.StatusBadRequest,
+						errResp("signup_mode must be "+SignupInviteOnly+" or "+SignupOpen))
+					return
+				}
+				values[key] = mode
+			default:
+				b, known := settingBounds[key]
+				if !known {
+					respond(w, http.StatusBadRequest, errResp("unknown setting: "+key))
+					return
+				}
+				secs, ok := raw.(float64) // JSON numbers decode as float64
+				if !ok {
+					respond(w, http.StatusBadRequest, errResp(key+" must be a number of seconds"))
+					return
+				}
+				d := time.Duration(int64(secs)) * time.Second
+				if d < b.min || d > b.max {
+					respond(w, http.StatusBadRequest, errResp(
+						key+" must be between "+b.min.String()+" and "+b.max.String()))
+					return
+				}
+				values[key] = strconv.FormatInt(int64(secs), 10)
 			}
 		}
 
@@ -168,13 +208,13 @@ func handleSetSettings(db *sql.DB) http.HandlerFunc {
 		}
 		defer tx.Rollback() //nolint:errcheck
 
-		for key, secs := range req {
+		for key, value := range values {
 			if _, err := tx.ExecContext(r.Context(), `
 				INSERT INTO settings (key, value, updated_at)
 				VALUES ($1, $2, `+nowEpoch+`)
 				ON CONFLICT (key) DO UPDATE SET
 					value = excluded.value, updated_at = excluded.updated_at`,
-				key, strconv.FormatInt(secs, 10)); err != nil {
+				key, value); err != nil {
 				respond(w, http.StatusInternalServerError, errResp("internal error"))
 				return
 			}
@@ -188,6 +228,17 @@ func handleSetSettings(db *sql.DB) http.HandlerFunc {
 	}
 }
 
+// adminTeam is a team as an administrator sees it: what it is, plus how big it
+// is and how much is on fire in it. One definition, so a team in the list and a
+// team on its own page cannot describe themselves differently.
+type adminTeam struct {
+	ID            int64     `json:"id"`
+	Name          string    `json:"name"`
+	CreatedAt     time.Time `json:"created_at"`
+	Members       int64     `json:"members"`
+	OpenIncidents int64     `json:"open_incidents"`
+}
+
 // handleAdminListTeams lists every team on the server, with its size. The
 // ordinary /api/teams answers "what am I in"; this one answers "what exists",
 // which only an administrator may ask.
@@ -206,13 +257,6 @@ func handleAdminListTeams(db *sql.DB) http.HandlerFunc {
 		}
 		defer rows.Close()
 
-		type adminTeam struct {
-			ID            int64     `json:"id"`
-			Name          string    `json:"name"`
-			CreatedAt     time.Time `json:"created_at"`
-			Members       int64     `json:"members"`
-			OpenIncidents int64     `json:"open_incidents"`
-		}
 		teams := []adminTeam{}
 		for rows.Next() {
 			var t adminTeam
@@ -232,6 +276,79 @@ func handleAdminListTeams(db *sql.DB) http.HandlerFunc {
 	}
 }
 
+// handleAdminGetTeam answers "what is this team, and who is in it" for any team
+// on the server, which is the one question an administrator could not ask.
+//
+// GET /api/teams/{id}/members is requireTeamMember and answers 404 to somebody
+// outside the team, administrator or not, and that stays exactly as it is:
+// member means membership and nothing else. Reading a team's shape is a
+// different thing from reading its work, so it gets an endpoint of its own
+// under AdminOnly rather than an exception carved into that rule. An
+// administrator still sees none of the team's incidents, alerts or rota.
+func handleAdminGetTeam(db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		teamID, ok := teamParam(w, r)
+		if !ok {
+			return
+		}
+
+		var t adminTeam
+		var created int64
+		err := db.QueryRowContext(r.Context(), `
+			SELECT t.id, t.name, t.created_at,
+			       (SELECT COUNT(*) FROM team_members m WHERE m.team_id = t.id),
+			       (SELECT COUNT(*) FROM incidents i
+			         WHERE i.team_id = t.id AND i.resolved_at IS NULL)
+			FROM   teams t
+			WHERE  t.id = $1`, teamID).
+			Scan(&t.ID, &t.Name, &created, &t.Members, &t.OpenIncidents)
+		if errors.Is(err, sql.ErrNoRows) {
+			respond(w, http.StatusNotFound, errResp("not found"))
+			return
+		}
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		t.CreatedAt = time.Unix(created, 0).UTC()
+
+		// Same query and same ordering as handleListTeamMembers, so the two
+		// answers to "who is in this team" cannot disagree about the answer.
+		rows, err := db.QueryContext(r.Context(), `
+			SELECT m.team_id, m.user_id, u.username, m.role, m.joined_at
+			FROM   team_members m
+			JOIN   users u ON u.id = m.user_id
+			WHERE  m.team_id = $1
+			ORDER  BY u.username`, teamID)
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		defer rows.Close()
+
+		members := []models.TeamMember{}
+		for rows.Next() {
+			var m models.TeamMember
+			var joined int64
+			if err := rows.Scan(&m.TeamID, &m.UserID, &m.Username, &m.Role, &joined); err != nil {
+				respond(w, http.StatusInternalServerError, errResp("internal error"))
+				return
+			}
+			m.JoinedAt = time.Unix(joined, 0).UTC()
+			members = append(members, m)
+		}
+		if err := rows.Err(); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+
+		// A wrapper rather than a team with the members hung off it: "members"
+		// already means a count on the list endpoint, and one name must not be
+		// a number in one answer and an array in the next.
+		respond(w, http.StatusOK, map[string]any{"team": t, "members": members})
+	}
+}
+
 // handleRenameTeam renames a team. An owner's job, and an administrator's when
 // a team has nobody left to do it.
 func handleRenameTeam(db *sql.DB) http.HandlerFunc {
@@ -247,7 +364,15 @@ func handleRenameTeam(db *sql.DB) http.HandlerFunc {
 		var req struct {
 			Name string `json:"name"`
 		}
-		if err := decodeJSON(r, &req); err != nil || req.Name == "" {
+		// Trimmed, as handleCreateTeam trims: without it " " is a team name
+		// here but not at creation, which is one rule stated twice and only
+		// half applied.
+		if err := decodeJSON(r, &req); err != nil {
+			respond(w, http.StatusBadRequest, errResp("name is required"))
+			return
+		}
+		req.Name = strings.TrimSpace(req.Name)
+		if req.Name == "" {
 			respond(w, http.StatusBadRequest, errResp("name is required"))
 			return
 		}

internal/api/signup.go

@@ -0,0 +1,489 @@
+package api
+
+import (
+	"context"
+	"database/sql"
+	"errors"
+	"net/http"
+	"strconv"
+	"strings"
+	"time"
+
+	"git.ryuvia.com/niklas/terdut-server/internal/models"
+	"github.com/go-chi/chi/v5"
+)
+
+// SettingSignupMode says who may create an account. It lives in the settings
+// table with the other behaviour settings, so an administrator changes it in
+// the admin page rather than in a chart.
+//
+// Two modes, not three. A domain-restricted mode was considered and dropped:
+// with no email in this server there is nothing to verify an address against,
+// so it would check the domain of a string somebody typed — a speed bump
+// dressed as a control.
+const (
+	SettingSignupMode = "signup_mode"
+
+	SignupInviteOnly = "invite_only"
+	SignupOpen       = "open"
+)
+
+// defaultSignupMode is invite-only. An install that gets a public hostname
+// before anybody has thought about sign-up should not be collecting accounts
+// from the internet by default.
+const defaultSignupMode = SignupInviteOnly
+
+// inviteTTL is how long a new invite link lives. Long enough to send it and be
+// read tomorrow, short enough that a link in an old chat log stops working.
+const inviteTTL = 7 * 24 * time.Hour
+
+// signupMode reads the current mode, falling back to invite-only for a missing
+// or unrecognised value: the failure mode of a typo in this setting should be
+// the closed door, not the open one.
+func signupMode(ctx context.Context, db *sql.DB) string {
+	var raw string
+	if err := db.QueryRowContext(ctx,
+		"SELECT value FROM settings WHERE key = $1", SettingSignupMode).Scan(&raw); err != nil {
+		return defaultSignupMode
+	}
+	if raw != SignupOpen && raw != SignupInviteOnly {
+		return defaultSignupMode
+	}
+	return raw
+}
+
+// handleSignupInfo tells the sign-up page what it may offer, without requiring
+// a session: whether open sign-up is on, and whether the invite in the URL is
+// any good. A bad invite is better reported before somebody picks a password.
+func handleSignupInfo(db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		out := map[string]any{"mode": signupMode(r.Context(), db)}
+
+		if token := r.URL.Query().Get("invite"); token != "" {
+			inv, err := loadInvite(r.Context(), db, token)
+			switch {
+			case err == nil:
+				out["invite_valid"] = true
+				out["invite_team"] = inv.teamName
+			default:
+				// Deliberately one answer for expired, revoked, used up and
+				// never existed. Telling a stranger which it was tells them
+				// something about links they do not hold.
+				out["invite_valid"] = false
+			}
+		}
+		respond(w, http.StatusOK, out)
+	}
+}
+
+type invite struct {
+	id       int64
+	teamID   int64
+	teamName string
+	role     string
+}
+
+// loadInvite resolves a raw token to a usable invite, or an error. Usable means
+// it exists, has not been revoked, has not expired and has uses left.
+func loadInvite(ctx context.Context, q querier, token string) (invite, error) {
+	var inv invite
+	err := q.QueryRowContext(ctx, `
+		SELECT i.id, i.team_id, t.name, i.role
+		FROM   invites i
+		JOIN   teams t ON t.id = i.team_id
+		WHERE  i.token_hash = $1
+		  AND  i.revoked_at IS NULL
+		  AND  i.expires_at > `+nowEpoch+`
+		  AND  i.uses < i.max_uses`, hashToken(token)).
+		Scan(&inv.id, &inv.teamID, &inv.teamName, &inv.role)
+	if errors.Is(err, sql.ErrNoRows) {
+		return invite{}, errInviteUnusable
+	}
+	return inv, err
+}
+
+var errInviteUnusable = errors.New("invite is not usable")
+
+// handleSignup creates an account, and puts it somewhere.
+//
+// Rate-limited on the same limiter as login, by address: sign-up is the other
+// unauthenticated endpoint that writes, and an open install without this is a
+// way to fill somebody's user table.
+func handleSignup(db *sql.DB, limiter *loginLimiter, publicURL string) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		addr := clientAddr(r)
+		if limiter.blocked("signup:"+addr, maxSignupsPerAddr) {
+			respond(w, http.StatusTooManyRequests, errResp("too many sign-ups from this address"))
+			return
+		}
+
+		var req struct {
+			Username string `json:"username"`
+			Email    string `json:"email"`
+			Password string `json:"password"`
+			Invite   string `json:"invite"`
+			TeamName string `json:"team_name"`
+		}
+		if err := decodeJSON(r, &req); err != nil {
+			respond(w, http.StatusBadRequest, errResp("invalid request body"))
+			return
+		}
+		req.Username = strings.TrimSpace(req.Username)
+		req.Email = strings.TrimSpace(req.Email)
+		req.TeamName = strings.TrimSpace(req.TeamName)
+
+		if req.Username == "" || req.Email == "" {
+			respond(w, http.StatusBadRequest, errResp("username and email are required"))
+			return
+		}
+		if msg := validatePassword(req.Password); msg != "" {
+			respond(w, http.StatusBadRequest, errResp(msg))
+			return
+		}
+
+		mode := signupMode(r.Context(), db)
+		var inv invite
+		hasInvite := false
+		if req.Invite != "" {
+			var err error
+			inv, err = loadInvite(r.Context(), db, req.Invite)
+			if err != nil {
+				limiter.fail("signup:" + addr)
+				respond(w, http.StatusForbidden, errResp("this invite link is not usable"))
+				return
+			}
+			hasInvite = true
+		}
+		if !hasInvite && mode != SignupOpen {
+			// No invite and the door is shut. Not 404: the endpoint exists and
+			// saying so is how somebody knows to ask for a link.
+			respond(w, http.StatusForbidden,
+				errResp("sign-up is invite-only on this server"))
+			return
+		}
+		if !hasInvite && req.TeamName == "" {
+			// Open sign-up with no team would create an account that sees an
+			// empty queue and can be paged by nobody.
+			respond(w, http.StatusBadRequest, errResp("team_name is required"))
+			return
+		}
+
+		hash, err := hashPassword(req.Password)
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+
+		tx, err := db.BeginTx(r.Context(), nil)
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		defer tx.Rollback() //nolint:errcheck
+
+		var userID int64
+		var invitedVia *int64
+		if hasInvite {
+			invitedVia = &inv.id
+		}
+		if err := tx.QueryRowContext(r.Context(), `
+			INSERT INTO users (username, email, password_hash, invited_via)
+			VALUES ($1, $2, $3, $4) RETURNING id`,
+			req.Username, req.Email, hash, invitedVia).Scan(&userID); err != nil {
+			if isUniqueViolation(err) {
+				respond(w, http.StatusConflict, errResp("username or email already exists"))
+				return
+			}
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+
+		teamID, role := inv.teamID, inv.role
+		if !hasInvite {
+			// Open sign-up makes a team, and its creator owns it.
+			if err := tx.QueryRowContext(r.Context(),
+				"INSERT INTO teams (name) VALUES ($1) RETURNING id", req.TeamName).Scan(&teamID); err != nil {
+				if isUniqueViolation(err) {
+					respond(w, http.StatusConflict, errResp("a team with that name already exists"))
+					return
+				}
+				respond(w, http.StatusInternalServerError, errResp("internal error"))
+				return
+			}
+			role = models.RoleOwner
+		}
+
+		if _, err := tx.ExecContext(r.Context(),
+			"INSERT INTO team_members (team_id, user_id, role) VALUES ($1, $2, $3)",
+			teamID, userID, role); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+
+		if hasInvite {
+			// Counted inside the transaction, so two people redeeming the last
+			// use of a link at once cannot both get in.
+			res, err := tx.ExecContext(r.Context(),
+				"UPDATE invites SET uses = uses + 1 WHERE id = $1 AND uses < max_uses", inv.id)
+			if err != nil {
+				respond(w, http.StatusInternalServerError, errResp("internal error"))
+				return
+			}
+			if n, _ := res.RowsAffected(); n == 0 {
+				respond(w, http.StatusForbidden, errResp("this invite link is not usable"))
+				return
+			}
+		}
+
+		if err := tx.Commit(); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+
+		// Signed in immediately: the alternative is a form that says "now go
+		// and log in", which is the same credential typed twice.
+		if err := startSession(w, r, db, userID, publicURL); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		user, _ := fetchUser(r.Context(), db, userID)
+		respond(w, http.StatusCreated, meResponse{User: user, HasPassword: true})
+	}
+}
+
+// maxSignupsPerAddr is looser than the login limit: several people joining from
+// one office share an address, and the thing being limited is account creation
+// rather than password guessing.
+const maxSignupsPerAddr = 10
+
+// ---------------------------------------------------------------------------
+// Invites
+// ---------------------------------------------------------------------------
+
+type inviteJSON struct {
+	ID        int64     `json:"id"`
+	TeamID    int64     `json:"team_id"`
+	Role      string    `json:"role"`
+	CreatedAt time.Time `json:"created_at"`
+	ExpiresAt time.Time `json:"expires_at"`
+	MaxUses   int64     `json:"max_uses"`
+	Uses      int64     `json:"uses"`
+	Revoked   bool      `json:"revoked"`
+
+	// URL is the whole link, returned once when the invite is created. Like an
+	// integration key, only its hash is stored.
+	URL string `json:"url,omitempty"`
+}
+
+func handleListInvites(db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		teamID, ok := teamParam(w, r)
+		if !ok {
+			return
+		}
+		if !requireTeamOwner(w, r, teamID) {
+			return
+		}
+
+		rows, err := db.QueryContext(r.Context(), `
+			SELECT id, team_id, role, created_at, expires_at, max_uses, uses, revoked_at
+			FROM   invites
+			WHERE  team_id = $1
+			ORDER  BY id DESC`, teamID)
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		defer rows.Close()
+
+		out := []inviteJSON{}
+		for rows.Next() {
+			var i inviteJSON
+			var created, expires int64
+			var revoked *int64
+			if err := rows.Scan(&i.ID, &i.TeamID, &i.Role, &created, &expires,
+				&i.MaxUses, &i.Uses, &revoked); err != nil {
+				respond(w, http.StatusInternalServerError, errResp("internal error"))
+				return
+			}
+			i.CreatedAt = time.Unix(created, 0).UTC()
+			i.ExpiresAt = time.Unix(expires, 0).UTC()
+			i.Revoked = revoked != nil
+			out = append(out, i)
+		}
+		if err := rows.Err(); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		respond(w, http.StatusOK, out)
+	}
+}
+
+// handleCreateInvite mints a link into this team. Owner-only, like the rest of
+// a team's configuration: deciding who joins is configuring the team.
+func handleCreateInvite(db *sql.DB, publicURL string) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		teamID, ok := teamParam(w, r)
+		if !ok {
+			return
+		}
+		if !requireTeamOwner(w, r, teamID) {
+			return
+		}
+
+		var req struct {
+			Role    string `json:"role"`
+			MaxUses int64  `json:"max_uses"`
+		}
+		if err := decodeJSON(r, &req); err != nil {
+			respond(w, http.StatusBadRequest, errResp("invalid request body"))
+			return
+		}
+		if req.Role == "" {
+			req.Role = models.RoleMember
+		}
+		if req.Role != models.RoleOwner && req.Role != models.RoleMember {
+			respond(w, http.StatusBadRequest, errResp("role must be owner or member"))
+			return
+		}
+		if req.MaxUses == 0 {
+			req.MaxUses = 1
+		}
+		if req.MaxUses < 1 || req.MaxUses > 100 {
+			respond(w, http.StatusBadRequest, errResp("max_uses must be between 1 and 100"))
+			return
+		}
+
+		raw, hash, err := randomToken()
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		caller, _ := userFromContext(r.Context())
+		expires := time.Now().Add(inviteTTL)
+
+		var out inviteJSON
+		var created, expiresAt int64
+		if err := db.QueryRowContext(r.Context(), `
+			INSERT INTO invites (token_hash, team_id, role, created_by, expires_at, max_uses)
+			VALUES ($1, $2, $3, $4, $5, $6)
+			RETURNING id, team_id, role, created_at, expires_at, max_uses, uses`,
+			hash, teamID, req.Role, caller.ID, expires.Unix(), req.MaxUses).
+			Scan(&out.ID, &out.TeamID, &out.Role, &created, &expiresAt, &out.MaxUses, &out.Uses); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		out.CreatedAt = time.Unix(created, 0).UTC()
+		out.ExpiresAt = time.Unix(expiresAt, 0).UTC()
+		out.URL = strings.TrimSuffix(publicURL, "/") + "/signup?invite=" + raw
+		respond(w, http.StatusCreated, out)
+	}
+}
+
+// handleRevokeInvite stops a link working without waiting for it to expire.
+func handleRevokeInvite(db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		teamID, ok := teamParam(w, r)
+		if !ok {
+			return
+		}
+		if !requireTeamOwner(w, r, teamID) {
+			return
+		}
+		id, err := strconv.ParseInt(chi.URLParam(r, "inviteID"), 10, 64)
+		if err != nil {
+			respond(w, http.StatusBadRequest, errResp("invalid invite id"))
+			return
+		}
+
+		res, err := db.ExecContext(r.Context(),
+			"UPDATE invites SET revoked_at = "+nowEpoch+
+				" WHERE id = $1 AND team_id = $2 AND revoked_at IS NULL", id, teamID)
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		if n, _ := res.RowsAffected(); n == 0 {
+			respond(w, http.StatusNotFound, errResp("not found"))
+			return
+		}
+		w.WriteHeader(http.StatusNoContent)
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Onboarding
+// ---------------------------------------------------------------------------
+
+// handleTestNotification publishes one push to the caller's own topic.
+//
+// The point of the first-run checklist's notification step is not that a topic
+// string has been typed but that a phone buzzes, and only the person holding it
+// can tell whether it did. Published directly rather than through the outbox:
+// the outbox row requires an incident, and this deliberately belongs to no
+// incident.
+func handleTestNotification(cfg NotifyConfig, db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		if cfg.BaseURL == "" {
+			respond(w, http.StatusServiceUnavailable,
+				errResp("this server has no ntfy configured, so it can send nothing"))
+			return
+		}
+		caller, _ := userFromContext(r.Context())
+
+		var topic *string
+		if err := db.QueryRowContext(r.Context(),
+			"SELECT ntfy_topic FROM users WHERE id = $1", caller.ID).Scan(&topic); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		if topic == nil || *topic == "" {
+			respond(w, http.StatusBadRequest, errResp("set a notification topic first"))
+			return
+		}
+
+		if err := publish(r.Context(), cfg, ntfyMessage{
+			Topic:   *topic,
+			Title:   "terdut test",
+			Message: "If this arrived, your notifications work.",
+			Tags:    []string{"white_check_mark"},
+		}); err != nil {
+			// The failure is the useful part here: a wrong topic, a token the
+			// ntfy server rejects, or an ntfy that is down all look the same
+			// from the phone, which is silence.
+			respond(w, http.StatusBadGateway, errResp("ntfy rejected the test: "+err.Error()))
+			return
+		}
+		w.WriteHeader(http.StatusNoContent)
+	}
+}
+
+// handleDismissOnboarding hides the first-run checklist, or brings it back.
+// Stored per user rather than in the browser: somebody who finishes setting up
+// on a laptop should not be nagged again on their phone.
+func handleDismissOnboarding(db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		var req struct {
+			Dismissed *bool `json:"dismissed"`
+		}
+		if err := decodeJSON(r, &req); err != nil || req.Dismissed == nil {
+			respond(w, http.StatusBadRequest, errResp("dismissed is required"))
+			return
+		}
+		caller, _ := userFromContext(r.Context())
+
+		var err error
+		if *req.Dismissed {
+			_, err = db.ExecContext(r.Context(),
+				"UPDATE users SET onboarding_dismissed_at = "+nowEpoch+" WHERE id = $1", caller.ID)
+		} else {
+			_, err = db.ExecContext(r.Context(),
+				"UPDATE users SET onboarding_dismissed_at = NULL WHERE id = $1", caller.ID)
+		}
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		w.WriteHeader(http.StatusNoContent)
+	}
+}

internal/api/signup_test.go

@@ -0,0 +1,270 @@
+package api_test
+
+import (
+	"bytes"
+	"encoding/json"
+	"net/http"
+	"net/http/cookiejar"
+	"testing"
+)
+
+// signup posts to the unauthenticated sign-up endpoint, the way the form does,
+// and returns the response and a client holding whatever cookie came back.
+func signup(t *testing.T, s *ts, body map[string]any) (*http.Response, *http.Client) {
+	t.Helper()
+	data, _ := json.Marshal(body)
+	jar, _ := cookiejar.New(nil)
+	client := &http.Client{Jar: jar}
+	req, _ := http.NewRequest(http.MethodPost, s.URL+"/api/signup", bytes.NewReader(data))
+	req.Header.Set("Content-Type", "application/json")
+	resp, err := client.Do(req)
+	if err != nil {
+		t.Fatalf("signup: %v", err)
+	}
+	return resp, client
+}
+
+// invite mints a link into the default team and returns its raw token.
+func invite(t *testing.T, s *ts, role string, maxUses int64) string {
+	t.Helper()
+	var out struct {
+		URL string `json:"url"`
+	}
+	decode(t, s.req(t, http.MethodPost, "/api/teams/"+defaultTeam+"/invites",
+		map[string]any{"role": role, "max_uses": maxUses}), &out)
+	if out.URL == "" {
+		t.Fatal("no invite URL returned")
+	}
+	// ...?invite=<token>
+	i := len(out.URL) - 1
+	for ; i >= 0 && out.URL[i] != '='; i-- {
+	}
+	return out.URL[i+1:]
+}
+
+func setSignupMode(t *testing.T, s *ts, mode string) {
+	t.Helper()
+	resp := s.req(t, http.MethodPut, "/api/admin/settings", map[string]any{"signup_mode": mode})
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusNoContent {
+		t.Fatalf("set signup mode: %d", resp.StatusCode)
+	}
+}
+
+// The default is the closed door. An install that gets a public hostname before
+// anybody has thought about sign-up should not be collecting accounts.
+func TestSignup_InviteOnlyByDefault(t *testing.T) {
+	s := newTS(t)
+
+	var info map[string]any
+	decode(t, s.req(t, http.MethodGet, "/api/signup", nil), &info)
+	if info["mode"] != "invite_only" {
+		t.Errorf("default sign-up mode is %v, want invite_only", info["mode"])
+	}
+
+	resp, _ := signup(t, s, map[string]any{
+		"username": "stranger", "email": "s@test.com", "password": "correct-horse-battery",
+	})
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusForbidden {
+		t.Errorf("sign-up without an invite: expected 403, got %d", resp.StatusCode)
+	}
+}
+
+// An invite carries the team and the role, so redeeming one lands somewhere
+// usable rather than in an account that sees an empty queue.
+func TestSignup_InviteCreatesAMemberOfThatTeam(t *testing.T) {
+	s := newTS(t)
+	token := invite(t, s, "member", 1)
+
+	// The form checks the link before asking for a password.
+	var info map[string]any
+	decode(t, s.req(t, http.MethodGet, "/api/signup?invite="+token, nil), &info)
+	if info["invite_valid"] != true {
+		t.Fatalf("a fresh invite should be valid: %v", info)
+	}
+	if info["invite_team"] != "Default" {
+		t.Errorf("the form should name the team: %v", info["invite_team"])
+	}
+
+	resp, client := signup(t, s, map[string]any{
+		"username": "newcomer", "email": "n@test.com",
+		"password": "correct-horse-battery", "invite": token,
+	})
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("redeeming an invite: %d", resp.StatusCode)
+	}
+	var me struct {
+		User struct {
+			ID      int64 `json:"id"`
+			IsAdmin bool  `json:"is_admin"`
+		} `json:"user"`
+	}
+	decode(t, resp, &me)
+	if me.User.IsAdmin {
+		t.Error("somebody who signs up must not be an administrator")
+	}
+
+	// Signed in already: the cookie came back with the response.
+	got, err := client.Get(s.URL + "/api/teams")
+	if err != nil {
+		t.Fatal(err)
+	}
+	teams := list(t, got)
+	if len(teams) != 1 || teams[0]["name"] != "Default" || teams[0]["role"] != "member" {
+		t.Errorf("expected membership of Default as member, got %v", teams)
+	}
+}
+
+// A single-use link is single-use, and the check is inside the transaction so
+// two people redeeming the last use at once cannot both get in.
+func TestSignup_InviteCannotBeUsedTwice(t *testing.T) {
+	s := newTS(t)
+	token := invite(t, s, "member", 1)
+
+	first, _ := signup(t, s, map[string]any{
+		"username": "first", "email": "f@test.com",
+		"password": "correct-horse-battery", "invite": token,
+	})
+	first.Body.Close()
+	if first.StatusCode != http.StatusCreated {
+		t.Fatalf("first redemption: %d", first.StatusCode)
+	}
+
+	second, _ := signup(t, s, map[string]any{
+		"username": "second", "email": "s@test.com",
+		"password": "correct-horse-battery", "invite": token,
+	})
+	second.Body.Close()
+	if second.StatusCode != http.StatusForbidden {
+		t.Errorf("second redemption: expected 403, got %d", second.StatusCode)
+	}
+
+	// And the link reports itself unusable before anybody types a password.
+	var info map[string]any
+	decode(t, s.req(t, http.MethodGet, "/api/signup?invite="+token, nil), &info)
+	if info["invite_valid"] != false {
+		t.Error("a used-up invite should report itself invalid")
+	}
+}
+
+// Revoking stops a link without waiting for it to expire.
+func TestSignup_RevokedInviteStopsWorking(t *testing.T) {
+	s := newTS(t)
+	token := invite(t, s, "member", 5)
+
+	invites := list(t, s.req(t, http.MethodGet, "/api/teams/"+defaultTeam+"/invites", nil))
+	if len(invites) != 1 {
+		t.Fatalf("expected one invite, got %d", len(invites))
+	}
+	id := int64(invites[0]["id"].(float64))
+
+	resp := s.req(t, http.MethodDelete, "/api/teams/"+defaultTeam+"/invites/"+id64(id), nil)
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusNoContent {
+		t.Fatalf("revoke: %d", resp.StatusCode)
+	}
+
+	used, _ := signup(t, s, map[string]any{
+		"username": "late", "email": "l@test.com",
+		"password": "correct-horse-battery", "invite": token,
+	})
+	used.Body.Close()
+	if used.StatusCode != http.StatusForbidden {
+		t.Errorf("a revoked invite: expected 403, got %d", used.StatusCode)
+	}
+}
+
+// Open sign-up makes a team, because an account in no team sees an empty queue
+// and can be paged by nobody.
+func TestSignup_OpenModeMakesATeam(t *testing.T) {
+	s := newTS(t)
+	setSignupMode(t, s, "open")
+
+	missing, _ := signup(t, s, map[string]any{
+		"username": "solo", "email": "s@test.com", "password": "correct-horse-battery",
+	})
+	missing.Body.Close()
+	if missing.StatusCode != http.StatusBadRequest {
+		t.Errorf("open sign-up with no team name: expected 400, got %d", missing.StatusCode)
+	}
+
+	resp, client := signup(t, s, map[string]any{
+		"username": "solo", "email": "s@test.com",
+		"password": "correct-horse-battery", "team_name": "Solo",
+	})
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusCreated {
+		t.Fatalf("open sign-up: %d", resp.StatusCode)
+	}
+
+	got, err := client.Get(s.URL + "/api/teams")
+	if err != nil {
+		t.Fatal(err)
+	}
+	teams := list(t, got)
+	if len(teams) != 1 || teams[0]["name"] != "Solo" || teams[0]["role"] != "owner" {
+		t.Errorf("the creator should own their new team, got %v", teams)
+	}
+}
+
+// Switching the mode is an administrator's decision, and it takes effect at
+// once rather than at the next restart.
+func TestSignup_ModeIsAnAdminSetting(t *testing.T) {
+	s := newTS(t)
+	_, call := member(t, s, "plain")
+
+	resp := call(http.MethodPut, "/api/admin/settings", map[string]any{"signup_mode": "open"})
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusForbidden {
+		t.Errorf("a member changing the mode: expected 403, got %d", resp.StatusCode)
+	}
+
+	bad := s.req(t, http.MethodPut, "/api/admin/settings", map[string]any{"signup_mode": "everybody"})
+	bad.Body.Close()
+	if bad.StatusCode != http.StatusBadRequest {
+		t.Errorf("an unknown mode: expected 400, got %d", bad.StatusCode)
+	}
+
+	setSignupMode(t, s, "open")
+	var info map[string]any
+	decode(t, s.req(t, http.MethodGet, "/api/signup", nil), &info)
+	if info["mode"] != "open" {
+		t.Errorf("the change should be visible at once, got %v", info["mode"])
+	}
+}
+
+// Minting a link is configuring the team, so it is an owner's job.
+func TestSignup_InvitesAreOwnerOnly(t *testing.T) {
+	s := newTS(t)
+	_, call := member(t, s, "plain")
+
+	resp := call(http.MethodPost, "/api/teams/"+defaultTeam+"/invites", map[string]any{"role": "member"})
+	resp.Body.Close()
+	if resp.StatusCode != http.StatusForbidden {
+		t.Errorf("a member minting an invite: expected 403, got %d", resp.StatusCode)
+	}
+}
+
+// A password still has to be a password, and a taken username is still taken.
+func TestSignup_ValidatesLikeTheRestOfTheServer(t *testing.T) {
+	s := newTS(t)
+	token := invite(t, s, "member", 5)
+
+	short, _ := signup(t, s, map[string]any{
+		"username": "shorty", "email": "sh@test.com", "password": "abc", "invite": token,
+	})
+	short.Body.Close()
+	if short.StatusCode != http.StatusBadRequest {
+		t.Errorf("a short password: expected 400, got %d", short.StatusCode)
+	}
+
+	taken, _ := signup(t, s, map[string]any{
+		"username": "admin", "email": "other@test.com",
+		"password": "correct-horse-battery", "invite": token,
+	})
+	taken.Body.Close()
+	if taken.StatusCode != http.StatusConflict {
+		t.Errorf("an existing username: expected 409, got %d", taken.StatusCode)
+	}
+}

internal/api/teams.go

@@ -51,6 +51,68 @@ func handleListTeams(db *sql.DB) http.HandlerFunc {
 	}
 }
 
+// handleUserTeams lists one user's teams, for the admin page's per-user view:
+// "what is this person in", which /api/teams cannot answer because it is always
+// about the caller.
+//
+// Self or admin, matching the other per-user endpoints. It says which teams
+// somebody belongs to and in what role — not anything those teams own, so it
+// stays on the accounts side of the line the administrator flag draws.
+func handleUserTeams(db *sql.DB) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		id, err := strconv.ParseInt(chi.URLParam(r, "id"), 10, 64)
+		if err != nil {
+			respond(w, http.StatusBadRequest, errResp("invalid user id"))
+			return
+		}
+		if !requireSelfOrAdmin(w, r, id) {
+			return
+		}
+
+		// A user with no teams and a user who does not exist both list nothing,
+		// so the existence check is what tells them apart.
+		var exists bool
+		if err := db.QueryRowContext(r.Context(),
+			"SELECT EXISTS (SELECT 1 FROM users WHERE id = $1)", id).Scan(&exists); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		if !exists {
+			respond(w, http.StatusNotFound, errResp("user not found"))
+			return
+		}
+
+		rows, err := db.QueryContext(r.Context(), `
+			SELECT t.id, t.name, t.created_at, m.role
+			FROM   teams t
+			JOIN   team_members m ON m.team_id = t.id
+			WHERE  m.user_id = $1
+			ORDER  BY t.name`, id)
+		if err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		defer rows.Close()
+
+		teams := []models.Team{}
+		for rows.Next() {
+			var t models.Team
+			var created int64
+			if err := rows.Scan(&t.ID, &t.Name, &created, &t.Role); err != nil {
+				respond(w, http.StatusInternalServerError, errResp("internal error"))
+				return
+			}
+			t.CreatedAt = time.Unix(created, 0).UTC()
+			teams = append(teams, t)
+		}
+		if err := rows.Err(); err != nil {
+			respond(w, http.StatusInternalServerError, errResp("internal error"))
+			return
+		}
+		respond(w, http.StatusOK, teams)
+	}
+}
+
 // handleCreateTeam creates a team and makes its creator the first owner. A team
 // with no owner would need an administrator to repair before anybody could use
 // it, so the two happen in one transaction.

internal/db/migrations/007_signup_invites.sql

@@ -0,0 +1,49 @@
+-- Self-service sign-up, and the invite links that make it useful.
+--
+-- Until now the only way to get an account was for somebody who already had one
+-- to create it, and the login page told people to "ask an admin". That is a
+-- workable arrangement for one operator and an impossible one for a team.
+--
+-- An invite is a link, not an email: this server has no SMTP and adding it to
+-- send one message would be a new subsystem to run, secure and monitor. The
+-- person inviting sends the link however they already talk to the person they
+-- are inviting.
+CREATE TABLE invites (
+    id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
+
+    -- SHA-256 of the raw token, like api_keys, the integration keys and the
+    -- acknowledgement tokens. A leaked database hands nobody an account.
+    token_hash TEXT NOT NULL UNIQUE,
+
+    -- Which team the invitee lands in, and as what. An invite always names a
+    -- team: an account in no team sees an empty queue and can be paged by
+    -- nobody, which is not a state to invite somebody into.
+    team_id BIGINT NOT NULL REFERENCES teams(id) ON DELETE CASCADE,
+    role    TEXT   NOT NULL CHECK (role IN ('owner', 'member')),
+
+    created_by BIGINT REFERENCES users(id) ON DELETE SET NULL,
+    created_at BIGINT NOT NULL DEFAULT FLOOR(EXTRACT(EPOCH FROM now()))::bigint,
+
+    -- Invites expire. A link that works forever is a credential nobody
+    -- remembers issuing, sitting in a chat log.
+    expires_at BIGINT NOT NULL,
+
+    -- Single-use by default: max_uses 1. A team onboarding six people at once
+    -- can raise it rather than minting six links.
+    max_uses BIGINT NOT NULL DEFAULT 1 CHECK (max_uses > 0 AND max_uses <= 100),
+    uses     BIGINT NOT NULL DEFAULT 0,
+
+    -- Revoked by hand, separately from expiry, so "this link is no longer
+    -- wanted" and "this link timed out" stay distinguishable in the listing.
+    revoked_at BIGINT
+);
+
+CREATE INDEX invites_team_idx ON invites(team_id);
+
+-- Who redeemed which invite. Kept after the invite is gone — the answer to "how
+-- did this account get here" should outlive the link that made it.
+ALTER TABLE users ADD COLUMN invited_via BIGINT REFERENCES invites(id) ON DELETE SET NULL;
+
+-- Where a person is in the first-run checklist, so it can be resumed and
+-- dismissed rather than nagging forever. One row per user, created on demand.
+ALTER TABLE users ADD COLUMN onboarding_dismissed_at BIGINT;

internal/models/incident.go

@@ -11,6 +11,13 @@ import "time"
 // the webhook and the sweeper may flip to "resolved" once every member alert has
 // stopped firing.
 type Incident struct {
+	// EscalationLevel is which rung of its team's ladder this incident is on,
+	// 0 for none — either the team has no ladder, or somebody has answered.
+	// EscalationDueAt is when the current level runs out, so a client can say
+	// how long is left rather than only what already happened.
+	EscalationLevel int64      `json:"escalation_level"`
+	EscalationDueAt *time.Time `json:"escalation_due_at,omitempty"`
+
 	// TeamID is the team that owns this incident, fixed when it opens: an
 	// incident never moves between teams. TeamName rides along so the combined
 	// queue can badge each row without a second request.

internal/web/static/app.css

@@ -31,6 +31,14 @@
   --snooze: #6b5bd2;
   --snooze-soft: #efedfb;
 
+  /* Two hues that mean nothing on their own. The rota needs six colours to
+     tell six people apart and the palette above only has four that are not
+     already an alarm. */
+  --teal: #0f7d8c;
+  --teal-soft: #e3f4f6;
+  --pink: #b3427e;
+  --pink-soft: #fbe8f2;
+
   --radius: 10px;
   --radius-sm: 6px;
   --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
@@ -40,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);
 }
@@ -72,6 +84,11 @@
     --snooze: #a89bff;
     --snooze-soft: #262245;
 
+    --teal: #4fc2d4;
+    --teal-soft: #0f2e33;
+    --pink: #f07fb8;
+    --pink-soft: #3a1c2d;
+
     --shadow: 0 1px 2px rgb(0 0 0 / 40%);
     --shadow-lg: 0 16px 40px rgb(0 0 0 / 55%);
   }
@@ -183,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;
@@ -196,10 +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;
-  display: grid; grid-template-columns: repeat(4, 1fr);
   height: calc(var(--tabbar-h) + var(--safe-bottom));
   padding-bottom: var(--safe-bottom);
   background: color-mix(in srgb, var(--surface) 92%, transparent);
@@ -212,8 +237,15 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
   position: relative;
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
   color: var(--faint); font-size: 11px; font-weight: 600;
+  /* min-width lets a column shrink below its label's natural width, which is
+     what stops six tabs widening the bar past the screen. */
+  min-width: 0; padding: 0 2px;
 }
-.nav-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.nav-label {
+  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.nav-link svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+
 .nav-link[aria-current="page"] { color: var(--accent); }
 .nav-badge {
   position: absolute; top: 6px; left: calc(50% + 6px);
@@ -566,8 +598,6 @@ kbd {
 /* ---------- desktop ---------- */
 
 @media (min-width: 900px) {
-  :root { --tabbar-h: 0px; }
-
   .app { display: grid; grid-template-columns: 220px 1fr; height: 100dvh; }
 
   .nav {
@@ -657,3 +687,183 @@ kbd {
 .admin-settings .setting-unit { max-width: 8em; }
 .admin-settings button[type="submit"] { margin-top: 12px; }
 .small { font-size: 13px; }
+
+/* A name in an admin table is the way to that row's own page -- a person's or
+   a team's. */
+.row-link { color: var(--text); font-weight: 650; text-decoration: none; }
+.row-link:hover { color: var(--accent); text-decoration: underline; }
+
+.invite-block { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 12px; }
+.invite-block h3 { margin: 0 0 4px; font-size: 14px; }
+/* The link is shown once and never stored, so it has to be selectable and
+   wrap rather than scroll off the side of a phone. */
+.invite-out { margin-top: 12px; font-size: 13px; }
+.invite-link {
+  display: block; margin-top: 6px; padding: 8px; border-radius: var(--radius-sm);
+  background: var(--surface-2); font-family: var(--mono); font-size: 12px;
+  word-break: break-all; user-select: all;
+}
+
+/* --- one user, one team --------------------------------------------------
+   Both subject pages share this: .user-head and .user-facts are generic
+   despite the names, and a team fills them with its own facts. */
+.back-link {
+  display: inline-flex; align-items: center; gap: 2px; margin-bottom: 12px;
+  color: var(--muted); font-size: 14px; text-decoration: none;
+}
+.back-link:hover { color: var(--text); }
+.back-link svg { width: 18px; height: 18px; }
+
+.user-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.user-head h2 { margin: 0; }
+
+.user-facts {
+  display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px;
+  margin: 12px 0 0; font-size: 14px;
+}
+.user-facts dt { color: var(--muted); }
+.user-facts dd { margin: 0; overflow-wrap: anywhere; }
+
+.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.admin-table .row-actions { margin-top: 0; gap: 6px; }
+
+/* --- team settings -------------------------------------------------------
+   Forms with a label above each control, rather than the queue's rows of
+   links. The escalation ladder is the only nested structure in the app, so it
+   gets a little indentation to make the levels read as an order. */
+.stacked-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; align-items: flex-start; }
+.stacked-form label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
+.stacked-form label.checkbox { gap: 8px; }
+.stacked-form input.wide { min-width: min(420px, 100%); }
+.team-picker { margin-top: 8px; max-width: 100%; }
+
+/* The rota, a month at a time. A name is too wide to print thirty times and
+   too alike down a column to read, so a day carries an initial in that
+   person's colour and the legend underneath says whose. A shift is then a run
+   of one colour, which is the shape the question actually has. */
+.rota-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 10px; }
+.rota-wd {
+  padding-bottom: 4px; text-align: center;
+  color: var(--muted); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.04em;
+}
+.rota-day {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  min-height: 52px; padding: 6px 0 8px;
+  border: 0; border-radius: var(--radius-sm); background: none;
+  font: inherit; color: inherit;
+}
+button.rota-day { cursor: pointer; }
+button.rota-day:hover { background: var(--surface-2); }
+.rota-num { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.rota-day.today { background: var(--accent-soft); }
+.rota-day.today .rota-num { color: var(--accent); font-weight: 700; }
+.rota-day.past { opacity: 0.55; }
+/* The days either side of the month are real days and are drawn, but they
+   belong to the month you are not looking at. */
+.rota-day.outside { opacity: 0.35; }
+
+.rota-chip {
+  display: grid; place-items: center;
+  width: 26px; height: 26px; border-radius: 50%;
+  font-size: 12px; font-weight: 750; text-transform: uppercase;
+}
+/* An empty day is a dot rather than a hole, and keeps the chip's box so the
+   rows stay on one baseline. */
+.rota-chip.none { width: 8px; height: 8px; margin: 9px; background: var(--border-strong); }
+
+/* Six colours, then they repeat; the initial inside still tells two people
+   apart. Deliberately not the severity palette — nothing here is critical. */
+.rc1 { background: var(--accent-soft); color: var(--accent); }
+.rc2 { background: var(--ok-soft); color: var(--ok); }
+.rc3 { background: var(--snooze-soft); color: var(--snooze); }
+.rc4 { background: var(--warn-soft); color: var(--warn); }
+.rc5 { background: var(--teal-soft); color: var(--teal); }
+.rc6 { background: var(--pink-soft); color: var(--pink); }
+
+.rota-foot { padding: 12px 14px; border-top: 1px solid var(--border); }
+.rota-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; }
+.rota-key { display: inline-flex; align-items: center; gap: 6px; }
+.rota-key .rota-chip { width: 22px; height: 22px; font-size: 11px; }
+.rota-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
+.rota-note:first-child { margin-top: 0; }
+.rota-bulk { padding: 12px 14px; border-top: 1px solid var(--border); }
+.rota-bulk .stacked-form { margin-top: 4px; }
+.sheet-pick { display: flex; align-items: center; gap: 8px; font-size: 14px; }
+
+.ladder-level {
+  border-left: 3px solid var(--border-strong);
+  padding: 8px 0 8px 12px; margin: 12px 0;
+}
+.ladder-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+.ladder-targets { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+.target-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+
+/* An integration key is shown exactly once, so it should look like something
+   to act on rather than another row of text. */
+.key-panel {
+  margin-top: 12px; padding: 12px;
+  border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft);
+}
+.key-panel pre {
+  overflow-x: auto; background: var(--surface); border: 1px solid var(--border);
+  border-radius: 6px; padding: 8px; font-size: 12px;
+}
+.key-url code { word-break: break-all; }
+
+/* --- onboarding checklist ------------------------------------------------
+   Sits above the queue until it is finished or hidden. Deliberately plain:
+   it is a list of things to do, not a celebration. */
+.onboarding { border-left: 3px solid var(--accent); }
+.onboarding-head { display: flex; align-items: center; gap: 10px; }
+.onboarding-head h2 { flex: 1; margin: 0; }
+.checklist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
+.checklist .step { display: flex; gap: 10px; align-items: flex-start; }
+.checklist .step p { margin: 2px 0 0; }
+.step-mark {
+  flex: none; width: 20px; height: 20px; border-radius: 50%;
+  border: 1px solid var(--border-strong); color: var(--accent);
+  display: flex; align-items: center; justify-content: center; font-size: 13px;
+}
+.step.done .step-mark { border-color: var(--accent); }
+.step.done > div > strong { color: var(--muted); text-decoration: line-through; }
+.step-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
+
+.signup-intro { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
+
+/* --- 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;
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto; scrollbar-width: none;
+}
+.subnav::-webkit-scrollbar { display: none; }
+.subnav-link {
+  flex: none;
+  padding: 8px 12px; margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+  color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap;
+}
+.subnav-link:hover { color: var(--text); }
+.subnav-link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
+
+/* 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. */
+.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; }

internal/web/static/index.html

@@ -37,6 +37,37 @@
       <button class="btn btn-primary btn-block" type="submit">Sign in</button>
       <p class="login-hint">No password yet? Ask an admin to set one, or run
         <code>PUT /api/users/{id}/password</code> with your API key.</p>
+      <p class="login-hint" id="signup-link" hidden>
+        No account? <a href="/signup">Create one</a>.</p>
+    </form>
+
+    <!-- Sign-up. Shown instead of the login card at /signup, and only offers
+         what the server allows: an invite link, or open sign-up. -->
+    <form id="signup-form" class="login-card" autocomplete="on" hidden>
+      <div class="login-brand">
+        <img src="/icon.svg" alt="" width="40" height="40">
+        <h1>terdut</h1>
+      </div>
+      <p class="signup-intro" id="signup-intro"></p>
+      <label>
+        <span>Username</span>
+        <input name="username" autocomplete="username" autocapitalize="none" spellcheck="false" required>
+      </label>
+      <label>
+        <span>Email</span>
+        <input name="email" type="email" autocomplete="email" required>
+      </label>
+      <label>
+        <span>Password</span>
+        <input name="password" type="password" autocomplete="new-password" minlength="10" required>
+      </label>
+      <label id="signup-team-label" hidden>
+        <span>Team name</span>
+        <input name="team_name" autocomplete="off">
+      </label>
+      <p class="form-error" role="alert" hidden></p>
+      <button class="btn btn-primary btn-block" type="submit">Create account</button>
+      <p class="login-hint">Already have one? <a href="/">Sign in</a>.</p>
     </form>
   </main>
 
@@ -46,34 +77,44 @@
         <img src="/icon.svg" alt="" width="28" height="28">
         <span>terdut</span>
       </a>
-      <a class="nav-link" href="/" data-section="queue">
+      <a class="nav-link" href="/" data-section="queue" aria-label="Queue">
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
         <span class="nav-label">Queue</span>
         <span class="nav-badge" data-badge hidden></span>
       </a>
-      <a class="nav-link" href="/oncall" data-section="oncall">
+      <a class="nav-link" href="/oncall" data-section="oncall" aria-label="On-call">
         <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4"/></svg>
         <span class="nav-label">On-call</span>
       </a>
-      <a class="nav-link" href="/alerts" data-section="alerts">
+      <a class="nav-link" href="/alerts" data-section="alerts" aria-label="Alerts">
         <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="/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>
+      </a>
       <!-- Hidden unless the signed-in user is a system administrator; app.js
            unhides it once /api/me says so. The server refuses every admin
            endpoint regardless, so this is a courtesy and not a gate. -->
-      <a class="nav-link" href="/admin" data-section="admin" id="nav-admin" hidden>
+      <a class="nav-link" href="/admin" data-section="admin" aria-label="Admin" id="nav-admin" hidden>
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"/></svg>
         <span class="nav-label">Admin</span>
       </a>
-      <a class="nav-link" href="/more" data-section="more">
+      <a class="nav-link" href="/more" data-section="more" aria-label="Account">
         <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/></svg>
         <span class="nav-label">Account</span>
       </a>
     </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>
 
@@ -87,7 +128,14 @@
 
     <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-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
+         list, and a section of its own so a deep link survives a reload. -->
+    <section id="view-adminuser" class="view view-page" data-view="adminuser" hidden></section>
+    <!-- One team, at /admin/teams/{id}: who is in it and the invites into it,
+         which the Team tab cannot show for a team you are not a member of. -->
+    <section id="view-adminteam" class="view view-page" data-view="adminteam" hidden></section>
     <section id="view-more" class="view view-page" data-view="more" hidden></section>
   </div>
 

internal/web/static/js/account.js

@@ -23,6 +23,9 @@ function render() {
         h('div', { class: 'account-name', text: user.username }),
         h('div', { class: 'account-email', text: user.email }))),
 
+    h('div', { class: 'page-head' }, h('h2', { text: 'Notifications' })),
+    notifyForm(user),
+
     h('div', { class: 'page-head' }, h('h2', { text: hasPassword ? 'Change password' : 'Set a password' })),
     passwordForm(user, hasPassword),
 
@@ -32,10 +35,91 @@ 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: 'Schedule editing, statistics and user management are in terdut-tui for now.' }),
+    h('p', { class: 'foot-note', text: 'Statistics are in terdut-tui for now.' }),
   );
 }
 
+// Where this user's pages go. The onboarding checklist's first step sends
+// people here for it, and until now there was nothing here to send them to:
+// the topic could only be set with curl or by an administrator.
+//
+// The topic is the whole address — the server it is published to is the
+// install's one ntfy, set in the deployment and not something a user picks.
+function notifyForm(user) {
+  const err = h('p', { class: 'form-error', role: 'alert', hidden: true });
+  const ok = h('p', { class: 'form-ok', role: 'status', hidden: true });
+  const topic = h('input', {
+    name: 'ntfy_topic', type: 'text', autocomplete: 'off',
+    autocapitalize: 'none', spellcheck: false,
+    value: user.ntfy_topic || '',
+    placeholder: 'terdut-a7f3c91e',
+  });
+  const submit = h('button', { class: 'btn btn-primary', type: 'submit', text: 'Save topic' });
+
+  // Only offered once a topic is saved: the test publishes to whatever the
+  // server has stored, not to whatever is half-typed in the field.
+  const test = h('button', {
+    class: 'btn', type: 'button', text: 'Send a test push',
+    hidden: !user.ntfy_topic,
+    onclick: async () => {
+      err.hidden = true;
+      ok.hidden = true;
+      test.disabled = true;
+      try {
+        await api.testNotification();
+        ok.textContent = 'Sent. If nothing arrives, the topic is wrong or ntfy is not reachable.';
+        ok.hidden = false;
+      } catch (ex) {
+        err.textContent = ex.message;
+        err.hidden = false;
+      } finally {
+        test.disabled = false;
+      }
+    },
+  });
+
+  const form = h('form', { class: 'card pw-form' },
+    h('label', {},
+      h('span', { text: 'ntfy topic' }),
+      topic),
+    h('p', { class: 'muted small' },
+      'Subscribe to this topic in the ntfy app and incidents assigned to you ',
+      'reach your phone. Leave it empty and they page the team’s fallback ',
+      'topic instead.'),
+    // Worth saying plainly: people reach for their own name, and the topic is
+    // the only thing standing between a stranger and their pages.
+    h('p', { class: 'muted small' },
+      'Anyone who knows the topic can read your pages and publish to it, so ',
+      'pick something unguessable rather than your name.'),
+    err, ok,
+    h('div', { class: 'row-actions' }, submit, test),
+  );
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    err.hidden = true;
+    ok.hidden = true;
+    submit.disabled = true;
+    try {
+      const updated = await api.setNotifyTarget(user.id, topic.value.trim());
+      // Keep the cached user in step, so the onboarding checklist stops
+      // asking for this and the test button appears without a reload.
+      state.me.user = updated;
+      ok.textContent = updated.ntfy_topic
+        ? 'Topic saved.'
+        : 'Topic cleared. Your pages go to the team’s fallback topic.';
+      ok.hidden = false;
+      test.hidden = !updated.ntfy_topic;
+    } catch (ex) {
+      err.textContent = ex.message;
+      err.hidden = false;
+    } finally {
+      submit.disabled = false;
+    }
+  });
+  return form;
+}
+
 function passwordForm(user, hasPassword) {
   const err = h('p', { class: 'form-error', role: 'alert', hidden: true });
   const ok = h('p', { class: 'form-ok', role: 'status', hidden: true });

internal/web/static/js/admin.js

@@ -1,23 +1,51 @@
 // Administration: the teams on this server, the people who can sign in, and
 // the settings that change how the server behaves.
 //
+// Each of those three is a route of its own, reached from a strip across the
+// top, with /admin itself an overview. They used to be three cards stacked on
+// one page, which meant no way to link to the settings, no way back to the top
+// of the user list but scrolling, and a poll that refetched all three endpoints
+// however little of the page you were looking at.
+//
 // Only rendered for a system administrator. The server enforces that on every
 // endpoint regardless — hiding a section is a courtesy to the reader, not a
 // permission — so this view simply says so rather than pretending to be a
 // 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');
 
-let data = null; // { teams, users, settings }
+// The sub-sections, in the order the strip shows them. The overview is /admin
+// itself, so it has no tab of its own. This table is the only place the four
+// routes are written down: app.js parses against it and the strip is built
+// from it, so adding a fifth is one line here.
+export const TABS = [
+  { tab: null, path: '/admin', label: 'Overview' },
+  { tab: 'teams', path: '/admin/teams', label: 'Teams' },
+  { tab: 'users', path: '/admin/users', label: 'Users' },
+  { tab: 'settings', path: '/admin/settings', label: 'Settings' },
+];
+
+// Which sub-section is open. Remembered rather than passed, because the poll
+// loop calls refresh() with no route — the same reason adminuser.js keeps its
+// user ID in the module.
+let tab = null;
+let data = null; // whatever the current tab needs; the shape varies by tab
 let error = null;
 let busy = false;
 
-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.
+  if (next !== tab) {
+    tab = next;
+    data = null;
+  }
+  if (!data) clear(view(), subnav(), spinner());
   refresh();
 }
 
@@ -28,12 +56,7 @@ export async function refresh() {
     return;
   }
   try {
-    const [teams, users, settings] = await Promise.all([
-      api.adminTeams(),
-      api.users(),
-      api.adminSettings(),
-    ]);
-    data = { teams, users, settings };
+    data = await load();
     error = null;
   } catch (err) {
     error = err.message;
@@ -41,6 +64,16 @@ export async function refresh() {
   render();
 }
 
+// Only what the open sub-section shows. Users is the one that needs two: it
+// only points at Teams for an invite if there is a team to point at, and the
+// overview counts both.
+async function load() {
+  if (tab === 'teams') return { teams: await api.adminTeams() };
+  if (tab === 'settings') return { settings: await api.adminSettings() };
+  const [teams, users] = await Promise.all([api.adminTeams(), api.users()]);
+  return { teams, users };
+}
+
 function render() {
   if (!state.me?.user?.is_admin) {
     clear(view(), h('div', { class: 'card' },
@@ -48,14 +81,56 @@ function render() {
     return;
   }
   if (!data) {
-    clear(view(), error ? h('div', { class: 'load-error', text: error }) : spinner());
+    clear(view(), subnav(), error ? h('div', { class: 'load-error', text: error }) : spinner());
     return;
   }
   clear(view(),
+    subnav(),
     error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
-    teamsCard(),
-    usersCard(),
-    settingsCard(),
+    section(),
+  );
+}
+
+function section() {
+  if (tab === 'teams') return teamsCard();
+  if (tab === 'users') return usersCard();
+  if (tab === 'settings') return settingsCard();
+  return overview();
+}
+
+// The strip across the top of every admin page. Ordinary links rather than
+// buttons, because these are four 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': 'Administration' },
+    TABS.map((t) => h('a', {
+      class: 'subnav-link',
+      href: t.path,
+      text: t.label,
+      'aria-current': t.tab === tab ? 'page' : null,
+    })));
+}
+
+// --- overview --------------------------------------------------------------
+
+// /admin itself. The strip already links to the three, so this earns its place
+// by saying how much of each there is — the one thing a menu cannot.
+function overview() {
+  const admins = data.users.filter((u) => u.is_admin).length;
+  const disabled = data.users.filter((u) => u.disabled_at).length;
+  const open = data.teams.reduce((n, t) => n + t.open_incidents, 0);
+
+  const people = [`${admins} ${admins === 1 ? 'administrator' : 'administrators'}`];
+  if (disabled > 0) people.push(`${disabled} disabled`);
+
+  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.'),
+    menuCard('/admin/users', 'Users', data.users.length, `${people.join(', ')}.`),
+    menuCard('/admin/settings', 'Settings', null,
+      'How the server behaves, and where it is plugged in.'),
   );
 }
 
@@ -64,37 +139,24 @@ function render() {
 function teamsCard() {
   const rows = data.teams.map((t) =>
     h('tr', {},
-      h('td', {}, h('strong', { text: t.name })),
+      // The name is the way in: everything about one team lives on its own
+      // page, and this table stays a list rather than becoming a form.
+      h('td', {}, h('a', { class: 'row-link', href: `/admin/teams/${t.id}`, text: t.name })),
       h('td', { class: 'num', text: String(t.members) }),
       h('td', { class: 'num', text: String(t.open_incidents) }),
-      h('td', {},
-        h('button', {
-          class: 'btn-sm',
-          type: 'button',
-          text: 'Rename',
-          onclick: () => renameTeam(t),
-        }),
-        // A team with open incidents cannot be deleted, and saying so before
-        // the click is kinder than a 409 afterwards.
-        h('button', {
-          class: 'btn-sm danger',
-          type: 'button',
-          text: 'Delete',
-          disabled: t.open_incidents > 0,
-          title: t.open_incidents > 0 ? 'Resolve its open incidents first' : '',
-          onclick: () => deleteTeam(t),
-        }),
-      ),
     ));
 
   return h('div', { class: 'card' },
     h('h2', { text: 'Teams' }),
+    h('p', { class: 'muted small' },
+      'Open a team for who is in it, the invites into it, and renaming or ',
+      'deleting it. Deleting takes its alerts, incidents, schedule and ',
+      'integrations with it, and is refused while anything is still open.'),
     h('table', { class: 'admin-table' },
       h('thead', {}, h('tr', {},
         h('th', { text: 'Name' }),
         h('th', { class: 'num', text: 'Members' }),
-        h('th', { class: 'num', text: 'Open' }),
-        h('th', { text: '' }))),
+        h('th', { class: 'num', text: 'Open' }))),
       h('tbody', {}, rows)),
     newTeamForm(),
   );
@@ -122,32 +184,6 @@ function newTeamForm() {
   return form;
 }
 
-async function renameTeam(team) {
-  const next = window.prompt(`Rename ${team.name} to:`, team.name);
-  if (!next || next === team.name) return;
-  try {
-    await api.renameTeam(team.id, next);
-  } catch (err) {
-    error = err.message;
-  }
-  refresh();
-}
-
-async function deleteTeam(team) {
-  if (!(await confirm({
-    title: `Delete ${team.name}?`,
-    text: 'Its alerts, incidents, schedule and integrations go with it. This cannot be undone.',
-    confirmLabel: 'Delete',
-    danger: true,
-  }))) return;
-  try {
-    await api.deleteTeam(team.id);
-  } catch (err) {
-    error = err.message;
-  }
-  refresh();
-}
-
 // --- users -----------------------------------------------------------------
 
 function usersCard() {
@@ -155,7 +191,9 @@ function usersCard() {
     const self = u.id === myID();
     return h('tr', { class: u.disabled_at ? 'disabled-row' : '' },
       h('td', {},
-        h('strong', { text: u.username }),
+        // The name is the way in: everything about one person lives on their
+        // own page, and this table stays a list rather than becoming a form.
+        h('a', { class: 'row-link', href: `/admin/users/${u.id}`, text: u.username }),
         u.disabled_at && h('span', { class: 'row-team', text: 'disabled' }),
         self && h('span', { class: 'you', text: 'you' })),
       h('td', { class: 'muted', text: u.email }),
@@ -184,7 +222,8 @@ function usersCard() {
     h('h2', { text: 'Users' }),
     h('p', { class: 'muted small' },
       'Disabling an account stops it signing in and stops its API keys, and keeps ',
-      'its acknowledgements and timeline entries. Deleting a user erases those.'),
+      'its acknowledgements and timeline entries. Deleting a user erases those. ',
+      'Open a name for their teams, their password and the rest.'),
     h('table', { class: 'admin-table' },
       h('thead', {}, h('tr', {},
         h('th', { text: 'User' }),
@@ -192,6 +231,27 @@ function usersCard() {
         h('th', { text: '' }),
         h('th', { text: '' }))),
       h('tbody', {}, rows)),
+    invitePointer(),
+  );
+}
+
+// Adding a person is minting them an invite into a team, not creating a row:
+// whoever accepts it picks their own password, so one never passes through an
+// administrator, and the link carries the team, so they do not land on an empty
+// queue.
+//
+// The form for it lives on the team's own page. It always needed a team beside
+// it, and a picker here was the admission that an invite is a fact about a team
+// rather than about the server.
+function invitePointer() {
+  return h('div', { class: 'invite-block' },
+    h('h3', { text: 'Add someone' }),
+    data.teams.length > 0
+      ? h('p', { class: 'muted small' },
+        'Open the team you want them in, under ',
+        h('a', { class: 'row-link', href: '/admin/teams', text: 'Teams' }),
+        ', and mint an invite there.')
+      : h('p', { class: 'muted small', text: 'Create a team first — an invite has to lead somewhere.' }),
   );
 }
 

internal/web/static/js/adminteam.js

@@ -0,0 +1,341 @@
+// One team, at /admin/teams/{id}: what it is, who is in it, the invites into
+// it, and the two destructive things an administrator can do to it.
+//
+// The mirror of adminuser.js. That page answers "which teams is this person
+// in"; this one answers "who is in this team" for a team the administrator
+// need not be a member of — which the Team tab cannot do, because it only
+// offers teams the viewer is in.
+//
+// Only rendered for a system administrator. The server enforces that on every
+// endpoint regardless, so this view says so rather than pretending to be a
+// gate.
+
+import * as api from './api.js';
+import { h, clear, spinner, confirm, toast, icon } from './ui.js';
+import { state } from './state.js';
+import { navigate } from './app.js';
+import { when } from './format.js';
+
+const view = () => document.getElementById('view-adminteam');
+
+let teamID = null;
+let data = null; // { team, members, users, invites }
+let error = null;
+let busy = false;
+// An invite link is shown once and never stored, so it lives here until the
+// page is left rather than being toasted away after three seconds.
+let freshInvite = null;
+
+export function show(route) {
+  const next = route && route.team != null ? route.team : null;
+  if (next !== teamID) {
+    teamID = next;
+    data = null;
+    error = null;
+    freshInvite = null;
+  }
+  if (!data) clear(view(), spinner());
+  refresh();
+}
+
+export async function refresh() {
+  if (teamID == null || !state.me?.user?.is_admin) {
+    render();
+    return;
+  }
+  try {
+    // The team and its members come from the admin endpoint in one answer:
+    // /teams/{id}/members is member-only and 404s an administrator from
+    // outside the team, deliberately. users() is the add-a-member picker.
+    const [team, users, invites] = await Promise.all([
+      api.adminTeam(teamID),
+      api.users(),
+      api.invites(teamID),
+    ]);
+    data = { team: team.team, members: team.members, users, invites };
+    error = null;
+  } catch (err) {
+    // A team that is gone answers 404, where a missing user is simply absent
+    // from a list adminuser.js already has. So the "no such team" state has to
+    // be recognised here; left to the error banner it would read as a fetch
+    // that failed, which is a different thing and invites a retry.
+    if (err.status === 404) {
+      data = { team: null, members: [], users: [], invites: [] };
+      error = null;
+    } else {
+      error = err.message;
+    }
+  }
+  render();
+}
+
+function render() {
+  const el = view();
+  if (!state.me?.user?.is_admin) {
+    clear(el, backLink(), h('div', { class: 'card' },
+      h('p', { class: 'muted', text: 'Administration is for system administrators. Ask one for access.' })));
+    return;
+  }
+  if (!data) {
+    clear(el, backLink(), error ? h('div', { class: 'load-error', text: error }) : spinner());
+    return;
+  }
+  if (!data.team) {
+    clear(el, backLink(), h('div', { class: 'card' },
+      h('p', { class: 'muted', text: 'No such team. It may have just been deleted.' })));
+    return;
+  }
+  clear(el,
+    backLink(),
+    error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
+    identityCard(),
+    membersCard(),
+    invitesCard(),
+    dangerCard(),
+  );
+}
+
+function backLink() {
+  return h('a', { class: 'back-link', href: '/admin/teams' }, icon('chevronLeft'), h('span', { text: 'Teams' }));
+}
+
+// --- identity --------------------------------------------------------------
+
+function identityCard() {
+  const t = data.team;
+  const err = h('p', { class: 'form-error', role: 'alert', hidden: true });
+  const ok = h('p', { class: 'form-ok', role: 'status', hidden: true });
+  const name = h('input', {
+    name: 'name', type: 'text', value: t.name, required: true,
+    autocomplete: 'off', spellcheck: false,
+  });
+  const submit = h('button', { class: 'btn btn-primary', type: 'submit', text: 'Save name' });
+
+  // A field rather than the window.prompt this used to be. The server answers
+  // 409 for a name already taken, and a dialog is the wrong place to read that.
+  const form = h('form', { class: 'inline-form' }, name, submit);
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (busy) return;
+    err.hidden = true;
+    ok.hidden = true;
+    const next = name.value.trim();
+    if (!next || next === t.name) return;
+    busy = true;
+    submit.disabled = true;
+    try {
+      await api.renameTeam(teamID, next);
+      ok.textContent = 'Name saved.';
+      ok.hidden = false;
+      error = null;
+    } catch (ex) {
+      err.textContent = ex.message;
+      err.hidden = false;
+      busy = false;
+      submit.disabled = false;
+      return;
+    }
+    busy = false;
+    submit.disabled = false;
+    await refresh();
+  });
+
+  return h('div', { class: 'card' },
+    h('div', { class: 'user-head' }, h('h2', { text: t.name })),
+    h('dl', { class: 'user-facts' },
+      fact('Created', when(t.created_at)),
+      fact('Members', String(t.members)),
+      fact('Open incidents', String(t.open_incidents)),
+    ),
+    form, err, ok,
+  );
+}
+
+function fact(label, value) {
+  return [h('dt', { text: label }), h('dd', { text: value })];
+}
+
+// --- members ---------------------------------------------------------------
+
+// An administrator passes every team-owner check without being in the team,
+// which is what lets them repair a team whose owner has left. So this card
+// edits rather than reporting what somebody else would have to do.
+function membersCard() {
+  const rows = data.members.map((m) =>
+    h('tr', {},
+      // Unlike the Team tab's own member list, the name is a link: that
+      // person's page is where the rest of them lives.
+      h('td', {}, h('a', { class: 'row-link', href: `/admin/users/${m.user_id}`, text: m.username })),
+      h('td', { class: 'muted small', text: m.role }),
+      h('td', { class: 'row-actions' },
+        h('button', {
+          class: 'btn-sm', type: 'button',
+          text: m.role === 'owner' ? 'Make member' : 'Make owner',
+          // The same endpoint both ways: adding is an upsert on the role.
+          onclick: () => act(() =>
+            api.addTeamMember(teamID, m.user_id, m.role === 'owner' ? 'member' : 'owner')),
+        }),
+        h('button', {
+          class: 'btn-sm danger', type: 'button', text: 'Remove',
+          // The server refuses the last owner with a 409, which act() shows.
+          onclick: () => act(() => api.removeTeamMember(teamID, m.user_id)),
+        }),
+      ),
+    ));
+
+  const inTeam = new Set(data.members.map((m) => m.user_id));
+  // A disabled account cannot sign in, so putting one on a rota would be
+  // staffing the team with somebody who cannot answer.
+  const candidates = data.users.filter((u) => !inTeam.has(u.id) && !u.disabled_at);
+  const pick = h('select', {},
+    ...candidates.map((u) => h('option', { value: String(u.id), text: u.username })));
+  const role = h('select', {},
+    h('option', { value: 'member', text: 'member' }),
+    h('option', { value: 'owner', text: 'owner' }));
+  const form = h('form', { class: 'inline-form' }, pick, role,
+    h('button', { class: 'btn', type: 'submit', text: 'Add' }));
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    act(() => api.addTeamMember(teamID, Number(pick.value), role.value));
+  });
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Members' }),
+    data.members.length === 0 && h('p', { class: 'muted small' },
+      'Nobody is in this team. Its queue has no one to work it and its ',
+      'escalation has no one to reach — add somebody, or delete it.'),
+    data.members.length > 0 && h('table', { class: 'admin-table' }, h('tbody', {}, rows)),
+    candidates.length > 0 && form,
+  );
+}
+
+// --- invites ---------------------------------------------------------------
+
+// Adding a person to the server is minting them an invite into a team, not
+// creating a row: whoever accepts it picks their own password, so one never
+// passes through an administrator, and the link carries the team, so they do
+// not land on an empty queue.
+//
+// This lives on the team rather than on the Users page, where it used to be
+// with a team picker beside it. The picker was the admission that an invite is
+// a fact about a team.
+function invitesCard() {
+  const role = h('select', {},
+    h('option', { value: 'member', text: 'member' }),
+    h('option', { value: 'owner', text: 'owner' }));
+  const form = h('form', { class: 'inline-form' }, role,
+    h('button', { class: 'btn', type: 'submit', text: 'Create invite' }));
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (busy) return;
+    busy = true;
+    try {
+      const inv = await api.createInvite(teamID, role.value, 1);
+      freshInvite = inv.url;
+      error = null;
+    } catch (err) {
+      error = err.message;
+    } finally {
+      busy = false;
+    }
+    await refresh();
+  });
+
+  // The server lists spent and revoked invites too, and they are worth seeing:
+  // "who was invited here" is part of the answer to "who is in this team".
+  // Only a live one can be revoked, so only a live one offers the button.
+  const rows = (data.invites || []).map((inv) => {
+    const state = inviteState(inv);
+    return h('tr', { class: state === 'live' ? '' : 'disabled-row' },
+      h('td', {}, h('strong', { text: inv.role })),
+      h('td', { class: 'muted small', text: `${inv.uses}/${inv.max_uses} used` }),
+      h('td', { class: 'muted small', text: state === 'live' ? `expires ${when(inv.expires_at)}` : state }),
+      h('td', { class: 'row-actions' },
+        state === 'live' && h('button', {
+          class: 'btn-sm danger', type: 'button', text: 'Revoke',
+          onclick: () => act(() => api.revokeInvite(teamID, inv.id)),
+        })),
+    );
+  });
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Invites' }),
+    h('p', { class: 'muted small' },
+      'An invite link puts somebody in this team and lets them choose their ',
+      'own password. It lasts a week and can be used once.'),
+    rows.length > 0 && h('table', { class: 'admin-table' }, h('tbody', {}, rows)),
+    form,
+    // Shown once and never stored, so it goes on the page to be copied.
+    freshInvite && h('p', { class: 'invite-out' },
+      h('strong', { text: 'Send them this link. It is shown once.' }),
+      h('code', { class: 'invite-link', text: freshInvite })),
+  );
+}
+
+// Why a link no longer works, in the server's own order of precedence: revoked
+// beats spent beats expired. Only 'live' is still usable.
+function inviteState(inv) {
+  if (inv.revoked) return 'revoked';
+  if (inv.uses >= inv.max_uses) return 'used up';
+  if (new Date(inv.expires_at).getTime() <= Date.now()) return 'expired';
+  return 'live';
+}
+
+// --- delete ----------------------------------------------------------------
+
+function dangerCard() {
+  const t = data.team;
+  const blocked = t.open_incidents > 0;
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Delete' }),
+    h('p', { class: 'muted small' },
+      'Its alerts, incidents, schedule and integrations go with it. This ',
+      'cannot be undone. Everybody in it keeps their account and stays in ',
+      'whatever other teams they are in.'),
+    h('button', {
+      class: 'btn btn-danger', type: 'button', text: `Delete ${t.name}`,
+      // Saying so before the click is kinder than a 409 afterwards.
+      disabled: blocked,
+      title: blocked ? 'Resolve its open incidents first' : '',
+      onclick: deleteTeam,
+    }),
+  );
+}
+
+async function deleteTeam() {
+  if (!(await confirm({
+    title: `Delete ${data.team.name}?`,
+    text: 'Its alerts, incidents, schedule and integrations go with it. This cannot be undone.',
+    confirmLabel: 'Delete',
+    danger: true,
+  }))) return;
+  try {
+    await api.deleteTeam(teamID);
+  } catch (err) {
+    error = err.message;
+    render();
+    return;
+  }
+  toast('Team deleted.');
+  // Not act(): there is no longer a page here to refresh.
+  navigate('/admin/teams');
+}
+
+// --- plumbing --------------------------------------------------------------
+
+// act runs a write and reloads. Errors are shown rather than thrown away: the
+// 409 from the last-owner guard, and the one for a duplicate name, are the
+// server explaining itself, and the reader needs to see it.
+async function act(fn) {
+  if (busy) return;
+  busy = true;
+  try {
+    await fn();
+    error = null;
+  } catch (err) {
+    error = err.message;
+  } finally {
+    busy = false;
+  }
+  await refresh();
+}

internal/web/static/js/adminuser.js

@@ -0,0 +1,294 @@
+// One person, at /admin/users/{id}: what they are, what they are in, and the
+// levers an administrator has over the account.
+//
+// A section of its own rather than an expanding row in the Admin tab's table,
+// because memberships and the account actions together are more than a row can
+// hold and still be read on a phone.
+//
+// Like the Admin tab, this hides nothing the server would allow and shows
+// nothing it would refuse: every write here is an endpoint that answers 403
+// without the flag, so the view is a description of the rules rather than an
+// enforcement of them.
+
+import * as api from './api.js';
+import { h, clear, spinner, confirm, toast, icon } from './ui.js';
+import { state, myID } from './state.js';
+import { navigate } from './app.js';
+import { when } from './format.js';
+
+const view = () => document.getElementById('view-adminuser');
+
+let userID = null;
+let data = null; // { user, teams, allTeams }
+let error = null;
+let busy = false;
+
+export function show(route) {
+  const next = route && route.user != null ? route.user : null;
+  if (next !== userID) {
+    userID = next;
+    data = null;
+    error = null;
+  }
+  if (!data) clear(view(), spinner());
+  refresh();
+}
+
+export async function refresh() {
+  if (userID == null || !state.me?.user?.is_admin) {
+    render();
+    return;
+  }
+  try {
+    // The user comes from the list rather than a show endpoint: there is no
+    // GET /api/users/{id}, and adding one for a row the list already carries
+    // would be a second way to say the same thing.
+    const [users, teams, allTeams] = await Promise.all([
+      api.users(),
+      api.userTeams(userID),
+      api.adminTeams(),
+    ]);
+    const user = users.find((u) => u.id === userID) || null;
+    data = { user, teams, allTeams };
+    error = null;
+  } catch (err) {
+    error = err.message;
+  }
+  render();
+}
+
+function render() {
+  const el = view();
+  if (!state.me?.user?.is_admin) {
+    clear(el, backLink(), h('div', { class: 'card' },
+      h('p', { class: 'muted', text: 'Administration is for system administrators. Ask one for access.' })));
+    return;
+  }
+  if (!data) {
+    clear(el, backLink(), error ? h('div', { class: 'load-error', text: error }) : spinner());
+    return;
+  }
+  if (!data.user) {
+    clear(el, backLink(), h('div', { class: 'card' },
+      h('p', { class: 'muted', text: 'No such user. They may have just been deleted.' })));
+    return;
+  }
+  clear(el,
+    backLink(),
+    error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
+    identityCard(),
+    teamsCard(),
+    accountCard(),
+  );
+}
+
+function backLink() {
+  return h('a', { class: 'back-link', href: '/admin/users' }, icon('chevronLeft'), h('span', { text: 'Users' }));
+}
+
+// --- identity --------------------------------------------------------------
+
+function identityCard() {
+  const u = data.user;
+  const self = u.id === myID();
+
+  return h('div', { class: 'card' },
+    h('div', { class: 'user-head' },
+      h('h2', { text: u.username }),
+      u.is_admin && h('span', { class: 'row-team', text: 'admin' }),
+      u.disabled_at && h('span', { class: 'row-team', text: 'disabled' }),
+      self && h('span', { class: 'you', text: 'you' })),
+    h('dl', { class: 'user-facts' },
+      fact('Email', u.email),
+      fact('Joined', when(u.created_at)),
+      fact('Notifications', u.ntfy_topic ? `ntfy: ${u.ntfy_topic}` : 'None of their own'),
+      u.disabled_at && fact('Disabled', when(u.disabled_at)),
+    ),
+    // Both of these refuse your own account, and the last administrator's. An
+    // enabled button that always fails is worse than no button.
+    h('div', { class: 'row-actions' },
+      !self && h('button', {
+        class: 'btn', type: 'button',
+        text: u.is_admin ? 'Revoke admin' : 'Make admin',
+        onclick: () => setAdmin(!u.is_admin),
+      }),
+      !self && h('button', {
+        class: 'btn', type: 'button',
+        text: u.disabled_at ? 'Enable account' : 'Disable account',
+        onclick: () => setDisabled(!u.disabled_at),
+      }),
+    ),
+    self && h('p', { class: 'muted small' },
+      'You cannot change your own administrator flag or disable yourself — ',
+      'that is how an install ends up with nobody who can administer it.'),
+  );
+}
+
+function fact(label, value) {
+  return [h('dt', { text: label }), h('dd', { text: value })];
+}
+
+async function setAdmin(next) {
+  if (next && !(await confirm({
+    title: `Make ${data.user.username} an administrator?`,
+    text: 'They will be able to manage every account, configure any team, and grant this to others.',
+    confirmLabel: 'Make admin',
+  }))) return;
+  await act(() => api.setUserAdmin(userID, next));
+}
+
+async function setDisabled(next) {
+  if (next && !(await confirm({
+    title: `Disable ${data.user.username}?`,
+    text: 'They cannot sign in and their API keys stop working. Their acknowledgements and timeline entries stay.',
+    confirmLabel: 'Disable',
+    danger: true,
+  }))) return;
+  await act(() => api.setUserDisabled(userID, next));
+}
+
+// --- teams -----------------------------------------------------------------
+
+// An administrator passes every team-owner check without being in the team,
+// which is what lets them repair a team whose owner has left. So this card
+// edits, rather than reporting what somebody else would have to do.
+//
+// It is the one place membership can be changed from the person's side: the
+// Team tab asks "who is in this team", and answering "which teams is this
+// person in" there means visiting each team in turn.
+function teamsCard() {
+  const rows = data.teams.map((t) =>
+    h('tr', {},
+      // Not a link: the Team tab always shows the viewer's own team, so
+      // sending them there from somebody else's membership would be a lie.
+      h('td', {}, h('strong', { text: t.name })),
+      h('td', { class: 'muted small', text: t.role }),
+      h('td', { class: 'row-actions' },
+        h('button', {
+          class: 'btn-sm', type: 'button',
+          text: t.role === 'owner' ? 'Make member' : 'Make owner',
+          onclick: () => act(() =>
+            api.addTeamMember(t.id, userID, t.role === 'owner' ? 'member' : 'owner')),
+        }),
+        h('button', {
+          class: 'btn-sm danger', type: 'button', text: 'Remove',
+          // The server refuses the last owner with a 409, which act() shows.
+          onclick: () => act(() => api.removeTeamMember(t.id, userID)),
+        }),
+      ),
+    ));
+
+  const inTeam = new Set(data.teams.map((t) => t.id));
+  const candidates = (data.allTeams || []).filter((t) => !inTeam.has(t.id));
+  const pick = h('select', {},
+    ...candidates.map((t) => h('option', { value: String(t.id), text: t.name })));
+  const role = h('select', {},
+    h('option', { value: 'member', text: 'member' }),
+    h('option', { value: 'owner', text: 'owner' }));
+  const form = h('form', { class: 'inline-form' }, pick, role,
+    h('button', { class: 'btn', type: 'submit', text: 'Add' }));
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    act(() => api.addTeamMember(Number(pick.value), userID, role.value));
+  });
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Teams' }),
+    data.teams.length === 0 && h('p', { class: 'muted small' },
+      'In no team. They can sign in, but there is no queue for them to work ',
+      'and nothing to page them about.'),
+    data.teams.length > 0 && h('table', { class: 'admin-table' }, h('tbody', {}, rows)),
+    candidates.length > 0 && form,
+  );
+}
+
+// --- account ---------------------------------------------------------------
+
+function accountCard() {
+  const u = data.user;
+  const self = u.id === myID();
+
+  const pw = h('input', {
+    type: 'password', name: 'password', autocomplete: 'new-password',
+    minlength: '10', required: true, placeholder: 'At least 10 characters',
+  });
+  const form = h('form', { class: 'inline-form' }, pw,
+    h('button', { class: 'btn', type: 'submit', text: 'Set password' }));
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (busy) return;
+    busy = true;
+    try {
+      // No current password: that check is for changing your own, and an
+      // administrator setting somebody else's does not know it by design.
+      await api.setPassword(userID, pw.value);
+      pw.value = '';
+      toast(`Password set for ${u.username}. Their other sessions are signed out.`);
+      error = null;
+    } catch (err) {
+      error = err.message;
+    } finally {
+      busy = false;
+    }
+    await refresh();
+  });
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Account' }),
+    h('p', { class: 'muted small' },
+      'Setting a password here is how somebody gets their first one, or a new ',
+      'one after forgetting it. It signs them out everywhere else. They change ',
+      'it themselves under Account afterwards.'),
+    self ? h('p', { class: 'muted small' },
+      'Change your own password under Account, where the current one is asked for.')
+      : form,
+    h('h3', { text: 'Delete' }),
+    h('p', { class: 'muted small' },
+      'Deleting erases their acknowledgements and timeline entries — incidents ',
+      'they handled stop saying who did. Disabling keeps the history and is ',
+      'almost always what is meant.'),
+    h('button', {
+      class: 'btn btn-danger', type: 'button', text: `Delete ${u.username}`,
+      disabled: self,
+      title: self ? 'You cannot delete your own account' : '',
+      onclick: deleteUser,
+    }),
+  );
+}
+
+async function deleteUser() {
+  if (!(await confirm({
+    title: `Delete ${data.user.username}?`,
+    text: 'Their API keys go with them, and their name comes off every incident they acknowledged. This cannot be undone.',
+    confirmLabel: 'Delete',
+    danger: true,
+  }))) return;
+  try {
+    await api.deleteUser(userID);
+  } catch (err) {
+    error = err.message;
+    render();
+    return;
+  }
+  toast('User deleted.');
+  navigate('/admin/users');
+}
+
+// --- plumbing --------------------------------------------------------------
+
+// act runs a write and reloads. Errors are shown rather than thrown away: the
+// 409 from the last-owner or last-administrator guard is the server explaining
+// itself, and the reader needs to see it.
+async function act(fn) {
+  if (busy) return;
+  busy = true;
+  try {
+    await fn();
+    error = null;
+  } catch (err) {
+    error = err.message;
+  } finally {
+    busy = false;
+  }
+  await refresh();
+}

internal/web/static/js/api.js

@@ -67,6 +67,15 @@ export const setPassword = (userID, password, currentPassword) =>
 // users
 export const users = () => call('GET', '/users');
 
+// What one person is in. /teams answers "what am I in" and cannot be asked
+// about anybody else, which is what the admin page's per-user view needs.
+export const userTeams = (id) => call('GET', `/users/${id}/teams`);
+
+// Where this user's pages go. An empty topic clears it, which the server
+// treats as "no topic of their own" rather than an error.
+export const setNotifyTarget = (id, ntfyTopic) =>
+  call('PUT', `/users/${id}/notify`, { body: { ntfy_topic: ntfyTopic } });
+
 // incidents
 export const incidents = (query, opts) => call('GET', '/incidents', { query, ...opts });
 export const incident = (id) => call('GET', `/incidents/${id}`);
@@ -87,20 +96,63 @@ export const deleteNote = (id, eventID) => call('DELETE', `/incidents/${id}/note
 export const alerts = (query, opts) => call('GET', '/alerts', { query, ...opts });
 
 // schedule
+// Sign-up, both halves unauthenticated: the caller has no account yet.
+export const signupInfo = (invite) =>
+  call('GET', '/signup', { query: invite ? { invite } : {} });
+export const signup = (body) => call('POST', '/signup', { body });
+
+export const invites = (id) => call('GET', `/teams/${id}/invites`);
+export const createInvite = (id, role, maxUses) =>
+  call('POST', `/teams/${id}/invites`, { body: { role, max_uses: maxUses } });
+export const revokeInvite = (id, inviteID) => call('DELETE', `/teams/${id}/invites/${inviteID}`);
+
+export const testNotification = () => call('POST', '/me/notify/test');
+export const dismissOnboarding = (dismissed) =>
+  call('PUT', '/me/onboarding', { body: { dismissed } });
+
 export const teams = () => call('GET', '/teams');
 export const createTeam = (name) => call('POST', '/teams', { body: { name } });
 export const renameTeam = (id, name) => call('PUT', `/teams/${id}`, { body: { name } });
 export const deleteTeam = (id) => call('DELETE', `/teams/${id}`);
 
+// A team's own settings. Every write is owner-only and every read is
+// member-only; the server answers 403 and 404 respectively, so the UI shows
+// what the role allows rather than guarding it.
+export const teamMembers = (id) => call('GET', `/teams/${id}/members`);
+export const addTeamMember = (id, userID, role) =>
+  call('POST', `/teams/${id}/members`, { body: { user_id: userID, role } });
+export const removeTeamMember = (id, userID) => call('DELETE', `/teams/${id}/members/${userID}`);
+
+export const integrations = (id) => call('GET', `/teams/${id}/integrations`);
+export const createIntegration = (id, name) =>
+  call('POST', `/teams/${id}/integrations`, { body: { name } });
+export const deleteIntegration = (id, integrationID) =>
+  call('DELETE', `/teams/${id}/integrations/${integrationID}`);
+
+export const deadman = (id) => call('GET', `/teams/${id}/deadman`);
+export const setDeadman = (id, body) => call('PUT', `/teams/${id}/deadman`, { body });
+
+export const escalation = (id) => call('GET', `/teams/${id}/escalation`);
+export const setEscalation = (id, body) => call('PUT', `/teams/${id}/escalation`, { body });
+
+export const assignSchedule = (id, userID, dates, replace = false) =>
+  call('POST', `/teams/${id}/schedule`, { body: { user_id: userID, dates, replace } });
+export const unassignSchedule = (id, entryID) => call('DELETE', `/teams/${id}/schedule/${entryID}`);
+
 // Administration. Every one of these is refused with 403 for anybody without
 // the flag, so the UI hides the section rather than guarding it.
 export const adminTeams = () => call('GET', '/admin/teams');
+// One team and who is in it: { team, members }. /teams/{id}/members is
+// member-only and answers 404 to an administrator from outside the team, which
+// is the rule rather than an oversight -- this asks the other question.
+export const adminTeam = (id) => call('GET', `/admin/teams/${id}`);
 export const adminSettings = () => call('GET', '/admin/settings');
 export const setAdminSettings = (body) => call('PUT', '/admin/settings', { body });
 export const setUserAdmin = (id, isAdmin) =>
   call('PUT', `/users/${id}/admin`, { body: { is_admin: isAdmin } });
 export const setUserDisabled = (id, disabled) =>
   call('PUT', `/users/${id}/disabled`, { body: { disabled } });
+export const deleteUser = (id) => call('DELETE', `/users/${id}`);
 export const schedule = (teamID, from, to) =>
   call('GET', `/teams/${teamID}/schedule`, { query: { from, to } });
 

internal/web/static/js/app.js

@@ -9,27 +9,70 @@ import * as incident from './incident.js';
 import * as oncall from './oncall.js';
 import * as alerts from './alerts.js';
 import * as account from './account.js';
+import * as team from './team.js';
 import * as admin from './admin.js';
+import * as adminuser from './adminuser.js';
+import * as adminteam from './adminteam.js';
 
 const $ = (id) => document.getElementById(id);
 
-// One route per section; /incidents/{id} is the queue with a detail open.
+// One route per section; /incidents/{id} is the queue with a detail open, and
+// /admin/users/{id} is a section of its own rather than a mode of the Admin
+// tab, because it replaces the page rather than opening beside it.
 const SECTIONS = {
   queue: { title: 'Queue', view: queue },
   oncall: { title: 'On-call', view: oncall },
   alerts: { title: 'Alerts', view: alerts },
+  team: { title: 'Team', view: team },
   admin: { title: 'Admin', view: admin },
+  adminuser: { title: 'User', view: adminuser, nav: 'admin' },
+  adminteam: { title: 'Team', view: adminteam, nav: 'admin' },
   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: '/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]) };
+  const u = pathname.match(/^\/admin\/users\/(\d+)\/?$/);
+  if (u) return { section: 'adminuser', user: Number(u[1]) };
+  // Before the TABS lookup below, which matches a path exactly and would let
+  // /admin/teams/7 fall through to the queue.
+  const g = pathname.match(/^\/admin\/teams\/(\d+)\/?$/);
+  if (g) return { section: 'adminteam', team: Number(g[1]) };
   const name = pathname.replace(/^\/|\/$/g, '');
-  if (name === 'oncall' || name === 'alerts' || name === 'admin' || name === 'more') return { section: name };
+  // 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 };
+  const tt = team.TABS.find((x) => x.path === `/${name}`);
+  if (tt) return { section: 'team', tab: tt.tab };
+  if (name === 'oncall' || name === 'alerts' || name === 'more') return { section: name };
   return { section: 'queue', incident: null };
 }
 
+// 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 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);
 // How many in-app navigations deep we are, so Back can use the browser's
 // history when there is somewhere to go back to, and the queue otherwise.
@@ -62,13 +105,16 @@ function render() {
   route = parseRoute(location.pathname);
   const app = $('app');
 
-  for (const [name, s] of Object.entries(SECTIONS)) {
+  for (const name of Object.keys(SECTIONS)) {
     const el = $(`view-${name}`);
     el.hidden = name !== route.section;
-    if (name === route.section) $('topbar-title').textContent = s.title;
+    if (name === route.section) $('topbar-title').textContent = title(route);
   }
+  // A section may light up somebody else's tab: /admin/users/{id} is still the
+  // Admin tab as far as the nav is concerned, since there is no tab of its own.
+  const current = SECTIONS[route.section].nav || route.section;
   for (const link of document.querySelectorAll('.nav-link')) {
-    if (link.dataset.section === route.section) link.setAttribute('aria-current', 'page');
+    if (link.dataset.section === current) link.setAttribute('aria-current', 'page');
     else link.removeAttribute('aria-current');
   }
 
@@ -83,16 +129,49 @@ function render() {
     incident.show(route.incident);
   } else {
     incident.show(null);
-    SECTIONS[route.section].view.show();
+    SECTIONS[route.section].view.show(route);
   }
 
   if (detailOpen && !wasOpen) window.scrollTo(0, 0);
   else if (!detailOpen && wasOpen) requestAnimationFrame(() => window.scrollTo(0, listScroll));
-  else if (prev.section !== route.section) window.scrollTo(0, 0);
+  // A changed tab counts as a changed page: stepping from a long user list to
+  // the settings should not land you halfway down them. So does a changed
+  // subject — one team to the next is two pages, not one scrolled page.
+  else if (prev.section !== route.section || prev.tab !== route.tab
+    || prev.user !== route.user || prev.team !== route.team) window.scrollTo(0, 0);
 
   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() {
@@ -119,15 +198,18 @@ 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();
 }
 
 function updateTitle() {
   const triggered = state.open.filter((i) => i.status === 'triggered').length;
-  const section = SECTIONS[route.section].title;
+  const section = title(route);
   const base = route.section === 'queue' && route.incident == null ? 'terdut' : `${section} · terdut`;
   document.title = triggered ? `(${triggered}) ${base}` : base;
 }
@@ -140,6 +222,15 @@ async function boot() {
   document.addEventListener('click', interceptLinks);
   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') {
+    $('boot').hidden = true;
+    await showSignup();
+    return;
+  }
 
   try {
     state.me = await api.me();
@@ -159,6 +250,84 @@ function showBootError(err) {
   $('boot').append(ui.h('button', { class: 'btn', onclick: () => location.reload(), text: 'Retry' }));
 }
 
+// The sign-up screen. Reached at /signup, with an optional ?invite= that the
+// server has already judged — the form says whether the link is good before
+// somebody picks a password, rather than after.
+async function showSignup() {
+  poll.stop();
+  ui.closeSheet(null);
+  reset();
+  $('boot').hidden = true;
+  $('app').hidden = true;
+  $('login').hidden = false;
+  $('login-form').hidden = true;
+  $('signup-form').hidden = false;
+
+  const invite = new URLSearchParams(location.search).get('invite');
+  const intro = $('signup-intro');
+  const form = $('signup-form');
+  const teamLabel = $('signup-team-label');
+  form.querySelector('.form-error').hidden = true;
+
+  let info;
+  try {
+    info = await api.signupInfo(invite);
+  } catch (err) {
+    intro.textContent = err.message;
+    return;
+  }
+
+  if (invite && info.invite_valid) {
+    intro.textContent = `You have been invited to ${info.invite_team}.`;
+    teamLabel.hidden = true;
+    form.team_name.required = false;
+  } else if (invite) {
+    // One answer for expired, revoked, used up and never existed, matching the
+    // server: which it was is not a stranger's business.
+    intro.textContent = 'That invite link is not usable. Ask whoever sent it for a new one.';
+    form.querySelector('button[type=submit]').disabled = true;
+  } else if (info.mode === 'open') {
+    intro.textContent = 'Create an account and a team to put your alerts in.';
+    teamLabel.hidden = false;
+    form.team_name.required = true;
+  } else {
+    intro.textContent = 'Sign-up on this server is invite-only. Ask a team owner for a link.';
+    form.querySelector('button[type=submit]').disabled = true;
+  }
+  form.username.focus();
+}
+
+async function onSignup(e) {
+  e.preventDefault();
+  const form = e.currentTarget;
+  const err = form.querySelector('.form-error');
+  const btn = form.querySelector('button[type=submit]');
+  err.hidden = true;
+  btn.disabled = true;
+  try {
+    state.me = await api.signup({
+      username: form.username.value.trim(),
+      email: form.email.value.trim(),
+      password: form.password.value,
+      invite: new URLSearchParams(location.search).get('invite') || undefined,
+      team_name: form.team_name.value.trim() || undefined,
+    });
+    form.password.value = '';
+    // Signing up signs you in, so go straight to the queue rather than to a
+    // login form asking for the credential just chosen.
+    history.replaceState({ depth: 0 }, '', '/');
+    route = parseRoute('/');
+    await loadTeams();
+    $('nav-admin').hidden = !state.me?.user?.is_admin;
+    showApp();
+  } catch (ex) {
+    err.textContent = ex.message;
+    err.hidden = false;
+  } finally {
+    btn.disabled = false;
+  }
+}
+
 function showLogin() {
   poll.stop();
   ui.closeSheet(null);
@@ -166,8 +335,15 @@ function showLogin() {
   $('boot').hidden = true;
   $('app').hidden = true;
   $('login').hidden = false;
+  $('signup-form').hidden = true;
+  $('login-form').hidden = false;
   const form = $('login-form');
   form.querySelector('.form-error').hidden = true;
+  // Only offer the door that is open. Somebody without an invite on an
+  // invite-only server should be told, not sent to a form that refuses them.
+  api.signupInfo().then((info) => {
+    $('signup-link').hidden = info.mode !== 'open';
+  }).catch(() => {});
   form.password.value = '';
   (form.username.value ? form.password : form.username).focus();
 }

internal/web/static/js/incident.js

@@ -95,6 +95,15 @@ function statusBadges() {
   if (inc.status !== 'resolved' && isFuture(inc.snoozed_until)) {
     out.push(badge(`Snoozed · ${until(inc.snoozed_until)} left`, 'st-snoozed'));
   }
+  // Where it is on the ladder, while it is still climbing. The queue shows
+  // what happened; this says what happens next, which is the question somebody
+  // looking at an unacknowledged incident actually has.
+  if (inc.escalation_level > 0) {
+    const left = inc.escalation_due_at && isFuture(inc.escalation_due_at)
+      ? ` · next in ${until(inc.escalation_due_at)}`
+      : ' · next page due';
+    out.push(badge(`Escalating · level ${inc.escalation_level}${left}`, 'st-triggered'));
+  }
   if (inc.archived_at) out.push(badge('Archived', 'plain'));
   return out;
 }
@@ -115,6 +124,10 @@ function facts() {
   if (inc.status !== 'resolved' && isFuture(inc.snoozed_until)) {
     add('Snoozed until', when(inc.snoozed_until));
   }
+  if (inc.escalation_level > 0 && inc.escalation_due_at) {
+    add('Escalates next', when(inc.escalation_due_at),
+      h('span', { class: 'sub', text: ` · level ${inc.escalation_level}` }));
+  }
   if (inc.resolved_at) {
     const how = inc.resolution_source === 'manual' ? 'by hand' : 'alerts stopped firing';
     add('Resolved', when(inc.resolved_at), h('span', { class: 'sub', text: ` · ${how}` }));

internal/web/static/js/onboarding.js

@@ -0,0 +1,147 @@
+// The first-run checklist: the four things a new install or a new person has
+// to do before an alert reaches a phone.
+//
+// It is computed from what the server already knows rather than from stored
+// progress — a topic is set or it is not, an integration exists or it does not
+// — so it cannot claim a step is done when it is not, and it comes back by
+// itself if somebody deletes their integration a month later.
+//
+// Dismissal is the one piece of state, kept per user so finishing on a laptop
+// does not leave the phone nagging.
+
+import * as api from './api.js';
+import { h, clear, spinner } from './ui.js';
+import { state, currentTeam } from './state.js';
+import { navigate } from './app.js';
+import { isoDate } from './format.js';
+
+let steps = null;
+let error = null;
+let busy = false;
+let testResult = null;
+
+// done() is deliberately a question about the world, not a flag: each step asks
+// the data whether it happened.
+export async function load() {
+  const team = currentTeam();
+  if (!team) {
+    steps = null;
+    return;
+  }
+  try {
+    const [schedule, integrations, alerts] = await Promise.all([
+      api.schedule(team.id, isoDate(new Date()), isoDate(new Date())),
+      api.integrations(team.id),
+      api.alerts({ limit: 1 }),
+    ]);
+    steps = [
+      {
+        id: 'topic',
+        title: 'Set where your pages go',
+        text: 'An ntfy topic on your account. Without one, incidents assigned to you page the team’s fallback topic instead of your phone.',
+        done: Boolean(state.me?.user?.ntfy_topic),
+        action: { label: 'Account', go: '/more' },
+      },
+      {
+        id: 'rota',
+        title: 'Put somebody on call',
+        text: 'An incident opens assigned to whoever the rota says is on call today. With an empty rota it opens unassigned.',
+        done: (schedule || []).length > 0,
+        action: { label: 'Team', go: '/team' },
+      },
+      {
+        id: 'integration',
+        title: 'Create an alert source',
+        text: 'Alerts arrive on an integration key, which says which team they belong to. Nothing can reach this team without one.',
+        done: (integrations || []).length > 0,
+        action: { label: 'Team', go: '/team' },
+      },
+      {
+        id: 'alert',
+        title: 'Send a test alert',
+        text: 'Post to the integration URL and watch it appear in the queue. Until one arrives, none of the above is proven.',
+        done: (alerts || []).length > 0,
+        action: { label: 'How', go: '/team' },
+      },
+    ];
+    error = null;
+  } catch (err) {
+    error = err.message;
+  }
+}
+
+// visible reports whether there is anything worth showing: something undone,
+// and not dismissed.
+export function visible() {
+  if (!steps || state.me?.onboarding_dismissed) return false;
+  return steps.some((s) => !s.done);
+}
+
+export function card() {
+  if (!visible()) return null;
+  const remaining = steps.filter((s) => !s.done).length;
+
+  return h('div', { class: 'card onboarding' },
+    h('div', { class: 'onboarding-head' },
+      h('h2', { text: 'Finish setting up' }),
+      h('span', { class: 'muted small', text: `${remaining} left` }),
+      h('button', {
+        class: 'btn-sm', type: 'button', text: 'Hide',
+        title: 'Hide this checklist for good',
+        onclick: async () => {
+          try {
+            await api.dismissOnboarding(true);
+            if (state.me) state.me.onboarding_dismissed = true;
+          } catch (err) {
+            error = err.message;
+          }
+          rerender();
+        },
+      })),
+    error && h('p', { class: 'load-error', text: error }),
+    h('ol', { class: 'checklist' }, ...steps.map(stepRow)),
+    testResult && h('p', { class: testResult.ok ? 'muted small' : 'load-error', text: testResult.text }),
+  );
+}
+
+function stepRow(step) {
+  return h('li', { class: step.done ? 'step done' : 'step' },
+    h('span', { class: 'step-mark', text: step.done ? '✓' : '' }),
+    h('div', {},
+      h('strong', { text: step.title }),
+      h('p', { class: 'muted small', text: step.text }),
+      !step.done && h('div', { class: 'step-actions' },
+        h('button', {
+          class: 'btn-sm', type: 'button', text: step.action.label,
+          onclick: () => navigate(step.action.go),
+        }),
+        // The topic step is the only one this page can finish by itself, and
+        // the only proof that matters is a phone buzzing.
+        step.id === 'topic' && state.me?.user?.ntfy_topic && h('button', {
+          class: 'btn-sm', type: 'button', text: 'Send a test push',
+          disabled: busy,
+          onclick: sendTest,
+        }),
+      )),
+  );
+}
+
+async function sendTest() {
+  busy = true;
+  try {
+    await api.testNotification();
+    testResult = { ok: true, text: 'Sent. If nothing arrives, the topic is wrong or ntfy is not reachable.' };
+  } catch (err) {
+    testResult = { ok: false, text: err.message };
+  } finally {
+    busy = false;
+  }
+  rerender();
+}
+
+// The queue owns the card's place on the page, so ask it to redraw rather than
+// reaching into its list.
+let rerender = () => {};
+export function onRerender(fn) {
+  rerender = fn;
+}

internal/web/static/js/queue.js

@@ -4,6 +4,7 @@ import * as api from './api.js';
 import { h, clear, badge, emptyState, spinner } from './ui.js';
 import { age, until, isFuture, severityClass, labelSummary } from './format.js';
 import { state, myID } from './state.js';
+import * as onboarding from './onboarding.js';
 import { navigate } from './app.js';
 
 // The same filters as the TUI's `f` cycle, plus archived ones to get back to.
@@ -25,6 +26,8 @@ const EMPTY = {
   archived: ['Nothing archived', ''],
 };
 
+onboarding.onRerender(() => renderList());
+
 let filter = loadFilter();
 let teamFilter = loadTeamFilter(); // '' for every team the viewer is in
 let items = null; // null while loading
@@ -89,6 +92,7 @@ export async function refresh({ fresh = false } = {}) {
     const query = teamFilter ? { ...f.query, team_id: teamFilter } : f.query;
     const cached = filter === 'open' && !fresh && !teamFilter;
     const result = cached ? state.open : await api.incidents(query);
+    await onboarding.load();
     if (requested !== filter) return;
     items = result;
     error = null;
@@ -153,20 +157,22 @@ function renderChips() {
 
 function renderList() {
   const el = document.getElementById('queue-list');
+  const checklist = onboarding.card();
   if (error && !items) {
-    clear(el, h('div', { class: 'load-error', text: error }));
+    clear(el, checklist, h('div', { class: 'load-error', text: error }));
     return;
   }
   if (!items) {
-    clear(el, spinner());
+    clear(el, checklist, spinner());
     return;
   }
   if (!items.length) {
     const [title, text] = EMPTY[filter];
-    clear(el, emptyState(title, text, filter === 'open' ? 'checkCircle' : null));
+    clear(el, checklist, emptyState(title, text, filter === 'open' ? 'checkCircle' : null));
     return;
   }
   clear(el,
+    checklist,
     error && h('div', { class: 'load-error', text: `Showing older data: ${error}` }),
     items.map((inc, i) => row(inc, i)),
   );

internal/web/static/js/team.js

@@ -0,0 +1,748 @@
+// 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 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
+// the controls a member cannot use, because a form that always fails is worse
+// 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, 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;
+// 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(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();
+}
+
+function selectedTeam() {
+  const teams = state.teams || [];
+  return teams.find((t) => t.id === teamID) || currentTeam();
+}
+
+export async function refresh() {
+  const team = selectedTeam();
+  if (!team) {
+    data = null;
+    render();
+    return;
+  }
+  teamID = team.id;
+  try {
+    data = { team, ...(await load(team.id)) };
+    error = null;
+  } catch (err) {
+    error = err.message;
+  }
+  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;
+}
+
+function render() {
+  if (!data) {
+    clear(view(), error
+      ? h('div', { class: 'load-error', text: error })
+      : h('div', { class: 'card' }, h('p', { class: 'muted', text: 'You are not in a team yet.' })));
+    return;
+  }
+  clear(view(),
+    subnav(),
+    teamPicker(),
+    // 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.' })),
+    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 }));
+  }
+  const select = h('select', { class: 'team-picker' },
+    ...state.teams.map((t) => h('option', {
+      value: String(t.id), text: t.name, selected: t.id === teamID,
+    })));
+  select.addEventListener('change', () => {
+    teamID = Number(select.value);
+    data = null;
+    freshKey = null;
+    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
+// it is set, which until now was the TUI's job and the TUI cannot do it any
+// more.
+//
+// A month of it, as a grid. It used to be thirty rows of "date — username",
+// which is a rota spelled out one day at a time: the question asked of it is
+// "who has which stretch", and thirty names down a column is the one shape
+// that answer cannot be read in. So each day carries a coloured initial
+// instead, the legend says whose, and a shift becomes a run of one colour.
+//
+// The same month laid out the same way as the on-call page's week, because it
+// is the same rota — heading and arrows outside the card, days inside it.
+
+const monthFmt = new Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });
+const weekdayFmt = new Intl.DateTimeFormat(undefined, { weekday: 'short' });
+const longDayFmt = new Intl.DateTimeFormat(undefined, {
+  weekday: 'long', day: 'numeric', month: 'long',
+});
+
+let monthStart = firstOfMonth(new Date());
+
+function firstOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+// The grid runs Monday to Sunday, so it starts before the 1st and ends after
+// the last. Both overhangs are fetched and drawn: a shift that begins on the
+// 30th is a fact about this month even though the days it runs into are not.
+function gridDays() {
+  const start = mondayOf(monthStart);
+  const last = new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 0);
+  const span = Math.round((last - start) / 86400000) + 1;
+  return { start, count: Math.ceil(span / 7) * 7 };
+}
+
+function shiftMonth(n) {
+  monthStart = new Date(monthStart.getFullYear(), monthStart.getMonth() + n, 1);
+  refresh();
+}
+
+function scheduleCard() {
+  const { start, count } = gridDays();
+  const byDate = new Map((data.schedule || []).map((e) => [e.date, e]));
+  const today = isoDate(new Date());
+  const month = monthStart.getMonth();
+
+  // Whose colours to explain, in the order the month meets them. Only the days
+  // of this month count: a name that appears solely in the overhang belongs to
+  // the month next door and would be explaining a chip nobody asked about.
+  const seen = new Map();
+  const cells = [];
+  for (let i = 0; i < count; i++) {
+    const d = addDays(start, i);
+    const key = isoDate(d);
+    const e = byDate.get(key);
+    const inMonth = d.getMonth() === month;
+    if (inMonth && e && !seen.has(e.user_id)) seen.set(e.user_id, e.username);
+    cells.push(dayCell(d, key, e, inMonth, today));
+  }
+
+  const heads = [];
+  for (let i = 0; i < 7; i++) {
+    // Any Monday will do; this one is a Monday.
+    heads.push(h('span', { class: 'rota-wd', text: weekdayFmt.format(new Date(2024, 0, 1 + i)) }));
+  }
+
+  return [
+    h('div', { class: 'page-head' },
+      h('h2', { text: 'On-call rota' }),
+      h('div', { class: 'week-nav' },
+        h('button', {
+          class: 'btn btn-ghost btn-icon', type: 'button',
+          'aria-label': 'Previous month', onclick: () => shiftMonth(-1),
+        }, icon('chevronLeft')),
+        h('button', {
+          class: 'btn btn-ghost label', type: 'button',
+          title: 'Back to this month',
+          onclick: () => { monthStart = firstOfMonth(new Date()); refresh(); },
+          text: monthFmt.format(monthStart),
+        }),
+        h('button', {
+          class: 'btn btn-ghost btn-icon', type: 'button',
+          'aria-label': 'Next month', onclick: () => shiftMonth(1),
+        }, icon('chevronRight')),
+      ),
+    ),
+    h('div', { class: 'card' },
+      h('div', { class: 'rota-grid' }, heads, cells),
+      h('div', { class: 'rota-foot' }, legend(seen), coverNote(byDate)),
+      // The range form is the way to fill a whole shift at once, but it is not
+      // what the page is for, so it stays folded away under the month it edits.
+      isOwner() && h('details', { class: 'rota-bulk' },
+        h('summary', { text: 'Assign a range of days' }),
+        assignForm()),
+    ),
+  ];
+}
+
+function dayCell(d, key, e, inMonth, today) {
+  const cls = ['rota-day', !inMonth && 'outside', key === today && 'today', key < today && 'past']
+    .filter(Boolean).join(' ');
+  const label = `${key} · ${e ? e.username : 'nobody'}`;
+  const body = [
+    h('span', { class: 'rota-num', text: String(d.getDate()) }),
+    e
+      ? h('span', { class: `rota-chip ${colorClass(e.user_id)}`, text: initial(e.username) })
+      : h('span', { class: 'rota-chip none' }),
+  ];
+  // A member sees the same grid without the affordance, the way every other
+  // control on this page is hidden rather than shown and refused.
+  return isOwner()
+    ? h('button', {
+      class: cls, type: 'button', title: label, 'aria-label': label,
+      onclick: () => daySheet(key, e),
+    }, body)
+    : h('div', { class: cls, title: label }, body);
+}
+
+// A colour per person, taken from their place in the member list so that it
+// holds still as you page between months. Somebody who holds days but has
+// since left the team is not in that list and falls back to their id.
+function colorClass(userID) {
+  const i = (data.members || []).findIndex((m) => m.user_id === userID);
+  return `rc${((i < 0 ? userID : i) % 6) + 1}`;
+}
+
+function legend(seen) {
+  if (!seen.size) return null;
+  return h('div', { class: 'rota-legend' },
+    [...seen].map(([id, name]) => h('span', { class: 'rota-key' },
+      h('span', { class: `rota-chip ${colorClass(id)}`, text: initial(name) }),
+      h('span', { text: name }),
+      id === myID() && h('span', { class: 'you', text: 'you' }),
+    )));
+}
+
+// The gap count, which is the one thing the grid states only by omission. Days
+// already past are not counted: an empty Tuesday last week is history, not a
+// hole somebody still has to fill.
+function coverNote(byDate) {
+  const today = isoDate(new Date());
+  const last = new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 0).getDate();
+  let gaps = 0;
+  for (let day = 1; day <= last; day++) {
+    const key = isoDate(new Date(monthStart.getFullYear(), monthStart.getMonth(), day));
+    if (key >= today && !byDate.has(key)) gaps++;
+  }
+  if (gaps === 0) return h('p', { class: 'rota-note', text: 'Every day left this month has somebody on call.' });
+  return h('p', { class: 'rota-note' },
+    h('strong', { text: gaps === 1 ? '1 day' : `${gaps} days` }),
+    ' left this month with nobody on call.');
+}
+
+// One day, in the sheet: who has it, who should, and the way to empty it. This
+// is where the per-row Clear button went — the grid has no room for thirty of
+// them, and the day you want to change is the one you just tapped.
+function daySheet(date, entry) {
+  const who = memberSelect(entry ? entry.user_id : undefined);
+  openSheet(() => [
+    h('h2', { class: 'sheet-title', text: longDayFmt.format(parseISO(date)) }),
+    h('p', { class: 'sheet-text', text: entry ? `${entry.username} is on call.` : 'Nobody is on call.' }),
+    h('label', { class: 'sheet-pick' }, 'On call ', who),
+    h('div', { class: 'sheet-actions' },
+      entry && h('button', {
+        class: 'btn btn-danger', type: 'button', text: 'Clear',
+        onclick: () => { closeSheet(); act(() => api.unassignSchedule(teamID, entry.id)); },
+      }),
+      h('button', {
+        class: 'btn btn-primary', type: 'button', autofocus: true, text: 'Assign',
+        // replace, where the range form asks first: the sheet has just named
+        // whoever holds the day, so taking it from them is the thing that was
+        // asked for rather than something to be warned about.
+        onclick: () => {
+          closeSheet();
+          act(() => api.assignSchedule(teamID, Number(who.value), [date], true));
+        },
+      }),
+    ),
+  ]);
+}
+
+function parseISO(s) {
+  const [y, m, d] = s.split('-').map(Number);
+  return new Date(y, m - 1, d);
+}
+
+function assignForm() {
+  const who = memberSelect();
+  // The form opens on the month above it rather than on today: it is folded
+  // into that month's card, and paging to March to fill March and being handed
+  // today's date would be the card and the form disagreeing about the subject.
+  const now = new Date();
+  const sameMonth = monthStart.getFullYear() === now.getFullYear()
+    && monthStart.getMonth() === now.getMonth();
+  const from = h('input', {
+    type: 'date', required: true, value: isoDate(sameMonth ? now : monthStart),
+  });
+  const days = h('input', { type: 'number', min: '1', max: '31', value: '1', class: 'setting-value' });
+  const replace = h('input', { type: 'checkbox' });
+
+  const form = h('form', { class: 'stacked-form' },
+    h('label', {}, 'Who ', who),
+    h('label', {}, 'From ', from),
+    h('label', {}, 'Days ', days),
+    // Taking a day somebody else holds has to be asked for, the same rule the
+    // API enforces: a plain assignment that silently moved a shift would move
+    // who gets paged without telling either of them.
+    h('label', { class: 'checkbox' }, replace, ' Take days somebody else holds'),
+    h('button', { class: 'btn', type: 'submit', text: 'Assign' }));
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const start = new Date(from.value + 'T00:00:00Z');
+    const dates = [];
+    for (let i = 0; i < Number(days.value || 1); i++) dates.push(isoDate(addDays(start, i)));
+    act(() => api.assignSchedule(teamID, Number(who.value), dates, replace.checked));
+  });
+  return form;
+}
+
+function memberSelect(selected) {
+  return h('select', {},
+    ...(data.members || []).map((m) => h('option', {
+      value: String(m.user_id), text: m.username, selected: m.user_id === selected,
+    })));
+}
+
+// --- escalation ------------------------------------------------------------
+
+// The ladder is edited as a whole and sent as a whole, because the API replaces
+// it wholesale: the levels are an order, and patching one rung would leave the
+// numbering of the others undecided.
+let draft = null;
+
+function escalationCard() {
+  const esc = data.escalation;
+  if (!draft) {
+    draft = {
+      repeat_count: esc.repeat_count || 0,
+      fallback_topic: esc.fallback_topic || '',
+      levels: (esc.levels || []).map((l) => ({
+        timeout_seconds: l.timeout_seconds,
+        targets: (l.targets || []).map((t) => ({ kind: t.kind, user_id: t.user_id })),
+      })),
+    };
+  }
+
+  const body = [];
+  if (!draft.levels.length) {
+    body.push(h('p', { class: 'muted' },
+      'No ladder. An unacknowledged incident re-pages the same person every ',
+      'reminder interval and nobody else is woken.'));
+  }
+
+  draft.levels.forEach((level, i) => {
+    body.push(h('div', { class: 'ladder-level' },
+      h('div', { class: 'ladder-head' },
+        h('strong', { text: `Level ${i + 1}` }),
+        isOwner() && h('button', {
+          class: 'btn-sm danger', type: 'button', text: 'Remove',
+          onclick: () => { draft.levels.splice(i, 1); render(); },
+        })),
+      h('label', {}, 'Wait ', minutesInput(level.timeout_seconds, (secs) => {
+        level.timeout_seconds = secs;
+      }), ' before the next level'),
+      h('div', { class: 'ladder-targets' },
+        ...level.targets.map((t, ti) => targetRow(level, t, ti)),
+        isOwner() && h('button', {
+          class: 'btn-sm', type: 'button', text: '+ target',
+          onclick: () => { level.targets.push({ kind: 'oncall' }); render(); },
+        })),
+    ));
+  });
+
+  if (isOwner()) {
+    body.push(h('button', {
+      class: 'btn-sm', type: 'button', text: '+ level',
+      onclick: () => {
+        draft.levels.push({ timeout_seconds: 300, targets: [{ kind: 'oncall' }] });
+        render();
+      },
+    }));
+
+    const repeat = h('input', {
+      type: 'number', min: '0', max: '10', class: 'setting-value',
+      value: String(draft.repeat_count),
+      oninput: (e) => { draft.repeat_count = Number(e.target.value); },
+    });
+    const fallback = h('input', {
+      type: 'text', value: draft.fallback_topic, placeholder: 'terdut-oncall-all',
+      oninput: (e) => { draft.fallback_topic = e.target.value; },
+    });
+    body.push(h('label', {}, 'Repeat the whole ladder ', repeat, ' more times'));
+    body.push(h('label', {}, 'Then page this ntfy topic once ', fallback));
+    body.push(h('button', {
+      class: 'btn', type: 'button', text: 'Save ladder',
+      onclick: () => act(() => api.setEscalation(teamID, draft), { resetDraft: true }),
+    }));
+  }
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Escalation' }),
+    h('p', { class: 'muted small' },
+      'When a level’s wait passes and nobody has acknowledged, the next level is ',
+      'paged. Acknowledging or resolving stops it; snoozing pauses it.'),
+    ...body,
+  );
+}
+
+function targetRow(level, target, index) {
+  const kind = h('select', {},
+    h('option', { value: 'oncall', text: 'Whoever is on call', selected: target.kind === 'oncall' }),
+    h('option', { value: 'user', text: 'A specific person', selected: target.kind === 'user' }));
+  kind.addEventListener('change', () => {
+    target.kind = kind.value;
+    target.user_id = kind.value === 'user' ? (data.members[0] || {}).user_id : undefined;
+    render();
+  });
+
+  const who = target.kind === 'user'
+    ? memberSelect(target.user_id)
+    : null;
+  if (who) {
+    who.addEventListener('change', () => { target.user_id = Number(who.value); });
+  }
+
+  return h('div', { class: 'target-row' }, kind, who,
+    isOwner() && h('button', {
+      class: 'btn-sm danger', type: 'button', text: '×',
+      title: 'Remove this target',
+      onclick: () => { level.targets.splice(index, 1); render(); },
+    }));
+}
+
+function minutesInput(seconds, onChange) {
+  const input = h('input', {
+    type: 'number', min: '1', class: 'setting-value',
+    value: String(Math.max(1, Math.round(seconds / 60))),
+    oninput: (e) => onChange(Number(e.target.value) * 60),
+  });
+  return h('span', {}, input, ' minutes');
+}
+
+// --- integrations ----------------------------------------------------------
+
+function integrationsCard() {
+  const rows = (data.integrations || []).map((i) =>
+    h('tr', {},
+      h('td', {}, h('strong', { text: i.name })),
+      h('td', { class: 'muted small', text: i.kind }),
+      h('td', { class: 'muted small', text: i.last_used_at ? 'in use' : 'never used' }),
+      h('td', {}, isOwner() && h('button', {
+        class: 'btn-sm danger', type: 'button', text: 'Revoke',
+        onclick: async () => {
+          if (!(await confirm({
+            title: `Revoke ${i.name}?`,
+            text: 'Anything posting with this key stops delivering immediately.',
+            confirmLabel: 'Revoke',
+            danger: true,
+          }))) return;
+          act(() => api.deleteIntegration(teamID, i.id));
+        },
+      })),
+    ));
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Alert sources' }),
+    h('p', { class: 'muted small' },
+      'Alerts arrive on an integration key, which says both that the sender may ',
+      'post and which team the alerts belong to.'),
+    rows.length
+      ? h('table', { class: 'admin-table' }, h('tbody', {}, rows))
+      : h('p', { class: 'muted', text: 'No alert source yet, so nothing can reach this team.' }),
+    freshKey && newKeyPanel(),
+    isOwner() && !freshKey && newIntegrationForm(),
+  );
+}
+
+// The key is returned exactly once. Say so, show it large, and give the
+// Alertmanager snippet with it already in place — the next thing anybody does
+// with it is paste it into a config.
+function newKeyPanel() {
+  const url = freshKey.url || `${location.origin}/api/integrations/${freshKey.key}/alertmanager`;
+  const snippet = `receivers:
+  - name: terdut
+    webhook_configs:
+      - url: ${url}
+        send_resolved: true`;
+
+  return h('div', { class: 'key-panel' },
+    h('strong', { text: 'Copy this now — it is not shown again.' }),
+    h('pre', { class: 'key-url' }, h('code', { text: url })),
+    h('button', {
+      class: 'btn-sm', type: 'button', text: 'Copy URL',
+      onclick: () => navigator.clipboard?.writeText(url),
+    }),
+    h('p', { class: 'muted small', text: 'Alertmanager receiver:' }),
+    h('pre', {}, h('code', { text: snippet })),
+    h('button', {
+      class: 'btn-sm', type: 'button', text: 'Done',
+      onclick: () => { freshKey = null; render(); },
+    }),
+  );
+}
+
+function newIntegrationForm() {
+  const name = h('input', { type: 'text', placeholder: 'prod alertmanager', required: true });
+  const form = h('form', { class: 'inline-form' }, name,
+    h('button', { class: 'btn', type: 'submit', text: 'Add' }));
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      freshKey = await api.createIntegration(teamID, name.value.trim());
+      await refresh();
+    } catch (err) {
+      error = err.message;
+      render();
+    }
+  });
+  return form;
+}
+
+// --- dead man's switches ---------------------------------------------------
+
+function deadmanCard() {
+  const d = data.deadman || {};
+  const matchers = h('input', {
+    type: 'text', value: d.matchers || '', placeholder: 'alertname=Watchdog',
+    class: 'wide',
+  });
+  const timeout = h('input', {
+    type: 'number', min: '0', class: 'setting-value',
+    value: String(Math.round((d.timeout_seconds || 0) / 60)),
+  });
+  const severity = h('select', {},
+    ...['critical', 'error', 'warning', 'info'].map((s) =>
+      h('option', { value: s, text: s, selected: (d.severity || 'critical') === s })));
+
+  const form = h('form', { class: 'stacked-form' },
+    h('label', {}, 'Heartbeat alerts ', matchers),
+    h('label', {}, 'Declare dead after ', timeout, ' minutes of silence'),
+    h('label', {}, 'Open the incident at severity ', severity),
+    h('button', { class: 'btn', type: 'submit', text: 'Save switches' }));
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    act(() => api.setDeadman(teamID, {
+      matchers: matchers.value.trim(),
+      timeout_seconds: Number(timeout.value) * 60,
+      severity: severity.value,
+    }));
+  });
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Dead man’s switches' }),
+    h('p', { class: 'muted small' },
+      'Alerts whose ABSENCE is the signal. Receiving one opens nothing; going ',
+      'quiet for longer than the timeout opens an incident. ',
+      h('code', { text: 'alertname=Watchdog,cluster=prod; alertname=EdgeHeartbeat' }),
+      ' — semicolons separate switches, commas separate conditions, and every ',
+      'switch must name an alertname. Leave empty to watch nothing.'),
+    isOwner() ? form : h('p', { class: 'muted', text: d.matchers || 'Nothing watched.' }),
+  );
+}
+
+// --- members ---------------------------------------------------------------
+
+function membersCard() {
+  const rows = (data.members || []).map((m) =>
+    h('tr', {},
+      h('td', {}, h('strong', { text: m.username })),
+      h('td', { class: 'muted small', text: m.role }),
+      h('td', {}, isOwner() && h('button', {
+        class: 'btn-sm', type: 'button',
+        text: m.role === 'owner' ? 'Make member' : 'Make owner',
+        onclick: () => act(() =>
+          api.addTeamMember(teamID, m.user_id, m.role === 'owner' ? 'member' : 'owner')),
+      }), isOwner() && h('button', {
+        class: 'btn-sm danger', type: 'button', text: 'Remove',
+        onclick: () => act(() => api.removeTeamMember(teamID, m.user_id)),
+      })),
+    ));
+
+  const inTeam = new Set((data.members || []).map((m) => m.user_id));
+  const candidates = (data.users || []).filter((u) => !inTeam.has(u.id) && !u.disabled_at);
+  const pick = h('select', {},
+    ...candidates.map((u) => h('option', { value: String(u.id), text: u.username })));
+  const role = h('select', {},
+    h('option', { value: 'member', text: 'member' }),
+    h('option', { value: 'owner', text: 'owner' }));
+  const form = h('form', { class: 'inline-form' }, pick, role,
+    h('button', { class: 'btn', type: 'submit', text: 'Add' }));
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    act(() => api.addTeamMember(teamID, Number(pick.value), role.value));
+  });
+
+  return h('div', { class: 'card' },
+    h('h2', { text: 'Members' }),
+    h('table', { class: 'admin-table' }, h('tbody', {}, rows)),
+    isOwner() && candidates.length > 0 && form,
+  );
+}
+
+// --- plumbing --------------------------------------------------------------
+
+// act runs a write and reloads. Errors are shown rather than thrown away: a
+// 409 from the last-owner guard or the schedule's conflict rule is the server
+// explaining itself, and the reader needs to see it.
+async function act(fn, { resetDraft = false } = {}) {
+  try {
+    await fn();
+    error = null;
+    if (resetDraft) draft = null;
+  } catch (err) {
+    error = err.message;
+  }
+  if (!resetDraft) draft = null;
+  await refresh();
+}

internal/web/static/js/ui.js

@@ -34,6 +34,10 @@ 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'],
@@ -64,6 +68,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 +172,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),