P1-25: host detail page (snapshots tab default)

GET /hosts/{id} renders the v1 host detail layout:

  - persistent header: status dot (pulse if a job is in flight),
    monospace name, tags, plus a metadata strip (os/arch, agent
    version, restic version, "last seen Xs ago" or "online · last
    heartbeat …").
  - vitals strip: four tiles for last backup (status + relative
    time), repo size, snapshot count, open alerts.
  - sub-tabs: Snapshots is active; Jobs / Repo / Settings are
    visible but inert until P2.
  - snapshot table: short id, time (absolute), paths joined with
    " · ", size, file count, restore button (disabled — wires up
    in P3).
  - right rail: run-now stack (backup live, forget/prune/check/
    unlock disabled with the Phase tag), danger-zone remove panel
    (also disabled for now).

Empty state: when a host has no snapshots yet, the table replaces
itself with a "no snapshots yet" prompt that includes the run-now
button (provided the agent is online).

Pagination cap of 50 most-recent snapshots; full pagination lands
when fleet sizes demand it.

Template helpers grew: comma() now accepts int / int32 / int64 so
templates don't fight Go's type inference; joinDot() concatenates
a []string with " · "; absTime() formats time.Time as
YYYY-MM-DD HH:MM:SS; the existing relTime() already accepts T or
*T after P1-27.

Browser-verified end-to-end with seeded fixture data.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/templates/pages/host_detail.html

@@ -0,0 +1,190 @@
+{{define "title"}}{{.Title}}{{end}}
+
+{{define "content"}}
+{{$page := .Page}}
+{{$host := $page.Host}}
+<div class="max-w-[1280px] mx-auto px-8 pt-7">
+
+  <div class="crumbs"><a href="/">Dashboard</a><span class="sep">/</span><span class="text-ink-mid">{{$host.Name}}</span></div>
+
+  {{/* ---------- header ---------- */}}
+  <div class="flex items-start justify-between mt-3.5">
+    <div>
+      <div class="flex items-center gap-3">
+        {{if eq $host.Status "online"}}
+          <span class="dot dot-online{{if $host.CurrentJobID}} pulse{{end}}"></span>
+        {{else if eq $host.Status "degraded"}}
+          <span class="dot dot-degraded"></span>
+        {{else if eq $host.Status "offline"}}
+          <span class="dot dot-offline"></span>
+        {{else}}
+          <span class="dot dot-failed"></span>
+        {{end}}
+        <h1 class="mono text-[26px] font-medium tracking-[0.005em] text-ink">{{$host.Name}}</h1>
+        <div class="flex gap-1.5">{{range $host.Tags}}<span class="tag">{{.}}</span>{{end}}</div>
+      </div>
+      <div class="flex items-center gap-3 mt-3 text-[13px] text-ink-mute">
+        <span class="mono text-ink-mid">{{$host.OS}}/{{$host.Arch}}</span>
+        <span class="text-ink-fade">·</span>
+        <span>agent <span class="mono text-ink-mid">{{if $host.AgentVersion}}{{$host.AgentVersion}}{{else}}—{{end}}</span></span>
+        <span class="text-ink-fade">·</span>
+        <span>restic <span class="mono text-ink-mid">{{if $host.ResticVersion}}{{$host.ResticVersion}}{{else}}—{{end}}</span></span>
+        <span class="text-ink-fade">·</span>
+        {{if eq $host.Status "offline"}}
+          <span>last seen <span class="mono text-ink-mid">{{relTime $host.LastSeenAt}}</span></span>
+        {{else}}
+          <span>online · last heartbeat <span class="mono text-ink-mid">{{relTime $host.LastSeenAt}}</span></span>
+        {{end}}
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      {{if ne $host.Status "offline"}}
+        <button class="btn btn-primary"
+                hx-post="/hosts/{{$host.ID}}/run-backup"
+                hx-swap="none"
+                hx-disabled-elt="this">Run backup now</button>
+      {{else}}
+        <button class="btn" disabled title="agent is offline">Run backup now</button>
+      {{end}}
+      <button class="btn">Edit credentials</button>
+      <button class="btn btn-ghost text-base px-2.5">⋯</button>
+    </div>
+  </div>
+
+  {{/* ---------- vitals strip ---------- */}}
+  <div class="grid grid-cols-12 gap-6 mt-6 py-5 border-y border-line-soft">
+    <div class="col-span-3">
+      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Last backup</div>
+      <div class="mono text-[18px] text-ink mt-1">
+        {{if eq (deref $host.LastBackupStatus) "succeeded"}}
+          <span class="text-ok">succeeded</span>
+        {{else if eq (deref $host.LastBackupStatus) "failed"}}
+          <span class="text-bad">failed</span>
+        {{else if eq (deref $host.LastBackupStatus) "cancelled"}}
+          <span class="text-warn">cancelled</span>
+        {{else}}
+          <span class="text-ink-fade italic">never run</span>
+        {{end}}
+        {{if $host.LastBackupAt}} · {{relTime $host.LastBackupAt}}{{end}}
+      </div>
+    </div>
+    <div class="col-span-3">
+      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Repo size</div>
+      <div class="mono text-[18px] text-ink mt-1">{{bytes $host.RepoSizeBytes}}</div>
+    </div>
+    <div class="col-span-3">
+      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Snapshots</div>
+      <div class="mono text-[18px] text-ink mt-1">{{comma $host.SnapshotCount}}</div>
+    </div>
+    <div class="col-span-3">
+      <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em]">Open alerts</div>
+      <div class="mono text-[18px] mt-1 {{if gt $host.OpenAlertCount 0}}text-bad{{else}}text-ok{{end}}">
+        {{if eq $host.OpenAlertCount 0}}0 · all clear{{else}}{{$host.OpenAlertCount}} · review →{{end}}
+      </div>
+    </div>
+  </div>
+
+  {{/* ---------- secondary tabs ---------- */}}
+  <div class="flex items-end mt-1.5">
+    <div class="sub-tab active">Snapshots <span class="mono text-ink-fade text-[11px] ml-1">{{comma $host.SnapshotCount}}</span></div>
+    <div class="sub-tab">Jobs</div>
+    <div class="sub-tab">Repo</div>
+    <div class="sub-tab">Settings</div>
+  </div>
+
+  {{/* ---------- snapshots tab ---------- */}}
+  <div class="grid grid-cols-12 gap-6 pt-6 pb-14 items-start">
+
+    <div class="col-span-9">
+      <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]">Snapshots</h2>
+          <div class="text-xs text-ink-fade">showing {{$page.SnapshotsShown}} of {{comma $host.SnapshotCount}}</div>
+        </div>
+      </div>
+
+      <div class="panel rounded-[7px] overflow-hidden">
+
+        {{if eq (len $page.Snapshots) 0}}
+          <div class="empty-state" style="border: none; background: var(--panel);">
+            <h3 class="text-base font-medium tracking-[-0.005em]">No snapshots yet.</h3>
+            <p class="text-pretty text-ink-mute text-[13px] mt-2 mx-auto max-w-[440px] leading-[1.65]">
+              Once a backup completes, the agent will refresh this list automatically.
+            </p>
+            {{if ne $host.Status "offline"}}
+              <div class="mt-5">
+                <button class="btn btn-primary"
+                        hx-post="/hosts/{{$host.ID}}/run-backup"
+                        hx-swap="none"
+                        hx-disabled-elt="this">Run first backup</button>
+              </div>
+            {{end}}
+          </div>
+        {{else}}
+          <div class="hairline grid items-baseline px-4 py-2.5 text-[11px] text-ink-fade uppercase tracking-[0.08em]"
+               style="grid-template-columns: 0.8fr 1fr 2fr 0.7fr 0.7fr 0.7fr; column-gap: 18px;">
+            <div>Snapshot id</div>
+            <div>Time</div>
+            <div>Paths</div>
+            <div class="text-right">Size</div>
+            <div class="text-right">Files</div>
+            <div></div>
+          </div>
+
+          {{range $i, $s := $page.Snapshots}}
+            <div class="grid items-center px-4 py-2.5 text-[13px] hairline"
+                 style="grid-template-columns: 0.8fr 1fr 2fr 0.7fr 0.7fr 0.7fr; column-gap: 18px;">
+              <div class="mono text-ink font-medium">{{$s.ShortID}}</div>
+              <div class="mono text-ink-mid text-[12px]">{{absTime $s.Time}}</div>
+              <div class="mono text-ink-mid text-[12px] truncate" title="{{joinDot $s.Paths}}">{{joinDot $s.Paths}}</div>
+              <div class="text-right mono text-ink">{{bytes $s.SizeBytes}}</div>
+              <div class="text-right mono text-ink-mid">
+                {{if eq $s.FileCount 0}}<span class="text-ink-fade">—</span>{{else}}{{comma $s.FileCount}}{{end}}
+              </div>
+              <div class="text-right">
+                <button class="btn btn-ghost" disabled title="restore wizard lands in P3">Restore →</button>
+              </div>
+            </div>
+          {{end}}
+        {{end}}
+
+      </div>
+
+      {{if eq $host.SnapshotCount 0}}
+      {{else if gt $host.SnapshotCount $page.SnapshotsShown}}
+        <div class="text-xs text-ink-mute mt-3 px-1">showing the {{$page.SnapshotsShown}} most-recent snapshots — full pagination lands later</div>
+      {{end}}
+    </div>
+
+    {{/* ---------- right rail ---------- */}}
+    <aside class="col-span-3 flex flex-col gap-4">
+
+      <div class="panel rounded-[7px] px-4 py-3.5">
+        <div class="text-[11px] text-ink-fade uppercase tracking-[0.1em] mb-2.5">Run-now</div>
+        <div class="flex flex-col gap-1.5">
+          <button class="btn justify-start w-full {{if eq $host.Status "offline"}}opacity-50 cursor-not-allowed pointer-events-none{{end}}"
+                  hx-post="/hosts/{{$host.ID}}/run-backup"
+                  hx-swap="none"
+                  hx-disabled-elt="this">backup</button>
+          <button class="btn justify-start w-full" disabled title="lands with P2-05">forget <span class="text-[10px] text-ink-fade ml-1.5">P2</span></button>
+          <button class="btn justify-start w-full" disabled title="lands with P2-06">prune <span class="text-[10px] text-ink-fade ml-1.5">admin</span></button>
+          <button class="btn justify-start w-full" disabled title="lands with P2-07">check <span class="text-[10px] text-ink-fade ml-1.5">P2</span></button>
+          <button class="btn justify-start w-full" disabled title="lands with P2-08">unlock <span class="text-[10px] text-ink-fade ml-1.5">P2</span></button>
+        </div>
+      </div>
+
+      <div class="panel rounded-[7px] px-4 py-3.5">
+        <div class="text-[11px] text-bad uppercase tracking-[0.1em] font-semibold mb-2.5">Danger zone</div>
+        <p class="text-pretty text-[12px] text-ink-mute leading-[1.55] mb-3">
+          Removes the host record. The repo data on the rest-server is left intact —
+          you delete that yourself.
+        </p>
+        <button class="btn btn-danger w-full justify-center" disabled title="lands later in Phase 1">Remove host…</button>
+      </div>
+
+    </aside>
+
+  </div>
+
+</div>
+{{end}}