ZFS gets its own tab, with scheduled snapshots and a retention period

Pools, datasets and snapshots move out of Disks — Disks is the hardware, this is the filesystem on top of it. New: snapshot schedules, hourly to monthly, with a retention period and a floor that keeps the newest few whatever their age. The naming is zfSnap's, deliberately. grid has run zfSnap from root cron since before this repo existed and it works, so rather than invent a second convention this writes and reads exactly what zfSnap does: 2026-09-24_02.30.01--6w, with the retention in the name. Ham Lab can therefore show and expire the snapshots zfSnap already took, the two cannot disagree about what a snapshot is, and changing a schedule never re-dates old ones — each carries the rule it was taken under. An existing cron job is detected and shown on the page, with a warning if a Ham Lab schedule is running as well. Nothing is destroyed unseen. Every schedule answers what it would delete, with the list, before Run now touches anything, and only names that parse as a stamp and a TTL are ever candidates. A snapshot taken by hand is invisible to it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-24 13:01:53 -07:00
parent a07a444170
commit 7d0ec5e018
11 changed files with 1100 additions and 96 deletions
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { api, SmartInfo, StorageDevice, ZFSInfo, ZFSSnapshot } from './api'
+import { api, SmartInfo, StorageDevice } from './api'
 import { fmtBytes, fmtRate } from './fmt'
 import TaskOutput from './TaskOutput'
-import { Btn, Loading, Spinner, askText, toast } from './ui'
+import { askText, Btn, Loading, Meter, Spinner, toast } from './ui'
 import { useRefreshMs } from './prefs'
 import { Sensor, useSensorStream } from './sensors'

@@ -11,10 +11,6 @@ const KIND: Record<string, string> = { nvme: 'NVMe', ssd: 'SSD', hdd: 'HDD', usb
 const hours = (h: number) => (h >= 24 * 365 ? `${(h / 8760).toFixed(1)} y` : h >= 48 ? `${Math.round(h / 24)} d` : `${h} h`)
 const ago = (ms: number) => { const s = (Date.now() - ms) / 1000; return s < 3600 ? `${Math.round(s / 60)}m ago` : s < 86400 ? `${Math.round(s / 3600)}h ago` : `${Math.round(s / 86400)}d ago` }

-function Meter({ frac, cls }: { frac: number; cls?: string }) {
-  const c = cls ?? (frac >= 0.95 ? 'bad' : frac >= 0.85 ? 'warn' : '')
-  return <div className="meter"><div className={'fill ' + c} style={{ width: `${Math.min(100, Math.max(0, frac * 100))}%` }} /></div>
-}

 // ---- SMART panel ----
 function SmartPanel({ dev, rotational }: { dev: string; rotational: boolean }) {
@@ -109,82 +105,9 @@ function DeviceCard({ d, live, forceOpen }: { d: StorageDevice; live?: { read_bp
  )
 }

-// ---- ZFS ----
-function PoolCard({ p, onChanged }: { p: ZFSInfo['pools'][number]; onChanged: () => void }) {
-  const scrubbing = /scrub in progress/i.test(p.scan ?? '')
-  const paused = /scrub paused/i.test(p.scan ?? '')
-  const [cfg, setCfg] = useState(false)
-  const act = (a: 'start' | 'pause' | 'stop') => async () => {
-    try { await api.zfsScrub(p.name, a); toast(`scrub ${a}: ok`); onChanged() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
-  }
-  return (
-    <section className="card">
-      <div className="sub-head">
-        <span className={'dot ' + (p.health === 'ONLINE' ? 'ok' : p.health === 'DEGRADED' ? 'warn' : 'bad')} />
-        <span className="dname">{p.name}</span>
-        <span className="badge">{p.health}</span>
-        <span className="spacer" />
-        <span className="num">{fmtBytes(p.alloc)} / {fmtBytes(p.size)} · {p.cap}%</span>
-      </div>
-      <Meter frac={p.cap / 100} cls={p.cap >= 90 ? 'bad' : p.cap >= 80 ? 'warn' : ''} />
-      <div className="props" style={{ marginTop: 8 }}>
-        <div><span className="k">Free</span><span>{fmtBytes(p.free)} · fragmentation {p.frag}% · dedup {p.dedup}</span></div>
-        {p.scan && <div><span className="k">Scan</span><span style={{ whiteSpace: 'normal' }}>{p.scan}</span></div>}
-        {p.errors && <div><span className="k">Errors</span><span className={p.errors.startsWith('No known') ? '' : 'warn-text'}>{p.errors}</span></div>}
-      </div>
-      <div className="svc-actions">
-        {!scrubbing && <Btn className="btn" confirm={`Start a scrub of ${p.name}? It reads the whole pool and can take many hours.`} onClick={act('start')}>{paused ? 'Resume scrub' : 'Scrub'}</Btn>}
-        {scrubbing && <Btn className="btn" onClick={act('pause')}>Pause scrub</Btn>}
-        {(scrubbing || paused) && <Btn className="btn" confirm="Stop the scrub?" onClick={act('stop')}>Stop scrub</Btn>}
-        <button className="btn" onClick={() => setCfg(!cfg)}>{cfg ? 'Hide vdevs' : 'Vdevs'}</button>
-      </div>
-      {cfg && <pre className="unit-file">{p.config}</pre>}
-    </section>
-  )
-}
-
-function DatasetRow({ d, onChanged }: { d: ZFSInfo['datasets'][number]; onChanged: () => void }) {
-  const [snaps, setSnaps] = useState<ZFSSnapshot[] | null>(null)
-  const [open, setOpen] = useState(false)
-  async function toggle() {
-    setOpen(!open)
-    if (!open && !snaps) { try { setSnaps(await api.zfsSnapshots(d.name)) } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err'); setSnaps([]) } }
-  }
-  async function snapshot() {
-    const def = 'hamlab-' + new Date().toISOString().slice(0, 16).replace(/[-:T]/g, '').replace(/(\d{8})(\d{4})/, '$1-$2')
-    const name = await askText(`Snapshot name for ${d.name}@`, def)
-    if (!name) return
-    try { await api.zfsSnapshot(d.name, name.trim()); toast(`${d.name}@${name.trim()} created`); setSnaps(null); onChanged() }
-    catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
-  }
-  const depth = d.name.split('/').length - 1
-  return (
-    <>
-      <div className="ds-row" style={{ paddingLeft: 12 + depth * 16 }}>
-        <span className="ds-name" onClick={toggle}><span className="chev">{open ? '▾' : '▸'}</span>{d.name.split('/').pop()}{d.type === 'volume' && <span className="badge">zvol</span>}</span>
-        <span className="num">{fmtBytes(d.used)}</span>
-        <span className="num muted">{fmtBytes(d.refer)}</span>
-        <span className="num muted">{d.used_by_snapshots ? fmtBytes(d.used_by_snapshots) : '—'}</span>
-        <span className="num muted">{d.snapshots}</span>
-        <span className="num muted">{d.compressratio}</span>
-        <span className="ds-mount muted">{d.mount}</span>
-      </div>
-      {open && (
-        <div className="ds-snaps">
-          <div className="svc-actions"><Btn className="btn" onClick={snapshot}>Snapshot now</Btn><span className="muted">avail {fmtBytes(d.avail)}</span></div>
-          {snaps === null ? <div className="muted"><Spinner /> listing…</div> : snaps.length === 0 ? <div className="muted">No snapshots.</div> : (
-            <div className="snap-list">{snaps.slice().reverse().map((s) => <div key={s.name} className="snap"><span className="mono">{s.name.split('@')[1]}</span><span className="num muted">{new Date(s.created).toLocaleString()} · {fmtBytes(s.used)}</span></div>)}</div>
-          )}
-        </div>
-      )}
-    </>
-  )
-}
-
 // ---- page ----
 export default function Disks() {
  const [devs, setDevs] = useState<StorageDevice[] | null>(null)
-  const [zfs, setZfs] = useState<ZFSInfo | null>(null)
  const [hasSmart, setHasSmart] = useState(true)
  const [err, setErr] = useState('')
  const [task, setTask] = useState<string | null>(null)
@@ -194,7 +117,7 @@ export default function Disks() {
  const load = useCallback(async () => {
    try {
      const r = await api.storage()
-      setDevs(r.devices); setZfs(r.zfs); setHasSmart(r.smartctl); setErr('')
+      setDevs(r.devices); setHasSmart(r.smartctl); setErr('')
    } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
  }, [])
  useEffect(() => { load() }, [load])
@@ -237,18 +160,6 @@ export default function Disks() {
        {devs.map((d) => <DeviceCard key={d.name} d={d} live={liveFor(d)} forceOpen={allSmart ? true : null} />)}
      </div>

-      <div className="dash-bar"><h2 className="section">ZFS</h2></div>
-      {zfs && !zfs.available && <div className="notice">{zfs.message || 'No ZFS pools on this host.'}</div>}
-      {zfs?.available && zfs.pools.length === 0 && <div className="notice">ZFS is present but no pools are imported.</div>}
-      {zfs?.available && zfs.pools.length > 0 && (
-        <>
-          <div className="cards">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
-          <section className="card datasets">
-            <div className="ds-row head"><span>Dataset</span><span className="num">Used</span><span className="num">Refer</span><span className="num">In snaps</span><span className="num">Snaps</span><span className="num">Ratio</span><span>Mount</span></div>
-            {zfs.datasets.map((d) => <DatasetRow key={d.name} d={d} onChanged={load} />)}
-          </section>
-        </>
-      )}
    </div>
  )
 }
@@ -11,6 +11,7 @@ import Services from './Services'
 import Jobs from './Jobs'
 import Updates from './Updates'
 import Disks from './Disks'
+import ZFS from './ZFS'
 import Files from './Files'
 import Top from './Top'
 import Machines from './Machines'
@@ -57,6 +58,7 @@ const GROUPS: Group[] = [
  { id: 'jobs', label: 'Jobs', icon: ClockIcon },
  { id: 'updates', label: 'Updates', icon: '⇪' },
  { id: 'disks', label: 'Disks', icon: '▤' },
+  { id: 'zfs', label: 'ZFS', icon: '⛁' },
  { id: 'usage', label: 'Usage', icon: '▧' },
  { id: 'files', label: 'Files', icon: FolderIcon },
  { id: 'alerts', label: 'Alerts', icon: BellIcon },
@@ -66,8 +68,8 @@ const GROUPS: Group[] = [
  { id: 'settings', label: 'Settings', icon: '⚙' },
 ]

-type View = 'terminal' | 'widgets' | 'docker' | 'alerts' | 'services' | 'jobs' | 'updates' | 'disks' | 'usage' | 'files' | 'procs' | 'machines' | 'users' | 'settings'
-const VIEWS: View[] = ['terminal', 'widgets', 'docker', 'alerts', 'services', 'jobs', 'updates', 'disks', 'usage', 'files', 'procs', 'machines', 'users', 'settings']
+type View = 'terminal' | 'widgets' | 'docker' | 'alerts' | 'services' | 'jobs' | 'updates' | 'disks' | 'zfs' | 'usage' | 'files' | 'procs' | 'machines' | 'users' | 'settings'
+const VIEWS: View[] = ['terminal', 'widgets', 'docker', 'alerts', 'services', 'jobs', 'updates', 'disks', 'zfs', 'usage', 'files', 'procs', 'machines', 'users', 'settings']
 const HUB_ONLY: View[] = ['machines', 'users', 'settings', 'alerts']

 // URL hash is the source of truth for where you are: #/<machine|hub>/<view>. Back and
@@ -277,6 +279,7 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
          {view === 'jobs' && <Jobs />}
          {view === 'updates' && <Updates />}
          {view === 'disks' && <Disks />}
+          {view === 'zfs' && <ZFS />}
          {view === 'files' && <Files onOpenInTerminal={runInTerminal} />}
          {termView && <TermTabs terms={ordered} active={active} creating={creating}
            onSelect={setActive} onNew={create} onRename={rename} onClose={close} onMove={moveTab}
@@ -303,7 +306,7 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
        <span>{machine ? `${title} · ` : ''}{me.version.startsWith('v') ? me.version : 'v' + me.version}</span>
        <span>up {fmtUptime(me.uptime)}</span>
        <span className="spacer" />
-        <span className="muted">{view === 'widgets' ? 'Widgets' : view === 'docker' ? 'Docker' : view === 'alerts' ? 'Alerts' : view === 'services' ? 'Services' : view === 'jobs' ? 'Jobs' : view === 'updates' ? 'Updates' : view === 'disks' ? 'Disks' : view === 'usage' ? 'Usage' : view === 'files' ? 'Files' : view === 'procs' ? 'Processes' : view === 'machines' ? 'Machines' : view === 'users' ? 'Users' : view === 'settings' ? 'Settings' : activeTerm ? activeTerm.name : ''}</span>
+        <span className="muted">{view === 'widgets' ? 'Widgets' : view === 'docker' ? 'Docker' : view === 'alerts' ? 'Alerts' : view === 'services' ? 'Services' : view === 'jobs' ? 'Jobs' : view === 'updates' ? 'Updates' : view === 'disks' ? 'Disks' : view === 'zfs' ? 'ZFS' : view === 'usage' ? 'Usage' : view === 'files' ? 'Files' : view === 'procs' ? 'Processes' : view === 'machines' ? 'Machines' : view === 'users' ? 'Users' : view === 'settings' ? 'Settings' : activeTerm ? activeTerm.name : ''}</span>
      </footer>
    </div>
  )
@@ -0,0 +1,303 @@
+// ZFS: pools, datasets, snapshots, and a schedule for taking and expiring them.
+//
+// Split out of the Disks tab on 2026-09-24. Disks is the hardware; this is the filesystem
+// on top of it, which has enough of its own to say.
+//
+// On the schedule: `grid` has run zfSnap from root cron since before Ham Lab existed, and it
+// works. So this reads and writes the same snapshot names — `2026-09-24_02.30.01--6w`, with
+// the retention in the name — rather than inventing a second convention for the two tools to
+// disagree over. An existing cron job is detected and shown, so the page tells the truth
+// about the machine whether Ham Lab or something else is doing the work.
+import { FormEvent, useCallback, useEffect, useState } from 'react'
+import { api, ZFSExternal, ZFSInfo, ZFSOverview, ZFSPolicy, ZFSSnapshot } from './api'
+import { fmtBytes } from './fmt'
+import { useRefreshMs } from './prefs'
+import { askText, askYes, Btn, Loading, Meter, Spinner, toast, useEscape } from './ui'
+
+const ago = (t?: string | number) => {
+  if (!t) return 'never'
+  const s = Math.max(0, (Date.now() - new Date(t).getTime()) / 1000)
+  return s < 60 ? 'just now' : s < 3600 ? `${Math.floor(s / 60)} min ago` : s < 86400 ? `${Math.floor(s / 3600)} h ago` : `${Math.floor(s / 86400)} d ago`
+}
+const soon = (t?: string) => {
+  if (!t) return '—'
+  const s = (new Date(t).getTime() - Date.now()) / 1000
+  return s < 60 ? 'any moment' : s < 3600 ? `in ${Math.round(s / 60)} min` : s < 86400 ? `in ${Math.round(s / 3600)} h` : `in ${Math.round(s / 86400)} d`
+}
+const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+const describe = (p: ZFSPolicy) => {
+  const when = p.every === 'hourly' ? `every hour at :${(p.at.split(':')[1] ?? '00').padStart(2, '0')}`
+    : p.every === 'daily' ? `every day at ${p.at}`
+      : p.every === 'weekly' ? `every ${WEEKDAYS[p.weekday] ?? 'Sunday'} at ${p.at}`
+        : `on day ${p.day} of the month at ${p.at}`
+  return `${when} · keep ${p.keep_for}${p.recursive ? ' · recursive' : ''}`
+}
+
+// ---- pools and datasets (moved from the Disks tab) ----
+function PoolCard({ p, onChanged }: { p: ZFSInfo['pools'][number]; onChanged: () => void }) {
+  const scrubbing = /scrub in progress/i.test(p.scan ?? '')
+  const paused = /scrub paused/i.test(p.scan ?? '')
+  const [cfg, setCfg] = useState(false)
+  const act = (a: 'start' | 'pause' | 'stop') => async () => {
+    try { await api.zfsScrub(p.name, a); toast(`scrub ${a}: ok`); onChanged() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  return (
+    <section className="card">
+      <div className="sub-head">
+        <span className={'dot ' + (p.health === 'ONLINE' ? 'ok' : p.health === 'DEGRADED' ? 'warn' : 'bad')} />
+        <span className="dname">{p.name}</span>
+        <span className="badge">{p.health}</span>
+        <span className="spacer" />
+        <span className="num">{fmtBytes(p.alloc)} / {fmtBytes(p.size)} · {p.cap}%</span>
+      </div>
+      <Meter frac={p.cap / 100} cls={p.cap >= 90 ? 'bad' : p.cap >= 80 ? 'warn' : ''} />
+      <div className="props" style={{ marginTop: 8 }}>
+        <div><span className="k">Free</span><span>{fmtBytes(p.free)} · fragmentation {p.frag}% · dedup {p.dedup}</span></div>
+        {p.scan && <div><span className="k">Scan</span><span style={{ whiteSpace: 'normal' }}>{p.scan}</span></div>}
+        {p.errors && <div><span className="k">Errors</span><span className={p.errors.startsWith('No known') ? '' : 'warn-text'}>{p.errors}</span></div>}
+      </div>
+      <div className="svc-actions">
+        {!scrubbing && <Btn className="btn" confirm={`Start a scrub of ${p.name}? It reads the whole pool and can take many hours.`} onClick={act('start')}>{paused ? 'Resume scrub' : 'Scrub'}</Btn>}
+        {scrubbing && <Btn className="btn" onClick={act('pause')}>Pause scrub</Btn>}
+        {(scrubbing || paused) && <Btn className="btn" confirm="Stop the scrub?" onClick={act('stop')}>Stop scrub</Btn>}
+        <button className="btn" onClick={() => setCfg(!cfg)}>{cfg ? 'Hide vdevs' : 'Vdevs'}</button>
+      </div>
+      {cfg && <pre className="unit-file">{p.config}</pre>}
+    </section>
+  )
+}
+
+function DatasetRow({ d, onChanged }: { d: ZFSInfo['datasets'][number]; onChanged: () => void }) {
+  const [snaps, setSnaps] = useState<ZFSSnapshot[] | null>(null)
+  const [open, setOpen] = useState(false)
+  async function toggle() {
+    setOpen(!open)
+    if (!open && !snaps) { try { setSnaps(await api.zfsSnapshots(d.name)) } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err'); setSnaps([]) } }
+  }
+  async function snapshot() {
+    const def = 'hamlab-' + new Date().toISOString().slice(0, 16).replace(/[-:T]/g, '').replace(/(\d{8})(\d{4})/, '$1-$2')
+    const name = await askText(`Snapshot name for ${d.name}@`, def)
+    if (!name) return
+    try { await api.zfsSnapshot(d.name, name.trim()); toast(`${d.name}@${name.trim()} created`); setSnaps(null); onChanged() }
+    catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  const depth = d.name.split('/').length - 1
+  return (
+    <>
+      <div className="ds-row" style={{ paddingLeft: 12 + depth * 16 }}>
+        <span className="ds-name" onClick={toggle}><span className="chev">{open ? '▾' : '▸'}</span>{d.name.split('/').pop()}{d.type === 'volume' && <span className="badge">zvol</span>}</span>
+        <span className="num">{fmtBytes(d.used)}</span>
+        <span className="num muted">{fmtBytes(d.refer)}</span>
+        <span className="num muted">{d.used_by_snapshots ? fmtBytes(d.used_by_snapshots) : '—'}</span>
+        <span className="num muted">{d.snapshots}</span>
+        <span className="num muted">{d.compressratio}</span>
+        <span className="ds-mount muted">{d.mount}</span>
+      </div>
+      {open && (
+        <div className="ds-snaps">
+          <div className="svc-actions"><Btn className="btn" onClick={snapshot}>Snapshot now</Btn><span className="muted">avail {fmtBytes(d.avail)}</span></div>
+          {snaps === null ? <div className="muted"><Spinner /> listing…</div> : snaps.length === 0 ? <div className="muted">No snapshots.</div> : (
+            <div className="snap-list">{snaps.slice().reverse().map((s) => <div key={s.name} className="snap"><span className="mono">{s.name.split('@')[1]}</span><span className="num muted">{new Date(s.created).toLocaleString()} · {fmtBytes(s.used)}</span></div>)}</div>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+// ---- schedules ----
+
+function ExternalNotice({ x, mine }: { x: ExternalJob; mine: number }) {
+  return (
+    <div className={'notice' + (mine > 0 ? ' attn' : '')} style={{ marginBottom: 8 }}>
+      <b>{x.tool}</b> is already taking snapshots on this machine, from cron as <b>{x.user}</b>:
+      <div className="mono small" style={{ margin: '4px 0', wordBreak: 'break-all' }}>{x.schedule} &nbsp; {x.command}</div>
+      <span className="muted">in {x.source}{x.last ? ` · last ran ${ago(x.last)}` : ''}</span>
+      {mine > 0
+        ? <div className="warn" style={{ marginTop: 6 }}>A Ham Lab schedule is running as well. Both use the same names and both only remove snapshots that have passed the expiry written into them, so they will not fight — but they will take twice as many. Keep one.</div>
+        : <div className="muted small" style={{ marginTop: 6 }}>Ham Lab reads the snapshots it makes and shows when each expires. Add a schedule here only if you mean to replace it; edit this one on the Jobs tab.</div>}
+    </div>
+  )
+}
+type ExternalJob = ZFSExternal
+
+function ScheduleCard({ p, next, onChanged, onEdit }: { p: ZFSPolicy; next?: string; onChanged: () => void; onEdit: () => void }) {
+  const [expired, setExpired] = useState<ZFSSnapshot[] | null>(null)
+  const [busy, setBusy] = useState('')
+  const preview = async () => {
+    setBusy('preview')
+    try { setExpired((await api.zfsExpired(p.id)).expired) } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') } finally { setBusy('') }
+  }
+  const run = async () => {
+    const n = expired?.length
+    const warn = n ? ` It will also destroy ${n} expired snapshot${n === 1 ? '' : 's'}.` : ''
+    if (!await askYes(`Take a snapshot of ${p.dataset} now?${warn}`, 'Run now')) return
+    setBusy('run')
+    try { const r = await api.runZfsSchedule(p.id); toast(`${r.taken}${r.pruned.length ? ` · ${r.pruned.length} expired removed` : ''}`); setExpired(null); onChanged() }
+    catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') } finally { setBusy('') }
+  }
+  const remove = async () => {
+    if (!await askYes(`Remove the schedule "${p.name}"? The snapshots it already took are left exactly as they are.`, 'Remove')) return
+    try { await api.deleteZfsSchedule(p.id); toast('schedule removed'); onChanged() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  const toggle = async () => {
+    try { await api.saveZfsSchedule({ ...p, enabled: !p.enabled }); onChanged() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  return (
+    <section className="card">
+      <div className="sub-head">
+        <span className={'dot ' + (p.last_error ? 'bad' : p.enabled ? 'ok' : '')} />
+        <span className="dname">{p.name || p.dataset}</span>
+        {!p.enabled && <span className="badge">paused</span>}
+        <span className="spacer" />
+        <span className="muted small">{p.enabled ? soon(next) : 'not scheduled'}</span>
+      </div>
+      <div className="props" style={{ marginTop: 6 }}>
+        <div><span className="k">Dataset</span><span className="mono">{p.dataset}</span></div>
+        <div><span className="k">When</span><span>{describe(p)}</span></div>
+        <div><span className="k">Last run</span><span>{ago(p.last_run)}{p.pruned ? ` · ${p.pruned} expired removed` : ''}</span></div>
+        {p.last_taken && <div><span className="k">Last snapshot</span><span className="mono small">{p.last_taken.split('@')[1]}</span></div>}
+        {p.keep_min > 0 && <div><span className="k">Floor</span><span>always keep the newest {p.keep_min}</span></div>}
+      </div>
+      {p.last_error && <div className="error" style={{ marginTop: 8 }}>{p.last_error}</div>}
+      {expired && (
+        <div className="notice" style={{ marginTop: 8 }}>
+          {expired.length === 0 ? 'Nothing has expired — a run now would only take a snapshot.' : (
+            <>
+              <b>{expired.length}</b> snapshot{expired.length === 1 ? '' : 's'} would be destroyed by a run now:
+              <div className="snap-list" style={{ marginTop: 6, maxHeight: 180, overflow: 'auto' }}>
+                {expired.map((s) => <div key={s.name} className="snap"><span className="mono">{s.name.split('@')[1]}</span><span className="num muted">{new Date(s.created).toLocaleDateString()} · {fmtBytes(s.used)}</span></div>)}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+      <div className="svc-actions">
+        <Btn className="btn" busy={busy === 'preview'} onClick={preview}>What would it delete?</Btn>
+        <Btn className="btn on" busy={busy === 'run'} onClick={run}>Run now</Btn>
+        <button className="btn" onClick={onEdit}>Edit</button>
+        <Btn className="btn" onClick={toggle}>{p.enabled ? 'Pause' : 'Resume'}</Btn>
+        <Btn className="btn danger" onClick={remove}>Remove</Btn>
+      </div>
+    </section>
+  )
+}
+
+const BLANK: Partial<ZFSPolicy> = { name: '', dataset: '', recursive: true, every: 'daily', at: '02:30', weekday: 0, day: 1, keep_for: '6w', keep_min: 1, enabled: true }
+
+function ScheduleDialog({ p, datasets, onClose, onSaved }: { p: Partial<ZFSPolicy>; datasets: string[]; onClose: () => void; onSaved: () => void }) {
+  const [f, setF] = useState<Partial<ZFSPolicy>>({ ...BLANK, ...p })
+  const [err, setErr] = useState('')
+  useEscape(onClose)
+  const set = (k: keyof ZFSPolicy, v: unknown) => setF((x) => ({ ...x, [k]: v }))
+  const save = async (e: FormEvent) => {
+    e.preventDefault(); setErr('')
+    try { await api.saveZfsSchedule({ ...f, name: (f.name || '').trim() || f.dataset }); onSaved() }
+    catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
+  }
+  return (
+    <div className="modal-back" onClick={onClose}>
+      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={save}>
+        <h3>{f.id ? 'Edit schedule' : 'New snapshot schedule'}</h3>
+        <label className="muted">Dataset
+          <select value={f.dataset} onChange={(e) => set('dataset', e.target.value)} required>
+            <option value="">choose…</option>
+            {datasets.map((d) => <option key={d} value={d}>{d}</option>)}
+          </select>
+        </label>
+        <label className="muted">Name — what this schedule is for
+          <input value={f.name} onChange={(e) => set('name', e.target.value)} placeholder={f.dataset || 'nightly'} maxLength={64} />
+        </label>
+        <label className="muted">How often
+          <span className="chips">
+            {(['hourly', 'daily', 'weekly', 'monthly'] as const).map((k) => (
+              <button type="button" key={k} className={'chip' + (f.every === k ? ' on' : '')} onClick={() => set('every', k)}>{k}</button>
+            ))}
+          </span>
+        </label>
+        <label className="muted">At
+          <input type="time" value={f.at} onChange={(e) => set('at', e.target.value)} />
+        </label>
+        {f.every === 'weekly' && (
+          <label className="muted">On
+            <select value={f.weekday} onChange={(e) => set('weekday', Number(e.target.value))}>
+              {WEEKDAYS.map((d, i) => <option key={d} value={i}>{d}</option>)}
+            </select>
+          </label>
+        )}
+        {f.every === 'monthly' && (
+          <label className="muted">Day of the month — 1 to 28, so every month has one
+            <input type="number" min={1} max={28} value={f.day} onChange={(e) => set('day', Number(e.target.value))} />
+          </label>
+        )}
+        <label className="muted">Keep for — written into each snapshot's name, as zfSnap does it: 6w, 30d, 12h
+          <input value={f.keep_for} onChange={(e) => set('keep_for', e.target.value)} placeholder="6w" spellCheck={false} required />
+        </label>
+        <label className="muted">Always keep the newest — a floor, whatever their age
+          <input type="number" min={0} max={99} value={f.keep_min} onChange={(e) => set('keep_min', Number(e.target.value))} />
+        </label>
+        <label className="muted" style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <input type="checkbox" checked={!!f.recursive} onChange={(e) => set('recursive', e.target.checked)} style={{ width: 'auto' }} />
+          Recursive — one atomic snapshot of this dataset and everything under it
+        </label>
+        <label className="muted" style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <input type="checkbox" checked={!!f.enabled} onChange={(e) => set('enabled', e.target.checked)} style={{ width: 'auto' }} />
+          Enabled
+        </label>
+        {err && <div className="error">{err}</div>}
+        <div className="svc-actions">
+          <button type="submit" className="btn on" disabled={!f.dataset || !f.keep_for}>Save</button>
+          <span className="spacer" />
+          <button type="button" className="btn" onClick={onClose}>Cancel</button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+// ---- page ----
+
+export default function ZFS() {
+  const [ov, setOv] = useState<ZFSOverview | null>(null)
+  const [err, setErr] = useState('')
+  const [editing, setEditing] = useState<Partial<ZFSPolicy> | null>(null)
+  const rate = useRefreshMs()
+
+  const load = useCallback(async () => {
+    try { setOv(await api.zfsOverview()); setErr('') } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
+  }, [])
+  useEffect(() => { load() }, [load])
+  useEffect(() => { const t = setInterval(load, Math.max(5000, rate * 10)); return () => clearInterval(t) }, [load, rate])
+
+  if (err && !ov) return <div className="dash"><div className="error">{err}</div></div>
+  if (!ov) return <div className="dash"><Loading label="Reading ZFS…" /></div>
+  const zfs: ZFSInfo = ov.zfs
+  const datasets = zfs.datasets.filter((d) => d.type !== 'volume').map((d) => d.name)
+  const mine = ov.policies.filter((x) => x.policy.enabled).length
+
+  if (!zfs.available) return <div className="dash"><div className="notice">{zfs.message || 'No ZFS on this host.'}</div></div>
+
+  return (
+    <div className="dash">
+      <div className="dash-bar"><h2 className="section">Pools</h2></div>
+      {zfs.pools.length === 0 && <div className="notice">ZFS is present but no pools are imported.</div>}
+      <div className="cards">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
+
+      <div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Snapshot schedules</h2><span className="spacer" />
+        <Btn className="btn on" onClick={() => setEditing({ ...BLANK, dataset: zfs.pools[0]?.name ?? '' })}>+ New schedule</Btn>
+      </div>
+      {ov.external && <ExternalNotice x={ov.external} mine={mine} />}
+      {ov.policies.length === 0 && !ov.external && <div className="notice">Nothing is taking snapshots on a schedule. Snapshots are written the way zfSnap writes them, with the retention in the name, so anything already here is understood.</div>}
+      <div className="cards">{ov.policies.map(({ policy, next }) => (
+        <ScheduleCard key={policy.id} p={policy} next={next} onChanged={load} onEdit={() => setEditing(policy)} />
+      ))}</div>
+
+      <div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Datasets</h2><span className="spacer" /><span className="muted small">used · referenced · in snapshots · count · compression · mount</span></div>
+      <section className="card ds-table">
+        {zfs.datasets.map((d) => <DatasetRow key={d.name} d={d} onChanged={load} />)}
+      </section>
+
+      {editing && <ScheduleDialog p={editing} datasets={datasets.length ? datasets : zfs.pools.map((p) => p.name)} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); load() }} />}
+    </div>
+  )
+}
@@ -133,6 +133,10 @@ export interface SpaceNode { name: string; dir: boolean; size: number; apparent:
 export interface SpaceTree extends SpaceNode { path: string; children?: SpaceTree[]; more_n?: number; more_size?: number; total: number }
 export interface SpaceFile { path: string; size: number; apparent: number; mtime: number }

+export interface ZFSPolicy { id: string; name: string; dataset: string; recursive: boolean; every: 'hourly' | 'daily' | 'weekly' | 'monthly'; at: string; weekday: number; day: number; keep_for: string; keep_min: number; prefix?: string; enabled: boolean; last_run?: string; last_error?: string; last_taken?: string; pruned?: number }
+export interface ZFSExternal { tool: string; schedule: string; command: string; user: string; source: string; id: string; next?: number; last?: number }
+export interface ZFSOverview { zfs: ZFSInfo; policies: { policy: ZFSPolicy; next?: string }[]; external?: ZFSExternal | null }
+
 export interface FileEntry { name: string; type: 'dir' | 'file' | 'link' | 'other'; size: number; mode: string; perm: string; mtime: number; user: string; group: string; target?: string; broken?: boolean }
 export interface FileInfo extends FileEntry { path: string; text: boolean }

@@ -179,6 +183,12 @@ export const api = {
  storage: () => req<{ devices: StorageDevice[]; zfs: ZFSInfo; smartctl: boolean }>('GET', '/api/storage'),
  smart: (dev: string, force = false) => req<SmartInfo>('GET', `/api/storage/smart/${dev}${force ? '?force=1' : ''}`),
  smartTest: (dev: string, kind: 'short' | 'long') => req<void>('POST', `/api/storage/smart/${dev}/test/${kind}`),
+  zfsOverview: () => req<ZFSOverview>('GET', '/api/zfs'),
+  saveZfsSchedule: (p: Partial<ZFSPolicy>) => req<ZFSPolicy>('PUT', '/api/zfs/schedules', p),
+  deleteZfsSchedule: (id: string) => req<void>('DELETE', `/api/zfs/schedules/${encodeURIComponent(id)}`),
+  zfsExpired: (id: string) => req<{ expired: ZFSSnapshot[] }>('GET', `/api/zfs/schedules/${encodeURIComponent(id)}/expired`),
+  runZfsSchedule: (id: string) => req<{ taken: string; pruned: string[] }>('POST', `/api/zfs/schedules/${encodeURIComponent(id)}/run`),
+  deleteZfsSnapshot: (name: string, recursive: boolean) => req<void>('POST', '/api/zfs/snapshots/delete', { name, confirm: name, recursive }),
  zfsSnapshots: (dataset: string) => req<ZFSSnapshot[]>('GET', `/api/storage/zfs/snapshots?dataset=${encodeURIComponent(dataset)}`),
  zfsScrub: (pool: string, action: 'start' | 'pause' | 'stop') => req<void>('POST', `/api/storage/zfs/scrub/${encodeURIComponent(pool)}/${action}`),
  zfsSnapshot: (dataset: string, name: string) => req<void>('POST', '/api/storage/zfs/snapshot', { dataset, name }),
@@ -729,3 +729,7 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%,
 .t-ifs .t-if { padding: 0 4px; border-radius: 3px; color: var(--muted); }
 .t-ifs .t-if:hover { color: var(--fg); background: var(--bg3); }
 .t-ifs .t-if.on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
+
+/* ZFS: the schedule dialog's controls match the rest of the modal forms */
+.modal select, .modal input[type=time], .modal input[type=number] { padding: 9px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 16px; }
+.modal .chips { margin-top: 2px; }
@@ -14,6 +14,12 @@ export function CloseBtn({ onClick, title = 'Close' }: { onClick: () => void; ti
  )
 }

+// A filled bar. Red past 95%, amber past 85%, unless the caller says otherwise.
+export function Meter({ frac, cls }: { frac: number; cls?: string }) {
+  const c = cls ?? (frac >= 0.95 ? 'bad' : frac >= 0.85 ? 'warn' : '')
+  return <div className="meter"><div className={'fill ' + c} style={{ width: `${Math.min(100, Math.max(0, frac * 100))}%` }} /></div>
+}
+
 export function Loading({ label = 'Loading…' }: { label?: string }) {
  return <div className="center muted loading"><Spinner size={22} /><div>{label}</div></div>
 }