landfall 0.5.4 → 0.6.0

package/dist/index.html

@@ -160,7 +160,52 @@ button.more { padding-inline: 8px; letter-spacing: .05em; }
 .tile .t { color: var(--faint); font-size: var(--fs-sm); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tile.add { border: 1.5px dashed var(--line-strong); background: none; box-shadow: none; color: var(--dim); display: grid; place-items: center; min-height: 68px; }
 .tile.add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); transform: none; box-shadow: none; }
-.cli { margin-top: 32px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--hover); font-size: var(--fs); color: var(--dim); }
+.home-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--dim); font-size: var(--fs); margin: 0 0 20px; }
+.home-sub .sep { width: 1px; height: 14px; background: var(--line-strong); }
+.home-sub .spin { width: 10px; height: 10px; vertical-align: -1px; }
+.home-note { font-size: var(--fs-sm); margin: 10px 0 0; }
+.tile .w { font-size: var(--fs-xs); margin-top: 4px; color: var(--faint); }
+.tile .w.login { color: var(--warn); } .tile .w.down { color: var(--bad); }
+.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin: 28px 0 20px; align-items: start; }
+.cols > .card + .card { margin-top: 0; }
+.meters { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
+.meter { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
+.meter .k { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); color: var(--dim); }
+.meter .k span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.meter .v { display: flex; align-items: flex-end; gap: 10px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 2px 0 6px; white-space: nowrap; }
+.meter .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
+.meter .bar > i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
+.meter.warn .bar > i { background: var(--warn); } .meter.bad .bar > i { background: var(--bad); }
+.meter .t { font-size: var(--fs-xs); color: var(--faint); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tchart { position: relative; }
+.tchart svg { display: block; width: 100%; height: 120px; border-bottom: 1px solid var(--line); }
+.tchart .tmax { position: absolute; top: -2px; left: 0; font-size: var(--fs-xs); }
+.tticks { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: var(--fs-xs); margin-top: 4px; }
+.tlegend { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--dim); margin-top: 8px; }
+.tlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
+.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px 16px; margin-top: 20px; }
+.cols .card + .card { margin-top: 0; }
+.cols + .card { margin-top: 20px; }
+.meter svg { flex: 1; min-width: 0; height: 26px; color: var(--accent); }
+td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.recent { list-style: none; margin: 0; padding: 0; }
+.recent li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
+.recent li:last-child { border-bottom: 0; }
+.recent li > div { flex: 1; min-width: 0; }
+.recent li .mono { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.where-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
+.where-cols > div { padding: 14px 18px 16px; }
+.where-cols > div + div { border-left: 1px solid var(--line); }
+@container (max-width: 720px) { .where-cols > div + div { border-left: 0; border-top: 1px solid var(--line); } }
+.where-cols h3 { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
+.paths { margin: 0; font-size: var(--fs-sm); }
+.paths dt { overflow-wrap: anywhere; color: var(--text); margin-top: 8px; }
+.paths dt:first-child { margin-top: 0; }
+.paths dd { margin: 1px 0 0; color: var(--dim); }
+.nav-home { margin: 6px 0 2px; grid-template-columns: 14px minmax(0, 1fr); column-gap: 4px; }
+.nav-home .ico { width: 14px; height: 14px; color: var(--faint); }
+.nav-home.on .ico { color: var(--accent); }
+.cli { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--hover); font-size: var(--fs); color: var(--dim); }
 .cli pre { margin: 10px 0 0; font: 12.5px/1.7 var(--mono); color: var(--text); white-space: pre-wrap; }
 .cli pre span { color: var(--faint); }
 
@@ -184,7 +229,7 @@ td.acts button { margin-left: 4px; }
 .scroll { overflow-x: auto; }
 .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 7px; vertical-align: 1px; }
 .dot.up { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); } .dot.down { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); } .dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
-.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; padding: 0 8px; border-radius: 99px; background: var(--hover); color: var(--dim); border: 1px solid var(--line); }
+.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; padding: 0 8px; border-radius: 99px; background: var(--hover); color: var(--dim); border: 1px solid var(--line); white-space: nowrap; }
 .badge.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
 .badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
 .badge.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
@@ -307,7 +352,6 @@ body.dragging::after {
   <header>
     <a class="brand" href="#/"><svg viewBox="0 0 16 16" aria-hidden="true"><rect width="16" height="16" rx="4" fill="var(--accent)"/><path d="M4 5h8M4 8h8M4 11h5" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>landfall <small id="version"></small></a>
     <div class="project" id="project"></div>
-    <button type="button" class="sm ghost" id="app-settings" title="landfall's defaults for every server (lf config)">Defaults</button>
   </header>
   <!-- The filter stays put across renders, so typing keeps its focus. -->
   <nav class="servers" id="nav">
@@ -345,11 +389,19 @@ const S = {
   tab: "sites",
   overview: {},          // name -> {data} | {error} | {loading}
   firewall: {},
+  system: {},            // name -> {data: lf system --json}
   history: {},
   updates: {},
   facts: {},
+  stats: {},             // name -> {data: lf stats --json}; reloads every few seconds while the tab is open
+  statsLog: {},          // name -> [{cpu, mem}], the last samples, for the sparklines
+  disk: {},              // name -> {data: lf disk --json}, only on request: du takes a while
   settings: {},          // name -> {data: lf server config --json + dns of the main domain}
-  dns: {},               // name -> {data: {ips, domains: [{domain, ips, ok, https}]}}
+  dns: {},               // name -> {data: {ips, domains: [{domain, ips, ok, https: lf check}]}}; checked again each minute
+  traffic: {},           // name -> {data: lf traffic --json --since S.since}
+  since: "24h",          // the Traffic tab's range
+  errs: {},              // name -> {data: lf traffic --json --since 24h}, for the sites' errors card
+  certs: {},             // name -> {data: lf certs --json}
   open: new Set(),       // expanded site rows
   filter: "",            // server list filter
   reach: {},             // name -> {state: ok|login|down, detail, ms} from /api/reach
@@ -505,10 +557,10 @@ window.addEventListener("hashchange", route);
 
 // ---- loading -------------------------------------------------------------
 
-const STORE = { sites: "overview", tunnels: "overview", traefik: "settings", facts: "facts", updates: "updates", firewall: "firewall", history: "history", settings: "settings" };
-const URLS = { sites: "", tunnels: "", traefik: "/config", facts: "/facts", updates: "/updates", firewall: "/firewall", history: "/history", settings: "/config" };
-// A server's sections, in the list and as tabs on phones; keys 1-7 switch between them.
-const SECTIONS = [["sites", "Sites"], ["tunnels", "Tunnels"], ["traefik", "Traefik"], ["updates", "Updates"], ["firewall", "Firewall"], ["history", "History"], ["settings", "Settings"]];
+const STORE = { sites: "overview", tunnels: "overview", stats: "stats", traffic: "traffic", traefik: "settings", facts: "facts", updates: "updates", firewall: "firewall", system: "system", history: "history", settings: "settings" };
+const URLS = { sites: "", tunnels: "", stats: "/stats", traffic: "/traffic", traefik: "/config", facts: "/facts", updates: "/updates", firewall: "/firewall", system: "/system", history: "/history", settings: "/config" };
+// A server's sections, in the list and as tabs on phones; keys 1-9 switch between them.
+const SECTIONS = [["sites", "Sites"], ["tunnels", "Tunnels"], ["stats", "Stats"], ["traffic", "Traffic"], ["traefik", "Traefik"], ["updates", "Updates"], ["firewall", "Firewall"], ["system", "System"], ["history", "History"], ["settings", "Settings"]];
 
 // The overview and facts drive the header, so every tab needs them.
 const needs = (tab) => (STORE[tab] === "overview" ? ["sites", "facts"] : ["sites", "facts", tab]);
@@ -518,14 +570,16 @@ function load(name, tab, force = false) {
     if (store[name] && !force) continue;
     // Keep what is shown while it reloads; views show a spinner only when they have nothing yet.
     store[name] = { ...store[name], loading: true, error: undefined };
-    http(`/api/servers/${encodeURIComponent(name)}${URLS[t]}`).then(
-      (data) => ((store[name] = { data }), render()),
+    http(`/api/servers/${encodeURIComponent(name)}${URLS[t]}${t === "traffic" ? `?since=${S.since}` : ""}`).then(
+      (data) => (t === "stats" && logStats(name, data), (store[name] = { data }), render()),
       (e) => ((store[name] = { error: e.message }), render()),
     );
   }
 }
 function invalidate(name) {
   delete S.dns[name];
+  delete S.errs[name];
+  delete S.certs[name];
   // What is on screen reloads in place; other tabs reload when opened.
   const shown = new Set(S.sel === name ? needs(S.tab).map((t) => STORE[t]) : []);
   for (const k of Object.values(STORE)) if (!shown.has(k)) delete S[k][name];
@@ -1320,10 +1374,11 @@ function authDialog(n, m) {
   });
 }
 
-function ensureDns(n, o) {
-  if (S.dns[n] || !o?.sites.length) return;
+function ensureDns(n, o, force = false) {
+  if ((S.dns[n] && !force) || S.dns[n]?.loading || !o?.sites.length) return;
   const domains = [...new Set(o.sites.flatMap((x) => x.domains))];
-  S.dns[n] = { loading: true };
+  // A recheck keeps the last answer on screen.
+  S.dns[n] = { ...S.dns[n], loading: true };
   http(`/api/servers/${encodeURIComponent(n)}/dns?domains=${encodeURIComponent(domains.join(","))}`).then(
     (data) => ((S.dns[n] = { data }), render()),
     (e) => ((S.dns[n] = { error: e.message }), render()),
@@ -1335,10 +1390,12 @@ function domainChip(n, d) {
   const url = `https://${d}`;
   let dot = "", title = "checking…";
   if (c) {
-    const st = c.https.status;
+    const { status: st, ms, tls } = c.https;
+    const cert = tls ? (tls.valid ? ` · certificate ${plural(tls.days, "day")} left` : ` · certificate: ${tls.error}`) : "";
     if (!c.ips.length) (dot = "down"), (title = "DNS: does not resolve");
     else if (!c.ok) (dot = "warn"), (title = `DNS points at ${c.ips.join(", ")}, not this server`);
-    else if (st && st < 500) (dot = "up"), (title = `HTTPS ${st}${st === 401 ? " (login required)" : ""}`);
+    else if (st && st < 500 && tls && (!tls.valid || tls.days < 7)) (dot = "warn"), (title = `HTTPS ${st}${cert}`);
+    else if (st && st < 500) (dot = "up"), (title = `HTTPS ${st}${st === 401 ? " (login required)" : ""} in ${ms} ms${cert}`);
     else (dot = "down"), (title = `HTTPS: ${st ?? c.https.error}`);
   }
   return `<span class="chip"><span class="dot ${dot}" title="${esc(title)}"></span><a href="${esc(url)}" target="_blank" rel="noopener" title="${esc(title)}" onclick="event.stopPropagation()">${esc(d)}</a>${btn("⧉", () => copy(url), "ghost", "Copy the address")}</span>`;
@@ -1398,7 +1455,7 @@ function renderNav() {
   };
   $("#filter").hidden = list.length < 8;
   $("#add-server").textContent = list.length < 8 ? "+ Add server" : "+";
-  $("#navlist").innerHTML = `${group("own", "Servers", own)}${group("ssh", "From ~/.ssh/config", aliases)}${group("down", "Unreachable", down)}
+  $("#navlist").innerHTML = `<button type="button" class="srv nav-home ${S.sel ? "" : "on"}"${S.sel ? "" : ` aria-current="page"`} data-f="home" ${on(() => go(null))}><svg class="ico" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 2.5h4.5v4.5h-4.5zM9 2.5h4.5v4.5h-4.5zM2.5 9h4.5v4.5h-4.5zM9 9h4.5v4.5h-4.5z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg><div class="n">Overview</div></button>${group("own", "Servers", own)}${group("ssh", "From ~/.ssh/config", aliases)}${group("down", "Unreachable", down)}
     ${list.length ? "" : `<div class="nav-none">No servers yet.</div>`}`;
   $("#navfoot").hidden = !list.length;
   $("#navfoot").innerHTML = reachSummary(list);
@@ -1439,6 +1496,19 @@ function toggleGroup(key) {
 }
 
 /** The open server's sections as buttons, each with its count. */
+/** What the server can do (`lf server info --json` can); null until its facts are in, then everything shows. */
+const can = (n) => S.facts[n]?.data?.can ?? null;
+/** When each section is worth a tab: the same conditions the CLI checks before doing it. */
+const SECTION_IF = {
+  sites: (k) => k.docker || k.setup,
+  tunnels: (k) => k.docker,
+  traffic: (k) => k.docker,
+  traefik: (k) => k.docker,
+  updates: (k) => k.packages || k.docker,
+  firewall: (k) => k.firewall,
+};
+const sections = (n) => SECTIONS.filter(([t]) => !can(n) || (SECTION_IF[t]?.(can(n)) ?? true));
+
 function sectionButtons(n, f) {
   const o = S.overview[n]?.data;
   const tunnels = openTunnels(n).length;
@@ -1447,7 +1517,7 @@ function sectionButtons(n, f) {
     tunnels: tunnels ? ` <span class="badge ok">${tunnels} open</span>` : "",
     updates: updatesBadge(n),
   };
-  return SECTIONS.map(([t, label], i) => `<button type="button" class="${S.tab === t ? "on" : ""}"${S.tab === t ? ` aria-current="page"` : ""} data-f="${f}:${t}" title="${label} (${i + 1})" ${on(() => go(n, t))}>${label}${badge[t] ?? ""}</button>`).join("");
+  return sections(n).map(([t, label], i) => `<button type="button" class="${S.tab === t ? "on" : ""}"${S.tab === t ? ` aria-current="page"` : ""} data-f="${f}:${t}" title="${label} (${i + 1})" ${on(() => go(n, t))}>${label}${badge[t] ?? ""}</button>`).join("");
 }
 
 function renderHeader() {
@@ -1479,10 +1549,10 @@ const statusDot = (status) => {
 };
 
 const size = (b) => {
-  const u = ["B", "K", "M", "G", "T"];
+  const u = ["B", "KB", "MB", "GB", "TB"];
   let i = 0;
   while (b >= 1024 && i < u.length - 1) (b /= 1024), i++;
-  return `${b < 10 && i ? b.toFixed(1) : Math.round(b)}${u[i]}`;
+  return `${b < 10 && i ? b.toFixed(1) : Math.round(b)} ${u[i]}`;
 };
 const uptime = (s) => {
   const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600);
@@ -1507,9 +1577,11 @@ function factsLine(n) {
 }
 
 function factsNote(n) {
-  const sup = S.facts[n]?.data?.support;
+  const f = S.facts[n]?.data;
+  const sup = f?.support;
+  // A system that installs its own way (DSM, SteamOS) is not a problem, just a different kind of server.
   if (!sup?.note) return "";
-  return `<div class="note ${sup.level === "ok" ? "" : "bad"}">${esc(sup.note)}</div>`;
+  return `<div class="note ${sup.level === "eol" || sup.level === "unsupported" ? "bad" : ""}">${esc(sup.note)}${f.can && !f.can.docker ? `. Docker: ${esc(f.why.docker)}` : ""}</div>`;
 }
 
 function renderMain() {
@@ -1522,6 +1594,10 @@ function renderMain() {
       <p>It is not in landfall's list or in ~/.ssh/config (anymore).</p>
       <p>${btn("All servers", () => go(null), "primary")} ${btn("Add a server…", addServer)}</p></div></div>`);
   }
+  // A section this server has no use for (no docker, no ufw…): open the first one it has.
+  const shown = sections(n);
+  if (!shown.some(([t]) => t === S.tab)) return void location.replace(`#/${encodeURIComponent(n)}/${shown[0][0]}`);
+  const k = can(n);
   const ov = S.overview[n] ?? { loading: true };
   const o = ov.data;
   const traefik = o
@@ -1531,17 +1607,20 @@ function renderMain() {
     : "";
   const sub = [esc(s?.target ?? ""), s && !s.registered ? "from ~/.ssh/config" : "", traefik].filter(Boolean).join(" · ");
   // Reloading with something already on screen: keep it, show a small spinner.
-  const reloading = needs(S.tab).some((t) => S[STORE[t]][n]?.loading && S[STORE[t]][n]?.data);
+  // Stats reload every few seconds and say so themselves.
+  const reloading = needs(S.tab).some((t) => t !== "stats" && S[STORE[t]][n]?.loading && S[STORE[t]][n]?.data);
   main.innerHTML = `
     <div class="head">
       <div><h1>${esc(n)}${s?.isDefault ? ` <span class="star" title="default server">★</span>` : ""} <span class="crumb">/ ${SECTIONS.find(([t]) => t === S.tab)[1]}</span>${reloading ? ` <span class="spin" role="img" aria-label="reloading"></span>` : ""}</h1><div class="sub">${sub}</div>${factsLine(n)}</div>
       <div class="actions">
-        ${btn("Set up / check", () => setupFlow([n]), "", "Shows what is installed and what setup would change; asks before applying")}
+        ${!k || k.setup ? btn("Set up / check", () => setupFlow([n]), "", "Shows what is installed and what setup would change; asks before applying") : ""}
         ${btn("Run…", () => runCommand(n), "", "Run a shell command over ssh")}
         ${btn("↻", () => (load(n, S.tab, true), render()), "", "Reload", "reload").replace("<button", `<button aria-label="Reload"`)}
         ${menuBtn([
           { label: "Server info", hint: "lf server info", run: () => run(["server", "info", n]) },
-          { label: "Traefik status", hint: "lf traefik status", run: () => run(["traefik", "status", ...sv(n)]) },
+          !k || k.docker ? { label: "Traefik status", hint: "lf traefik status", run: () => run(["traefik", "status", ...sv(n)]) } : null,
+          !k || k.admin ? "-" : null,
+          !k || k.admin ? { label: "Reboot…", cls: "danger", hint: "lf reboot", run: () => confirmDlg({ title: `Reboot ${n}?`, text: "Its sites are offline for a minute or two. Waits until it is back and checks its containers run again.", ok: "Reboot", danger: true, onOk: () => run(["reboot", ...sv(n), "-y"], { server: n }) }) } : null,
           s?.isDefault ? null : { label: "Make default", title: "Commands without -s use it", run: () => makeDefault(n) },
           s?.registered ? "-" : null,
           s?.registered ? { label: `Forget ${n}…`, cls: "danger", hint: "lf server rm", run: () => forget(n) } : null,
@@ -1560,30 +1639,70 @@ function renderMain() {
   } else if (!o) view.innerHTML = "";
   else if (S.tab === "sites") view.innerHTML = sitesView(n, o);
   else if (S.tab === "tunnels") view.innerHTML = tunnelsView(n, o);
+  else if (S.tab === "stats") view.innerHTML = statsView(n);
+  else if (S.tab === "traffic") view.innerHTML = trafficView(n);
   else if (S.tab === "traefik") view.innerHTML = traefikView(n);
   else if (S.tab === "updates") view.innerHTML = updatesView(n);
   else if (S.tab === "firewall") view.innerHTML = firewallView(n);
+  else if (S.tab === "system") view.innerHTML = systemView(n);
   else if (S.tab === "settings") view.innerHTML = settingsView(n);
   else view.innerHTML = historyView(n);
 }
 
-/** No server open: the servers to pick from, and how the same works in a terminal. */
+/** No server open: the servers, recent deploys, landfall's defaults and every place it writes to. */
 function homeView() {
-  const list = S.state.servers;
+  const st = S.state;
+  const list = st.servers;
   const own = list.filter((s) => s.registered).sort((a, b) => reachRank(a.name) - reachRank(b.name));
+  const why = (n) => {
+    const r = S.reach[n];
+    return r && r.state !== "ok" ? `<div class="w ${r.state}">${REACH_DOT[r.state][1]}</div>` : "";
+  };
   const tile = (s) => `<button type="button" class="tile" ${on(() => go(s.name, "sites"))}>
       <div class="n">${reachDot(s.name)}${esc(s.name)}${s.isDefault ? `<span class="star" title="default server">★</span>` : ""}</div>
-      <div class="t">${esc(s.target)}</div></button>`;
-  const def = list.find((s) => s.isDefault)?.name;
+      <div class="t">${esc(s.target)}</div>${why(s.name)}</button>`;
+  const d = st.defaults;
+  const def = d.default;
+  const count = { ok: 0, login: 0, down: 0 };
+  for (const s of list) if (S.reach[s.name]) count[S.reach[s.name].state]++;
+  const stat = (k, word) => (count[k] ? `<span><span class="dot ${REACH_DOT[k][0]}"></span>${count[k]} ${word}</span>` : "");
+  const status = S.reaching ? `<span><span class="spin"></span> checking ssh login…</span>` : S.reachedAt ? `${stat("ok", "reachable")}${stat("login", "login refused")}${stat("down", "unreachable")}` : "";
+  const recent = (st.projects ?? []).slice(0, 6);
+  const recentCard = `<div class="card"><h2>Recent deploys ${recent.length ? `<span class="badge">${(st.projects ?? []).length}</span>` : ""}
+      <span class="actions">${btn("Deploy folder…", () => folderDialog(st.cwd), "sm", "Pick a folder, a recent project, or drop one here")}</span></h2>
+    ${recent.length
+      ? `<ul class="recent">${recent
+          .map((r) => `<li><div><b>${esc(r.name)}</b> <span class="dim">→ ${esc(r.server)}${r.domains[0] ? ` · ${esc(r.domains[0])}` : " · tunnel only"}</span>
+              <div class="faint mono" title="${esc(r.path)}">${esc(tilde(r.path))} · ${ago(r.at)}</div></div>
+              ${btn("Deploy again", () => browse(r.path).then((x) => deployDialog(x.detected), (err) => toast(err.message)), "sm", `lf deploy from ${r.path}`)}</li>`)
+          .join("")}</ul>`
+      : `<div class="body dim">Nothing deployed from this machine yet. Folders you deploy show up here to deploy again.</div>`}</div>`;
+  const row = (k, v) => `<dt>${k}</dt><dd>${v}</dd>`;
+  const defaultsCard = `<div class="card"><h2>Defaults <span class="sub">for every server, unless it sets its own</span>
+      <span class="actions">${btn("Edit…", defaultsDialog, "sm", "lf config")}</span></h2>
+    <div class="body"><dl class="kv">
+      ${row("Default server", def ? `<a href="#/${encodeURIComponent(def)}">${esc(def)}</a>` : `<span class="dim">none: commands need -s</span>`)}
+      ${row("New sites", d.tunnelOnly ? "no domain, tunnel only" : "get a domain")}
+      ${row("Let's Encrypt e-mail", d.email ? `<span class="mono">${esc(d.email)}</span>` : `<span class="dim">none</span>`)}
+      ${row("Releases kept", esc(String(d.keep)))}
+      ${row("Saved in", `<span class="mono">${esc(d.configFile)}</span>`)}
+    </dl></div></div>`;
+  const paths = (l) => `<dl class="paths">${l.map((x) => `<dt class="mono">${esc(x.path)}</dt><dd>${esc(x.what)}</dd>`).join("")}</dl>`;
+  const whereCard = `<div class="card"><h2>Where landfall puts things <span class="sub">nothing it installs is hidden</span></h2>
+    <div class="where-cols"><div><h3>On this machine</h3>${paths(d.locations.local)}</div><div><h3>On each server</h3>${paths(d.locations.server)}</div></div></div>`;
   return `<div class="home">
-    <h1>${own.length ? "Your servers" : "Pick a server"}</h1>
-    <p>The dot shows whether landfall's ssh login works (hover for why not); nothing else connects until you open one. Servers are ssh targets: any ~/.ssh/config alias works${own.length < list.length ? ` (${list.length - own.length} in the list on the left)` : ""}.</p>
+    <h1>Overview</h1>
+    <div class="home-sub">${plural(own.length, "server")}${own.length < list.length ? ` <span class="faint">+ ${list.length - own.length} from ~/.ssh/config</span>` : ""}${status ? `<span class="sep"></span>${status}` : ""}</div>
     <div class="grid">${own.map(tile).join("")}<button type="button" class="tile add" ${on(addServer)}>+ Add server</button></div>
+    <p class="faint home-note">The dot shows whether landfall's ssh login works (hover for why not); nothing else connects until you open a server. Any ~/.ssh/config alias works as a server.</p>
+    <div class="cols">${recentCard}${defaultsCard}</div>
+    ${whereCard}
     <div class="cli">Everything here runs an <span class="mono">lf</span> command, shown above its output, so you can do the same in a terminal:
       <pre>lf deploy ./dist -d blog <span># a folder, Dockerfile project or image, with HTTPS</span>
 lf ls${def ? "" : " -s <server>"}               <span># sites, and what else Traefik routes</span>
 lf logs blog -f          <span># follow a site's logs</span>
 lf undo                  <span># revert the last change</span>
+lf config                <span># these defaults, and where landfall puts things</span>
 lf help                  <span># every command</span></pre></div>
   </div>`;
 }
@@ -1705,7 +1824,7 @@ function sitesView(n, o) {
     .join("");
   return `<div class="card scroll"><table>
     <thead><tr><th>Site</th><th class="hide-sm">Domains</th><th class="hide-sm">Kind</th><th class="hide-sm">Deployed</th><th><span class="sr">Actions</span></th></tr></thead>
-    <tbody>${rows}</tbody></table></div>${othersCard(n, o)}`;
+    <tbody>${rows}</tbody></table></div>${errorsCard(n)}${othersCard(n, o)}`;
 }
 
 /** Where a site lives on the server: docker compose works in its current folder. */
@@ -1781,7 +1900,9 @@ function updatesView(n) {
       danger: flags.includes("--reboot"),
       onOk: () => run(["update", "--packages", ...flags, ...s, "-y"], { server: n }),
     });
-  const pkgActs = [
+  // Package upgrades need a package manager and root (the CLI's can.packages).
+  const pkgOk = p.mgr !== "none" && (can(n)?.packages ?? true);
+  const pkgActs = !pkgOk ? "" : [
     btn("Refresh lists", () => refreshUpdates(n), "sm", "Fetch the newest package lists first (apt update)"),
     sec.length && p.mgr !== "apk" ? btn(`Security only (${sec.length})`, () => upgrade(["--security"], "security updates", sec.length), "sm") : "",
     p.updates.length ? btn("Upgrade all", () => upgrade([], "all packages", p.updates.length), "sm primary") : "",
@@ -1814,7 +1935,7 @@ function updatesView(n) {
       ? `<span class="badge">${p.updates.length}</span>${sec.length ? ` <span class="badge warn">${sec.length} security</span>` : ""}`
       : `<span class="badge ok">up to date</span>`;
   return `
-    <div class="card">
+    ${p.mgr === "none" ? "" : `<div class="card">
       <h2>Packages ${head}${p.reboot ? ` <span class="badge warn">reboot required</span>` : ""}
         <span class="dim hide-sm" style="font-weight:400">${esc(p.mgr)}${p.refreshed ? "" : " · lists not refreshed"}</span>
         <span class="actions">${pkgActs}</span></h2>
@@ -1822,8 +1943,9 @@ function updatesView(n) {
         <thead><tr><th>Package</th><th class="hide-sm">Installed</th><th>New</th><th></th></tr></thead>
         <tbody>${pkgRows}${p.updates.length > shown.length ? `<tr><td colspan="4" class="dim">… ${p.updates.length - shown.length} more</td></tr>` : ""}</tbody>
       </table></div>` : ""}
-    </div>
-    <div class="card">
+      ${pkgOk ? "" : `<p class="dim">${esc(S.facts[n]?.data?.why?.packages ?? "")}</p>`}
+    </div>`}
+    ${!e.docker && can(n) && !can(n).docker ? "" : `<div class="card">
       <h2>Docker <span class="badge ${!e.docker || e.dockerNote || e.composeNote ? "warn" : "ok"}">${e.docker ? `${esc(e.docker)} · compose ${esc(e.compose || "missing")}` : "not installed"}</span>
         <span class="actions">${e.composeUpdate ? btn("Update compose", () => run(["update", "--compose", ...s, "-y"], { server: n }), "sm primary") : ""}</span></h2>
       ${[e.dockerNote, e.composeNote].filter(Boolean).map((t) => `<p class="dim">${esc(t)}</p>`).join("")}
@@ -1835,7 +1957,7 @@ function updatesView(n) {
         <thead><tr><th>Name</th><th class="hide-sm">Image</th><th>State</th><th class="hide-sm">Note</th><th></th></tr></thead>
         <tbody>${imgRows || `<tr><td colspan="5" class="dim">no containers</td></tr>`}</tbody>
       </table></div>
-    </div>`;
+    </div>`}`;
 }
 
 // ---- firewall --------------------------------------------------------------
@@ -1940,6 +2062,175 @@ function editRule(n, num, r) {
   });
 }
 
+// ---- system ----------------------------------------------------------------
+
+const SVC_FAILED = (s) => s.active === "failed" || s.active === "crashed";
+const SVC_UP = (s) => s.active === "active" || s.active === "started";
+// What keeps the server and its sites running: shown first, the rest behind "all".
+const KEY_SVCS = ["docker", "containerd", "ssh", "sshd", "fail2ban", "ufw", "unattended-upgrades", "cron", "crond", "systemd-timesyncd", "chronyd", "chrony"];
+const svcName = (u) => u.replace(/\.service$/, "");
+
+function systemView(n) {
+  const st = S.system[n] ?? { loading: true };
+  if (st.loading && !st.data) return `<div class="loading"><span class="spin"></span> reading ${esc(n)}…</div>`;
+  if (st.error) return `<div class="note bad">${esc(st.error)}</div>`;
+  const i = st.data;
+  const s = sv(n);
+  const go_ = (argv) => run([...argv, ...s], { server: n });
+  const rows = (pairs) => `<dl class="kv">${pairs.map(([k, v]) => `<dt>${esc(k)}</dt><dd>${v}</dd>`).join("")}</dl>`;
+
+  const swapTotal = i.swap.reduce((t, x) => t + x.size, 0);
+  const d = i.docker;
+  // Change buttons only where the CLI would do it: as admin, and not on a system that keeps it itself.
+  const adm = i.root, set = adm && !i.managed;
+  const may = (ok, html) => (ok ? html : "");
+  const basics = `<div class="card"><h2>Basics</h2><div class="body">${rows([
+    ["Host name", `<span class="mono">${esc(i.hostname)}</span> ${may(set, btn("Change", () => renameHost(n, i.hostname), "ghost sm"))}`],
+    ["Time zone", `${esc(i.timezone)} <span class="faint">· ${esc(i.time)}</span> ${may(set, btn("Change", () => changeTz(n, i.timezone), "ghost sm"))}`],
+    ["Clock", i.ntp === true ? `<span class="badge ok">synced</span>` : i.ntp === false ? `<span class="badge warn">not synced</span>` : `<span class="faint">unknown</span>`],
+    ["Swap", `${swapTotal ? `${size(swapTotal)} <span class="faint">${esc(i.swap.map((x) => `${x.file} · ${size(x.used)} used`).join(", "))}</span>` : `<span class="badge${i.mem < 4 * 1024 ** 3 ? " warn" : ""}">none</span> <span class="faint">${size(i.mem)} memory</span>`}
+      ${!set ? "" : i.swap.some((x) => x.file === "/swapfile")
+        ? btn("Remove", () => confirmDlg({ title: `Remove the swap file on ${n}?`, text: "What is swapped out moves back to memory first.", ok: "Remove it", danger: true, onOk: () => go_(["swap", "off", "-y"]) }), "ghost sm danger")
+        : swapTotal ? "" : btn("Add…", () => addSwapDlg(n, i), "ghost sm")}`],
+    ["Docker logs", !d ? `<span class="faint">no docker</span>`
+      : `${d.maxSize ? `${esc(d.maxSize)} × ${d.maxFile ?? 1} per container` : d.driver === "json-file" ? `<span class="badge warn">unlimited</span>` : ""} <span class="faint">${esc(d.driver)}</span> ${d.daemonError || !set ? "" : btn(d.maxSize ? "Change" : "Limit…", () => logLimitDlg(n, d), "ghost sm")}`],
+  ])}${d?.daemonError ? `<div class="note bad" style="margin:12px 0 0">${esc(d.daemonError)}</div>` : ""}
+  ${i.managed ? `<p class="faint" style="margin:12px 0 0">${esc(i.managed)}.</p>` : ""}
+  ${i.root ? "" : `<p class="faint" style="margin:12px 0 0">${esc(i.user)} has no passwordless sudo and root's key does not work: other users' keys, bans and Docker's settings may be missing.</p>`}</div></div>`;
+
+  let services = "";
+  if (i.init !== "other") {
+    const all = S.allSvcs?.[n];
+    const shown = i.services
+      .filter((x) => all || SVC_FAILED(x) || KEY_SVCS.includes(svcName(x.unit)) || (i.init === "openrc" && SVC_UP(x)))
+      .sort((a, b) => (SVC_FAILED(b) - SVC_FAILED(a)) || (KEY_SVCS.includes(svcName(b.unit)) - KEY_SVCS.includes(svcName(a.unit))) || a.unit.localeCompare(b.unit));
+    const nFailed = i.services.filter(SVC_FAILED).length;
+    const row = (x) => {
+      const u = svcName(x.unit);
+      const ssh = /^sshd?$/.test(u), core = /^(docker|containerd)$/.test(u);
+      const stop = () => confirmDlg({
+        title: `Stop ${u} on ${n}?`,
+        text: ssh ? "New ssh logins fail until it is started again (from the provider's console)." : core ? "Every site goes down until it is started again." : "It stays stopped until started again, or until the next boot if it is enabled.",
+        ok: "Stop it", danger: true, onOk: () => go_(["services", "stop", u, "-y", ...(ssh ? ["--force"] : [])]),
+      });
+      const restart = () => core
+        ? confirmDlg({ title: `Restart ${u} on ${n}?`, text: "Every site goes down for a moment.", ok: "Restart", danger: true, onOk: () => go_(["services", "restart", u, "-y"]) })
+        : go_(["services", "restart", u]);
+      const cls = SVC_FAILED(x) ? "bad" : SVC_UP(x) ? "ok" : "";
+      return `<tr><td class="mono">${esc(u)}</td><td><span class="badge ${cls}">${esc(x.sub || x.active)}</span></td>
+        ${i.init === "systemd" ? `<td class="faint hide-sm">${esc(x.enabled ?? "")}</td>` : ""}<td class="dim hide-sm">${esc(x.description)}</td>
+        <td class="acts">${btn("Logs", () => run(["services", "logs", u, "-n", "200", ...s], { server: n }), "sm")}${may(adm, menuBtn([
+          { label: "Restart", run: restart },
+          SVC_UP(x) ? { label: "Stop…", cls: "danger", run: stop } : { label: "Start", run: () => go_(["services", "start", u]) },
+        ], `Actions for ${u}`))}</td></tr>`;
+    };
+    services = `<div class="card"><h2>Services ${nFailed ? `<span class="badge bad">${nFailed} failed</span>` : ""} <span class="sub">${i.init}</span>
+      <span class="actions">${btn(all ? "Fewer" : `All ${i.services.length}`, () => ((S.allSvcs = { ...S.allSvcs, [n]: !all }), render()), "sm")}</span></h2>
+      <div class="scroll"><table><thead><tr><th>Service</th><th>State</th>${i.init === "systemd" ? `<th class="hide-sm">Boot</th>` : ""}<th class="hide-sm">Description</th><th><span class="sr">Actions</span></th></tr></thead>
+      <tbody>${shown.map(row).join("") || `<tr><td colspan="5" class="dim">none</td></tr>`}</tbody></table></div></div>`;
+  }
+
+  const keyRows = i.keys.map((k) => {
+    const label = k.comment || k.fingerprint.slice(7, 19);
+    const rm = () => confirmDlg({
+      title: `Remove ${label} from ${k.user}?`,
+      text: k.mine ? "This is the key this machine logs in with: removing it can lock you out." : `${k.type} ${k.fingerprint}`,
+      ok: "Remove it", danger: true,
+      onOk: () => go_(["keys", "rm", k.fingerprint, "--user", k.user, "-y", ...(k.mine ? ["--force"] : [])]),
+    });
+    return `<tr><td>${esc(k.user)}</td><td>${k.mine ? `<span class="badge ok" title="This machine logs in with it">this machine</span> ` : ""}${esc(k.comment || "")}${k.options ? `<div class="faint mono">${esc(k.options)}</div>` : ""}</td>
+      <td class="mono faint hide-sm">${esc(k.type.replace(/^ssh-/, ""))} ${esc(k.fingerprint.slice(7, 23))}…</td><td class="acts">${may(adm || k.user === i.user, btn("Remove", rm, "sm danger"))}</td></tr>`;
+  }).join("");
+  const keys = `<div class="card"><h2>SSH keys <span class="badge">${i.keys.length}</span> <span class="sub">who may log in</span><span class="actions">${btn("Add key…", () => addKeyDlg(n), "sm")}</span></h2>
+    <div class="scroll"><table><thead><tr><th>User</th><th>Comment</th><th class="hide-sm">Key</th><th><span class="sr">Actions</span></th></tr></thead>
+    <tbody>${keyRows || `<tr><td colspan="4" class="dim">no keys found</td></tr>`}</tbody></table></div></div>`;
+
+  const banned = i.jails.flatMap((j) => j.ips.map((ip) => ({ ip, jail: j.name })));
+  const bans = i.fail2ban === "running"
+    ? `<div class="card"><h2>Bans <span class="badge${banned.length ? " warn" : ""}">${banned.length}</span> <span class="sub">fail2ban · ${esc(i.jails.map((j) => `${j.name}: ${j.total} in total`).join(", "))}</span></h2>
+      <div class="scroll"><table><thead><tr><th>IP</th><th>Jail</th><th><span class="sr">Actions</span></th></tr></thead>
+      <tbody>${banned.map((b) => `<tr><td class="mono">${esc(b.ip)}</td><td>${esc(b.jail)}</td><td class="acts">${may(adm, btn("Unban", () => go_(["unban", b.ip]), "sm"))}</td></tr>`).join("") || `<tr><td colspan="3" class="dim">nobody banned right now</td></tr>`}</tbody></table></div></div>`
+    : `<div class="card"><h2>Bans</h2><div class="body dim">${i.fail2ban === "missing" ? "fail2ban is not installed." : "fail2ban is not running."}</div></div>`;
+
+  return basics + services + keys + bans;
+}
+
+function renameHost(n, old) {
+  dialog({
+    title: `Rename ${n}`,
+    text: "The server's own host name: what its shell prompt and logs show. Your ssh alias stays as it is.",
+    fields: [{ name: "name", label: "Host name", value: old, placeholder: "web-1" }],
+    ok: "Rename",
+    onOk: (v) => {
+      const name = v.name.trim();
+      if (!/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/i.test(name)) return { error: "Letters, digits and -, up to 63, no dots.", field: "name" };
+      if (name !== old) run(["hostname", name, ...sv(n)], { server: n });
+    },
+  });
+}
+function changeTz(n, old) {
+  dialog({
+    title: `Time zone of ${n}`,
+    text: "Cron jobs, logs and the clock in containers that read it follow it.",
+    fields: [{ name: "tz", label: "Time zone", value: old, placeholder: "Europe/Berlin, UTC", hint: `Yours is ${Intl.DateTimeFormat().resolvedOptions().timeZone}.` }],
+    ok: "Change",
+    onOk: (v) => {
+      const tz = v.tz.trim();
+      if (!/^[A-Za-z0-9_+-]+(\/[A-Za-z0-9_+-]+)*$/.test(tz)) return { error: "A name like Europe/Berlin or UTC.", field: "tz" };
+      if (tz !== old) run(["timezone", tz, ...sv(n)], { server: n });
+    },
+  });
+}
+function addSwapDlg(n, i) {
+  const gb = 1024 ** 3;
+  // Rule of thumb: as much as memory up to 2 GB, never more than a tenth of the free disk.
+  const pick = Math.max(0.5, Math.min(i.mem > 2 * gb ? 2 : 1, Math.floor((i.diskFree / gb / 10) * 2) / 2));
+  dialog({
+    title: `Add swap to ${n}`,
+    text: `A swap file at /swapfile, on at boot. It keeps the server alive when memory runs out (slowly instead of killing processes). ${size(i.diskFree)} free on the disk.`,
+    fields: [{ name: "size", label: "Size", value: `${pick >= 1 ? pick + "G" : "512M"}`, placeholder: "1G, 512M" }],
+    ok: "Add swap",
+    onOk: (v) => {
+      if (!/^\d+(\.\d+)?\s*[mg]$/i.test(v.size.trim())) return { error: "A size like 1G or 512M.", field: "size" };
+      run(["swap", v.size.trim(), ...sv(n)], { server: n });
+    },
+  });
+}
+function logLimitDlg(n, d) {
+  dialog({
+    title: `Docker log limit on ${n}`,
+    text: "Caps the log Docker keeps per container. It applies to containers created afterwards: redeploy or restart sites to apply it to them.",
+    fields: [
+      { name: "size", label: "Per file", value: d.maxSize ?? "10m", placeholder: "10m", hint: "k, m or g. Empty removes the limit." },
+      { name: "files", label: "Files kept", value: String(d.maxFile ?? 3), placeholder: "3" },
+      { name: "restart", type: "check", label: "Restart Docker now", hint: "Sites go down for a moment. Otherwise it applies on Docker's next start." },
+    ],
+    ok: "Save",
+    onOk: (v) => {
+      const sz = v.size.trim().toLowerCase();
+      if (sz && !/^\d+[kmg]$/.test(sz)) return { error: "A size like 10m.", field: "size" };
+      if (!/^\d+$/.test(v.files.trim())) return { error: "A number.", field: "files" };
+      run(["log-limit", sz || "off", "--files", v.files.trim(), ...(v.restart ? ["--restart", "-y"] : []), ...sv(n)], { server: n });
+    },
+  });
+}
+function addKeyDlg(n) {
+  dialog({
+    title: `Add an SSH key to ${n}`,
+    text: "Paste a public key (the .pub file, one line). Whoever holds its private key can log in.",
+    fields: [
+      { name: "key", label: "Public key", type: "textarea", value: "", placeholder: "ssh-ed25519 AAAA… name@laptop" },
+      { name: "user", label: "User", value: "", placeholder: "the login user", hint: "Whose account it logs in to. Empty: the user landfall logs in as." },
+    ],
+    ok: "Add key",
+    onOk: (v) => {
+      const key = v.key.trim().split("\n")[0];
+      if (!/^(\S+\s+)?(ssh-|ecdsa-|sk-)\S+ AAAA/.test(key)) return { error: "That does not look like a public key.", field: "key" };
+      run(["keys", "add", key, ...(v.user.trim() ? ["--user", v.user.trim()] : []), ...sv(n)], { server: n });
+    },
+  });
+}
+
 // ---- history ---------------------------------------------------------------
 
 /** Everything an SSH tunnel reaches on server n, and the tunnels open now. */
@@ -2139,6 +2430,245 @@ function settingsView(n) {
     </div>`;
 }
 
+// The last samples per server, for the sparklines: 5 minutes at one per 5s.
+const STATS_LOG = 60;
+function logStats(n, s) {
+  const log = (S.statsLog[n] ??= []);
+  log.push({ cpu: s.cpu, mem: s.mem.total ? ((s.mem.total - s.mem.available) / s.mem.total) * 100 : 0 });
+  if (log.length > STATS_LOG) log.shift();
+}
+const pctOf = (used, total) => (total ? Math.round((used / total) * 100) : 0);
+/** A sparkline of 0-100 values, oldest left. */
+function spark(values) {
+  if (values.length < 2) return "";
+  const pts = values.map((v, i) => `${((STATS_LOG - values.length + i) / (STATS_LOG - 1)) * 100},${24 - (Math.min(100, v) / 100) * 22}`).join(" ");
+  return `<svg viewBox="0 0 100 26" preserveAspectRatio="none" aria-hidden="true"><polyline points="${pts}" fill="none" stroke="currentColor" stroke-width="1.5" vector-effect="non-scaling-stroke"/></svg>`;
+}
+function meter(label, p, value, sub, line = "", hint = "") {
+  const cls = p >= 90 ? "bad" : p >= 70 ? "warn" : "";
+  return `<div class="meter ${cls}" title="${esc(hint)}"><div class="k"><span>${esc(label)}</span></div>
+    <div class="v">${value}${line}</div>
+    ${p === null ? "" : `<div class="bar" role="meter" aria-label="${esc(label)}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${p}"><i style="width:${Math.min(100, p)}%"></i></div>`}
+    <div class="t">${sub}</div></div>`;
+}
+/** Live usage of one server: meters, the busiest processes and containers, disk usage on request. */
+function statsView(n) {
+  const st = S.stats[n] ?? { loading: true };
+  if (st.loading && !st.data) return `<div class="loading"><span class="spin"></span> measuring ${esc(n)} for a second…</div>`;
+  if (st.error && !st.data) return `<div class="note bad">${esc(st.error)}</div><div class="actions" style="margin:0">${btn("Retry", () => (load(n, "stats", true), render()))}</div>`;
+  const s = st.data;
+  const log = S.statsLog[n] ?? [];
+  const memUsed = s.mem.total - s.mem.available;
+  const swapUsed = s.mem.swapTotal - s.mem.swapFree;
+  const meters = [
+    meter("CPU", s.cpu, `${s.cpu}%`, `${plural(s.cpus, "core")} · load ${s.load.join(" ")}`, spark(log.map((x) => x.cpu)), "Busy share of all cores over one second; load is the 1, 5 and 15 minute average"),
+    meter("Memory", pctOf(memUsed, s.mem.total), `${pctOf(memUsed, s.mem.total)}%`, `${size(memUsed)} of ${size(s.mem.total)}`, spark(log.map((x) => x.mem)), "Used, without caches the kernel gives back when needed"),
+    s.mem.swapTotal ? meter("Swap", pctOf(swapUsed, s.mem.swapTotal), `${pctOf(swapUsed, s.mem.swapTotal)}%`, `${size(swapUsed)} of ${size(s.mem.swapTotal)}`) : "",
+    ...s.disks.map((d) => meter(`Disk ${d.mount}`, pctOf(d.used, d.total), `${pctOf(d.used, d.total)}%`, `${size(d.used)} of ${size(d.total)} · ${size(d.available)} free`)),
+    ...s.net.map((x) => meter(`Network ${x.iface}`, null, `↓ ${size(x.rx)}/s`, `↑ ${size(x.tx)}/s`)),
+  ].join("");
+  const procs = s.procs.slice(0, 8);
+  const procCard = procs.length
+    ? `<div class="card"><h2>Processes <span class="sub">busiest and largest · cpu 100% = one core</span></h2><div class="scroll"><table>
+        <thead><tr><th>Name</th><th class="num">CPU</th><th class="num">Memory</th><th class="num hide-sm">PID</th></tr></thead>
+        <tbody>${procs.map((p) => `<tr><td class="mono">${esc(p.name)}</td><td class="num">${p.cpu}%</td><td class="num">${size(p.rss)}</td><td class="num faint hide-sm">${p.pid}</td></tr>`).join("")}</tbody></table></div></div>`
+    : "";
+  const up = (x) => isUp(x.status);
+  const ctrCard = !s.docker
+    ? `<div class="note">No access to Docker on ${esc(n)}: containers are not shown. Set up the server to fix that.</div>`
+    : s.containers.length
+      ? `<div class="card"><h2>Containers <span class="badge">${s.containers.length}</span></h2><div class="scroll"><table>
+          <thead><tr><th>Container</th><th class="hide-sm">Site</th><th class="num">CPU</th><th class="num">Memory</th><th class="num hide-sm" title="Received and sent since the container started">Network in / out</th><th class="num hide-sm">Restarts</th></tr></thead>
+          <tbody>${s.containers
+            .map((x) => `<tr><td>${statusDot(x.status)}<span class="mono">${esc(x.name)}</span><div class="faint">${esc(x.image)}</div></td>
+              <td class="hide-sm">${x.site ? `<b>${esc(x.site)}</b>` : `<span class="faint">${esc(x.project || "-")}</span>`}</td>
+              <td class="num">${up(x) ? `${Math.round(x.cpu * 10) / 10}%` : ""}</td>
+              <td class="num">${up(x) ? `${size(x.mem)}${x.memLimit && x.memLimit < s.mem.total ? `<div class="faint" title="Set by mem_limit or deploy.resources in its compose file">limit ${size(x.memLimit)}</div>` : ""}` : `<span class="faint">${esc(x.status)}</span>`}</td>
+              <td class="num hide-sm" title="since the container started">${up(x) ? `↓ ${size(x.net.rx)} <span class="faint">·</span> ↑ ${size(x.net.tx)}` : ""}</td>
+              <td class="num hide-sm">${x.restarts ? `<span class="badge warn">${x.restarts}</span>` : `<span class="faint">0</span>`}</td></tr>`)
+            .join("")}</tbody></table></div></div>`
+      : "";
+  const live = `<p class="faint" style="margin-top:14px">${st.loading ? `<span class="spin"></span> ` : ""}${st.error ? `<span style="color:var(--bad)">last sample failed: ${esc(st.error)}</span> · ` : ""}measured ${new Date(s.at).toLocaleTimeString()} · new sample every 5s while this tab is open · <span class="mono">lf stats -w${S.state.defaults.default === n ? "" : ` -s ${esc(n)}`}</span></p>`;
+  return `<div class="meters">${meters}</div>${ctrCard}${procCard}${diskCard(n)}${live}`;
+}
+
+// ---- traffic ---------------------------------------------------------------
+
+const TRAFFIC_SPANS = [["1h", "Last hour"], ["24h", "24 hours"], ["7d", "7 days"]];
+const CLASS_COLORS = { "2xx": "var(--accent)", "3xx": "var(--faint)", "4xx": "var(--warn)", "5xx": "var(--bad)" };
+const ms = (v) => (v >= 1000 ? `${(v / 1000).toFixed(1)} s` : `${v} ms`);
+const count = (v) => v.toLocaleString();
+const sv2 = (n) => (S.state.defaults.default === n ? "" : ` -s ${n}`);
+
+/** One lazily fetched view per server, outside the tab stores: the sites' error card and certificates. */
+function ensure(store, n, url) {
+  if (S[store][n]) return;
+  S[store][n] = { loading: true };
+  http(`/api/servers/${encodeURIComponent(n)}${url}`).then(
+    (data) => ((S[store][n] = { data }), render()),
+    (e) => ((S[store][n] = { error: e.message }), render()),
+  );
+}
+
+/** Requests per minute or hour, stacked by status class; hover a bar for its numbers. */
+function trafficChart(series, bucket) {
+  const W = 600, H = 120;
+  const tot = series.map((x) => x["2xx"] + x["3xx"] + x["4xx"] + x["5xx"]);
+  const max = Math.max(1, ...tot);
+  const bw = W / series.length;
+  const gap = bw > 4 ? 1 : 0;
+  const when = (at) => (bucket === "hour" ? new Date(`${at}:00:00Z`) : new Date(`${at}:00Z`));
+  const label = (at) => (bucket === "hour" ? when(at).toLocaleString([], { weekday: "short", hour: "2-digit", minute: "2-digit" }) : when(at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }));
+  const bars = series
+    .map((x, i) => {
+      let y = H;
+      const segs = ["2xx", "3xx", "4xx", "5xx"]
+        .filter((k) => x[k])
+        .map((k) => {
+          const h = Math.max(1, (x[k] / max) * (H - 4));
+          y -= h;
+          return `<rect x="${i * bw + gap / 2}" y="${y}" width="${Math.max(0.5, bw - gap)}" height="${h}" fill="${CLASS_COLORS[k]}"/>`;
+        })
+        .join("");
+      const tip = `${label(x.at)}: ${count(tot[i])} requests${["4xx", "5xx"].filter((k) => x[k]).map((k) => `, ${count(x[k])} ${k}`).join("")}`;
+      return `<g><title>${esc(tip)}</title><rect x="${i * bw}" y="0" width="${bw}" height="${H}" fill="transparent"/>${segs}</g>`;
+    })
+    .join("");
+  const ticks = [0, Math.floor(series.length / 2), series.length - 1].map((i, j) => `<span style="text-align:${["left", "center", "right"][j]}">${esc(label(series[i].at))}</span>`).join("");
+  return `<div class="tchart"><div class="tmax faint">${count(max)}</div><svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="Requests per ${bucket}">${bars}</svg>
+    <div class="tticks faint">${ticks}</div>
+    <div class="tlegend">${Object.entries(CLASS_COLORS).map(([k, col]) => `<span><i style="background:${col}"></i>${k}</span>`).join("")}</div></div>`;
+}
+
+const errorCell = (status) => `<span class="badge ${status >= 500 ? "bad" : "warn"}">${status}</span>`;
+
+function trafficView(n) {
+  ensure("certs", n, "/certs");
+  const st = S.traffic[n] ?? { loading: true };
+  const spans = `<div class="actions" style="margin:0 0 14px">${TRAFFIC_SPANS.map(([v, l]) => btn(l, () => ((S.since = v), load(n, "traffic", true), render()), `sm${S.since === v ? " primary" : ""}`, `lf traffic --since ${v}`)).join("")}</div>`;
+  if (st.loading && !st.data) return `${spans}<div class="loading"><span class="spin"></span> reading Traefik's access log…</div>`;
+  if (st.error && !st.data) return `${spans}<div class="note bad">${esc(st.error)}</div>`;
+  const t = st.data;
+  if (!t.proxy) return `<div class="note">No Traefik on ${esc(n)}: nothing to count. Set up the server to install it.</div>`;
+  if (t.format === "common") {
+    return `<div class="note warn">Traefik writes its access log as plain text. ${t.own
+      ? `Add <span class="mono">--accesslog.format=json</span> to its command to see traffic here.`
+      : `${btn("Switch to JSON", () => run(["traefik", "setup", ...sv(n), "-y"], { server: n, after: () => (load(n, "traffic", true), []) }), "sm", "lf traefik setup: restarts Traefik for a moment")}`}</div>${certsCard(n)}`;
+  }
+  if (t.format === "none") return `${spans}<div class="card"><div class="body empty"><h2>No requests in this span</h2><p class="dim">Traefik's access log has nothing from the last ${esc(S.since)}.</p></div></div>${certsCard(n)}`;
+  const T = t.total;
+  const errs = T.classes["4xx"] + T.classes["5xx"];
+  const pct = (v) => (T.requests ? Math.round((v / T.requests) * 1000) / 10 : 0);
+  const meters = [
+    meter("Requests", null, count(T.requests), `${plural(t.sites.length, "site")} · ${size(T.bytes)} sent`),
+    meter("Server errors", null, `${count(T.classes["5xx"])}`, `${pct(T.classes["5xx"])}% · 5xx: the site failed`),
+    meter("Client errors", null, `${count(T.classes["4xx"])}`, `${pct(T.classes["4xx"])}% · 4xx: not found, denied`),
+    meter("Response time", null, ms(T.p50), `median · 95% within ${ms(T.p95)}`, "", "From Traefik receiving the request to the last byte sent"),
+  ].join("");
+  const other = t.hosts.filter((h) => !h.site);
+  const rowsOf = (label, x) => `<tr><td>${label}</td><td class="num">${count(x.requests)}</td><td class="num">${x.classes["4xx"] ? `<span class="badge warn">${count(x.classes["4xx"])}</span>` : `<span class="faint">0</span>`}</td><td class="num">${x.classes["5xx"] ? `<span class="badge bad">${count(x.classes["5xx"])}</span>` : `<span class="faint">0</span>`}</td><td class="num hide-sm">${ms(x.p50)}</td><td class="num hide-sm">${ms(x.p95)}</td><td class="num hide-sm">${size(x.bytes)}</td></tr>`;
+  const siteCard = `<div class="card"><h2>By site</h2><div class="scroll"><table>
+    <thead><tr><th>Site</th><th class="num">Requests</th><th class="num">4xx</th><th class="num">5xx</th><th class="num hide-sm">Median</th><th class="num hide-sm">95%</th><th class="num hide-sm">Sent</th></tr></thead>
+    <tbody>${t.sites.map((x) => rowsOf(`<b>${esc(x.site)}</b><div class="faint">${esc(x.hosts.join(" "))}</div>`, x)).join("")}${other.slice(0, 10).map((h) => rowsOf(`<span class="mono dim">${esc(h.host)}</span>`, h)).join("")}</tbody></table></div>
+    ${other.length ? `<div class="body faint" style="padding-top:0">Hosts without a site: bots asking for the server's IP or old domains${other.length > 10 ? `, ${other.length - 10} more` : ""}.</div>` : ""}</div>`;
+  const list = (title, rows, cols) => (rows.length ? `<div class="card"><h2>${title}</h2><div class="scroll"><table><thead><tr>${cols.map(([c, cls = ""]) => `<th class="${cls}">${c}</th>`).join("")}</tr></thead><tbody>${rows.join("")}</tbody></table></div></div>` : "");
+  const paths = list("Busiest paths", T.paths.map((p) => `<tr><td class="mono">${esc(p.path)}</td><td class="num">${count(p.count)}</td><td class="num">${p.errors ? `<span class="badge warn">${count(p.errors)}</span>` : ""}</td></tr>`), [["Path"], ["Requests", "num"], ["Failed", "num"]]);
+  const errors = list("Failing requests", T.errors.map((e) => `<tr><td>${errorCell(e.status)}</td><td class="mono">${esc(e.path)}</td><td class="num">${count(e.count)}</td></tr>`), [["Status"], ["Path"], ["Requests", "num"]]);
+  const ips = list("Clients", T.ips.map((i) => `<tr><td class="mono">${esc(i.ip)}</td><td class="num">${count(i.count)}</td></tr>`), [["IP"], ["Requests", "num"]]);
+  const reach = t.from && new Date(t.from) - (Date.now() - t.since * 1000) > (t.bucket === "hour" ? 2 * 3_600_000 : 120_000) ? ` · the log reaches back to ${new Date(t.from).toLocaleString()}` : "";
+  return `${spans}<div class="meters">${meters}</div>
+    <div class="card"><h2>Requests per ${t.bucket} ${errs ? `<span class="sub">${count(errs)} failed</span>` : ""}</h2><div class="body">${trafficChart(T.series, t.bucket)}</div></div>
+    ${siteCard}<div class="cols">${errors}${paths}</div>${ips}${certsCard(n)}
+    <p class="faint" style="margin-top:14px">${st.loading ? `<span class="spin"></span> ` : ""}from Traefik's access log, read ${new Date(t.at).toLocaleTimeString()}${reach} · <span class="mono">lf traffic --since ${esc(S.since)}${esc(sv2(n))}</span></p>`;
+}
+
+/** Each site domain's certificate: days left, who issued it, why getting one failed. */
+function certsCard(n) {
+  const st = S.certs[n];
+  const head = `<h2>Certificates <span class="sub">lf certs</span></h2>`;
+  if (!st || (st.loading && !st.data)) return `<div class="card">${head}<div class="loading"><span class="spin"></span> reading certificates…</div></div>`;
+  if (st.error) return `<div class="card">${head}<div class="body"><div class="note bad" style="margin:0">${esc(st.error)}</div></div></div>`;
+  const r = st.data;
+  if (!r.domains.length) return "";
+  const days = (c) => !c ? `<span class="badge bad">none</span>` : c.days < 7 ? `<span class="badge bad">${c.days < 0 ? "expired" : plural(c.days, "day")}</span>` : c.staging ? `<span class="badge warn">staging</span>` : `<span class="badge ${c.days < 30 ? "warn" : "ok"}">${plural(c.days, "day")}</span>`;
+  const rows = r.domains.map((d) => `<tr><td>${esc(d.domain)}${d.error && (!d.cert || d.cert.days < 30) ? `<div class="faint" style="color:var(--bad)">${esc(d.error.error)}</div>` : ""}</td><td class="hide-sm dim">${esc(d.site)}</td><td>${days(d.cert)}</td><td class="hide-sm dim">${d.cert ? esc(new Date(d.cert.expires).toLocaleDateString()) : ""}</td><td class="hide-sm faint">${esc(d.cert?.issuer ?? "")}</td></tr>`).join("");
+  return `<div class="card">${head}${r.denied.length ? `<div class="body"><div class="note warn" style="margin:0">${esc(r.denied.join(", "))} needs root to read: this login has no passwordless sudo.</div></div>` : ""}<div class="scroll"><table>
+    <thead><tr><th>Domain</th><th class="hide-sm">Site</th><th>Left</th><th class="hide-sm">Expires</th><th class="hide-sm">Issuer</th></tr></thead><tbody>${rows}</tbody></table></div></div>`;
+}
+
+/** The sites tab: what failed in the last 24 hours, only when something did. */
+function errorsCard(n) {
+  if (!can(n)?.docker) return "";
+  ensure("errs", n, "/traffic?since=24h");
+  const t = S.errs[n]?.data;
+  if (!t || t.format !== "json") return "";
+  const rows = t.hosts.flatMap((h) => h.errors.map((e) => ({ ...e, where: h.site ?? h.host, site: !!h.site }))).filter((e) => e.site || e.status >= 500).sort((a, b) => (b.status >= 500) - (a.status >= 500) || b.count - a.count).slice(0, 6);
+  if (!rows.length) return "";
+  const fives = t.total.classes["5xx"];
+  return `<div class="card"><h2>Errors in the last 24h <span class="sub">${fives ? `${count(fives)} server errors · ` : ""}${count(t.total.classes["4xx"])} client errors</span><span class="actions">${btn("Traffic", () => (location.hash = `#/${encodeURIComponent(n)}/traffic`), "sm")}</span></h2><div class="scroll"><table>
+    <thead><tr><th>Status</th><th>Site</th><th>Path</th><th class="num">Requests</th></tr></thead>
+    <tbody>${rows.map((e) => `<tr><td>${errorCell(e.status)}</td><td>${e.site ? `<b>${esc(e.where)}</b>` : `<span class="mono dim">${esc(e.where)}</span>`}</td><td class="mono">${esc(e.path)}</td><td class="num">${count(e.count)}</td></tr>`).join("")}</tbody></table></div></div>`;
+}
+
+function loadDisk(n) {
+  S.disk[n] = { ...S.disk[n], loading: true, error: undefined };
+  render();
+  http(`/api/servers/${encodeURIComponent(n)}/disk`).then(
+    (data) => ((S.disk[n] = { data }), render()),
+    (e) => ((S.disk[n] = { error: e.message }), render()),
+  );
+}
+function pruneFlow(n) {
+  http(`/api/servers/${encodeURIComponent(n)}/prune`).then((p) => {
+    const imgs = p.images.filter((i) => !i.keep);
+    const kept = (w) => p.images.filter((i) => i.keep === w).length;
+    const most = imgs.reduce((t, i) => t + i.size, 0) + p.buildCache;
+    const keep = [[kept("release"), "for rollback"], [kept("undo"), "for undo"], [kept("used"), "in use"]].filter(([k]) => k).map(([k, w]) => `${k} ${w}`).join(", ");
+    dialog({
+      title: `Clean up ${n}?`,
+      text: `${plural(imgs.length, "unused image")} and ${size(p.buildCache)} of build cache: up to ${size(most)}.${keep ? ` Kept: ${keep}.` : ""} Volumes and containers stay.`,
+      fields: kept("tagged") ? [{ name: "all", type: "check", label: `Also ${plural(kept("tagged"), "unused tagged image")}`, hint: "Pulled again when a site needs them" }] : [],
+      ok: "Clean up",
+      danger: true,
+      onOk: (v) => run(["prune", ...sv(n), "-y", ...(v.all ? ["--all"] : [])], { server: n, after: () => (loadDisk(n), []) }),
+    });
+  }, (e) => toast(e.message));
+}
+function diskCard(n) {
+  const st = S.disk[n];
+  const head = (acts) => `<h2>Disk usage <span class="sub">images, volumes, build cache, sites and logs</span><span class="actions">${acts}</span></h2>`;
+  if (!st) return `<div class="card">${head(btn("Analyze", () => loadDisk(n), "sm", "lf disk: sums up folders, takes a few seconds"))}<div class="body dim">Where the space goes. Sums up folders on the server, so only on request.</div></div>`;
+  if (!st.data) {
+    const body = st.loading ? `<div class="loading"><span class="spin"></span> adding up folders…</div>` : `<div class="body"><div class="note bad" style="margin:0">${esc(st.error)}</div></div>`;
+    return `<div class="card">${head(st.loading ? "" : btn("Retry", () => loadDisk(n), "sm"))}${body}</div>`;
+  }
+  const d = st.data;
+  const tbl = (cols, rows) => `<div class="scroll"><table><thead><tr>${cols.map(([c, cls = ""]) => `<th class="${cls}">${c}</th>`).join("")}</tr></thead><tbody>${rows}</tbody></table></div>`;
+  const sub = (t) => `<h3 style="margin:16px 18px 6px;font-size:var(--fs-sm);color:var(--dim);font-weight:600">${t}</h3>`;
+  const docker = d.dockerDf.length
+    ? sub("Docker") + tbl([["Kind"], ["Count", "num"], ["In use", "num"], ["Size", "num"], ["Reclaimable", "num"]],
+        d.dockerDf.map((x) => `<tr><td>${esc(x.type)}</td><td class="num">${x.count}</td><td class="num">${x.active}</td><td class="num">${size(x.size)}</td><td class="num">${x.reclaimable ? `<span class="badge warn">${size(x.reclaimable)}</span>` : `<span class="faint">0</span>`}</td></tr>`).join(""))
+    : "";
+  const sites = d.sites.length
+    ? sub(`Sites <span class="faint mono">${esc(S.state.paths.sites)}</span>`) + tbl([["Site"], ["Files", "num"], ["Releases", "num"]],
+        d.sites.map((x) => `<tr><td>${esc(x.name)}</td><td class="num">${size(x.size)}</td><td class="num">${x.releases} · ${size(x.releasesSize)}</td></tr>`).join(""))
+    : "";
+  const vols = d.volumes.filter((x) => x.size > 0).slice(0, 10);
+  const volumes = vols.length
+    ? sub("Largest volumes") + tbl([["Volume"], ["Size", "num"], ["Used by", "num"]],
+        vols.map((x) => `<tr><td class="mono">${esc(x.name)}</td><td class="num">${size(x.size)}</td><td class="num">${x.links ? plural(x.links, "container") : `<span class="badge warn">nothing</span>`}</td></tr>`).join(""))
+    : "";
+  const lg = d.logs.filter((x) => x.size > 0).slice(0, 10);
+  const logs = lg.length ? sub("Largest container logs") + tbl([["Container"], ["Size", "num"]], lg.map((x) => `<tr><td class="mono">${esc(x.container)}</td><td class="num">${size(x.size)}</td></tr>`).join("")) : "";
+  const notes = [
+    d.journald ? `systemd journal: ${size(d.journald)}` : "",
+    d.docker ? "" : "No access to Docker: images, volumes and logs are not shown.",
+    d.root ? "" : "Without root or passwordless sudo, root-owned folders and container logs may be missing.",
+  ].filter(Boolean);
+  return `<div class="card">${head((d.docker ? btn("Clean up…", () => pruneFlow(n), "sm", "lf prune: remove unused images and the build cache") : "") + btn("↻", () => loadDisk(n), "sm", "Analyze again").replace("<button", `<button aria-label="Analyze again"`))}${docker}${sites}${volumes}${logs}
+    ${notes.length ? `<div class="body faint">${notes.map(esc).join("<br>")}</div>` : `<div style="height:8px"></div>`}</div>`;
+}
+
 function historyView(n) {
   const st = S.history[n] ?? { loading: true };
   if (st.loading && !st.data) return `<div class="loading"><span class="spin"></span> reading the journal…</div>`;
@@ -2212,8 +2742,8 @@ function render() {
 
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && menuEl) return closeMenu();
-  // 1-7: the open server's sections.
-  const sec = SECTIONS[Number(e.key) - 1];
+  // 1-9: the open server's sections.
+  const sec = S.sel && sections(S.sel)[Number(e.key) - 1];
   if (sec && S.sel && !e.metaKey && !e.ctrlKey && !e.altKey && !$("#dlg").open && !e.target.closest?.("input, textarea, select")) return go(S.sel, sec[0]);
   if (e.key === "Escape" && !$("#dlg").open && S.job && !e.target.closest?.("input, textarea, select")) {
     S.job = null;
@@ -2228,7 +2758,18 @@ $("#filter").addEventListener("input", (e) => {
 $("#add-server").onclick = () => addServer();
 // Servers go up and down: check again each minute while the page is visible.
 setInterval(() => document.hidden || loadReach(), 60_000);
-$("#app-settings").onclick = () => defaultsDialog();
+// Sites answer or not: check their domains again each minute while their tab is open.
+setInterval(() => {
+  const n = S.sel;
+  if (document.hidden || !n || S.tab !== "sites") return;
+  ensureDns(n, S.overview[n]?.data, true);
+}, 60_000);
+// Live stats: a new sample every 5s while the tab is open, unless the last one is still running.
+setInterval(() => {
+  const n = S.sel;
+  if (document.hidden || !n || S.tab !== "stats" || S.stats[n]?.loading || S.overview[n]?.error) return;
+  load(n, "stats", true);
+}, 5_000);
 
 (async () => {
   try {