landfall 0.4.2 → 0.4.4

package/dist/index.html

@@ -76,6 +76,15 @@ nav h3 span { font-weight: 500; letter-spacing: 0; }
 .srv .n { font-weight: 600; display: flex; align-items: center; gap: 6px; }
 .srv .t { color: var(--dim); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .nav-none { color: var(--faint); font-size: var(--fs-sm); padding: 6px 10px; }
+.srv .t .live { color: var(--ok); }
+/* The open server's sections, under it in the list. */
+.sections { display: grid; gap: 1px; margin: 2px 0 8px 14px; padding-left: 6px; border-left: 1px solid var(--line); }
+.sections button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 4px 10px; color: var(--dim); }
+.sections button:hover { background: var(--bg); color: var(--text); }
+.sections button.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
+.sections .badge { margin-left: auto; }
+.head h1 .crumb { font-weight: 400; color: var(--dim); }
+.tunnel-url { font-family: var(--mono); font-size: var(--fs-sm); }
 .star { color: var(--warn); font-size: var(--fs-xs); }
 main { overflow: auto; padding: 20px 24px 40px; min-width: 0; container-type: inline-size; }
 .show-sm { display: none !important; }
@@ -92,7 +101,8 @@ main { overflow: auto; padding: 20px 24px 40px; min-width: 0; container-type: in
 .head h1 { margin: 0; font-size: 22px; }
 .head .sub { color: var(--dim); font-size: var(--fs); margin-top: 2px; }
 .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
-.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
+/* Phones only: elsewhere the sections sit under the server in the list. */
+.tabs { display: none; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
 .tabs::-webkit-scrollbar { display: none; }
 .tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--dim); flex: none; }
 .tabs button:hover { color: var(--text); }
@@ -250,6 +260,7 @@ body.dragging::after {
   .project button { padding: 5px 9px; font-size: var(--fs); white-space: nowrap; }
   nav.servers { display: none; }
   .server-pick { display: block; padding: 10px 16px 0; }
+  .tabs { display: flex; position: sticky; top: -14px; z-index: 2; background: var(--bg); }
   main { padding: 14px 16px 40px; }
   .project .path { display: none; }
   aside.job { inset: 52px 0 0 0; width: 100vw; }
@@ -454,11 +465,13 @@ window.addEventListener("hashchange", route);
 
 // ---- loading -------------------------------------------------------------
 
-const STORE = { sites: "overview", facts: "facts", updates: "updates", firewall: "firewall", history: "history", settings: "settings" };
-const URLS = { sites: "", facts: "/facts", updates: "/updates", firewall: "/firewall", history: "/history", settings: "/config" };
+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"]];
 
 // The overview and facts drive the header, so every tab needs them.
-const needs = (tab) => (tab === "sites" ? ["sites", "facts"] : ["sites", "facts", tab]);
+const needs = (tab) => (STORE[tab] === "overview" ? ["sites", "facts"] : ["sites", "facts", tab]);
 function load(name, tab, force = false) {
   for (const t of needs(tab)) {
     const store = S[STORE[t]];
@@ -512,6 +525,8 @@ function stream(j) {
     j.lines.length = Math.min(j.lines.length, from);
     j.lines.push(...lines);
     if (S.job === j.info.id) appendOutput(j);
+    // A tunnel's address shows in the lists once it is up.
+    if (isTunnel(j.info) && !j.url && (j.url = tunnelUrl(j))) render();
   };
   es.addEventListener("done", (e) => {
     es.close();
@@ -564,6 +579,19 @@ function showJob(id) {
   $("#job .job-out")?.focus({ preventScroll: true });
 }
 const runningJobs = () => [...S.jobs.values()].filter((j) => j.info.code === undefined);
+const isTunnel = (info) => info.argv[0] === "tunnel" || (info.argv[0] === "traefik" && info.argv[1] === "dashboard");
+/** Tunnels the UI opened to server n that are still open. */
+const openTunnels = (n) => runningJobs().filter((j) => j.info.server === n && isTunnel(j.info));
+const tunnelUrl = (j) => j.lines.map((l) => l.replace(ANSI, "").match(/http:\/\/localhost:\d+\S*/)?.[0]).find(Boolean);
+const closeTunnel = (j) => http(`/api/jobs/${j.info.id}/stop`, {}).catch((e) => toast(e.message));
+/** Open a tunnel with argv, or, when it is open, its address and a way to close it. */
+function tunnelBtn(n, argv, label = "Open tunnel") {
+  const j = openTunnels(n).find((t) => t.info.argv.join(" ") === argv.join(" "));
+  if (!j) return btn(label, () => run(argv, { server: n }), "sm", `lf ${argv.join(" ")}: until you close it`);
+  const url = tunnelUrl(j);
+  return `${url ? `<a class="tunnel-url" href="${esc(url)}" target="_blank" rel="noopener">${esc(url.replace("http://", ""))}</a>` : `<span class="spin" role="img" aria-label="opening"></span>`}
+    ${btn("Output", () => showJob(j.info.id), "sm ghost")}${btn("Close", () => closeTunnel(j), "sm danger", "Ends the tunnel")}`;
+}
 
 const ANSI = /\x1b\[[0-9;?]*[A-Za-z]/g;
 function lineClass(l) {
@@ -583,8 +611,13 @@ function appendOutput(j) {
   const frag = document.createDocumentFragment();
   for (const l of j.lines.slice(out.textContent ? shown : 0)) {
     const div = document.createElement("div");
-    div.textContent = l.replace(ANSI, "") || " ";
-    const c = lineClass(div.textContent);
+    const text = l.replace(ANSI, "") || " ";
+    // Addresses (a tunnel's localhost one, a deployed site) open in a new tab.
+    for (const [i, part] of text.split(/(https?:\/\/[^\s)]+)/).entries()) {
+      if (!(i % 2)) div.append(part);
+      else div.append(Object.assign(document.createElement("a"), { href: part, textContent: part, target: "_blank", rel: "noopener" }));
+    }
+    const c = lineClass(text);
     if (c) div.className = c;
     frag.append(div);
   }
@@ -719,6 +752,11 @@ function dialog({ title, text = "", fields = [], ok = "OK", danger = false, onOk
   (first || (danger ? $("#dlg-cancel", dlg) : submit)).focus();
 }
 const invalid = (field, error) => ({ field, error });
+/** What is wrong with a login (lf newLogin's rules), as [field, message]. */
+const loginError = (user, password) =>
+  !/^[A-Za-z0-9._@-]{1,64}$/.test(user) ? ["user", "Only letters, digits and . _ @ -"]
+  : password.length < 8 ? ["password", "The password needs at least 8 characters"]
+  : null;
 /**
  * Passwords here are for servers and sites, not for this page: a masked text field, so browsers
  * and password managers do not offer to save them. Browsers without text masking get a password field.
@@ -780,6 +818,7 @@ function setupWizard(base) {
           { name: "image", label: "Image", value: saved.traefikImage ?? S.state.defaultImage },
           { name: "email", label: "Let's Encrypt e-mail (optional)", value: saved.email ?? "" },
           { name: "dashboard", label: "Dashboard domain (optional)", value: "", placeholder: "traefik.example.com", hint: "Behind basic auth; the password is shown after setup." },
+          { name: "http3", label: "HTTP/3 (QUIC on 443/udp)", type: "check", value: saved.http3 !== false, hint: "Browsers that can't use it fall back to HTTP/2." },
         ],
       },
       { name: "firewall", label: "Enable ufw: deny incoming except ssh, 80 and 443", type: "check", value: true, hint: "Skipped automatically if it would block ports in use." },
@@ -794,6 +833,7 @@ function setupWizard(base) {
         if (v.image.trim()) f.push(`--image=${v.image.trim()}`);
         if (v.email.trim()) f.push(`--email=${v.email.trim()}`);
         if (v.dashboard.trim()) f.push(`--dashboard=${v.dashboard.trim()}`);
+        f.push(v.http3 ? "--http3" : "--no-http3");
       }
       if (!v.firewall) f.push("--no-firewall");
       if (!v.harden) f.push("--no-harden");
@@ -878,7 +918,7 @@ function describe(d) {
     d.kind === "compose" ? `Compose project <code>${esc(d.compose ?? "compose.yaml")}</code>: built and started on the server; x-landfall picks the routed service`
     : d.kind === "image" ? `Docker image <code>${esc(d.project?.image ?? "")}</code> (from .landfall.json)`
     : d.kind === "dockerfile" ? `Dockerfile: built on the server, served on port ${esc(d.port)}`
-    : d.dir ? `Static files from <code>${esc(d.dir === "." ? "./" : d.dir + "/")}</code>${d.spa ? " (single-page app)" : ""}${built}`
+    : d.dir ? `Static files from <code>${esc(d.dir === "." ? "./" : d.dir + "/")}</code>${d.tool ? ` (where ${esc(d.tool)} builds the site)` : ""}${d.spa ? " (single-page app)" : ""}${built}`
     : d.build ? `Static site, built with <code>${esc(d.build)}</code> first`
     : `<span style="color:var(--warn)">No compose.yaml, Dockerfile, index.html or build script here.</span>`;
   const before = d.project?.server ? ` <span class="dim">· deployed before to ${esc(d.project.server)}</span>` : "";
@@ -909,11 +949,15 @@ function deployDialog(det, o = {}) {
       ...(det.kind === "static"
         ? [
             { name: "build", label: "Build command (runs here, before upload)", value: det.build ?? "", placeholder: "none" },
+            {
+              name: "dir", label: "Folder to publish", value: det.dir ?? ".", placeholder: ".",
+              hint: det.tool ? `Detected: ${det.tool} writes the site to ${det.dir}/ (it need not exist before the build).` : "Relative to the project; it needs an index.html after the build.",
+            },
             { name: "spa", label: "Single-page app (unknown paths serve index.html)", type: "check", value: !!p?.spa },
           ]
         : []),
-      { name: "authUser", label: "Login user (optional)", placeholder: "admin", hint: "Visitors log in with this user and password (HTTP basic auth). Empty: no change; set or remove it later with Password… on the site." },
-      { name: "authPassword", label: "Login password (at least 8 characters)", type: "password" },
+      { name: "authPassword", label: "Login password (optional, at least 8 characters)", type: "password", hint: "Visitors log in with the user below and this password (HTTP basic auth). Empty: no change; set or remove it later with Password… on the site." },
+      { name: "authUser", label: "Login user", value: "admin", placeholder: "admin" },
     ],
     ok: "Deploy",
     onOk: (v) => {
@@ -924,11 +968,16 @@ function deployDialog(det, o = {}) {
       const argv = ["deploy", "-y", ...sv(v.server), "-n", n, ...domains.flatMap((d) => ["-d", d])];
       if (v.build?.trim() && v.build.trim() !== p?.build) argv.push("--build", v.build.trim());
       if (v.spa && !p?.spa) argv.push("--spa");
-      const user = v.authUser.trim();
-      if (user && !/^[A-Za-z0-9._@-]{1,64}$/.test(user)) return invalid("authUser", "Only letters, digits and . _ @ -");
-      if (user && v.authPassword.length < 8) return invalid("authPassword", "The password needs at least 8 characters");
-      if (!user && v.authPassword) return invalid("authUser", "Give a user for the password");
-      if (user) argv.push("--auth-user", user, "--auth-password", v.authPassword);
+      const dir = v.dir?.trim().replace(/\/+$/, "") || ".";
+      if (det.kind === "static" && (/^[/-]/.test(dir) || dir.split("/").includes(".."))) return invalid("dir", "A folder inside the project");
+      if (det.kind === "static" && dir !== (det.dir ?? ".")) argv.push(dir);
+      // The login counts once there is a password; the user defaults to admin.
+      if (v.authPassword) {
+        const user = v.authUser.trim() || "admin";
+        const bad = loginError(user, v.authPassword);
+        if (bad) return invalid(bad[0] === "user" ? "authUser" : "authPassword", bad[1]);
+        argv.push("--auth-user", user, "--auth-password", v.authPassword);
+      }
       if (o.upload) argv.push("--no-save");
       run(argv, { server: v.server, cwd: det.path, after: openAfter });
     },
@@ -1103,9 +1152,10 @@ function authDialog(n, m) {
     ok: "Save",
     onOk: (v) => {
       if (v.off) return void run(["auth", m.name, ...sv(n), "--off", "-y"], { server: n });
-      if (!v.user.trim()) return invalid("user", "Give a user name");
-      if (v.password.length < 8) return invalid("password", "The password needs at least 8 characters");
-      run(["auth", m.name, ...sv(n), "-u", v.user.trim(), "-p", v.password], { server: n });
+      const user = v.user.trim() || "admin";
+      const bad = loginError(user, v.password);
+      if (bad) return invalid(...bad);
+      run(["auth", m.name, ...sv(n), "-u", user, "-p", v.password], { server: n });
     },
   });
 }
@@ -1170,9 +1220,13 @@ function renderNav() {
   const aliases = list.filter((s) => !s.registered);
   const q = S.filter.toLowerCase();
   const hit = (s) => !q || s.name.toLowerCase().includes(q) || s.target.toLowerCase().includes(q) || s.name === S.sel;
-  const item = (s) => `<button type="button" class="srv ${s.name === S.sel ? "on" : ""}"${s.name === S.sel ? ` aria-current="page"` : ""} data-f="srv:${esc(s.name)}" ${on(() => go(s.name, S.sel === s.name ? S.tab : "sites"))}>
+  const item = (s) => {
+    const tunnels = openTunnels(s.name).length;
+    const head = `<button type="button" class="srv ${s.name === S.sel ? "on" : ""}" data-f="srv:${esc(s.name)}" ${on(() => go(s.name, S.sel === s.name ? S.tab : "sites"))}>
       <div class="n">${esc(s.name)}${s.isDefault ? `<span class="star" title="default server">★</span>` : ""}</div>
-      <div class="t">${esc(s.target)}</div></button>`;
+      <div class="t">${esc(s.target)}${tunnels ? ` · <span class="live">${plural(tunnels, "tunnel")}</span>` : ""}</div></button>`;
+    return s.name === S.sel ? `${head}<div class="sections" role="list" aria-label="${esc(s.name)}">${sectionButtons(s.name, "sec")}</div>` : head;
+  };
   const group = (title, l) => {
     const shown = l.filter(hit);
     return l.length ? `<h3>${title}${q ? `<span>${shown.length}/${l.length}</span>` : ""}</h3>${shown.map(item).join("") || `<div class="nav-none">no match</div>`}` : "";
@@ -1186,6 +1240,18 @@ function renderNav() {
   </select>`;
 }
 
+/** The open server's sections as buttons, each with its count. */
+function sectionButtons(n, f) {
+  const o = S.overview[n]?.data;
+  const tunnels = openTunnels(n).length;
+  const badge = {
+    sites: o ? ` <span class="badge">${o.sites.length}</span>` : "",
+    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("");
+}
+
 function renderHeader() {
   const st = S.state;
   $("#version").textContent = st.version;
@@ -1266,12 +1332,11 @@ function renderMain() {
       : o.ready ? `<span class="dot down"></span>no traefik` : ""
     : "";
   const sub = [esc(s?.target ?? ""), s && !s.registered ? "from ~/.ssh/config" : "", traefik].filter(Boolean).join(" · ");
-  const tab = (t, label) => `<button type="button" class="${S.tab === t ? "on" : ""}"${S.tab === t ? ` aria-current="page"` : ""} data-f="tab:${t}" ${on(() => go(n, t))}>${label}</button>`;
   // 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);
   main.innerHTML = `
     <div class="head">
-      <div><h1>${esc(n)}${s?.isDefault ? ` <span class="star" title="default server">★</span>` : ""}</h1><div class="sub">${sub}</div>${factsLine(n)}</div>
+      <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")}
         ${btn("Run…", () => runCommand(n), "", "Run a shell command over ssh")}
@@ -1286,7 +1351,7 @@ function renderMain() {
       </div>
     </div>
     ${factsNote(n)}
-    <div class="tabs">${tab("sites", `Sites${o ? ` <span class="badge">${o.sites.length}</span>` : ""}`)}${tab("updates", `Updates${updatesBadge(n)}`)}${tab("firewall", "Firewall")}${tab("history", "History")}${tab("settings", "Settings")}${reloading ? `<span class="spin" role="img" aria-label="reloading" style="align-self:center;margin-left:8px"></span>` : ""}</div>
+    <div class="tabs">${sectionButtons(n, "tab")}</div>
     <div id="view"></div>`;
   const view = $("#view");
   if (ov.loading && !o) view.innerHTML = `<div class="loading"><span class="spin"></span> connecting to ${esc(n)}…</div>`;
@@ -1296,6 +1361,8 @@ function renderMain() {
       <div class="actions" style="margin:0">${btn("Set up", () => setupFlow([n]), "primary")} ${btn("Retry", () => (load(n, S.tab, true), render()))}</div>`;
   } 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 === "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 === "settings") view.innerHTML = settingsView(n);
@@ -1334,7 +1401,7 @@ function othersCard(n, o) {
           <div class="chips show-sm">${links(e)}</div></td>
         <td class="hide-sm"><div class="chips">${links(e)}</div></td>
         <td class="hide-sm mono dim">${esc(e.dir ?? e.containers.join(", "))}</td>
-        <td class="acts">${e.dir ? btn("Adopt…", () => adoptDialog(n, e), "sm", "lf adopt") : ""}</td></tr>`)
+        <td class="acts">${btn("Tunnel", () => run(["tunnel", e.name, ...sv(n)], { server: n }), "sm", "lf tunnel: an SSH tunnel straight to the container, until you stop it")}${e.dir ? btn("Adopt…", () => adoptDialog(n, e), "sm", "lf adopt") : ""}</td></tr>`)
       .join("")}</tbody></table></div>`;
 }
 
@@ -1396,6 +1463,7 @@ function sitesView(n, o) {
             ? { label: "Roll back…", hint: "lf rollback", title: `To ${older[0].id} (${ago(older[0].at)})`, run: () => confirmDlg({ title: `Roll back ${name}?`, text: `From ${m.current} to ${older[0].id} (${ago(older[0].at)}). Volumes keep their data.`, ok: "Roll back", onOk: () => run(["rollback", name, ...sv(n), "-y"]) }) }
             : null,
           "-",
+          old ? null : { label: "Open via tunnel", hint: "lf tunnel", title: "An SSH tunnel straight to the container: test it on localhost, no domain needed", run: () => run(["tunnel", name, ...sv(n)], { server: n }) },
           main ? { label: "Domains…", hint: "lf domains", run: () => domainsDialog(n, m) } : null,
           managed ? { label: m.auth?.length ? "Login…" : "Password…", hint: "lf auth", title: "Protect the site with a user and password", run: () => authDialog(n, m) } : null,
           managed ? { label: "Environment…", hint: "lf env", run: () => envDialog(n, name) } : null,
@@ -1674,6 +1742,117 @@ function editRule(n, num, r) {
 
 // ---- history ---------------------------------------------------------------
 
+/** Everything an SSH tunnel reaches on server n, and the tunnels open now. */
+function tunnelsView(n, o) {
+  if (!o.ready && !o.others.length) return `<div class="card"><div class="body empty"><h2>Nothing to tunnel to yet</h2><p>Set up the server and deploy a site first.</p></div></div>`;
+  const open = openTunnels(n);
+  const chips = (l) => `<div class="chips">${l.map((d) => `<span class="chip">${esc(d)}</span>`).join("")}</div>`;
+  const targets = [];
+  const dashArgv = ["traefik", "dashboard", ...sv(n)];
+  targets.push({ name: "Traefik dashboard", status: o.traefik, serves: o.dashboard.hosts, argv: o.dashboard.tunnel ? dashArgv : null, why: "no tunnel yet: see Traefik" });
+  for (const x of o.sites) {
+    if (x.state === "old") continue;
+    // One row per service when a site has several: each is its own container.
+    const many = x.services.length > 1;
+    if (!many) targets.push({ name: x.meta.name, status: x.status, serves: x.domains, argv: ["tunnel", x.meta.name, ...sv(n)] });
+    else for (const svc of x.services) targets.push({ name: `${x.meta.name} · ${svc.service}`, status: svc.status, serves: svc.service === x.main ? x.domains : [], argv: ["tunnel", x.meta.name, svc.service, ...sv(n)] });
+  }
+  for (const e of o.others) targets.push({ name: e.name, status: e.status, serves: e.domains, argv: ["tunnel", e.name, ...sv(n)], other: true });
+  const row = (t) => `<tr><td><div class="site-name">${t.status ? statusDot(t.status) : ""}<b>${esc(t.name)}</b>${t.other ? `&nbsp;<span class="faint">not landfall's</span>` : ""}</div><div class="show-sm">${chips(t.serves)}</div></td>
+      <td class="hide-sm">${chips(t.serves)}</td>
+      <td class="acts">${t.argv ? tunnelBtn(n, t.argv) : `<span class="dim">${esc(t.why)}</span> ${btn("Traefik", () => go(n, "traefik"), "sm")}`}</td></tr>`;
+  return `${open.length ? `<div class="card scroll"><h2>Open <span class="badge ok">${open.length}</span></h2><table><tbody>${open
+      .map((j) => `<tr><td><b class="mono">lf ${esc(j.info.argv.filter((a, i, l) => a !== "-s" && l[i - 1] !== "-s").join(" "))}</b></td><td class="acts">${tunnelBtn(n, j.info.argv)}</td></tr>`)
+      .join("")}</tbody></table></div>` : ""}
+    <div class="card scroll"><h2>Tunnel to</h2>
+      <div class="lede">An SSH tunnel forwards a port on this machine to a container on ${esc(n)}: test a site on localhost with no domain, HTTPS or login. Nothing changes on the server, and closing the tunnel ends it.</div>
+      <table><thead><tr><th>Container</th><th class="hide-sm">Domains</th><th><span class="sr">Tunnel</span></th></tr></thead><tbody>${targets.map(row).join("")}</tbody></table></div>`;
+}
+
+/** Traefik on server n: its dashboard (domain and tunnel) and how landfall runs it. */
+function traefikView(n) {
+  const st = S.settings[n] ?? { loading: true };
+  if (st.loading && !st.data) return `<div class="loading"><span class="spin"></span> reading the settings…</div>`;
+  if (st.error) return `<div class="note bad">${esc(st.error)}</div>`;
+  const x = st.data;
+  const reload = { server: n, after: (j) => (j.info.code === 0 ? void (load(n, "traefik", true), render()) : undefined) };
+  const rows = (pairs) => `<dl class="kv">${pairs.map(([k, v]) => `<dt>${esc(k)}</dt><dd>${v}</dd>`).join("")}</dl>`;
+  const P = S.state.paths;
+  const dashboard = () =>
+    dialog({
+      title: `Traefik dashboard on ${n}`,
+      text: "Serves the dashboard on a domain behind a login. Without one it stays reachable through an SSH tunnel only (Open via tunnel).\nRuns lf traefik setup, which reconfigures landfall's Traefik.",
+      fields: [
+        { name: "domain", label: "Domain", value: x.traefik.dashboard ?? "", placeholder: x.domains[0] ? `traefik.${x.domains[0]}` : "traefik.example.com", hint: x.traefik.dashboard ? "Empty: take the dashboard off its domain." : "Needs an A record pointing at the server." },
+        { name: "user", label: "Login user", value: "admin", placeholder: "admin" },
+        { name: "password", label: "Login password (at least 8 characters)", type: "password", hint: x.traefik.dashboard ? "Empty: keeps the current one." : "Empty: a generated one, shown in the output." },
+      ],
+      ok: "Apply",
+      onOk: (v) => {
+        const d = v.domain.trim();
+        const user = v.user.trim() || "admin";
+        if (!d && !x.traefik.dashboard) return invalid("domain", "Give a domain, or use the tunnel");
+        const bad = d && loginError(user, v.password || "generated");
+        if (bad) return invalid(...bad);
+        const argv = ["traefik", "setup", ...sv(n), "--dashboard", d || "off"];
+        if (d) argv.push("--dashboard-user", user, ...(v.password ? ["--dashboard-password", v.password] : []));
+        run(argv, reload);
+      },
+    });
+  const traefikDialog = () =>
+    dialog({
+      title: `Traefik on ${n}`,
+      text: "Runs lf traefik setup, which reconfigures landfall's Traefik and restarts it (a few seconds without traffic). The settings are remembered.",
+      fields: [
+        { name: "http3", label: "HTTP/3 (QUIC on 443/udp)", type: "check", value: x.traefik.http3, hint: "Faster on lossy and mobile connections; browsers that can't use it fall back to HTTP/2." },
+        {
+          name: "mode", label: "Ports", type: "select", value: x.traefik.hostNetwork ? "host" : "docker",
+          options: [
+            { value: "docker", label: "Published by Docker (default)" },
+            { value: "host", label: "Host network: real client IPs, ufw guards 80/443" },
+          ],
+        },
+        { name: "image", label: "Image", value: x.traefik.image, placeholder: S.state.defaultImage },
+        { name: "email", label: "Let's Encrypt e-mail (optional)", value: x.traefik.email ?? "", hint: "Only the account contact; Let's Encrypt no longer mails expiry warnings." },
+        { name: "staging", label: "Let's Encrypt staging CA (test certificates, browsers warn)", type: "check", value: x.traefik.staging },
+      ],
+      ok: "Apply",
+      onOk: (v) => {
+        const argv = ["traefik", "setup", ...sv(n), v.http3 ? "--http3" : "--no-http3", v.mode === "host" ? "--host-network" : "--no-host-network", v.staging ? "--staging" : "--no-staging"];
+        if (v.image.trim()) argv.push("--image", v.image.trim());
+        if (v.email.trim()) argv.push("--email", v.email.trim());
+        run(argv, reload);
+      },
+    });
+  // lf traefik setup refuses to touch a Traefik the server already had.
+  const o = S.overview[n]?.data;
+  const foreign = o?.adopted ? o.proxy : "";
+  const dash = o?.dashboard ?? { hosts: x.traefik.dashboard ? [x.traefik.dashboard] : [], tunnel: false };
+  const link = (h) => `<a href="https://${esc(h)}" target="_blank" rel="noopener">${esc(h)}</a>`;
+  const dashArgv = ["traefik", "dashboard", ...sv(n)];
+  return `
+    <div class="card">
+      <h2>Dashboard <span class="actions">${foreign ? "" : btn(dash.hosts.length ? "Domain & login…" : "Put on a domain…", dashboard, "sm")}</span></h2>
+      <div class="body">${rows([
+        ["domain", dash.hosts.length ? `${dash.hosts.map(link).join(", ")} <span class="dim">(with its login)</span>` : `<span class="dim">none${foreign ? "" : ": only through the tunnel"}</span>`],
+        ["tunnel", dash.tunnel
+          ? `${tunnelBtn(n, dashArgv, "Open via tunnel")} <span class="dim">lf traefik dashboard</span>`
+          : foreign ? `<span class="dim">route its dashboard (api@internal) to a domain, or run <span class="mono">lf traefik dashboard --port &lt;its api port&gt;</span></span>`
+          : `<span class="dim">set up by an older landfall</span> ${btn("Enable tunnel", () => run(["traefik", "setup", ...sv(n)], reload), "sm", "Re-runs lf traefik setup, which adds it")}`],
+      ])}</div>
+    </div>
+    <div class="card">
+      <h2>Traefik <span class="actions">${btn("Status", () => run(["traefik", "status", ...sv(n)]), "sm", "lf traefik status")}${foreign ? "" : btn("Settings…", traefikDialog, "sm")}</span></h2>
+      <div class="body">${foreign ? `<div class="note">Sites go through <b class="mono">${esc(foreign)}</b>, a Traefik landfall did not install and never changes: it is configured in its own files.</div>` : ""}${rows([
+        ["image", esc(x.traefik.summary)],
+        ["e-mail", esc(x.traefik.email ?? "none")],
+        ["HTTP/3", x.traefik.http3 ? `on <span class="dim">(443/udp)</span>` : `<span class="dim">off</span>`],
+        ["files", `<span class="mono">${esc(P.traefik)}/docker-compose.yml</span>`],
+        ["certificates", `<span class="mono">${esc(P.traefik)}/letsencrypt/</span> <span class="dim">(kept on reinstall)</span>`],
+      ])}<p class="faint">Used when landfall installs or reconfigures its own Traefik. With a Traefik that was already there, landfall only writes <span class="mono">${esc(P.proxy)}</span>.</p></div>
+    </div>`;
+}
+
 function settingsView(n) {
   const st = S.settings[n] ?? { loading: true };
   if (st.loading && !st.data) return `<div class="loading"><span class="spin"></span> reading the settings…</div>`;
@@ -1686,14 +1865,7 @@ function settingsView(n) {
     promptDlg(`Add a main domain to ${n}`, `${x.domains.length ? "The first main domain stays the primary." : "The first main domain is the primary: new sites get <site>.<domain>, and a bare name like blog means blog.<domain>."}\nPoint <domain> and *.<domain> (A records) at the server once.`, { label: "Domain", placeholder: "example.com", type: "text", value: "" }, (d) => {
       if (d) run(["server", "domain", n, "--add", d], reload);
     }, "Add");
-  const dashboard = () =>
-    promptDlg(`Traefik dashboard on ${n}`, "Serves the dashboard behind a password (shown in the output). `off` removes it.\nRuns lf traefik setup, which reconfigures landfall's Traefik.", { label: "Domain", type: "text", value: x.traefik.dashboard ?? (x.domains[0] ? `traefik.${x.domains[0]}` : "") }, (d) => {
-      if (d) run(["traefik", "setup", ...sv(n), "--dashboard", d], reload);
-    }, "Apply");
   const sites = S.overview[n]?.data?.sites ?? [];
-  // lf traefik setup refuses to touch a Traefik the server already had.
-  const o = S.overview[n]?.data;
-  const foreign = o?.adopted ? o.proxy : "";
   const external = (d) => S.overview[n]?.data?.others?.find((e) => e.domains.includes(d))?.name;
   const servedBy = (d) => sites.find((s) => s.domains.includes(d))?.meta.name;
   const serve = (d) => {
@@ -1729,16 +1901,6 @@ function settingsView(n) {
         : `<p class="dim">No main domain set in landfall. New sites get a free <span class="mono">&lt;site&gt;.&lt;ip&gt;.sslip.io</span> address until you set one.</p>`}
         ${x.suggest.length ? `<div class="note">${x.domains.length ? "Other domains" : "Domains"} your sites on this server already use: ${x.suggest.map((g) => `<b>${esc(g.domain)}</b> <span class="faint">(${g.hosts})</span> ${btn("Add", () => run(["server", "domain", n, "--add", g.domain], reload), "sm")}`).join(" ")}</div>` : ""}</div>
     </div>
-    <div class="card">
-      <h2>Traefik <span class="actions">${foreign ? "" : btn("Dashboard…", dashboard, "sm")}</span></h2>
-      <div class="body">${foreign ? `<div class="note">Sites go through <b class="mono">${esc(foreign)}</b>, a Traefik landfall did not install and never changes: its dashboard is set up in its own config.</div>` : ""}${rows([
-        ["image", esc(x.traefik.summary)],
-        ["e-mail", esc(x.traefik.email ?? "none")],
-        ["dashboard", x.traefik.dashboard ? `<a href="https://${esc(x.traefik.dashboard)}" target="_blank" rel="noopener">${esc(x.traefik.dashboard)}</a>` : "off"],
-        ["files", `<span class="mono">${esc(P.traefik)}/docker-compose.yml</span>`],
-        ["certificates", `<span class="mono">${esc(P.traefik)}/letsencrypt/</span> <span class="dim">(kept on reinstall)</span>`],
-      ])}<p class="faint">Used when landfall installs or reconfigures its own Traefik. With a Traefik that was already there, landfall only writes <span class="mono">${esc(P.proxy)}</span>.</p></div>
-    </div>
     <div class="card">
       <h2>On the server <span class="dim mono" style="font-weight:400">${esc(P.root)}</span></h2>
       <div class="body">${rows([
@@ -1836,6 +1998,9 @@ 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];
+  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;
     render();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "landfall",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Set up servers and deploy sites behind Traefik with automatic HTTPS",
   "author": "ph1p <me@ph1p.dev>",
   "license": "MIT",