Phase 1: Compass/NHS skeleton (Go, SQLite, session login, Docker, Caddy)

Phase 1 of AGENTS.md §11: the app runs on .13 in its own container on port 8792, behind Caddy at school.lab.audasmedia.com.au, with its own session login and GET /health. - Go service (Go 1.25, modernc SQLite, no cgo) with its own image. - SQLite schema per AGENTS.md §7: children, items, scans, notifications, session (internal/store/migrations/001_init.sql). - Separate session login (signed cookie, CSRF double-submit), not SSO. - HTMX server-rendered shell using the Family Home Lab tokens.css: canvas #f6f5f4, action blue #0075de, Inter, 8px grid, hairline borders, pill CTAs, dark mode, phone-friendly. - Fail loudly (FR-12): a missing or failed scan shows as an explicit warning or error banner, never as an empty day. - Dockerfile + docker-compose.yml (own container, own port 8792; uses network_mode bridge because .13 has no free default Docker address pool). - Caddy snippet for .35 in deploy/caddy/, deployment notes, and deploy/verify-phase1.sh. No school scan in this phase; the Compass login and fetch are Phase 2. Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-10-15 13:21:20 +11:00
parent 2fb223b993
commit 7b98e487c0
29 changed files with 2287 additions and 0 deletions
--- a/internal/web/server.go
+++ b/internal/web/server.go
@@ -0,0 +1,324 @@
+// Package web is the HTTP surface of the Compass/NHS service: /health, the
+// service's own session login, and the server-rendered HTMX dashboard
+// (AGENTS.md §5, §9).
+package web
+
+import (
+	"context"
+	"embed"
+	"encoding/json"
+	"fmt"
+	"html/template"
+	"io/fs"
+	"log/slog"
+	"net/http"
+	"strings"
+	"time"
+
+	"gitea.lab.audasmedia.com.au/sam/compass_teams_nhs/internal/auth"
+	"gitea.lab.audasmedia.com.au/sam/compass_teams_nhs/internal/config"
+	"gitea.lab.audasmedia.com.au/sam/compass_teams_nhs/internal/store"
+)
+
+//go:embed templates/*.html templates/partials/*.html
+var templateFS embed.FS
+
+//go:embed static
+var staticFS embed.FS
+
+// Server holds the dependencies for the HTTP handlers.
+type Server struct {
+	cfg   *config.Config
+	store *store.Store
+	auth  *auth.Manager
+	tmpl  *template.Template
+	log   *slog.Logger
+}
+
+// New builds a Server and parses the embedded templates.
+func New(cfg *config.Config, st *store.Store, am *auth.Manager, log *slog.Logger) (*Server, error) {
+	funcs := template.FuncMap{
+		"year":  func() int { return time.Now().Year() },
+		"clock": func() string { return time.Now().Format("15:04:05 MST") },
+	}
+	tmpl, err := template.New("").Funcs(funcs).ParseFS(templateFS,
+		"templates/*.html", "templates/partials/*.html")
+	if err != nil {
+		return nil, fmt.Errorf("parse templates: %w", err)
+	}
+	return &Server{cfg: cfg, store: st, auth: am, tmpl: tmpl, log: log}, nil
+}
+
+// Handler returns the fully wrapped HTTP handler.
+func (s *Server) Handler() http.Handler {
+	mux := http.NewServeMux()
+
+	mux.HandleFunc("GET /health", s.handleHealth)
+	mux.HandleFunc("GET /login", s.handleLoginPage)
+	mux.HandleFunc("POST /login", s.handleLoginSubmit)
+	mux.HandleFunc("POST /logout", s.handleLogout)
+	mux.HandleFunc("GET /{$}", s.requireAuth(s.handleDashboard))
+	mux.HandleFunc("GET /partials/scan-status", s.requireAuth(s.handleScanStatusPartial))
+
+	staticSub, err := fs.Sub(staticFS, "static")
+	if err != nil {
+		panic("web: embedded static dir missing: " + err.Error())
+	}
+	mux.Handle("GET /static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticSub))))
+
+	return s.recoverer(s.securityHeaders(s.requestLogger(mux)))
+}
+
+// ---------- middleware ----------
+
+type statusRecorder struct {
+	http.ResponseWriter
+	status int
+}
+
+func (r *statusRecorder) WriteHeader(code int) {
+	r.status = code
+	r.ResponseWriter.WriteHeader(code)
+}
+
+func (s *Server) requestLogger(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		start := time.Now()
+		rec := &statusRecorder{ResponseWriter: w, status: http.StatusOK}
+		next.ServeHTTP(rec, r)
+		s.log.Info("http",
+			"method", r.Method,
+			"path", r.URL.Path,
+			"status", rec.status,
+			"remote", r.RemoteAddr,
+			"duration", time.Since(start).String(),
+		)
+	})
+}
+
+func (s *Server) securityHeaders(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		h := w.Header()
+		h.Set("X-Content-Type-Options", "nosniff")
+		h.Set("X-Frame-Options", "DENY")
+		h.Set("Referrer-Policy", "same-origin")
+		h.Set("Content-Security-Policy",
+			"default-src 'self'; img-src 'self' data:; style-src 'self'; script-src 'self'; form-action 'self'; frame-ancestors 'none'")
+		next.ServeHTTP(w, r)
+	})
+}
+
+func (s *Server) recoverer(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		defer func() {
+			if rec := recover(); rec != nil {
+				s.log.Error("panic", "err", rec, "path", r.URL.Path)
+				http.Error(w, "internal server error", http.StatusInternalServerError)
+			}
+		}()
+		next.ServeHTTP(w, r)
+	})
+}
+
+func (s *Server) requireAuth(next http.HandlerFunc) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		if !s.auth.Authenticated(r) {
+			http.Redirect(w, r, "/login", http.StatusSeeOther)
+			return
+		}
+		next(w, r)
+	}
+}
+
+// ---------- handlers ----------
+
+type healthResponse struct {
+	Status   string         `json:"status"`
+	Service  string         `json:"service"`
+	Version  string         `json:"version"`
+	Database string         `json:"database"`
+	Scans    store.ScanStatus `json:"scans"`
+	Time     string         `json:"time"`
+}
+
+func (s *Server) handleHealth(w http.ResponseWriter, r *http.Request) {
+	resp := healthResponse{
+		Status:   "ok",
+		Service:  "compass-teams-nhs",
+		Version:  s.cfg.Version,
+		Database: "ok",
+		Time:     time.Now().UTC().Format(time.RFC3339),
+	}
+	code := http.StatusOK
+	if err := s.store.Ping(r.Context()); err != nil {
+		resp.Status = "error"
+		resp.Database = "error"
+		code = http.StatusServiceUnavailable
+	}
+	if st, err := s.store.ScanSummary(r.Context()); err == nil {
+		resp.Scans = st
+	}
+
+	w.Header().Set("Content-Type", "application/json; charset=utf-8")
+	w.WriteHeader(code)
+	_ = json.NewEncoder(w).Encode(resp)
+}
+
+type loginData struct {
+	CSRF     string
+	Error    string
+	Username string
+}
+
+func (s *Server) handleLoginPage(w http.ResponseWriter, r *http.Request) {
+	if s.auth.Authenticated(r) {
+		http.Redirect(w, r, "/", http.StatusSeeOther)
+		return
+	}
+	s.render(w, r, "login.html", loginData{CSRF: s.auth.EnsureCSRF(w, r)})
+}
+
+func (s *Server) handleLoginSubmit(w http.ResponseWriter, r *http.Request) {
+	if err := r.ParseForm(); err != nil {
+		http.Error(w, "bad request", http.StatusBadRequest)
+		return
+	}
+	username := strings.TrimSpace(r.PostFormValue("username"))
+
+	if !s.auth.CheckCSRF(r) {
+		s.log.Warn("login rejected: bad csrf token", "remote", r.RemoteAddr)
+		s.render(w, r, "login.html", loginData{
+			CSRF:     s.auth.EnsureCSRF(w, r),
+			Error:    "Session expired. Please try again.",
+			Username: username,
+		})
+		return
+	}
+
+	if !s.auth.CheckCredentials(username, r.PostFormValue("password")) {
+		s.log.Warn("login failed", "user", username, "remote", r.RemoteAddr)
+		w.WriteHeader(http.StatusUnauthorized)
+		s.render(w, r, "login.html", loginData{
+			CSRF:     s.auth.EnsureCSRF(w, r),
+			Error:    "Incorrect username or password.",
+			Username: username,
+		})
+		return
+	}
+
+	s.auth.Issue(w)
+	s.log.Info("login success", "user", username, "remote", r.RemoteAddr)
+	http.Redirect(w, r, "/", http.StatusSeeOther)
+}
+
+func (s *Server) handleLogout(w http.ResponseWriter, r *http.Request) {
+	if err := r.ParseForm(); err != nil {
+		http.Error(w, "bad request", http.StatusBadRequest)
+		return
+	}
+	s.auth.Clear(w)
+	http.Redirect(w, r, "/login", http.StatusSeeOther)
+}
+
+// scanStatusView is the fail-loudly view of scan health (FR-12). It is shared
+// by the dashboard and the HTMX partial.
+type scanStatusView struct {
+	store.ScanStatus
+	// Level is "none", "error", "ok" or "warn". The template never renders an
+	// empty day as "nothing due".
+	Level   string
+	Message string
+	LastAt  string
+}
+
+func (s *Server) scanStatus(ctx context.Context) scanStatusView {
+	st, err := s.store.ScanSummary(ctx)
+	if err != nil {
+		s.log.Error("scan summary", "err", err)
+		return scanStatusView{Level: "error", Message: "Could not read the scan log: " + err.Error()}
+	}
+	v := scanStatusView{ScanStatus: st}
+	if !st.EverRun {
+		v.Level = "warn"
+		v.Message = "NO SCAN HAS RUN YET — do not read this as “nothing due”."
+		return v
+	}
+	if st.Last != nil && !st.Last.OK {
+		v.Level = "error"
+		v.Message = "SCAN FAILED — the last scan did not complete, so due work is UNKNOWN."
+		v.LastAt = st.Last.StartedAt.Format("Mon 02 Jan 2006 15:04")
+		return v
+	}
+	v.Level = "ok"
+	v.Message = "Last scan completed."
+	if st.Last != nil {
+		v.LastAt = st.Last.StartedAt.Format("Mon 02 Jan 2006 15:04")
+	}
+	return v
+}
+
+type childView struct {
+	store.Child
+}
+
+type dashboardData struct {
+	Title    string
+	Username string
+	CSRF     string
+	Version  string
+	AppEnv   string
+	Children []childView
+	Scan     scanStatusView
+	ServerUp string
+	ErrMsg   string
+}
+
+var serverStarted = time.Now()
+
+func (s *Server) handleDashboard(w http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 3*time.Second)
+	defer cancel()
+
+	children, err := s.store.ListChildren(ctx)
+	if err != nil {
+		s.log.Error("list children", "err", err)
+	}
+	views := make([]childView, 0, len(children))
+	for _, c := range children {
+		views = append(views, childView{Child: c})
+	}
+
+	s.render(w, r, "dashboard.html", dashboardData{
+		Title:    "Dashboard",
+		Username: s.cfg.AdminUsername,
+		CSRF:     s.auth.EnsureCSRF(w, r),
+		Version:  s.cfg.Version,
+		AppEnv:   s.cfg.AppEnv,
+		Children: views,
+		Scan:     s.scanStatus(ctx),
+		ServerUp: time.Since(serverStarted).Round(time.Second).String(),
+		ErrMsg:   strings.TrimSpace(r.URL.Query().Get("err")),
+	})
+}
+
+func (s *Server) handleScanStatusPartial(w http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 2*time.Second)
+	defer cancel()
+	s.renderFragment(w, r, "scan-status.html", s.scanStatus(ctx))
+}
+
+func (s *Server) render(w http.ResponseWriter, _ *http.Request, name string, data any) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := s.tmpl.ExecuteTemplate(w, name, data); err != nil {
+		s.log.Error("render", "template", name, "err", err)
+		http.Error(w, "template error", http.StatusInternalServerError)
+	}
+}
+
+func (s *Server) renderFragment(w http.ResponseWriter, _ *http.Request, name string, data any) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := s.tmpl.ExecuteTemplate(w, name, data); err != nil {
+		s.log.Error("render fragment", "template", name, "err", err)
+		http.Error(w, "template error", http.StatusInternalServerError)
+	}
+}
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -0,0 +1,328 @@
+/* Compass / Teams — Phase 1 UI
+   Built on the Family Home Lab design tokens (tokens.css).
+   Rules: canvas-soft app background, white cards, hairlines, one action blue,
+   pill CTAs, 8px grid, touch targets >= 44px, dark mode from the tokens. */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { font-size: 16px; }
+
+body {
+  margin: 0;
+  background: var(--canvas-soft);
+  color: var(--ink-secondary);
+  font: var(--type-body-md);
+  -webkit-font-smoothing: antialiased;
+  min-height: 100dvh;
+}
+
+h1, h2, h3 { margin: 0; color: var(--ink); }
+a { color: var(--primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ---------- Login ---------- */
+
+.login-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  background:
+    radial-gradient(1200px 600px at 15% 0%, #2b3d93 0%, transparent 60%),
+    var(--secondary);
+}
+
+.login-band {
+  width: 100%;
+  max-width: 960px;
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: var(--space-xxl);
+  align-items: center;
+  padding: var(--space-xxl) 0;
+}
+
+.login-eyebrow {
+  margin: 0 0 var(--space-sm);
+  font: var(--type-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.login-headline {
+  margin: 0;
+  font: var(--type-display-1);
+  letter-spacing: -1.5px;
+  color: #ffffff;
+}
+
+.login-sub {
+  margin: var(--space-md) 0 0;
+  font: var(--type-body-md);
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.auth-card {
+  background: var(--surface);
+  border-radius: var(--rounded-lg);
+  box-shadow: var(--shadow-level-2);
+  padding: var(--space-xl);
+}
+
+.auth-card__title {
+  font: var(--type-heading-2);
+  margin-bottom: var(--space-lg);
+}
+
+.auth-form { display: grid; gap: var(--space-md); }
+
+.auth-error {
+  margin: 0 0 var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--sticker-red);
+  border-left-width: 3px;
+  border-radius: var(--rounded-sm);
+  color: var(--sticker-red);
+  background: color-mix(in srgb, var(--sticker-red) 8%, var(--surface));
+  font: var(--type-body-sm);
+}
+
+.field { display: grid; gap: var(--space-xs); }
+.field__label {
+  font: var(--type-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-muted);
+}
+
+.text-input {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 12px;
+  font: var(--type-body-md);
+  color: var(--ink);
+  background: var(--surface);
+  border: 1px solid #dddddd;
+  border-radius: var(--rounded-xs);
+}
+[data-theme="dark"] .text-input { border-color: var(--hairline); }
+.text-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: var(--shadow-level-1), 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+.login-foot {
+  font: var(--type-caption);
+  color: rgba(255, 255, 255, 0.55);
+}
+
+/* ---------- Buttons ---------- */
+
+.button-primary,
+.button-utility {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 10px 20px;
+  font: var(--type-button);
+  cursor: pointer;
+  transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
+}
+.button-primary {
+  border: 0;
+  border-radius: var(--rounded-full);
+  background: var(--primary);
+  color: var(--on-primary);
+}
+.button-primary:active { background: var(--primary-active); transform: scale(0.97); }
+.button-primary:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
+  outline-offset: 2px;
+}
+
+.button-utility {
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-md);
+  background: var(--surface);
+  color: var(--ink);
+  padding: 8px 14px;
+}
+.button-utility:hover { box-shadow: var(--shadow-level-1); }
+
+/* ---------- App shell ---------- */
+
+.app { display: flex; flex-direction: column; min-height: 100dvh; }
+
+.nav-bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--surface);
+  border-bottom: 1px solid var(--hairline);
+}
+.nav-bar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  color: var(--ink);
+  font: var(--type-title);
+}
+.nav-bar__brand:hover { text-decoration: none; }
+.nav-bar__mark {
+  width: 12px; height: 12px; border-radius: var(--rounded-full);
+  background: var(--primary);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+.nav-bar__right { display: flex; align-items: center; gap: var(--space-md); }
+.nav-bar__user { font: var(--type-body-sm); color: var(--ink-muted); }
+.nav-bar__logout { margin: 0; }
+
+.container {
+  width: 100%;
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: var(--space-xxl) var(--space-lg);
+  display: grid;
+  gap: var(--space-xxl);
+  flex: 1;
+}
+
+.page-head { display: grid; gap: var(--space-xs); }
+.heading-1 { font: var(--type-heading-1); letter-spacing: -0.8px; }
+.heading-2 { font: var(--type-heading-2); }
+.page-head__sub { margin: 0; color: var(--ink-muted); max-width: 62ch; }
+
+.section { display: grid; gap: var(--space-md); }
+.section__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+}
+
+.category-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxs);
+  padding: 4px 10px;
+  border-radius: var(--rounded-full);
+  background: var(--surface-2);
+  color: var(--ink-muted);
+  font: var(--type-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.dot { width: 7px; height: 7px; border-radius: var(--rounded-full); background: var(--ink-faint); }
+.dot--faint { background: var(--ink-faint); }
+
+/* ---------- Flash ---------- */
+
+.flash {
+  margin: 0;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--rounded-md);
+  border: 1px solid var(--hairline);
+  font: var(--type-body-sm);
+}
+.flash--error {
+  border-color: var(--sticker-red);
+  border-left-width: 3px;
+  color: var(--sticker-red);
+  background: color-mix(in srgb, var(--sticker-red) 8%, var(--surface));
+}
+
+/* ---------- Scan status (FR-12: fail loudly) ---------- */
+
+.scan {
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-md) var(--space-lg);
+  border-radius: var(--rounded-lg);
+  border: 1px solid var(--hairline);
+  border-left-width: 4px;
+  background: var(--surface);
+  box-shadow: var(--shadow-level-1);
+}
+.scan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
+.scan__pill { background: var(--surface-2); color: var(--ink-muted); }
+.scan__message { margin: 0; font: var(--type-body-md); color: var(--ink-secondary); }
+.scan__meta { margin: 0; font: var(--type-caption); color: var(--ink-muted); }
+
+.scan--ok { border-left-color: var(--sticker-green); }
+.scan--ok .scan__pill { background: color-mix(in srgb, var(--sticker-green) 16%, var(--surface)); color: #0f7a28; }
+.scan--warn { border-left-color: var(--sticker-orange); background: color-mix(in srgb, var(--sticker-orange) 5%, var(--surface)); }
+.scan--warn .scan__pill { background: color-mix(in srgb, var(--sticker-orange) 16%, var(--surface)); color: var(--sticker-orange-deep); }
+.scan--error { border-left-color: var(--sticker-red); background: color-mix(in srgb, var(--sticker-red) 6%, var(--surface)); }
+.scan--error .scan__pill { background: color-mix(in srgb, var(--sticker-red) 16%, var(--surface)); color: var(--sticker-red); }
+.scan--error .scan__message { color: var(--sticker-red); font-weight: 600; }
+
+/* ---------- Children ---------- */
+
+.child-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--space-md);
+}
+.child-card {
+  display: grid;
+  gap: var(--space-xxs);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-lg);
+  box-shadow: var(--shadow-level-1);
+}
+.child-card__name { margin: 0; font: var(--type-title); color: var(--ink); }
+.child-card__meta { margin: 0; font: var(--type-caption); color: var(--ink-muted); }
+.child-card__body { margin: var(--space-xs) 0 0; font: var(--type-body-sm); color: var(--ink-muted); }
+
+.empty-state {
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-xl);
+  text-align: center;
+  background: var(--surface);
+  border: 1px dashed var(--hairline);
+  border-radius: var(--rounded-lg);
+}
+.empty-state__title { margin: 0; font: var(--type-title); color: var(--ink); }
+.empty-state__body { margin: 0; font: var(--type-body-sm); color: var(--ink-muted); }
+
+/* ---------- Footer ---------- */
+
+.app-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--hairline);
+  background: var(--surface);
+  font: var(--type-caption);
+  color: var(--ink-muted);
+}
+.app-foot__sep { color: var(--ink-faint); }
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 760px) {
+  .login-band { grid-template-columns: 1fr; gap: var(--space-xl); text-align: left; }
+  .login-headline { font: var(--type-heading-1); letter-spacing: -0.8px; }
+  .container { padding: var(--space-lg) var(--space-md); gap: var(--space-xl); }
+  .nav-bar { padding: var(--space-sm) var(--space-md); }
+  .nav-bar__user { display: none; }
+  .section__head { flex-wrap: wrap; }
+}
--- a/internal/web/static/fonts/inter-400.woff2
+++ b/internal/web/static/fonts/inter-400.woff2
--- a/internal/web/static/fonts/inter-500.woff2
+++ b/internal/web/static/fonts/inter-500.woff2
--- a/internal/web/static/fonts/inter-600.woff2
+++ b/internal/web/static/fonts/inter-600.woff2
--- a/internal/web/static/fonts/inter-700.woff2
+++ b/internal/web/static/fonts/inter-700.woff2
--- a/internal/web/static/htmx.min.js
+++ b/internal/web/static/htmx.min.js
--- a/internal/web/static/theme.js
+++ b/internal/web/static/theme.js
@@ -0,0 +1,55 @@
+// Theme controller. The design tokens ship both palettes; nothing switches
+// between them unless this runs. It follows the OS preference by default and
+// remembers an explicit choice. Loaded with defer from /static/, so it is
+// allowed by the page's `script-src 'self'` policy (no inline script).
+(function () {
+  "use strict";
+  var KEY = "webrestrict.theme";
+  var root = document.documentElement;
+  var media = window.matchMedia("(prefers-color-scheme: dark)");
+  var stored = null;
+  try {
+    stored = window.localStorage.getItem(KEY);
+  } catch (e) {
+    stored = null;
+  }
+
+  function apply() {
+    var theme = stored || (media.matches ? "dark" : "light");
+    root.setAttribute("data-theme", theme);
+    var buttons = document.querySelectorAll("[data-theme-toggle]");
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].textContent = theme === "dark" ? "Light" : "Dark";
+      buttons[i].setAttribute(
+        "aria-label",
+        "Switch to " + (theme === "dark" ? "light" : "dark") + " theme"
+      );
+    }
+  }
+
+  document.addEventListener("click", function (event) {
+    var target = event.target && event.target.closest
+      ? event.target.closest("[data-theme-toggle]")
+      : null;
+    if (!target) {
+      return;
+    }
+    stored = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
+    try {
+      window.localStorage.setItem(KEY, stored);
+    } catch (e) {
+      /* private mode: the choice just does not persist */
+    }
+    apply();
+  });
+
+  if (media.addEventListener) {
+    media.addEventListener("change", function () {
+      if (!stored) {
+        apply();
+      }
+    });
+  }
+
+  apply();
+})();
--- a/internal/web/static/tokens.css
+++ b/internal/web/static/tokens.css
@@ -0,0 +1,110 @@
+/* ============================================================
+   Family Home Lab — Design Tokens
+   Source: DESIGN.md (Notion design language)
+   Only structural/semantic tokens here. All values map 1:1.
+   ============================================================ */
+
+/* Inter (@fontsource) — self-hosted substitute for NotionInter */
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-700.woff2") format("woff2"); }
+
+:root {
+  /* --- Surface --- */
+  --canvas-soft: #f6f5f4;
+  --surface: #ffffff;
+  --surface-2: #f2f2f1;
+  --hairline: #e6e6e6;
+
+  /* --- Text --- */
+  --ink: #000000;
+  --ink-secondary: #31302e;
+  --ink-muted: #615d59;
+  --ink-faint: #a39e98;
+
+  /* --- Structural accents --- */
+  --primary: #0075de;          /* the ONLY action colour */
+  --primary-active: #005bab;
+  --on-primary: #ffffff;
+  --secondary: #213183;        /* deep indigo — login band + greeting only */
+
+  /* --- Sticker palette (decorative only) --- */
+  --sticker-sky: #62aef0;      /* chat */
+  --sticker-purple: #d6b6f6;   /* image */
+  --sticker-pink: #ff64c8;     /* video */
+  --sticker-orange: #dd5b00;   /* audio */
+  --sticker-teal: #2a9d99;     /* docs */
+  --sticker-green: #1aae39;    /* status: online/saved */
+  --sticker-red: #d33a2b;     /* status: failed / error (ON_OFF.md decision) */
+  --sticker-purple-deep: #391c57; /* illustration only */
+  --sticker-orange-deep: #793400; /* illustration only */
+
+  /* --- Typography (Inter, self-hosted via @font-face) --- */
+  --font-family: "Inter", -apple-system, system-ui, "Segoe UI",
+    Helvetica, Arial, sans-serif;
+
+  /* Font-family is baked into each token below: the CSS `font` shorthand
+     resets font-family to the UA default (serif) unless a family is written,
+     and it cannot carry letter-spacing — so weights/sizes ship inline and the
+     family is appended per token. */
+  --type-display-1: 700 48px/1.05 var(--font-family);
+  --type-heading-1: 700 32px/1.1 var(--font-family);
+  --type-heading-2: 700 22px/1.27 var(--font-family);
+  --type-title: 600 17px/1.4 var(--font-family);
+  --type-body-md: 400 15px/1.5 var(--font-family);
+  --type-body-sm: 400 14px/1.4 var(--font-family);
+  --type-button: 500 15px/1.4 var(--font-family);
+  --type-caption: 400 13px/1.43 var(--font-family);
+  --type-eyebrow: 600 12px/1.33 var(--font-family);
+
+  /* --- Layout (base unit 8px) --- */
+  --space-xxs: 4px;
+  --space-xs: 8px;
+  --space-sm: 12px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 28px;
+  --space-xxl: 32px;
+
+  --container-max: 1200px;
+
+  /* --- Elevation --- */
+  --shadow-level-1: rgba(0, 0, 0, 0.01) 0 0.175px 1px,
+    rgba(0, 0, 0, 0.02) 0 0.8px 3px,
+    rgba(0, 0, 0, 0.027) 0 2px 8px,
+    rgba(0, 0, 0, 0.04) 0 4px 18px;
+  --shadow-level-2: rgba(0, 0, 0, 0.0122) 0 0.175px 1px,
+    rgba(0, 0, 0, 0.024) 0 0.8px 3px,
+    rgba(0, 0, 0, 0.032) 0 2px 8px,
+    rgba(0, 0, 0, 0.047) 0 4px 18px,
+    rgba(0, 0, 0, 0.05) 0 23px 52px;
+
+  /* --- Shapes --- */
+  --rounded-xs: 4px;
+  --rounded-sm: 5px;
+  --rounded-md: 8px;
+  --rounded-lg: 12px;
+  --rounded-full: 9999px;
+}
+
+/* Dark mode — flip the semantic tokens only (components use var(--…)). */
+[data-theme="dark"] {
+  --canvas-soft: #141518;
+  --surface: #1c1e22;
+  --surface-2: #24262c;
+  --hairline: #33363d;
+  --ink: #f5f6f7;
+  --ink-secondary: #dcdee2;
+  --ink-muted: #a9adb6;
+  --ink-faint: #727680;
+  --primary: #3d8be0;
+  --primary-active: #5d9ff0;
+  --on-primary: #ffffff;
+  --secondary: #10142a;
+  --shadow-level-1: rgba(0, 0, 0, 0.45) 0 1px 3px;
+  --shadow-level-2: rgba(0, 0, 0, 0.55) 0 5px 22px;
+}
+
+/* Numerals: enable OpenType lnum */
+html { font-feature-settings: "lnum" 1; }
--- a/internal/web/templates/dashboard.html
+++ b/internal/web/templates/dashboard.html
@@ -0,0 +1,78 @@
+{{define "dashboard.html"}}<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <title>{{.Title}} — Compass / Teams</title>
+  <link rel="stylesheet" href="/static/tokens.css">
+  <link rel="stylesheet" href="/static/app.css">
+  <script src="/static/htmx.min.js" defer></script>
+  <script src="/static/theme.js" defer></script>
+</head>
+<body class="app">
+  <nav class="nav-bar">
+    <a class="nav-bar__brand" href="/">
+      <span class="nav-bar__mark" aria-hidden="true"></span>
+      Compass / Teams
+    </a>
+    <div class="nav-bar__right">
+      <button class="button-utility" type="button" data-theme-toggle>Dark</button>
+      <span class="nav-bar__user">{{.Username}}</span>
+      <form method="post" action="/logout" class="nav-bar__logout">
+        <input type="hidden" name="csrf" value="{{.CSRF}}">
+        <button class="button-utility" type="submit">Sign out</button>
+      </form>
+    </div>
+  </nav>
+
+  <main class="container">
+    <header class="page-head">
+      <h1 class="heading-1">What is due</h1>
+      <p class="page-head__sub">Overdue work first. Compass for the schedule, Teams for homework.
+        This is Phase 1: the skeleton is live, the school scan is not connected yet.</p>
+    </header>
+
+    {{if .ErrMsg}}<p class="flash flash--error" role="alert">{{.ErrMsg}}</p>{{end}}
+
+    <div hx-get="/partials/scan-status" hx-trigger="every 60s" hx-swap="outerHTML">
+      {{template "scan-status.html" .Scan}}
+    </div>
+
+    <section class="section" aria-labelledby="children-title">
+      <div class="section__head">
+        <h2 id="children-title" class="heading-2">Children</h2>
+        <span class="category-pill"><span class="dot dot--faint"></span>{{len .Children}} on file</span>
+      </div>
+      {{if .Children}}
+        <ul class="child-list">
+          {{range .Children}}
+          <li class="child-card">
+            <p class="child-card__name">{{.Name}}</p>
+            <p class="child-card__meta">
+              {{if .Year}}Year {{.Year}}{{else}}Year not set{{end}}
+              {{if not .CompassID}}· Compass ID not set{{end}}
+            </p>
+            <p class="child-card__body">No items stored yet. The Compass scan arrives in Phase 2.</p>
+          </li>
+          {{end}}
+        </ul>
+      {{else}}
+        <div class="empty-state">
+          <p class="empty-state__title">No children on file</p>
+          <p class="empty-state__body">Harry and Finn are seeded on first start. If this is empty,
+            the database was not seeded.</p>
+        </div>
+      {{end}}
+    </section>
+  </main>
+
+  <footer class="app-foot">
+    <span>Compass / Teams · {{.Version}} · {{.AppEnv}}</span>
+    <span class="app-foot__sep">·</span>
+    <span>up {{.ServerUp}}</span>
+    <span class="app-foot__sep">·</span>
+    <span>{{year}} Family Home Lab</span>
+  </footer>
+</body>
+</html>{{end}}
--- a/internal/web/templates/login.html
+++ b/internal/web/templates/login.html
@@ -0,0 +1,41 @@
+{{define "login.html"}}<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
+  <title>Sign in — Compass / Teams</title>
+  <link rel="stylesheet" href="/static/tokens.css">
+  <link rel="stylesheet" href="/static/app.css">
+  <script src="/static/theme.js" defer></script>
+</head>
+<body class="login-page">
+  <main class="login-band">
+    <div class="login-band__inner">
+      <p class="login-eyebrow">Compass / Teams</p>
+      <h1 class="login-headline">Good to see you,<br>Sam.</h1>
+      <p class="login-sub">Sign in to see what Harry and Finn have due.</p>
+    </div>
+
+    <section class="auth-card" aria-labelledby="signin-title">
+      <h2 id="signin-title" class="auth-card__title">Sign in</h2>
+      {{if .Error}}<p class="auth-error" role="alert">{{.Error}}</p>{{end}}
+      <form method="post" action="/login" class="auth-form" autocomplete="on">
+        <input type="hidden" name="csrf" value="{{.CSRF}}">
+        <label class="field">
+          <span class="field__label">Username</span>
+          <input class="text-input" type="text" name="username" value="{{.Username}}"
+                 autocomplete="username" autocapitalize="none" spellcheck="false" required>
+        </label>
+        <label class="field">
+          <span class="field__label">Password</span>
+          <input class="text-input" type="password" name="password"
+                 autocomplete="current-password" required>
+        </label>
+        <button class="button-primary" type="submit">Sign in</button>
+      </form>
+    </section>
+  </main>
+  <footer class="login-foot">Family Home Lab · Compass / Teams</footer>
+</body>
+</html>{{end}}
--- a/internal/web/templates/partials/scan-status.html
+++ b/internal/web/templates/partials/scan-status.html
@@ -0,0 +1,19 @@
+{{define "scan-status.html"}}
+{{/* Fail-loudly scan banner (FR-12). A missing or failed scan is never shown as
+     "nothing due". */}}
+<section class="scan scan--{{.Level}}" aria-labelledby="scan-title">
+  <div class="scan__head">
+    <h2 id="scan-title" class="heading-2">Scan status</h2>
+    <span class="category-pill scan__pill">
+      {{if eq .Level "ok"}}healthy
+      {{else if eq .Level "error"}}failed
+      {{else if eq .Level "warn"}}never run
+      {{else}}unknown{{end}}
+    </span>
+  </div>
+  <p class="scan__message">{{.Message}}</p>
+  {{if .LastAt}}<p class="scan__meta">Last scan: {{.LastAt}}
+    {{if .Last}}· {{.Last.PagesFetched}} pages · {{.Last.ItemsFound}} items{{end}}</p>{{end}}
+  {{if gt .Failed 0}}<p class="scan__meta">{{.Failed}} failed scan(s) on record.</p>{{end}}
+</section>
+{{end}}