diff --git a/internal/server/http/hosts.go b/internal/server/http/hosts.go
new file mode 100644
index 0000000..d969e33
--- /dev/null
+++ b/internal/server/http/hosts.go
@@ -0,0 +1,101 @@
+package http
+
+import (
+	stdhttp "net/http"
+
+	"gitea.dcglab.co.uk/steve/restic-manager/internal/store"
+)
+
+// hostView is the JSON projection of a Host row. Same shape as the
+// store row, but with explicit time-strings so wire format is stable
+// across DB driver changes.
+type hostView struct {
+	ID                string  `json:"id"`
+	Name              string  `json:"name"`
+	OS                string  `json:"os"`
+	Arch              string  `json:"arch"`
+	AgentVersion      string  `json:"agent_version,omitempty"`
+	ResticVersion     string  `json:"restic_version,omitempty"`
+	ProtocolVersion   int     `json:"protocol_version"`
+	EnrolledAt        string  `json:"enrolled_at"`
+	LastSeenAt        *string `json:"last_seen_at,omitempty"`
+	Status            string  `json:"status"`
+	Tags              []string `json:"tags"`
+	CurrentJobID      *string `json:"current_job_id,omitempty"`
+	LastBackupAt      *string `json:"last_backup_at,omitempty"`
+	LastBackupStatus  *string `json:"last_backup_status,omitempty"`
+	RepoSizeBytes     int64   `json:"repo_size_bytes"`
+	SnapshotCount     int     `json:"snapshot_count"`
+	OpenAlertCount    int     `json:"open_alert_count"`
+}
+
+// handleListHosts returns the full fleet as JSON. Authenticated; the
+// shape mirrors what the dashboard renders, so external API consumers
+// see the same projection.
+func (s *Server) handleListHosts(w stdhttp.ResponseWriter, r *stdhttp.Request) {
+	if !s.authedUser(r) {
+		writeJSONError(w, stdhttp.StatusUnauthorized, "unauthorized", "")
+		return
+	}
+	hosts, err := s.deps.Store.ListHosts(r.Context())
+	if err != nil {
+		writeJSONError(w, stdhttp.StatusInternalServerError, "internal", "")
+		return
+	}
+	out := make([]hostView, 0, len(hosts))
+	for _, h := range hosts {
+		out = append(out, hostToView(h))
+	}
+	writeJSON(w, stdhttp.StatusOK, map[string]any{
+		"count": len(out),
+		"hosts": out,
+	})
+}
+
+// handleFleetSummary returns the dashboard tile aggregate.
+func (s *Server) handleFleetSummary(w stdhttp.ResponseWriter, r *stdhttp.Request) {
+	if !s.authedUser(r) {
+		writeJSONError(w, stdhttp.StatusUnauthorized, "unauthorized", "")
+		return
+	}
+	fs, err := s.deps.Store.FleetSummary(r.Context())
+	if err != nil {
+		writeJSONError(w, stdhttp.StatusInternalServerError, "internal", "")
+		return
+	}
+	writeJSON(w, stdhttp.StatusOK, fs)
+}
+
+// hostToView converts a store.Host to its JSON shape. Times become
+// RFC 3339 strings; nullable times are passed through as nil.
+func hostToView(h store.Host) hostView {
+	v := hostView{
+		ID:               h.ID,
+		Name:             h.Name,
+		OS:               h.OS,
+		Arch:             h.Arch,
+		AgentVersion:     h.AgentVersion,
+		ResticVersion:    h.ResticVersion,
+		ProtocolVersion:  h.ProtocolVersion,
+		EnrolledAt:       h.EnrolledAt.Format("2006-01-02T15:04:05.000000000Z"),
+		Status:           h.Status,
+		Tags:             h.Tags,
+		CurrentJobID:     h.CurrentJobID,
+		LastBackupStatus: h.LastBackupStatus,
+		RepoSizeBytes:    h.RepoSizeBytes,
+		SnapshotCount:    h.SnapshotCount,
+		OpenAlertCount:   h.OpenAlertCount,
+	}
+	if v.Tags == nil {
+		v.Tags = []string{}
+	}
+	if h.LastSeenAt != nil {
+		s := h.LastSeenAt.Format("2006-01-02T15:04:05.000000000Z")
+		v.LastSeenAt = &s
+	}
+	if h.LastBackupAt != nil {
+		s := h.LastBackupAt.Format("2006-01-02T15:04:05.000000000Z")
+		v.LastBackupAt = &s
+	}
+	return v
+}
diff --git a/internal/server/http/jobs.go b/internal/server/http/jobs.go
index ef956c2..db26054 100644
--- a/internal/server/http/jobs.go
+++ b/internal/server/http/jobs.go
@@ -1,6 +1,7 @@
 package http
 
 import (
+	"context"
 	"encoding/json"
 	stdhttp "net/http"
 	"time"
@@ -33,65 +34,76 @@ func (s *Server) handleRunNow(w stdhttp.ResponseWriter, r *stdhttp.Request) {
 		writeJSONError(w, stdhttp.StatusUnauthorized, "unauthorized", "")
 		return
 	}
-
 	hostID := chi.URLParam(r, "id")
 	if hostID == "" {
 		writeJSONError(w, stdhttp.StatusBadRequest, "missing_host_id", "")
 		return
 	}
-
 	var req runNowRequest
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		writeJSONError(w, stdhttp.StatusBadRequest, "invalid_json", err.Error())
 		return
 	}
-	if !validJobKind(req.Kind) {
-		writeJSONError(w, stdhttp.StatusBadRequest, "invalid_kind",
-			"kind must be one of backup|forget|prune|check|unlock")
+
+	res, status, code, msg := s.dispatchJob(r.Context(), user, hostID, req.Kind, req.Args)
+	if code != "" {
+		writeJSONError(w, status, code, msg)
 		return
 	}
+	writeJSON(w, stdhttp.StatusAccepted, res)
+}
 
-	host, err := s.deps.Store.GetHost(r.Context(), hostID)
+// dispatchJob is the common path for HTTP-driven job dispatch. It
+// validates the kind, checks the host is online, persists the job
+// row, and ships command.run over the WS. Returns:
+//   - res: the queued-job response (job_id + status)
+//   - status: HTTP status to return on failure (or 0 on success)
+//   - code, msg: error code/message for the wire (empty on success)
+//
+// JSON callers wrap with writeJSONError; HTML callers translate to
+// flash banner + redirect.
+func (s *Server) dispatchJob(ctx context.Context, user *store.User,
+	hostID string, kind api.JobKind, args []string,
+) (res runNowResponse, status int, code, msg string) {
+	if !validJobKind(kind) {
+		return res, stdhttp.StatusBadRequest, "invalid_kind",
+			"kind must be one of backup|forget|prune|check|unlock"
+	}
+	host, err := s.deps.Store.GetHost(ctx, hostID)
 	if err != nil {
-		writeJSONError(w, stdhttp.StatusNotFound, "host_not_found", "")
-		return
+		return res, stdhttp.StatusNotFound, "host_not_found", ""
 	}
-
 	if !s.deps.Hub.Connected(host.ID) {
-		writeJSONError(w, stdhttp.StatusServiceUnavailable, "host_offline",
-			"agent is not currently connected; try again when it reconnects")
-		return
+		return res, stdhttp.StatusServiceUnavailable, "host_offline",
+			"agent is not currently connected; try again when it reconnects"
 	}
 
 	jobID := ulid.Make().String()
 	now := time.Now().UTC()
-	if err := s.deps.Store.CreateJob(r.Context(), store.Job{
+	if err := s.deps.Store.CreateJob(ctx, store.Job{
 		ID:        jobID,
 		HostID:    host.ID,
-		Kind:      string(req.Kind),
+		Kind:      string(kind),
 		ActorKind: "user",
 		ActorID:   &user.ID,
 		CreatedAt: now,
 	}); err != nil {
-		writeJSONError(w, stdhttp.StatusInternalServerError, "internal", "")
-		return
+		return res, stdhttp.StatusInternalServerError, "internal", ""
 	}
 
 	env, err := api.Marshal(api.MsgCommandRun, jobID, api.CommandRunPayload{
 		JobID: jobID,
-		Kind:  req.Kind,
-		Args:  req.Args,
+		Kind:  kind,
+		Args:  args,
 	})
 	if err != nil {
-		writeJSONError(w, stdhttp.StatusInternalServerError, "internal", "")
-		return
+		return res, stdhttp.StatusInternalServerError, "internal", ""
 	}
-	if err := s.deps.Hub.Send(r.Context(), host.ID, env); err != nil {
-		writeJSONError(w, stdhttp.StatusServiceUnavailable, "host_offline", err.Error())
-		return
+	if err := s.deps.Hub.Send(ctx, host.ID, env); err != nil {
+		return res, stdhttp.StatusServiceUnavailable, "host_offline", err.Error()
 	}
 
-	_ = s.deps.Store.AppendAudit(r.Context(), store.AuditEntry{
+	_ = s.deps.Store.AppendAudit(ctx, store.AuditEntry{
 		ID:         ulid.Make().String(),
 		UserID:     &user.ID,
 		Actor:      "user",
@@ -100,11 +112,7 @@ func (s *Server) handleRunNow(w stdhttp.ResponseWriter, r *stdhttp.Request) {
 		TargetID:   &jobID,
 		TS:         now,
 	})
-
-	writeJSON(w, stdhttp.StatusAccepted, runNowResponse{
-		JobID:  jobID,
-		Status: "queued",
-	})
+	return runNowResponse{JobID: jobID, Status: "queued"}, 0, "", ""
 }
 
 // requireUser resolves the session cookie to a user row. Stub of the
diff --git a/internal/server/http/server.go b/internal/server/http/server.go
index 2599945..92e7ee6 100644
--- a/internal/server/http/server.go
+++ b/internal/server/http/server.go
@@ -88,6 +88,10 @@ func (s *Server) routes(r chi.Router) {
 		// host page can call it; for now just the create endpoint.
 		r.Post("/enrollment-tokens", s.handleCreateEnrollmentToken)
 
+		// Fleet read endpoints — back the dashboard.
+		r.Get("/hosts", s.handleListHosts)
+		r.Get("/fleet/summary", s.handleFleetSummary)
+
 		// Run-now: dispatch a job to a host's agent.
 		r.Post("/hosts/{id}/jobs", s.handleRunNow)
 
@@ -127,6 +131,8 @@ func (s *Server) routes(r chi.Router) {
 		r.Get("/login", s.handleUILoginGet)
 		r.Post("/login", s.handleUILoginPost)
 		r.Post("/logout", s.handleUILogoutPost)
+		// HTMX action endpoint for "Run now" buttons on the dashboard.
+		r.Post("/hosts/{id}/run-backup", s.handleUIRunBackup)
 	}
 }
 
diff --git a/internal/server/http/ui_handlers.go b/internal/server/http/ui_handlers.go
index 40cc729..760c9cd 100644
--- a/internal/server/http/ui_handlers.go
+++ b/internal/server/http/ui_handlers.go
@@ -6,6 +6,9 @@ import (
 	"log/slog"
 	stdhttp "net/http"
 
+	"github.com/go-chi/chi/v5"
+
+	"gitea.dcglab.co.uk/steve/restic-manager/internal/api"
 	"gitea.dcglab.co.uk/steve/restic-manager/internal/auth"
 	"gitea.dcglab.co.uk/steve/restic-manager/internal/server/ui"
 	"gitea.dcglab.co.uk/steve/restic-manager/internal/store"
@@ -91,6 +94,13 @@ func (s *Server) version() string {
 
 // ----- handlers -------------------------------------------------------
 
+// dashboardPage is the data the dashboard template renders against.
+type dashboardPage struct {
+	Hosts     []store.Host
+	HostCount int
+	Summary   store.FleetSummary
+}
+
 // handleUIDashboard is the root page. Auth-gated; falls through to
 // /login if there is no session.
 func (s *Server) handleUIDashboard(w stdhttp.ResponseWriter, r *stdhttp.Request) {
@@ -98,13 +108,76 @@ func (s *Server) handleUIDashboard(w stdhttp.ResponseWriter, r *stdhttp.Request)
 	if u == nil {
 		return
 	}
+
+	hosts, err := s.deps.Store.ListHosts(r.Context())
+	if err != nil {
+		slog.Error("ui dashboard: list hosts", "err", err)
+		stdhttp.Error(w, "internal", stdhttp.StatusInternalServerError)
+		return
+	}
+	summary, err := s.deps.Store.FleetSummary(r.Context())
+	if err != nil {
+		slog.Error("ui dashboard: fleet summary", "err", err)
+		stdhttp.Error(w, "internal", stdhttp.StatusInternalServerError)
+		return
+	}
+
 	view := s.baseView(u, "dashboard")
+	view.OpenAlerts = summary.OpenAlerts
+	view.Page = dashboardPage{
+		Hosts:     hosts,
+		HostCount: len(hosts),
+		Summary:   summary,
+	}
 	if err := s.deps.UI.Render(w, "dashboard", view); err != nil {
 		slog.Error("ui: render dashboard", "err", err)
 		stdhttp.Error(w, "internal", stdhttp.StatusInternalServerError)
 	}
 }
 
+// handleUIRunBackup is the form-submit twin of POST /api/hosts/{id}/jobs
+// that the dashboard's "Run now" buttons call via hx-post. Returns
+// 204 on success — HTMX swap=none means "did the thing, no DOM
+// change needed." Failures return text in the body so HTMX's
+// response-header inspection surfaces it.
+func (s *Server) handleUIRunBackup(w stdhttp.ResponseWriter, r *stdhttp.Request) {
+	u := s.requireUIUser(w, r)
+	if u == nil {
+		return
+	}
+	hostID := chi.URLParam(r, "id")
+	if hostID == "" {
+		stdhttp.Error(w, "missing host id", stdhttp.StatusBadRequest)
+		return
+	}
+	storeUser, _, err := s.userByID(r, u.ID)
+	if err != nil {
+		stdhttp.Error(w, "internal", stdhttp.StatusInternalServerError)
+		return
+	}
+	_, status, code, msg := s.dispatchJob(r.Context(), storeUser, hostID, api.JobBackup, nil)
+	if code != "" {
+		stdhttp.Error(w, msg, status)
+		return
+	}
+	w.WriteHeader(stdhttp.StatusNoContent)
+}
+
+// userByID fetches the full store.User the UI session represents.
+// Returns the user, ok-flag, error. Used by handlers that need the
+// store-side row (e.g. for audit_log.user_id) rather than just the
+// projected ui.User.
+func (s *Server) userByID(r *stdhttp.Request, id string) (*store.User, bool, error) {
+	u, err := s.deps.Store.GetUserByID(r.Context(), id)
+	if err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			return nil, false, nil
+		}
+		return nil, false, err
+	}
+	return u, true, nil
+}
+
 // handleUILoginGet renders the login form. If the user is already
 // signed in we redirect them home — login is for the unauthenticated.
 func (s *Server) handleUILoginGet(w stdhttp.ResponseWriter, r *stdhttp.Request) {
diff --git a/internal/server/ui/funcs.go b/internal/server/ui/funcs.go
new file mode 100644
index 0000000..237f998
--- /dev/null
+++ b/internal/server/ui/funcs.go
@@ -0,0 +1,134 @@
+package ui
+
+import (
+	"fmt"
+	"html/template"
+	"strconv"
+	"strings"
+	"time"
+)
+
+// funcMap returns the template functions every page can call.
+// Kept small on purpose: anything fancier belongs in the handler,
+// which can pre-compute and pass primitives into the view.
+func funcMap() template.FuncMap {
+	return template.FuncMap{
+		"bytes":   formatBytes,
+		"relTime": formatRelTime,
+		"comma":   formatComma,
+		"deref":   derefStr,
+		"timeNotZero": func(t *time.Time) bool { return t != nil && !t.IsZero() },
+	}
+}
+
+// formatBytes renders a byte count as a short human string —
+// "412 GB", "3.7 TB", "8.4 GB". Single decimal place for sub-1000
+// values, none above. Returns "—" for zero so the dashboard's
+// "never run" rows read clean.
+func formatBytes(n int64) template.HTML {
+	if n == 0 {
+		return template.HTML(`<span class="text-ink-fade">—</span>`)
+	}
+	const (
+		kb = 1000
+		mb = 1000 * kb
+		gb = 1000 * mb
+		tb = 1000 * gb
+	)
+	var (
+		val  float64
+		unit string
+	)
+	switch {
+	case n >= tb:
+		val, unit = float64(n)/float64(tb), "TB"
+	case n >= gb:
+		val, unit = float64(n)/float64(gb), "GB"
+	case n >= mb:
+		val, unit = float64(n)/float64(mb), "MB"
+	case n >= kb:
+		val, unit = float64(n)/float64(kb), "kB"
+	default:
+		return template.HTML(fmt.Sprintf(`%d <span class="text-ink-mute text-[11px]">B</span>`, n))
+	}
+	num := strconv.FormatFloat(val, 'f', -1, 64)
+	if val < 100 && !strings.Contains(num, ".") {
+		num += ".0"
+	} else if val < 100 && strings.Contains(num, ".") {
+		// One decimal max, e.g. "3.7" not "3.74".
+		idx := strings.Index(num, ".")
+		if len(num) > idx+2 {
+			num = num[:idx+2]
+		}
+	} else {
+		// Above 100, no decimals — "412" not "412.4".
+		if idx := strings.Index(num, "."); idx > 0 {
+			num = num[:idx]
+		}
+	}
+	return template.HTML(fmt.Sprintf(`%s <span class="text-ink-mute text-[11px]">%s</span>`, num, unit))
+}
+
+// formatRelTime renders a *time.Time as a short relative string like
+// "3m ago" / "2d ago" / "5w ago". Future times render as "in Xs".
+// Nil pointer returns "—".
+func formatRelTime(t *time.Time) string {
+	if t == nil || t.IsZero() {
+		return "—"
+	}
+	d := time.Since(*t)
+	suffix := "ago"
+	if d < 0 {
+		d = -d
+		suffix = "from now"
+	}
+	switch {
+	case d < time.Minute:
+		return fmt.Sprintf("%ds %s", int(d.Seconds()), suffix)
+	case d < time.Hour:
+		return fmt.Sprintf("%dm %s", int(d.Minutes()), suffix)
+	case d < 24*time.Hour:
+		return fmt.Sprintf("%dh %s", int(d.Hours()), suffix)
+	case d < 7*24*time.Hour:
+		return fmt.Sprintf("%dd %s", int(d.Hours()/24), suffix)
+	default:
+		return fmt.Sprintf("%dw %s", int(d.Hours()/(24*7)), suffix)
+	}
+}
+
+// formatComma renders 1847 as "1,847". Used for snapshot counts and
+// any other count that benefits from grouping at this scale.
+func formatComma(n int) string {
+	s := strconv.Itoa(n)
+	if n < 1000 && n > -1000 {
+		return s
+	}
+	// Hand-rolled grouping; Go has no builtin and we don't want a
+	// dep for this. Negative numbers handled by stripping the sign,
+	// grouping, then putting it back.
+	neg := false
+	if s[0] == '-' {
+		neg = true
+		s = s[1:]
+	}
+	var b strings.Builder
+	for i, c := range s {
+		if i > 0 && (len(s)-i)%3 == 0 {
+			b.WriteByte(',')
+		}
+		b.WriteRune(c)
+	}
+	if neg {
+		return "-" + b.String()
+	}
+	return b.String()
+}
+
+// derefStr returns the string a pointer points to, or "" if nil.
+// Avoids "<nil>" appearing in templates that hit a missing FK.
+func derefStr(p *string) string {
+	if p == nil {
+		return ""
+	}
+	return *p
+}
diff --git a/internal/server/ui/ui.go b/internal/server/ui/ui.go
index b17bced..b4fe62b 100644
--- a/internal/server/ui/ui.go
+++ b/internal/server/ui/ui.go
@@ -88,6 +88,7 @@ func New() (*Renderer, error) {
 		"templates/layouts/base.html",
 		"templates/layouts/chromeless.html",
 		"templates/partials/nav.html",
+		"templates/partials/host_row.html",
 	}
 
 	pageEntries, err := fs.Glob(web.FS, "templates/pages/*.html")
@@ -101,7 +102,8 @@ func New() (*Renderer, error) {
 	r := &Renderer{pages: make(map[string]*template.Template, len(pageEntries))}
 	for _, p := range pageEntries {
 		base := strings.TrimSuffix(path.Base(p), ".html")
-		t, err := template.New(base).ParseFS(web.FS, append(append([]string{}, commonPaths...), p)...)
+		t, err := template.New(base).Funcs(funcMap()).
+			ParseFS(web.FS, append(append([]string{}, commonPaths...), p)...)
 		if err != nil {
 			return nil, fmt.Errorf("ui: parse %s: %w", p, err)
 		}
diff --git a/internal/store/fleet.go b/internal/store/fleet.go
new file mode 100644
index 0000000..95307c4
--- /dev/null
+++ b/internal/store/fleet.go
@@ -0,0 +1,78 @@
+package store
+
+import (
+	"context"
+	"fmt"
+	"time"
+)
+
+// FleetSummary is the aggregated view that powers the dashboard's
+// summary tiles. All numbers are point-in-time snapshots; the
+// caller polls.
+type FleetSummary struct {
+	TotalHosts    int
+	HostsOnline   int
+	HostsDegraded int
+	HostsOffline  int
+
+	RepoBytesTotal int64
+	SnapshotsTotal int
+	OpenAlerts     int
+
+	// Last-24h job rollup. JobsTotal includes every status; the
+	// breakdown sums to it (modulo any in-flight queued/running).
+	JobsLast24h          int
+	JobsLast24hSucceeded int
+	JobsLast24hFailed    int
+	JobsLast24hCancelled int
+}
+
+// FleetSummary aggregates host + job stats in two queries. Cheap on
+// SQLite at Phase 1 scale (12 hosts, a few hundred jobs/day) — no
+// caching layer; the tile is regenerated on every dashboard render.
+func (s *Store) FleetSummary(ctx context.Context) (FleetSummary, error) {
+	var fs FleetSummary
+
+	row := s.db.QueryRowContext(ctx, `
+		SELECT
+		  COUNT(*),
+		  COALESCE(SUM(CASE WHEN status = 'online'   THEN 1 ELSE 0 END), 0),
+		  COALESCE(SUM(CASE WHEN status = 'degraded' THEN 1 ELSE 0 END), 0),
+		  COALESCE(SUM(CASE WHEN status = 'offline'  THEN 1 ELSE 0 END), 0),
+		  COALESCE(SUM(repo_size_bytes), 0),
+		  COALESCE(SUM(snapshot_count), 0),
+		  COALESCE(SUM(open_alert_count), 0)
+		FROM hosts`)
+	if err := row.Scan(
+		&fs.TotalHosts, &fs.HostsOnline, &fs.HostsDegraded, &fs.HostsOffline,
+		&fs.RepoBytesTotal, &fs.SnapshotsTotal, &fs.OpenAlerts,
+	); err != nil {
+		return FleetSummary{}, fmt.Errorf("store: fleet summary hosts: %w", err)
+	}
+
+	cutoff := time.Now().Add(-24 * time.Hour).UTC().Format(time.RFC3339Nano)
+	rows, err := s.db.QueryContext(ctx,
+		`SELECT status, COUNT(*) FROM jobs WHERE created_at > ? GROUP BY status`,
+		cutoff)
+	if err != nil {
+		return FleetSummary{}, fmt.Errorf("store: fleet summary jobs: %w", err)
+	}
+	defer rows.Close()
+	for rows.Next() {
+		var status string
+		var n int
+		if err := rows.Scan(&status, &n); err != nil {
+			return FleetSummary{}, fmt.Errorf("store: fleet summary scan: %w", err)
+		}
+		fs.JobsLast24h += n
+		switch status {
+		case "succeeded":
+			fs.JobsLast24hSucceeded = n
+		case "failed":
+			fs.JobsLast24hFailed = n
+		case "cancelled":
+			fs.JobsLast24hCancelled = n
+		}
+	}
+	return fs, rows.Err()
+}
diff --git a/tasks.md b/tasks.md
index 45b6e8e..360a3d8 100644
--- a/tasks.md
+++ b/tasks.md
@@ -56,7 +56,7 @@ Sizes: **S** = under a day, **M** = 1–3 days, **L** = 3–7 days.
 ### UI (HTMX + Tailwind)
 
 - [x] **P1-23** (M) Base layout, login page, session-aware nav
-- [ ] **P1-24** (M) Dashboard: host cards (status dot, last backup, repo size)
+- [x] **P1-24** (M) Dashboard: fleet summary tiles + host table (status dot + row accent + os/arch + last backup + repo size + snapshots + alerts + tags + run-now). Backed by `GET /api/hosts` + `GET /api/fleet/summary` (JSON) and a server-rendered HTML view. Empty state hands the operator the install command. HTMX `Run now` button posts to `/hosts/{id}/run-backup`.
 - [ ] **P1-25** (M) Host detail page: snapshots tab + run-now button
 - [ ] **P1-26** (M) Live job log viewer (WS-driven, auto-scroll, cancel button)
 - [ ] **P1-27** (M) "Add host" flow: form takes hostname + repo URL/username/password, mints token (TTL 1h), shows the operator a copy-friendly install command **and** a one-click "download preconfigured installer" — a `install-<hostname>.sh` with `RM_SERVER` + `RM_TOKEN` already templated in (cf. UrBackup Internet-mode push installer). Encrypted repo creds ride on the token row and get pushed to the agent on first WS connect (see secrets/keyring task).
diff --git a/web/static/css/styles.css b/web/static/css/styles.css
index 5610986..e16a245 100644
--- a/web/static/css/styles.css
+++ b/web/static/css/styles.css
@@ -1,3 +1,3 @@
 *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
 
-/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,ui-monospace,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:root{--bg:oklch(0.17 0.006 250);--panel:oklch(0.20 0.007 250);--panel-hi:oklch(0.23 0.008 250);--line:oklch(0.27 0.010 250);--line-soft:oklch(0.23 0.008 250);--ink:oklch(0.96 0.005 250);--ink-mid:oklch(0.78 0.005 250);--ink-mute:oklch(0.58 0.006 250);--ink-fade:oklch(0.42 0.006 250);--ok:oklch(0.78 0.14 155);--warn:oklch(0.82 0.13 80);--bad:oklch(0.70 0.20 25);--off:oklch(0.50 0.005 250);--accent:oklch(0.82 0.12 195)}body,html{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}body{font-feature-settings:"cv11","ss01","ss03"}::-moz-selection{background:color-mix(in oklch,var(--accent),transparent 70%)}::selection{background:color-mix(in oklch,var(--accent),transparent 70%)}.mono{font-family:JetBrains Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums}.hairline{box-shadow:inset 0 -1px 0 var(--line-soft)}@keyframes rm-pulse{0%,to{box-shadow:0 0 0 3px color-mix(in oklch,var(--accent),transparent 80%)}50%{box-shadow:0 0 0 6px color-mix(in oklch,var(--accent),transparent 92%)}}.btn{align-items:center;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--ink-mid);cursor:pointer;display:inline-flex;font-size:12px;font-weight:500;gap:6px;padding:6px 11px;text-decoration:none;transition:all .12s ease}.btn:hover{background:var(--panel-hi);color:var(--ink)}.btn:disabled,.btn[disabled]{cursor:not-allowed;opacity:.4;pointer-events:none}.btn-primary{background:var(--accent);border-color:var(--accent);color:oklch(.18 .01 195)}.btn-primary:hover{filter:brightness(1.08)}.btn-ghost,.btn-ghost:hover{border-color:transparent}.btn-ghost:hover{background:var(--panel-hi)}.btn-lg{font-size:13px;padding:9px 14px}.btn-block{justify-content:center;width:100%}.nav-tab{border-bottom:2px solid transparent;color:var(--ink-mute);cursor:pointer;font-size:13px;margin-right:28px;padding:18px 0;text-decoration:none}.nav-tab.active{border-color:var(--accent)}.nav-tab.active,.nav-tab:hover,.sub-tab.active{color:var(--ink)}.sub-tab.active{border-color:var(--ink)}.field-label{color:var(--ink-mid);display:block;font-size:12px;margin-bottom:6px}.field{background:var(--bg);border:1px solid var(--line-soft);border-radius:5px;color:var(--ink);font-family:inherit;font-size:13px;outline:none;padding:9px 12px;transition:border-color .12s ease;width:100%}.field:focus{border-color:var(--accent)}.field.invalid{border-color:color-mix(in oklch,var(--bad),transparent 50%)}.field.mono{font-family:JetBrains Mono,monospace;font-size:12px}.field.with-prefix{padding-left:64px}.host-row.head{color:var(--ink-fade);font-size:11px;letter-spacing:.08em;padding-bottom:10px;padding-top:10px;text-transform:uppercase}.progress-fill.bad{background:var(--bad)}.snippet pre .var{color:var(--accent)}.empty-state{background:radial-gradient(ellipse at top,color-mix(in oklch,var(--accent),transparent 95%),transparent 60%),var(--panel);border:1px dashed var(--line);border-radius:8px;padding:60px 40px;text-align:center}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-3\.5{margin-bottom:.875rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-7{margin-bottom:1.75rem}.ml-1\.5{margin-left:.375rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.min-h-screen{min-height:100vh}.w-\[360px\]{width:360px}.max-w-\[1280px\]{max-width:1280px}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-5{gap:1.25rem}.text-pretty{text-wrap:pretty}.rounded-\[5px\]{border-radius:5px}.border{border-width:1px}.border-t{border-top-width:1px}.border-line-soft{border-color:oklch(.23 .008 250)}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:.75rem}.pt-14{padding-top:3.5rem}.pt-5{padding-top:1.25rem}.text-center{text-align:center}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.leading-\[1\.65\]{line-height:1.65}.tracking-\[-0\.005em\]{letter-spacing:-.005em}.tracking-\[0\.01em\]{letter-spacing:.01em}.tracking-\[0\.02em\]{letter-spacing:.02em}.text-bad{color:oklch(.7 .2 25)}.text-ink{color:oklch(.96 .005 250)}.text-ink-fade{color:oklch(.42 .006 250)}.text-ink-mid{color:oklch(.78 .005 250)}.text-ink-mute{color:oklch(.58 .006 250)}.no-underline{text-decoration-line:none}
\ No newline at end of file
+/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,ui-monospace,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:root{--bg:oklch(0.17 0.006 250);--panel:oklch(0.20 0.007 250);--panel-hi:oklch(0.23 0.008 250);--line:oklch(0.27 0.010 250);--line-soft:oklch(0.23 0.008 250);--ink:oklch(0.96 0.005 250);--ink-mid:oklch(0.78 0.005 250);--ink-mute:oklch(0.58 0.006 250);--ink-fade:oklch(0.42 0.006 250);--ok:oklch(0.78 0.14 155);--warn:oklch(0.82 0.13 80);--bad:oklch(0.70 0.20 25);--off:oklch(0.50 0.005 250);--accent:oklch(0.82 0.12 195)}body,html{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}body{font-feature-settings:"cv11","ss01","ss03"}::-moz-selection{background:color-mix(in oklch,var(--accent),transparent 70%)}::selection{background:color-mix(in oklch,var(--accent),transparent 70%)}.mono{font-family:JetBrains Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums}.panel{background:var(--panel);border:1px solid var(--line-soft)}.hairline{box-shadow:inset 0 -1px 0 var(--line-soft)}.dot{border-radius:9999px;display:inline-block;height:7px;width:7px}.dot-online{background:var(--ok);box-shadow:0 0 0 3px color-mix(in oklch,var(--ok),transparent 80%)}.dot-degraded{background:var(--warn);box-shadow:0 0 0 3px color-mix(in oklch,var(--warn),transparent 80%)}.dot-offline{background:var(--off)}.dot-failed{background:var(--bad);box-shadow:0 0 0 3px color-mix(in oklch,var(--bad),transparent 80%)}.pulse{animation:rm-pulse 2.4s ease-in-out infinite}@keyframes rm-pulse{0%,to{box-shadow:0 0 0 3px color-mix(in oklch,var(--accent),transparent 80%)}50%{box-shadow:0 0 0 6px color-mix(in oklch,var(--accent),transparent 92%)}}.btn{align-items:center;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--ink-mid);cursor:pointer;display:inline-flex;font-size:12px;font-weight:500;gap:6px;padding:6px 11px;text-decoration:none;transition:all .12s ease}.btn:hover{background:var(--panel-hi);color:var(--ink)}.btn:disabled,.btn[disabled]{cursor:not-allowed;opacity:.4;pointer-events:none}.btn-primary{background:var(--accent);border-color:var(--accent);color:oklch(.18 .01 195)}.btn-primary:hover{filter:brightness(1.08)}.btn-ghost,.btn-ghost:hover{border-color:transparent}.btn-ghost:hover{background:var(--panel-hi)}.btn-lg{font-size:13px;padding:9px 14px}.btn-block{justify-content:center;width:100%}.nav-tab{border-bottom:2px solid transparent;color:var(--ink-mute);cursor:pointer;font-size:13px;margin-right:28px;padding:18px 0;text-decoration:none}.nav-tab.active{border-color:var(--accent)}.nav-tab.active,.nav-tab:hover,.sub-tab.active{color:var(--ink)}.sub-tab.active{border-color:var(--ink)}.tag{align-items:center;border:1px solid var(--line);border-radius:3px;display:inline-flex;font-size:11px;gap:5px;letter-spacing:.01em;line-height:1;padding:4px 7px}.field-label,.tag{color:var(--ink-mid)}.field-label{display:block;font-size:12px;margin-bottom:6px}.field{background:var(--bg);border:1px solid var(--line-soft);border-radius:5px;color:var(--ink);font-family:inherit;font-size:13px;outline:none;padding:9px 12px;transition:border-color .12s ease;width:100%}.field:focus{border-color:var(--accent)}.field.invalid{border-color:color-mix(in oklch,var(--bad),transparent 50%)}.field.mono{font-family:JetBrains Mono,monospace;font-size:12px}.field.with-prefix{padding-left:64px}.host-row{align-items:center;border-left:3px solid transparent;-moz-column-gap:18px;column-gap:18px;display:grid;font-size:13px;grid-template-columns:24px 1.4fr .95fr 1.5fr .75fr .7fr .7fr 1.1fr 92px;padding:11px 16px}.host-row.head{color:var(--ink-fade);font-size:11px;letter-spacing:.08em;padding-bottom:10px;padding-top:10px;text-transform:uppercase}.host-row.degraded{border-left-color:color-mix(in oklch,var(--warn),transparent 50%)}.host-row.failed{border-left-color:color-mix(in oklch,var(--bad),transparent 50%)}.host-row.offline{border-left-color:color-mix(in oklch,var(--off),transparent 70%)}.host-row:hover{background:var(--panel-hi)}.progress-fill.bad{background:var(--bad)}.snippet pre .var{color:var(--accent)}.empty-state{background:radial-gradient(ellipse at top,color-mix(in oklch,var(--accent),transparent 95%),transparent 60%),var(--panel);border:1px dashed var(--line);border-radius:8px;padding:60px 40px;text-align:center}.col-span-3{grid-column:span 3/span 3}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-3\.5{margin-bottom:.875rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-7{margin-bottom:1.75rem}.ml-1\.5{margin-left:.375rem}.mt-2\.5{margin-top:.625rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.min-h-screen{min-height:100vh}.w-\[360px\]{width:360px}.max-w-\[1280px\]{max-width:1280px}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.text-pretty{text-wrap:pretty}.rounded-\[5px\]{border-radius:5px}.rounded-\[7px\]{border-radius:7px}.border{border-width:1px}.border-t{border-top-width:1px}.border-line-soft{border-color:oklch(.23 .008 250)}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-4{padding-bottom:1rem;padding-top:1rem}.pb-2{padding-bottom:.5rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pt-14{padding-top:3.5rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-7{padding-top:1.75rem}.text-center{text-align:center}.text-right{text-align:right}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[28px\]{font-size:28px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[1\.65\]{line-height:1.65}.tracking-\[-0\.005em\]{letter-spacing:-.005em}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-\[0\.01em\]{letter-spacing:.01em}.tracking-\[0\.02em\]{letter-spacing:.02em}.tracking-\[0\.08em\]{letter-spacing:.08em}.text-accent{color:oklch(.82 .12 195)}.text-bad{color:oklch(.7 .2 25)}.text-ink{color:oklch(.96 .005 250)}.text-ink-fade{color:oklch(.42 .006 250)}.text-ink-mid{color:oklch(.78 .005 250)}.text-ink-mute{color:oklch(.58 .006 250)}.text-ok{color:oklch(.78 .14 155)}.text-warn{color:oklch(.82 .13 80)}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.decoration-line{text-decoration-color:oklch(.27 .01 250)}.underline-offset-4{text-underline-offset:4px}
\ No newline at end of file
diff --git a/web/styles/input.css b/web/styles/input.css
index c25226d..cbf4ef3 100644
--- a/web/styles/input.css
+++ b/web/styles/input.css
@@ -161,6 +161,7 @@
   .host-row {
     display: grid; align-items: center;
     grid-template-columns: 24px 1.4fr 0.95fr 1.5fr 0.75fr 0.7fr 0.7fr 1.1fr 92px;
+    column-gap: 18px;
     padding: 11px 16px; font-size: 13px;
     border-left: 3px solid transparent;
   }
diff --git a/web/templates/layouts/base.html b/web/templates/layouts/base.html
index 216a5df..03c91cd 100644
--- a/web/templates/layouts/base.html
+++ b/web/templates/layouts/base.html
@@ -8,6 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
 </head>
 <body class="min-h-screen">
 
diff --git a/web/templates/pages/dashboard.html b/web/templates/pages/dashboard.html
index 89b6664..d936850 100644
--- a/web/templates/pages/dashboard.html
+++ b/web/templates/pages/dashboard.html
@@ -1,24 +1,98 @@
 {{define "title"}}Dashboard · restic-manager{{end}}
 
 {{define "content"}}
-<div class="max-w-[1280px] mx-auto px-8 pt-14 pb-24">
+<div class="max-w-[1280px] mx-auto px-8">
 
-  <!-- placeholder hero — real fleet summary lands with P1-24.
-       This view exists today so the chrome + Tailwind + base layout
-       can be verified in the browser end-to-end. -->
-  <div class="empty-state">
-    <h1 class="text-lg font-medium tracking-[-0.005em]">Dashboard</h1>
-    <p class="text-pretty text-ink-mid mt-3 mx-auto max-w-[520px] text-[13px] leading-[1.65]">
-      Base layout + Tailwind build wired through (P1-23 / P1-28). The fleet
-      summary, host table and recent activity strip land with
-      <span class="mono text-ink">P1-24</span>; until then this screen exists
-      to prove the chrome renders.
-    </p>
-    <div class="mt-7 flex items-center justify-center gap-2">
-      <a href="/hosts/new" class="btn btn-primary btn-lg">+ Add your first host</a>
-      <a href="/" class="btn">Reload</a>
+  {{$page := .Page}}
+  {{if eq $page.HostCount 0}}
+
+    {{/* ---------- empty state ---------- */}}
+    <div class="pt-14 pb-24">
+      <div class="empty-state">
+        <h1 class="text-lg font-medium tracking-[-0.005em]">No hosts yet.</h1>
+        <p class="text-pretty text-ink-mid mt-3 mx-auto max-w-[520px] text-[13px] leading-[1.65]">
+          <span class="mono text-ink">restic-manager</span> tracks backups across a fleet —
+          but there’s nothing to track until you enrol your first host. Mint a token
+          from <span class="mono text-ink">+ Add host</span>, paste the install command on
+          a Linux box, and the host will appear here within seconds.
+        </p>
+        <div class="mt-7 flex items-center justify-center gap-2">
+          <a href="/hosts/new" class="btn btn-primary btn-lg">+ Add your first host</a>
+          <a href="/" class="btn">Reload</a>
+        </div>
+        <div class="mt-8 text-[12px] text-ink-fade">
+          Prerequisite: <span class="mono text-ink-mute">restic</span> ≥ 0.16 already installed on the target host.
+        </div>
+      </div>
     </div>
-  </div>
+
+  {{else}}
+
+    {{/* ---------- fleet summary ---------- */}}
+    <div class="grid grid-cols-12 gap-6 pt-7 pb-2">
+      <div class="col-span-3">
+        <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em] mb-2">Fleet</div>
+        <div class="mono text-[28px] font-medium tracking-[-0.02em]">{{$page.Summary.TotalHosts}} <span class="text-ink-mute text-[13px] font-normal">hosts</span></div>
+        <div class="flex items-center gap-3 mt-2.5 text-xs">
+          <span class="flex items-center gap-1.5"><span class="dot dot-online"></span><span class="mono text-ink-mid">{{$page.Summary.HostsOnline}}</span><span class="text-ink-mute">online</span></span>
+          <span class="flex items-center gap-1.5"><span class="dot dot-degraded"></span><span class="mono text-ink-mid">{{$page.Summary.HostsDegraded}}</span><span class="text-ink-mute">degraded</span></span>
+          <span class="flex items-center gap-1.5"><span class="dot dot-offline"></span><span class="mono text-ink-mid">{{$page.Summary.HostsOffline}}</span><span class="text-ink-mute">offline</span></span>
+        </div>
+      </div>
+      <div class="col-span-3">
+        <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em] mb-2">Backed up</div>
+        <div class="mono text-[28px] font-medium tracking-[-0.02em]">{{bytes $page.Summary.RepoBytesTotal}}</div>
+        <div class="text-xs text-ink-mute mt-2.5"><span class="mono text-ink-mid">{{comma $page.Summary.SnapshotsTotal}}</span> snapshots total</div>
+      </div>
+      <div class="col-span-3">
+        <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em] mb-2">Last 24h</div>
+        <div class="mono text-[28px] font-medium tracking-[-0.02em]">{{$page.Summary.JobsLast24h}} <span class="text-ink-mute text-[13px] font-normal">jobs</span></div>
+        <div class="text-xs mt-2.5">
+          <span class="mono text-ok">{{$page.Summary.JobsLast24hSucceeded}}</span> <span class="text-ink-mute">succeeded</span>
+          {{if gt $page.Summary.JobsLast24hFailed 0}} · <span class="mono text-bad">{{$page.Summary.JobsLast24hFailed}}</span> <span class="text-ink-mute">failed</span>{{end}}
+          {{if gt $page.Summary.JobsLast24hCancelled 0}} · <span class="mono text-ink-mid">{{$page.Summary.JobsLast24hCancelled}}</span> <span class="text-ink-mute">cancelled</span>{{end}}
+        </div>
+      </div>
+      <div class="col-span-3">
+        <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em] mb-2">Open alerts</div>
+        {{if eq $page.Summary.OpenAlerts 0}}
+          <div class="mono text-[28px] font-medium tracking-[-0.02em] text-ink-mid">0 <span class="text-ink-mute text-[13px] font-normal">unresolved</span></div>
+          <div class="text-xs text-ink-mute mt-2.5">all clear</div>
+        {{else}}
+          <div class="mono text-[28px] font-medium tracking-[-0.02em] text-bad">{{$page.Summary.OpenAlerts}} <span class="text-ink-mute text-[13px] font-normal">unresolved</span></div>
+          <div class="text-xs text-ink-mute mt-2.5"><a href="/alerts" class="underline underline-offset-4 decoration-line">review →</a></div>
+        {{end}}
+      </div>
+    </div>
+
+    {{/* ---------- hosts table ---------- */}}
+    <div class="pt-6 pb-4">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center gap-3">
+          <h2 class="text-[13px] font-semibold tracking-[0.01em]">Hosts</h2>
+          <div class="text-xs text-ink-fade">{{$page.HostCount}} of {{$page.HostCount}}</div>
+        </div>
+      </div>
+
+      <div class="panel rounded-[7px] overflow-hidden">
+
+        <div class="host-row head hairline">
+          <div></div>
+          <div>Host</div>
+          <div>OS · arch</div>
+          <div>Last backup</div>
+          <div class="text-right">Repo size</div>
+          <div class="text-right">Snapshots</div>
+          <div>Alerts</div>
+          <div>Tags</div>
+          <div></div>
+        </div>
+
+        {{range $page.Hosts}}{{template "host_row" .}}{{end}}
+      </div>
+    </div>
+
+  {{end}}
 
 </div>
 {{end}}
diff --git a/web/templates/partials/host_row.html b/web/templates/partials/host_row.html
new file mode 100644
index 0000000..69eef23
--- /dev/null
+++ b/web/templates/partials/host_row.html
@@ -0,0 +1,71 @@
+{{define "host_row"}}
+<div class="row-hover host-row hairline {{.Status}}{{if eq (deref .LastBackupStatus) "failed"}} failed{{end}}">
+  <div>
+    {{- if eq .Status "online" -}}
+      <span class="dot dot-online{{if .CurrentJobID}} pulse{{end}}"></span>
+    {{- else if eq .Status "degraded" -}}
+      <span class="dot dot-degraded"></span>
+    {{- else if eq .Status "offline" -}}
+      <span class="dot dot-offline"></span>
+    {{- else -}}
+      <span class="dot dot-failed"></span>
+    {{- end -}}
+  </div>
+  <div class="mono {{if eq .Status "offline"}}text-ink-mid{{else}}text-ink{{end}} font-medium">{{.Name}}</div>
+  <div class="mono text-ink-mid text-[12px]">{{.OS}}/{{.Arch}}</div>
+  <div class="text-xs text-ink-mid">
+    {{- if .CurrentJobID -}}
+      <span class="text-accent">backup running…</span><br>
+      <span class="mono text-ink-fade">started {{relTime .LastBackupAt}}</span>
+    {{- else if eq (deref .LastBackupStatus) "succeeded" -}}
+      <span class="text-ok">succeeded</span> · <span class="mono">{{relTime .LastBackupAt}}</span>
+    {{- else if eq (deref .LastBackupStatus) "failed" -}}
+      <span class="text-bad font-medium">failed</span> · <span class="mono">{{relTime .LastBackupAt}}</span>
+    {{- else if eq (deref .LastBackupStatus) "cancelled" -}}
+      <span class="text-warn">cancelled</span> · <span class="mono">{{relTime .LastBackupAt}}</span>
+    {{- else if eq .Status "offline" -}}
+      <span class="text-ink-mute">last seen <span class="mono">{{relTime .LastSeenAt}}</span></span>
+    {{- else -}}
+      <span class="text-ink-fade italic">never run</span>
+    {{- end -}}
+  </div>
+  <div class="text-right mono {{if eq .Status "offline"}}text-ink-mid{{else}}text-ink{{end}}">{{bytes .RepoSizeBytes}}</div>
+  <div class="text-right mono {{if eq .Status "offline"}}text-ink-mute{{else}}text-ink-mid{{end}}">
+    {{- if eq .SnapshotCount 0 -}}
+      <span class="text-ink-fade">—</span>
+    {{- else -}}
+      {{comma .SnapshotCount}}
+    {{- end -}}
+  </div>
+  <div class="text-right mono {{if gt .OpenAlertCount 0}}text-bad font-medium{{else}}text-ink-mute{{end}}">
+    {{- if eq .OpenAlertCount 0 -}}—{{- else -}}{{.OpenAlertCount}}{{- end -}}
+  </div>
+  <div class="flex gap-1.5 flex-wrap">
+    {{- range .Tags -}}
+      <span class="tag">{{.}}</span>
+    {{- end -}}
+  </div>
+  <div class="text-right">
+    {{- if eq .Status "offline" -}}
+      <span class="mono text-xs text-ink-fade">offline</span>
+    {{- else if .CurrentJobID -}}
+      <a href="/hosts/{{.ID}}" class="btn btn-ghost">View →</a>
+    {{- else if eq (deref .LastBackupStatus) "failed" -}}
+      <button class="btn"
+              hx-post="/hosts/{{.ID}}/run-backup"
+              hx-swap="none"
+              hx-disabled-elt="this">Retry</button>
+    {{- else if eq .SnapshotCount 0 -}}
+      <button class="btn"
+              hx-post="/hosts/{{.ID}}/run-backup"
+              hx-swap="none"
+              hx-disabled-elt="this">Run first</button>
+    {{- else -}}
+      <button class="btn"
+              hx-post="/hosts/{{.ID}}/run-backup"
+              hx-swap="none"
+              hx-disabled-elt="this">Run now</button>
+    {{- end -}}
+  </div>
+</div>
+{{end}}