P2-04: schedule editor UI

Closes the schedule foundations slice — operator can now drive the
plumbing P2-01..03 landed without touching the JSON API.

* New routes:
  - GET  /hosts/{id}/schedules          (list)
  - GET  /hosts/{id}/schedules/new      (create form)
  - POST /hosts/{id}/schedules/new      (create)
  - GET  /hosts/{id}/schedules/{sid}/edit (edit form)
  - POST /hosts/{id}/schedules/{sid}/edit (update)
  - POST /hosts/{id}/schedules/{sid}/delete (delete, confirm-then-redirect)

* List view (web/templates/pages/schedules_list.html):
  status, cron, paths, retention summary, tags, edit/delete buttons.
  Header shows "version N · agent in sync" or "agent at vM" when the
  push hasn't been ack'd yet — backed by host_schedule_version +
  applied_schedule_version. Empty-state CTA points at /schedules/new.

* Create/edit form (web/templates/pages/schedule_edit.html, shared):
  cron expression with five quick-pick presets (daily 3am / every 6h
  / @hourly / weekly Sun / monthly 1st), paths textarea (one per
  line), excludes textarea, tags (comma-separated), retention as six
  numeric fields (mirrors restic's --keep-* flags one-for-one),
  bandwidth caps, enabled toggle. Side panel explains the
  reconciliation flow so the operator knows what saving actually
  does. Validation errors re-render with operator's input intact.

* internal/server/http/ui_schedules.go owns the handlers; reuses
  the same validateSchedule + pushScheduleSetAsync used by the JSON
  API path. Each save audit-logs schedule.created / schedule.updated
  / schedule.deleted (matching the JSON API actions).

* store.RetentionPolicy gains a Summary() method ("last=7, d=14,
  w=4" or "—"). Used by the list view's table cell so templates
  don't have to do any conditional retention rendering.

* Two new template helpers: list (string varargs → []string, used
  for the cron preset row) and joinComma (sibling to joinDot for
  the rare list that wants commas). RetentionPolicy.Summary covers
  the schedule-list case but the helpers are general.

* host_detail.html secondary tabs row converted from inert <div>s
  into <a> links. Snapshots active by default; Schedules now points
  at the new page. Jobs/Repo/Settings remain inert until their
  P2 owners ship.

Hooks UI deferred to P2-15 (lands with the hook execution path).
Single-kind UI (backup only) by design — other kinds get a UI when
their job dispatch lands in P2-05..08.

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

web/templates/pages/host_detail.html

@@ -92,7 +92,8 @@
 
   {{/* ---------- 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>
+    <a class="sub-tab active" href="/hosts/{{$host.ID}}">Snapshots <span class="mono text-ink-fade text-[11px] ml-1">{{comma $host.SnapshotCount}}</span></a>
+    <a class="sub-tab" href="/hosts/{{$host.ID}}/schedules">Schedules</a>
     <div class="sub-tab">Jobs</div>
     <div class="sub-tab">Repo</div>
     <div class="sub-tab">Settings</div>

web/templates/pages/schedule_edit.html

@@ -0,0 +1,163 @@
+{{define "title"}}{{.Title}}{{end}}
+
+{{define "content"}}
+{{$page := .Page}}
+{{$host := $page.Host}}
+<div class="max-w-[1280px] mx-auto px-8 pt-9 pb-24">
+
+  <div class="crumbs">
+    <a href="/">Dashboard</a><span class="sep">/</span>
+    <a href="/hosts/{{$host.ID}}">{{$host.Name}}</a><span class="sep">/</span>
+    <a href="/hosts/{{$host.ID}}/schedules">schedules</a><span class="sep">/</span>
+    <span class="text-ink-mid">{{if $page.IsNew}}new{{else}}edit{{end}}</span>
+  </div>
+
+  <h1 class="text-2xl font-medium tracking-[-0.012em] mt-2.5">
+    {{if $page.IsNew}}New schedule{{else}}Edit schedule{{end}}
+    <span class="text-ink-fade">·</span>
+    <span class="mono text-ink">{{$host.Name}}</span>
+  </h1>
+  <p class="text-pretty text-ink-mute text-[13px] mt-1.5 max-w-[640px]">
+    Backups run on the cron expression below. The agent applies whatever the server most
+    recently pushed; an offline agent catches up on the next reconnect.
+  </p>
+
+  {{if $page.Error}}
+    <div class="mt-6 px-4 py-3 rounded-[5px] text-[13px]"
+         style="background: color-mix(in oklch, var(--bad), transparent 88%);
+                border: 1px solid color-mix(in oklch, var(--bad), transparent 70%);
+                color: oklch(0.85 0.10 25);">
+      {{$page.Error}}
+    </div>
+  {{end}}
+
+  <form method="post"
+        action="{{if $page.IsNew}}/hosts/{{$host.ID}}/schedules/new{{else}}/hosts/{{$host.ID}}/schedules/{{$page.ScheduleID}}/edit{{end}}"
+        class="grid grid-cols-12 gap-8 mt-7">
+
+    <div class="col-span-7 panel rounded-[7px] px-8 py-7">
+
+      <h3 class="text-[13px] font-semibold uppercase tracking-[0.08em] text-ink-mute mb-4">When</h3>
+      <div class="mb-5">
+        <label class="field-label" for="se-cron">Cron expression</label>
+        <input id="se-cron" name="cron_expr" type="text" class="field mono" required value="{{$page.CronExpr}}">
+        <div class="field-help">
+          Standard 5-field cron with descriptors. Examples:
+          <span class="mono text-ink-mid">0 3 * * *</span> (daily 03:00),
+          <span class="mono text-ink-mid">@hourly</span>,
+          <span class="mono text-ink-mid">*/30 * * * *</span> (every 30 min).
+          Server validates with the same parser the agent uses to fire.
+        </div>
+        <div class="flex flex-wrap gap-1.5 mt-2.5">
+          {{range $cron := list "0 3 * * *" "0 */6 * * *" "@hourly" "0 3 * * 0" "0 3 1 * *"}}
+            <button type="button" class="btn btn-ghost mono text-[11px]"
+                    onclick="document.getElementById('se-cron').value='{{$cron}}'">{{$cron}}</button>
+          {{end}}
+        </div>
+      </div>
+
+      <h3 class="text-[13px] font-semibold uppercase tracking-[0.08em] text-ink-mute mb-4 pt-6 border-t border-line-soft">Paths</h3>
+      <div class="mb-5">
+        <label class="field-label" for="se-paths">Backup paths <span class="text-ink-fade font-normal">· one per line</span></label>
+        <textarea id="se-paths" name="paths" rows="4" class="field mono"
+                  style="resize: vertical;"
+                  placeholder="/etc&#10;/home&#10;/var/lib/postgresql">{{$page.PathsRaw}}</textarea>
+        <div class="field-help">What <span class="mono text-ink-mid">restic backup</span> walks. The agent runs as root with <span class="mono text-ink-mid">CAP_DAC_READ_SEARCH</span>, so any readable path is fair game.</div>
+      </div>
+      <div class="mb-7">
+        <label class="field-label" for="se-excludes">Excludes <span class="text-ink-fade font-normal">· optional, one per line</span></label>
+        <textarea id="se-excludes" name="excludes" rows="3" class="field mono"
+                  style="resize: vertical;"
+                  placeholder="*.tmp&#10;node_modules&#10;.cache">{{$page.ExcludesRaw}}</textarea>
+        <div class="field-help">Passed straight through as <span class="mono text-ink-mid">--exclude</span> args.</div>
+      </div>
+
+      <h3 class="text-[13px] font-semibold uppercase tracking-[0.08em] text-ink-mute mb-4 pt-6 border-t border-line-soft">Tags <span class="text-ink-fade font-normal">· optional</span></h3>
+      <div class="mb-7">
+        <label class="field-label" for="se-tags">Tags <span class="text-ink-fade font-normal">· comma-separated</span></label>
+        <input id="se-tags" name="tags" type="text" class="field mono" placeholder="nightly, prod" value="{{$page.TagsRaw}}">
+        <div class="field-help">Attached to every snapshot this schedule produces. Useful for retention rules (P2-05).</div>
+      </div>
+
+      <h3 class="text-[13px] font-semibold uppercase tracking-[0.08em] text-ink-mute mb-4 pt-6 border-t border-line-soft">Retention <span class="text-ink-fade font-normal">· optional, all blank = keep everything</span></h3>
+      <div class="grid grid-cols-3 gap-4 mb-7">
+        <div>
+          <label class="field-label" for="se-keep-last">Keep last</label>
+          <input id="se-keep-last" name="keep_last" type="number" min="0" class="field mono" value="{{$page.KeepLast}}">
+        </div>
+        <div>
+          <label class="field-label" for="se-keep-hourly">Keep hourly</label>
+          <input id="se-keep-hourly" name="keep_hourly" type="number" min="0" class="field mono" value="{{$page.KeepHourly}}">
+        </div>
+        <div>
+          <label class="field-label" for="se-keep-daily">Keep daily</label>
+          <input id="se-keep-daily" name="keep_daily" type="number" min="0" class="field mono" value="{{$page.KeepDaily}}">
+        </div>
+        <div>
+          <label class="field-label" for="se-keep-weekly">Keep weekly</label>
+          <input id="se-keep-weekly" name="keep_weekly" type="number" min="0" class="field mono" value="{{$page.KeepWeekly}}">
+        </div>
+        <div>
+          <label class="field-label" for="se-keep-monthly">Keep monthly</label>
+          <input id="se-keep-monthly" name="keep_monthly" type="number" min="0" class="field mono" value="{{$page.KeepMonthly}}">
+        </div>
+        <div>
+          <label class="field-label" for="se-keep-yearly">Keep yearly</label>
+          <input id="se-keep-yearly" name="keep_yearly" type="number" min="0" class="field mono" value="{{$page.KeepYearly}}">
+        </div>
+      </div>
+      <div class="text-[12px] text-ink-mute leading-[1.55] mb-7">
+        Applied by <span class="mono text-ink-mid">restic forget</span> when the prune job kind lands in P2-05. Mirrors restic's <span class="mono text-ink-mid">--keep-*</span> flags one-for-one.
+      </div>
+
+      <h3 class="text-[13px] font-semibold uppercase tracking-[0.08em] text-ink-mute mb-4 pt-6 border-t border-line-soft">Bandwidth <span class="text-ink-fade font-normal">· optional</span></h3>
+      <div class="grid grid-cols-2 gap-4 mb-7">
+        <div>
+          <label class="field-label" for="se-up">Limit upload <span class="text-ink-fade font-normal">· KB/s</span></label>
+          <input id="se-up" name="limit_up_kbps" type="number" min="0" class="field mono" value="{{$page.LimitUpKBps}}">
+        </div>
+        <div>
+          <label class="field-label" for="se-down">Limit download <span class="text-ink-fade font-normal">· KB/s</span></label>
+          <input id="se-down" name="limit_down_kbps" type="number" min="0" class="field mono" value="{{$page.LimitDownKBps}}">
+        </div>
+      </div>
+
+      <div class="pt-6 border-t border-line-soft">
+        <label class="flex items-center gap-2.5 cursor-pointer text-[13px]">
+          <input type="checkbox" name="enabled" {{if $page.Enabled}}checked{{end}}>
+          <span>Enabled</span>
+          <span class="text-ink-fade">— uncheck to keep the row but stop it from firing.</span>
+        </label>
+      </div>
+
+      <div class="flex gap-2 pt-7">
+        <button type="submit" class="btn btn-primary btn-lg">{{if $page.IsNew}}Create schedule{{else}}Save changes{{end}}</button>
+        <a href="/hosts/{{$host.ID}}/schedules" class="btn btn-lg">Cancel</a>
+      </div>
+    </div>
+
+    <aside class="col-span-5">
+      <div class="text-[11px] uppercase tracking-[0.1em] text-ink-fade mb-3">How this works</div>
+      <ol class="list-none p-0 m-0 space-y-4">
+        <li class="relative pl-9">
+          <span class="absolute left-0 top-0 w-[22px] h-[22px] border border-line rounded-full text-[11px] leading-[20px] text-center text-ink-mute mono">1</span>
+          <div class="text-[13px] text-ink font-medium">Server is the source of truth</div>
+          <div class="text-[12px] text-ink-mute mt-1 leading-[1.55]">Saving here bumps <span class="mono text-ink-mid">host_schedule_version</span> and pushes the new set to the agent over WS. Offline agents catch up on reconnect.</div>
+        </li>
+        <li class="relative pl-9">
+          <span class="absolute left-0 top-0 w-[22px] h-[22px] border border-line rounded-full text-[11px] leading-[20px] text-center text-ink-mute mono">2</span>
+          <div class="text-[13px] text-ink font-medium">Agent fires locally</div>
+          <div class="text-[12px] text-ink-mute mt-1 leading-[1.55]">On each tick the agent sends <span class="mono text-ink-mid">schedule.fire</span>; the server creates a job row (<span class="mono text-ink-mid">actor_kind=schedule</span>) and ships <span class="mono text-ink-mid">command.run</span> back. Same job lifecycle as run-now.</div>
+        </li>
+        <li class="relative pl-9">
+          <span class="absolute left-0 top-0 w-[22px] h-[22px] border border-line rounded-full text-[11px] leading-[20px] text-center text-ink-mute mono">3</span>
+          <div class="text-[13px] text-ink font-medium">Missed ticks fire on reconnect</div>
+          <div class="text-[12px] text-ink-mute mt-1 leading-[1.55]">By design — the operator wants the missed backup to run, not be silently skipped because the agent was bouncing.</div>
+        </li>
+      </ol>
+    </aside>
+
+  </form>
+
+</div>
+{{end}}

web/templates/pages/schedules_list.html

@@ -0,0 +1,96 @@
+{{define "title"}}{{.Title}}{{end}}
+
+{{define "content"}}
+{{$page := .Page}}
+{{$host := $page.Host}}
+<div class="max-w-[1280px] mx-auto px-8 pt-7 pb-14">
+
+  <div class="crumbs">
+    <a href="/">Dashboard</a><span class="sep">/</span>
+    <a href="/hosts/{{$host.ID}}">{{$host.Name}}</a><span class="sep">/</span>
+    <span class="text-ink-mid">schedules</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"></span>
+        {{else}}
+          <span class="dot dot-offline"></span>
+        {{end}}
+        <h1 class="text-[22px] font-medium tracking-[-0.01em]">
+          schedules <span class="text-ink-fade">·</span>
+          <span class="mono text-ink font-medium">{{$host.Name}}</span>
+        </h1>
+        <span class="mono text-[11px] text-ink-mute">version {{$page.Version}}{{if and (gt $page.Version 0) (ne $page.Version $page.AppliedVersion)}} <span class="text-warn">· agent at v{{$page.AppliedVersion}}</span>{{else if gt $page.Version 0}} <span class="text-ok">· agent in sync</span>{{end}}</span>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <a href="/hosts/{{$host.ID}}/schedules/new" class="btn btn-primary">New schedule</a>
+    </div>
+  </div>
+
+  {{/* ---------- secondary tabs ---------- */}}
+  <div class="flex items-end mt-7">
+    <a class="sub-tab" href="/hosts/{{$host.ID}}">Snapshots <span class="mono text-ink-fade text-[11px] ml-1">{{comma $host.SnapshotCount}}</span></a>
+    <a class="sub-tab active" href="/hosts/{{$host.ID}}/schedules">Schedules <span class="mono text-ink-fade text-[11px] ml-1">{{len $page.Schedules}}</span></a>
+    <div class="sub-tab">Jobs</div>
+    <div class="sub-tab">Repo</div>
+    <div class="sub-tab">Settings</div>
+  </div>
+
+  {{/* ---------- schedule rows ---------- */}}
+  <div class="panel rounded-[7px] mt-6 overflow-hidden">
+    {{if eq (len $page.Schedules) 0}}
+      <div class="empty-state" style="border: none; background: var(--panel);">
+        <h3 class="text-base font-medium tracking-[-0.005em]">No schedules yet.</h3>
+        <p class="text-pretty text-ink-mute text-[13px] mt-2 mx-auto max-w-[480px] leading-[1.65]">
+          Add one and the agent will start running backups on whatever cron expression you give it.
+          Until then, run-now is the only way to trigger a backup.
+        </p>
+        <div class="mt-5">
+          <a href="/hosts/{{$host.ID}}/schedules/new" class="btn btn-primary">New schedule</a>
+        </div>
+      </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.5fr 1fr 2fr 1.5fr 0.5fr 0.7fr; column-gap: 18px;">
+        <div>Status</div>
+        <div>Cron</div>
+        <div>Paths</div>
+        <div>Retention</div>
+        <div>Tags</div>
+        <div></div>
+      </div>
+      {{range $page.Schedules}}
+      <div class="grid items-center px-4 py-3 text-[13px] hairline"
+           style="grid-template-columns: 0.5fr 1fr 2fr 1.5fr 0.5fr 0.7fr; column-gap: 18px;">
+        <div>
+          {{if .Enabled}}
+            <span class="mono text-[11px] text-ok">enabled</span>
+          {{else}}
+            <span class="mono text-[11px] text-ink-fade">disabled</span>
+          {{end}}
+        </div>
+        <div class="mono text-ink">{{.CronExpr}}</div>
+        <div class="mono text-ink-mid text-[12px] truncate" title="{{joinDot .Paths}}">{{joinDot .Paths}}</div>
+        <div class="mono text-[12px] text-ink-mid">{{.RetentionPolicy.Summary}}</div>
+        <div class="flex gap-1.5 flex-wrap">
+          {{- range .Tags -}}<span class="tag">{{.}}</span>{{- end -}}
+        </div>
+        <div class="text-right flex gap-1.5 justify-end">
+          <a href="/hosts/{{$host.ID}}/schedules/{{.ID}}/edit" class="btn">Edit</a>
+          <form method="post" action="/hosts/{{$host.ID}}/schedules/{{.ID}}/delete" style="display: inline;"
+                onsubmit="return confirm('Delete schedule {{.CronExpr}}? Existing snapshots are not affected.');">
+            <button type="submit" class="btn btn-danger">Delete</button>
+          </form>
+        </div>
+      </div>
+      {{end}}
+    {{end}}
+  </div>
+
+</div>
+{{end}}