locadot 1.6.0-beta.5 → 1.6.0-beta.6

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-The version in `package.json` is 1.6.0-beta.5 (published under the `beta` tag). The owner decides the bump. **2.0.0** is suggested because of the
+The version in `package.json` is 1.6.0-beta.6 (published under the `beta` tag). The owner decides the bump. **2.0.0** is suggested because of the
 breaking items below.
 
 ### Changed
@@ -16,7 +16,7 @@ breaking items below.
 - Bare `localhost` is reserved for the dashboard and can't be mapped.
 
 ### Added
-- `locadot tunnel --host <h>` (with `--off`, and `tunnel:install`) shares a mapping on a public `https://*.trycloudflare.com` URL through a Cloudflare quick tunnel, with no account needed. `cloudflared` is downloaded on demand into the state dir. The dashboard has a Cloudflare Tunnel card, a Public URL column and Share/Unshare per row. The API accepts `PUT /api/hosts/:host {"tunnel": true}` and has `POST /api/cloudflared/install`. The `--cors` pass-through is disabled for tunnel visitors.
+- `locadot tunnel --host <h>` (with `--off`, and `tunnel:install`) shares a mapping on a public `https://*.trycloudflare.com` URL through a Cloudflare quick tunnel, with no account needed. `cloudflared` is downloaded on demand into the state dir. The dashboard has a Cloudflare Tunnel card, a Public URL column and Share/Unshare per row. The API accepts `PUT /api/hosts/:host {"tunnel": true}` and has `POST /api/cloudflared/install`. `--cors` also works for tunnel visitors (the shim, preflights and origin rewriting to the public URL), but their pass-through calls may only reach public addresses; loopback, LAN and metadata addresses are refused at connect time.
 - The dashboard is redesigned: a neutral palette that follows the system light/dark theme, a responsive grid and a single Traffic column.
 - `locadot start --port <http> --https-port <https>` (also on `restart`) runs the proxy on other ports than 80/443. The choice is saved in the state dir, so `add`, `status`, `open` and start-at-boot keep using it; `--port 80 --https-port 443` goes back. Running it while the proxy is up on other ports restarts it on the new ones.
 - `--cors` per mapping (CLI, API and dashboard). `Origin`/`Referer` are sent as the target's own origin, CORS preflights are answered locally, and any origin may call the domain with credentials. Absolute URLs of other mapped domains in text responses are rewritten to their `.localhost` names, and a mapped caller is sent as its real origin, so a site plus its API both work locally. Pages also get a small script that sends calls to any other origin through the page's own origin (`/__locadot/x/…`), so no mapping per API or third-party domain is needed. (ENH-12, BUG-15)

package/README.md

@@ -80,8 +80,11 @@ Options for `add` / `update`:
 
 The tunnel runs inside the proxy, so a shared mapping keeps working after `restart` and comes back at boot. Redirects to the
 target are rewritten to the public URL. **Anyone with the link can reach the mapping**, so only share what you'd put online.
-For safety, the `--cors` pass-through (`/__locadot/x/…`) is turned off for visitors coming through the tunnel, so the tunnel
-can't be used to reach other hosts from your machine. The dashboard can also do this: use **Share** / **Unshare** on a row.
+`--cors` works through the tunnel too: CORS headers and preflights, the pass-through shim, and the target's own
+origin in pages rewritten to the public URL (other shared mappings get their public URLs too). For safety, a tunnel visitor's
+pass-through calls may only go to public addresses: loopback, LAN, link-local and cloud-metadata addresses are refused, checked
+on the address actually dialled, so the tunnel can't be used to reach your machine or network. The dashboard can also do this:
+use **Share** / **Unshare** on a row.
 
 ### Certificates
 

package/dist/dashboard/page.js

@@ -9,10 +9,10 @@ const escape_1 = require("./escape");
 const css = `
 :root {
   --bg: #0b0d10;
-  --surface: #12151a;
-  --surface-2: #171b21;
-  --border: #22262e;
-  --border-strong: #2c313a;
+  --surface: #14181e;
+  --surface-2: #1a1f26;
+  --border: #282d36;
+  --border-strong: #353b46;
   --fg: #e6e8eb;
   --muted: #8b929c;
   --muted-dim: #5f6672;
@@ -177,8 +177,8 @@ section h2 {
   width: 38px;
   height: 22px;
   border-radius: 999px;
-  border: 1px solid var(--border-strong);
-  background: var(--surface-2);
+  border: 1px solid transparent;
+  background: var(--border-strong);
   cursor: pointer;
   flex-shrink: 0;
   transition: background 0.15s ease, border-color 0.15s ease;
@@ -188,11 +188,12 @@ section h2 {
   top: 2px; left: 2px;
   width: 16px; height: 16px;
   border-radius: 50%;
-  background: var(--muted);
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   transition: transform 0.15s ease, background 0.15s ease;
 }
-.switch.on { background: var(--accent-bg); border-color: var(--accent); }
-.switch.on .switch-knob { transform: translateX(16px); background: var(--accent); }
+.switch.on { background: var(--accent); }
+.switch.on .switch-knob { transform: translateX(16px); }
 .switch.busy { opacity: 0.6; cursor: wait; }
 .switch:disabled { cursor: not-allowed; opacity: 0.5; }
 
@@ -218,6 +219,8 @@ section h2 {
 .btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
 .btn-danger { border-color: var(--down); color: var(--down); background: transparent; }
 .btn-danger:hover:not(:disabled) { background: var(--down-bg); }
+.row-actions .btn-danger:not(:hover):not(:focus-visible) { border-color: var(--border-strong); color: var(--muted); }
+.btn-primary.busy::after { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
 .btn-ghost { background: transparent; border-color: var(--border); }
 .btn.busy { opacity: 0.6; cursor: wait; }
 
@@ -267,7 +270,7 @@ tr:last-child td { border-bottom: none; }
   display: inline-block;
   font-size: 11px;
   padding: 2px 7px;
-  border-radius: 999px;
+  border-radius: 6px;
   border: 1px solid var(--warn);
   color: var(--warn);
   background: var(--warn-bg);
@@ -288,6 +291,15 @@ tr:last-child td { border-bottom: none; }
 .copy-btn:hover { color: var(--fg); border-color: var(--muted); }
 .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
 th.actions { text-align: right; }
+.edit-hint { font-size: 12px; }
+td.edit-error { color: var(--down); white-space: normal; }
+body.offline .switch, body.offline #add-submit { opacity: 0.5; pointer-events: none; }
+.field input.invalid:focus-visible, .edit-input.invalid:focus-visible { outline-color: var(--down); }
+.edit-input.invalid { border-color: var(--down); box-shadow: 0 0 0 3px var(--down-bg); }
+.chip:empty { display: none; }
+body.boot #updated { visibility: hidden; }
+body.boot #stop-proxy-btn, body.offline #stop-proxy-btn { display: none; }
+body.offline .live-label { color: var(--down); }
 .edit-input {
   font-family: var(--mono);
   font-size: 13px;
@@ -297,9 +309,11 @@ th.actions { text-align: right; }
   background: var(--surface-2);
   color: var(--fg);
   width: 100%;
-  min-width: 160px;
+  min-width: 240px;
 }
 .badges { display: flex; flex-wrap: wrap; gap: 4px; }
+td.badges { display: table-cell; }
+td.badges .badge + .badge { margin-left: 4px; }
 .badge-cors { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
 td .inline-check + .inline-check { margin-top: 4px; }
 .inline-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
@@ -326,6 +340,7 @@ td .inline-check + .inline-check { margin-top: 4px; }
   color: var(--muted);
   text-align: center;
 }
+#hosts-error { border-color: var(--down); }
 .empty pre { display: inline-block; text-align: left; }
 
 pre.code-block {
@@ -334,6 +349,8 @@ pre.code-block {
   border-radius: var(--radius-sm);
   padding: 10px 12px;
   overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
   font-family: var(--mono);
   font-size: 12.5px;
   color: var(--fg);
@@ -341,7 +358,7 @@ pre.code-block {
 }
 
 .cli-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
-.cli-item pre { flex: 1; }
+.cli-item pre { flex: 1; min-width: 0; }
 .cli-item:last-child { margin-bottom: 0; }
 
 details.card { padding: 0; }
@@ -405,21 +422,119 @@ details.card[open] summary::after { content: "\\2212"; }
 .toast-hint { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .toast-hint code { font-size: 11.5px; color: var(--fg); }
 
+.banner-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+
+@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+body.boot .tile-value,
+body.boot .tile-sub,
+body.boot #version,
+body.boot #uptime,
+body.boot #pid {
+  color: transparent !important;
+  display: inline-block;
+  min-width: 70px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-strong) 37%, var(--surface-2) 63%);
+  background-size: 400% 100%;
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+.skel-bar {
+  display: block;
+  width: 80%;
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-strong) 37%, var(--surface-2) 63%);
+  background-size: 400% 100%;
+  animation: skeleton-shimmer 1.4s ease infinite;
+}
+.skeleton-row td { border-bottom: 1px solid var(--border); padding: 14px 9px; }
+.skeleton-row:nth-child(1) .skel-bar { width: 92%; }
+.skeleton-row:nth-child(2) .skel-bar { width: 70%; }
+.skeleton-row:nth-child(3) .skel-bar { width: 82%; }
+
+tr.row-down td:first-child { border-left: 3px solid var(--down); padding-left: 6px; }
+
+.tunnel-error-text {
+  color: var(--down);
+  cursor: help;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 170px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.field input.invalid { border-color: var(--down); }
+
+.btn.busy, #ca-toggle.busy, #startup-toggle.busy { color: transparent !important; pointer-events: none; }
+.btn.busy::after {
+  content: "";
+  position: absolute;
+  width: 13px; height: 13px;
+  margin-left: -6px;
+  top: 50%; left: 50%;
+  margin-top: -6.5px;
+  border-radius: 50%;
+  border: 2px solid rgba(127, 127, 127, 0.35);
+  border-top-color: var(--accent-strong);
+  animation: spin 0.7s linear infinite;
+}
+.btn { position: relative; }
+.switch.busy .switch-knob { opacity: 0; }
+.switch.busy::after {
+  content: "";
+  position: absolute;
+  top: 3px; left: 11px;
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  animation: spin 0.7s linear infinite;
+}
+
 footer { text-align: center; padding: 20px; color: var(--muted-dim); font-size: 12px; }
 [hidden] { display: none !important; }
 
 @media (max-width: 900px) {
-  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .tile-wide { grid-column: span 1; }
+  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .tile { grid-column: span 2; }
+  .tile-wide, .tile-wide + .tile { grid-column: span 3; }
 }
 @media (max-width: 600px) {
   .tiles { grid-template-columns: 1fr; }
+  .tile, .tile-wide, .tile-wide + .tile { grid-column: auto; }
   #add-submit { margin-left: 0; }
 }
 
+@media (max-width: 1200px) {
+  #table th:nth-child(2), #table td.arrow { display: none; }
+  .tunnel-status a { max-width: 120px; }
+  th, td { padding-left: 6px; padding-right: 6px; }
+}
+@media (min-width: 641px) and (max-width: 1023px) {
+  #table tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  #table tbody tr:nth-child(odd) { border-right: 1px solid var(--border); }
+  #table tbody tr:nth-last-child(2):nth-child(odd) { border-bottom: none; }
+}
+@media (max-width: 1023px) {
+  #table { min-width: 0; }
+  #table thead { display: none; }
+  #table, #table tbody, #table tr { display: block; width: 100%; }
+  #table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
+  #table tr:last-child { border-bottom: none; }
+  #table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: none; white-space: normal; text-align: right; min-width: 0; }
+  #table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex-shrink: 0; text-align: left; }
+  #table td[data-label=""]::before { content: none; }
+  #table td[data-label=""]:first-child { padding-bottom: 8px; justify-content: flex-start; font-weight: 600; }
+  #table td[data-label=""] { justify-content: flex-end; padding-top: 10px; }
+  #table .edit-input { min-width: 0; }
+}
 @media (max-width: 640px) {
+  #pid, #updated { display: none; }
   header { padding: 12px 16px; }
   main { padding: 18px 16px 48px; }
+  .toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -442,6 +557,8 @@ const clientJs = `
   var uptimeEl = document.getElementById("uptime");
   var pidEl = document.getElementById("pid");
   var liveDot = document.getElementById("live-dot");
+  var liveLabel = document.getElementById("live-label");
+  var hostsErrorEl = document.getElementById("hosts-error");
   var updatedEl = document.getElementById("updated");
 
   var rootValueEl = document.getElementById("tile-root-value");
@@ -477,6 +594,20 @@ const clientJs = `
   var emptyEl = document.getElementById("empty");
   var tableWrap = document.getElementById("table-wrap");
   var tbody = document.getElementById("tbody");
+  var hostsSkeletonEl = document.getElementById("hosts-skeleton");
+  // As many skeleton rows as hosts last time, so the table doesn't jump when data lands.
+  try {
+    var skelBody = hostsSkeletonEl.querySelector("tbody");
+    var lastCount = Math.max(1, Math.min(8, parseInt(localStorage.getItem("locadot.hostCount") || "3", 10) || 3));
+    while (skelBody.children.length > lastCount) skelBody.removeChild(skelBody.lastElementChild);
+    while (skelBody.children.length < lastCount) skelBody.appendChild(skelBody.firstElementChild.cloneNode(true));
+  } catch (e) {}
+  var hostsBooted = false;
+
+  var loadErrorBanner = document.getElementById("load-error-banner");
+  var loadErrorText = document.getElementById("load-error-text");
+  var loadErrorRetry = document.getElementById("load-error-retry");
+  var isDown = false;
 
   var logsPanel = document.getElementById("logs-panel");
   var logsBox = document.getElementById("logs-box");
@@ -589,8 +720,9 @@ const clientJs = `
     }, timeout);
   }
 
-  function apiError(err) {
+  function apiError(err, context) {
     var message = err && err.message ? err.message : String(err);
+    if (context) message = context + ": " + message;
     showToast(message, "error", err && err.hint ? err.hint : undefined);
   }
 
@@ -619,7 +751,40 @@ const clientJs = `
 
   // ---------- header + system tiles ----------
 
+  function hideHostsSkeleton() {
+    if (!hostsBooted) {
+      hostsBooted = true;
+      hostsSkeletonEl.hidden = true;
+    }
+  }
+
+  function showLoadError(err) {
+    isDown = true;
+    var reason = (err && err.message) ? err.message : "connection failed";
+    loadErrorText.textContent = "Can't reach the locadot proxy (" + reason + "). Start it with locadot start; this page retries every 5 s.";
+    loadErrorBanner.hidden = false;
+    if (!lastStatus) hostsErrorEl.hidden = false;
+  }
+
+  function hideLoadError() {
+    isDown = false;
+    loadErrorBanner.hidden = true;
+    hostsErrorEl.hidden = true;
+    liveLabel.textContent = "live";
+    document.body.classList.remove("offline");
+  }
+
+  loadErrorRetry.addEventListener("click", function () {
+    loadErrorRetry.disabled = true;
+    loadErrorRetry.classList.add("busy");
+    refreshAll().then(function () {
+      loadErrorRetry.disabled = false;
+      loadErrorRetry.classList.remove("busy");
+    });
+  });
+
   function renderHeader(status) {
+    document.body.classList.remove("boot");
     versionEl.textContent = "v" + status.proxy.version;
     uptimeEl.textContent = "uptime " + fmtUptime(status.uptimeSec);
     pidEl.textContent = "pid " + status.proxy.pid;
@@ -631,6 +796,8 @@ const clientJs = `
   function markDown() {
     liveDot.classList.remove("up");
     liveDot.classList.add("down");
+    liveLabel.textContent = "offline";
+    document.body.classList.add("offline");
   }
 
   function renderSystemTiles(status) {
@@ -711,7 +878,7 @@ const clientJs = `
         showToast("CA trust setting updated", "success");
         return refreshAll();
       })
-      .catch(function (err) { apiError(err); })
+      .catch(function (err) { apiError(err, "Couldn't update CA trust"); })
       .then(function () {
         caBusy = false;
         caToggle.disabled = false;
@@ -730,7 +897,7 @@ const clientJs = `
         showToast("Startup setting updated", "success");
         return refreshAll();
       })
-      .catch(function (err) { apiError(err); })
+      .catch(function (err) { apiError(err, "Couldn't update start at boot"); })
       .then(function () {
         startupBusy = false;
         startupToggle.disabled = false;
@@ -758,7 +925,7 @@ const clientJs = `
         showToast("Proxy stopped", "warn");
       })
       .catch(function (err) {
-        apiError(err);
+        apiError(err, "Couldn't stop the proxy");
         stopProxyBtn.disabled = false;
         stopProxyBtn.classList.remove("busy");
       });
@@ -776,7 +943,7 @@ const clientJs = `
         showToast("cloudflared installed", "success");
         return refreshAll();
       })
-      .catch(function (err) { apiError(err); })
+      .catch(function (err) { apiError(err, "Couldn't install cloudflared"); })
       .then(function () {
         cfInstallBusy = false;
         cfInstallBtn.disabled = false;
@@ -807,15 +974,41 @@ const clientJs = `
     clear(addErrorEl);
   }
 
+  function markFieldInvalid(el, invalid) {
+    el.classList.toggle("invalid", !!invalid);
+    el.setAttribute("aria-invalid", invalid ? "true" : "false");
+  }
+
+  addHostInput.addEventListener("input", function () {
+    if (addHostInput.value.trim()) markFieldInvalid(addHostInput, false);
+    hideAddError();
+  });
+  addTargetInput.addEventListener("input", function () {
+    if (addTargetInput.value.trim()) markFieldInvalid(addTargetInput, false);
+    hideAddError();
+  });
+
+  addForm.addEventListener("focusout", function (e) {
+    if (e.relatedTarget && addForm.contains(e.relatedTarget)) return;
+    hideAddError();
+    markFieldInvalid(addHostInput, false);
+    markFieldInvalid(addTargetInput, false);
+  });
+
   addForm.addEventListener("submit", function (e) {
     e.preventDefault();
     hideAddError();
     var hostVal = addHostInput.value.trim();
     var targetVal = addTargetInput.value.trim();
     if (!hostVal || !targetVal) {
+      markFieldInvalid(addHostInput, !hostVal);
+      markFieldInvalid(addTargetInput, !targetVal);
       showAddError("Host and target are required.");
+      (!hostVal ? addHostInput : addTargetInput).focus();
       return;
     }
+    markFieldInvalid(addHostInput, false);
+    markFieldInvalid(addTargetInput, false);
     if (hostVal.indexOf(".") === -1) hostVal = hostVal + ".localhost";
     var insecureVal = !!addInsecureInput.checked;
     var corsVal = !!addCorsInput.checked;
@@ -890,9 +1083,12 @@ const clientJs = `
       statusWrap.appendChild(spin);
       statusWrap.appendChild(document.createTextNode("Starting\\u2026"));
     } else if (t.status === "error") {
+      var errDot = document.createElement("span");
+      errDot.className = "dot down";
+      statusWrap.appendChild(errDot);
       var errText = document.createElement("span");
-      errText.className = "tunnel-error";
-      errText.textContent = "Error";
+      errText.className = "tunnel-error-text";
+      errText.textContent = "Error: " + (t.error || "tunnel failed to start");
       errText.title = t.error || "Tunnel error";
       statusWrap.appendChild(errText);
     } else {
@@ -908,11 +1104,12 @@ const clientJs = `
   function shareButton(row) {
     var t = tunnelInfo(row);
     var isOn = t.enabled || t.status === "up" || t.status === "starting";
+    var isRetry = !isOn && t.status === "error";
     var shareBtn = document.createElement("button");
     shareBtn.type = "button";
     shareBtn.className = "btn btn-sm" + (isOn ? " btn-danger" : "");
-    shareBtn.textContent = isOn ? "Unshare" : "Share";
-    shareBtn.title = isOn ? "Stop the public tunnel" : "Share on a public trycloudflare.com URL";
+    shareBtn.textContent = isOn ? "Unshare" : (isRetry ? "Retry" : "Share");
+    shareBtn.title = isOn ? "Stop the public tunnel" : (isRetry ? "Retry starting the tunnel" : "Share on a public trycloudflare.com URL");
     if (!cloudflaredInstalled && !isOn) {
       shareBtn.disabled = true;
       shareBtn.title = "Install cloudflared first";
@@ -927,7 +1124,7 @@ const clientJs = `
           return loadHosts();
         })
         .catch(function (err) {
-          apiError(err);
+          apiError(err, "Couldn't change sharing for " + row.host);
           shareBtn.disabled = false;
           shareBtn.classList.remove("busy");
         });
@@ -935,8 +1132,13 @@ const clientJs = `
     return shareBtn;
   }
 
+  function labelCells(tr, labels) {
+    for (var i = 0; i < tr.children.length; i++) tr.children[i].setAttribute("data-label", labels[i] || "");
+  }
+
   function buildDisplayRow(tr, row) {
     clear(tr);
+    tr.classList.toggle("row-down", !row.probe.up);
 
     var hostTd = document.createElement("td");
     hostTd.className = "mono";
@@ -1011,7 +1213,7 @@ const clientJs = `
           return loadHosts();
         })
         .catch(function (err) {
-          apiError(err);
+          apiError(err, "Couldn't remove " + row.host);
           removeBtn.disabled = false;
         });
     });
@@ -1019,6 +1221,7 @@ const clientJs = `
     actionsWrap.appendChild(editBtn);
     actionsWrap.appendChild(removeBtn);
     tr.appendChild(actionsTd);
+    labelCells(tr, ["", "", "Target", "Options", "Status", "Public URL", "Traffic", ""]);
   }
 
   function enterEditMode(row) {
@@ -1035,6 +1238,7 @@ const clientJs = `
     targetInput.type = "text";
     targetInput.className = "edit-input mono";
     targetInput.value = row.target;
+    targetInput.title = row.target;
     targetInput.setAttribute("aria-label", "Target for " + row.host);
     targetTd.appendChild(targetInput);
     tr.appendChild(targetTd);
@@ -1058,12 +1262,9 @@ const clientJs = `
     insecureTd.appendChild(corsLabel);
     tr.appendChild(insecureTd);
 
-    tr.appendChild(makeCell("\\u2014", "dim"));
-    tr.appendChild(makeCell("\\u2014", "dim"));
-    tr.appendChild(makeCell("\\u2014", "dim"));
-    tr.appendChild(makeCell("\\u2014", "dim"));
-    tr.appendChild(makeCell("\\u2014", "dim"));
-    tr.appendChild(makeCell("\\u2014", "dim"));
+    var hintTd = makeCell("Enter to save \\u00b7 Esc to cancel", "dim edit-hint");
+    hintTd.colSpan = 3;
+    tr.appendChild(hintTd);
 
     var actionsTd = document.createElement("td");
     var actionsWrap = document.createElement("div");
@@ -1081,10 +1282,13 @@ const clientJs = `
     saveBtn.addEventListener("click", function () {
       var newTarget = targetInput.value.trim();
       if (!newTarget) {
-        showToast("Target is required", "error");
+        targetInput.classList.add("invalid");
+        targetInput.setAttribute("aria-invalid", "true");
+        targetInput.focus();
         return;
       }
       saveBtn.disabled = true;
+      saveBtn.classList.add("busy");
       cancelBtn.disabled = true;
       apiFetch("/api/hosts/" + encodeURIComponent(row.host), {
         method: "PUT",
@@ -1096,8 +1300,10 @@ const clientJs = `
           return loadHosts();
         })
         .catch(function (err) {
-          apiError(err);
+          hintTd.textContent = "Couldn't save: " + (err && err.message ? err.message : err) + ". Fix it and press Enter to retry.";
+          hintTd.className = "edit-hint edit-error";
           saveBtn.disabled = false;
+          saveBtn.classList.remove("busy");
           cancelBtn.disabled = false;
         });
     });
@@ -1107,12 +1313,21 @@ const clientJs = `
       buildDisplayRow(tr, row);
     });
 
+    targetInput.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") { e.preventDefault(); saveBtn.click(); }
+      if (e.key === "Escape") { e.preventDefault(); cancelBtn.click(); }
+    });
+    setTimeout(function () { targetInput.focus(); targetInput.select(); }, 0);
+
     actionsWrap.appendChild(saveBtn);
     actionsWrap.appendChild(cancelBtn);
     tr.appendChild(actionsTd);
+    labelCells(tr, ["", "", "Target", "Options", "", ""]);
   }
 
   function renderHosts(hosts) {
+    try { localStorage.setItem("locadot.hostCount", String(hosts.length || 1)); } catch (e) {}
+    hideHostsSkeleton();
     lastHosts = hosts;
     emptyEl.hidden = hosts.length !== 0;
     tableWrap.hidden = hosts.length === 0;
@@ -1148,9 +1363,9 @@ const clientJs = `
   function loadLogs() {
     return fetch("/api/logs?lines=200").then(parseJsonOrThrow).then(function (data) {
       var lines = (data && data.lines) || [];
-      logsBox.textContent = lines.join("\\n");
+      logsBox.textContent = lines.length ? lines.join("\\n") : "No log lines yet.";
       logsBox.scrollTop = logsBox.scrollHeight;
-    }).catch(function (err) { apiError(err); });
+    }).catch(function (err) { apiError(err, "Couldn't load logs"); });
   }
 
   logsPanel.addEventListener("toggle", function () {
@@ -1164,7 +1379,7 @@ const clientJs = `
         showToast("Logs cleared", "success");
         return loadLogs();
       })
-      .catch(function (err) { apiError(err); });
+      .catch(function (err) { apiError(err, "Couldn't clear logs"); });
   });
 
   cliAddCopy.addEventListener("click", function () { copyText(cliAddPre.textContent, cliAddCopy); });
@@ -1184,9 +1399,12 @@ const clientJs = `
       renderSystemTiles(lastStatus);
       renderCli(lastStatus);
       renderHosts(results[1]);
+      hideLoadError();
     }).catch(function (err) {
+      document.body.classList.remove("boot");
+      hideHostsSkeleton();
       markDown();
-      showToast("Refresh failed: " + (err && err.message ? err.message : err), "error");
+      showLoadError(err);
     });
   }
 
@@ -1216,14 +1434,14 @@ function renderPage(nonce, token) {
 <title>locadot dashboard</title>
 <style nonce="${safeNonce}">${css}</style>
 </head>
-<body>
+<body class="boot">
 <header>
   <div class="brand">
     <h1 class="wordmark">locadot</h1>
     <span id="version" class="muted mono"></span>
   </div>
   <div class="header-meta">
-    <span class="chip"><span id="live-dot" class="live-dot"></span> live</span>
+    <span class="chip"><span id="live-dot" class="live-dot"></span> <span id="live-label" class="live-label">live</span></span>
     <span id="uptime" class="chip"></span>
     <span id="pid" class="chip"></span>
     <span id="updated" class="muted"></span>
@@ -1231,6 +1449,12 @@ function renderPage(nonce, token) {
 </header>
 <main>
   <div id="stopped-banner" class="banner" role="status" hidden></div>
+  <div id="load-error-banner" class="banner" role="alert" hidden>
+    <div class="banner-row">
+      <span id="load-error-text"></span>
+      <button type="button" id="load-error-retry" class="btn btn-sm">Retry</button>
+    </div>
+  </div>
 
   <section aria-label="System status">
     <h2>System</h2>
@@ -1294,15 +1518,15 @@ function renderPage(nonce, token) {
 
   <section aria-label="Add proxy host">
     <h2>Add host</h2>
-    <form id="add-form" class="card form-card">
+    <form id="add-form" class="card form-card" novalidate>
       <div class="form-grid">
         <div class="field">
           <label for="add-host">Host</label>
-          <input type="text" id="add-host" name="host" placeholder="app.localhost" autocomplete="off" required>
+          <input type="text" id="add-host" name="host" placeholder="app.localhost" autocomplete="off" aria-describedby="add-error" required>
         </div>
         <div class="field">
           <label for="add-target">Target</label>
-          <input type="text" id="add-target" name="target" placeholder="3000, 127.0.0.1:8080 or https://google.com" autocomplete="off" required>
+          <input type="text" id="add-target" name="target" placeholder="3000, 127.0.0.1:8080 or https://example.com" autocomplete="off" aria-describedby="add-error" required>
         </div>
         <div class="field field-checkbox">
           <input type="checkbox" id="add-insecure" name="insecure">
@@ -1320,6 +1544,18 @@ function renderPage(nonce, token) {
 
   <section aria-label="Registered hosts">
     <h2>Hosts</h2>
+    <div id="hosts-skeleton" class="table-wrap card" aria-hidden="true">
+      <table>
+        <tbody>
+          <tr class="skeleton-row"><td colspan="8"><span class="skel-bar"></span></td></tr>
+          <tr class="skeleton-row"><td colspan="8"><span class="skel-bar"></span></td></tr>
+          <tr class="skeleton-row"><td colspan="8"><span class="skel-bar"></span></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div id="hosts-error" class="empty" hidden>
+      <p>Hosts couldn't be loaded while the proxy is unreachable.</p>
+    </div>
     <div id="empty" class="empty" hidden>
       <p>No hosts registered yet. Add one above, or from the CLI:</p>
       <pre class="code-block">locadot add --host app.localhost --port 3000</pre>
@@ -1361,7 +1597,7 @@ function renderPage(nonce, token) {
       <button type="button" id="cli-add-copy" class="copy-btn">Copy</button>
     </div>
     <div class="cli-item">
-      <pre id="cli-curl-pre" class="code-block mono"></pre>
+      <pre id="cli-curl-pre" class="code-block mono">curl -X POST http://localhost/api/hosts -H "X-Locadot-Token: $(locadot token)" -H 'Content-Type: application/json' -d '{"host":"app.localhost","target":"3000"}'</pre>
       <button type="button" id="cli-curl-copy" class="copy-btn">Copy</button>
     </div>
     <div class="cli-item">

package/dist/proxy/guard.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.publicOnlyAgents = exports.isPublicHost = exports.isPublicAddress = void 0;
+const dns_1 = __importDefault(require("dns"));
+const http_1 = __importDefault(require("http"));
+const https_1 = __importDefault(require("https"));
+const net_1 = __importDefault(require("net"));
+/**
+ * Tunnel visitors are the internet. Their --cors pass-through calls may only leave this machine
+ * for public addresses, never loopback, the LAN or cloud metadata.
+ */
+const blocked = new net_1.default.BlockList();
+for (const [prefix, bits] of [
+    ["0.0.0.0", 8],
+    ["10.0.0.0", 8],
+    ["100.64.0.0", 10],
+    ["127.0.0.0", 8],
+    ["169.254.0.0", 16],
+    ["172.16.0.0", 12],
+    ["192.0.0.0", 24],
+    ["192.168.0.0", 16],
+    ["198.18.0.0", 15],
+    ["224.0.0.0", 3],
+]) {
+    blocked.addSubnet(prefix, bits, "ipv4");
+}
+for (const [prefix, bits] of [
+    ["::", 96],
+    ["fc00::", 7],
+    ["fe80::", 10],
+    ["ff00::", 8],
+]) {
+    blocked.addSubnet(prefix, bits, "ipv6");
+}
+/** IPv4 inside IPv6 (::ffff:10.0.0.1, 64:ff9b::a00:1) is judged by its IPv4 part. */
+const embeddedV4 = (address) => {
+    const lower = address.toLowerCase();
+    const dotted = lower.match(/^(?:::ffff:|64:ff9b::)(\d+\.\d+\.\d+\.\d+)$/)?.[1];
+    if (dotted)
+        return dotted;
+    const hex = lower.match(/^(?:::ffff:|64:ff9b::)([0-9a-f]{1,4}):([0-9a-f]{1,4})$/);
+    if (!hex)
+        return undefined;
+    const [hi, lo] = [parseInt(hex[1], 16), parseInt(hex[2], 16)];
+    return [hi >> 8, hi & 255, lo >> 8, lo & 255].join(".");
+};
+const isPublicAddress = (address) => {
+    const v4 = net_1.default.isIPv4(address) ? address : embeddedV4(address);
+    if (v4)
+        return !blocked.check(v4, "ipv4");
+    return net_1.default.isIPv6(address) && !blocked.check(address, "ipv6");
+};
+exports.isPublicAddress = isPublicAddress;
+/** A host the pass-through may call for a tunnel visitor, judged before any DNS lookup. */
+const isPublicHost = (host) => {
+    const name = host.replace(/:\d+$/, "").replace(/^\[|\]$/g, "").toLowerCase();
+    if (net_1.default.isIP(name))
+        return (0, exports.isPublicAddress)(name);
+    return name !== "localhost" && !name.endsWith(".localhost") && !name.endsWith(".local") && name.includes(".");
+};
+exports.isPublicHost = isPublicHost;
+// Checked at connect time, on the addresses actually dialled, so DNS rebinding can't slip past.
+const publicLookup = (hostname, options, callback) => {
+    dns_1.default.lookup(hostname, { ...options, all: true }, (err, addresses) => {
+        if (err)
+            return callback(err, "", 0);
+        const allowed = addresses.filter((entry) => (0, exports.isPublicAddress)(entry.address));
+        if (!allowed.length) {
+            const error = new Error(`${hostname} is not a public address`);
+            error.code = "EPUBLICONLY";
+            return callback(error, "", 0);
+        }
+        if (options.all)
+            return callback(null, allowed);
+        callback(null, allowed[0].address, allowed[0].family);
+    });
+};
+exports.publicOnlyAgents = {
+    http: new http_1.default.Agent({ keepAlive: true, lookup: publicLookup }),
+    https: new https_1.default.Agent({ keepAlive: true, lookup: publicLookup }),
+};

package/dist/proxy/options.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.viaOrigin = exports.viaOptions = exports.proxyOptions = void 0;
 const cors_1 = require("./cors");
+const guard_1 = require("./guard");
 const passthrough_1 = require("./passthrough");
 const request_1 = require("./request");
 // --cors bodies are rewritten, so only ask for encodings we can decode (browsers also offer zstd).
@@ -28,6 +29,7 @@ const viaOptions = (req, entry, via) => ({
     secure: !entry.insecure,
     cookieDomainRewrite: { "*": "" },
     headers: { ...(0, passthrough_1.viaHeaders)(req, via, entry.target), ...DECODABLE },
+    ...((0, request_1.fromTunnel)(req) ? { agent: via.scheme === "https" || via.scheme === "wss" ? guard_1.publicOnlyAgents.https : guard_1.publicOnlyAgents.http } : {}),
 });
 exports.viaOptions = viaOptions;
 const viaOrigin = (via) => `${via.scheme}://${via.host}`;

package/dist/proxy/response.js

@@ -18,7 +18,7 @@ const stripHopByHop = (headers) => {
     }
 };
 /** http-proxy `proxyRes` pipeline: hop-by-hop cleanup, then --cors headers and origin rewriting. */
-const handleProxyResponse = (proxyRes, req, res, hosts) => {
+const handleProxyResponse = (proxyRes, req, res, hosts, publicUrl = () => undefined) => {
     if (proxyRes.statusCode === 101)
         return;
     stripHopByHop(proxyRes.headers);
@@ -26,11 +26,8 @@ const handleProxyResponse = (proxyRes, req, res, hosts) => {
     if (!entry?.cors)
         return;
     (0, cors_1.applyCors)(req, proxyRes.headers);
-    // Rewriting to .localhost names only helps a browser on this machine.
-    if ((0, request_1.fromTunnel)(req))
-        return;
     const via = (0, request_1.viaOf)(req);
-    const pairs = (0, rewrite_1.originMap)(req, hosts);
+    const pairs = (0, rewrite_1.originMap)(req, hosts, publicUrl);
     if (via)
         (0, passthrough_1.rewriteViaResponse)(proxyRes.headers, via, entry.target);
     else if (proxyRes.headers.location)

package/dist/proxy/rewrite.js

@@ -16,14 +16,22 @@ const DECODERS = {
     deflate: zlib_1.default.inflateSync,
     br: zlib_1.default.brotliDecompressSync,
 };
-/** [real origin, local origin] for every mapping, e.g. https://api.x.com → https://api.x.localhost. */
-const originMap = (req, hosts) => {
+/**
+ * [real origin, local origin] for every mapping, e.g. https://api.x.com → https://api.x.localhost.
+ * A tunnel visitor can't reach .localhost, so for them only shared mappings are rewritten, to
+ * their public URLs; the shim sends calls to the rest through the pass-through.
+ */
+const originMap = (req, hosts, publicUrl = () => undefined) => {
     const tls = (0, request_1.isTls)(req);
-    const self = (0, request_1.hostOf)(req);
+    const self = (0, request_1.mappedHost)(req);
+    const tunnel = (0, request_1.fromTunnel)(req);
     const pairs = [];
     for (const [host, entry] of Object.entries(hosts)) {
+        const local = tunnel ? publicUrl(host) : (0, urls_1.urlFor)(host, tls);
+        if (!local)
+            continue;
         try {
-            pairs.push([new URL(entry.target).origin, (0, urls_1.urlFor)(host, tls), host === self]);
+            pairs.push([new URL(entry.target).origin, local, host === self]);
         }
         catch { }
     }

package/dist/proxy/router.js

@@ -11,6 +11,7 @@ const logger_1 = __importDefault(require("../utils/logger"));
 const urls_1 = require("../lib/urls");
 const cors_1 = require("./cors");
 const options_1 = require("./options");
+const guard_1 = require("./guard");
 const passthrough_1 = require("./passthrough");
 const request_1 = require("./request");
 const stats_1 = require("./stats");
@@ -23,8 +24,9 @@ const resolveHost = (req, ctx) => {
     return local ?? host;
 };
 const dashboardUrl = (req) => `${(0, urls_1.urlFor)("localhost", (0, request_1.isTls)(req))}/`;
-// The pass-through fetches arbitrary URLs from this machine; never offer it to the internet.
-const passThrough = (req, entry) => Boolean(entry.cors) && !(0, request_1.fromTunnel)(req);
+const passThrough = (req, entry) => Boolean(entry.cors);
+/** Same-origin only, and a tunnel visitor may only reach public hosts (see guard.ts). */
+const viaAllowed = (req, via) => (0, passthrough_1.isSameOrigin)(req) && (!(0, request_1.fromTunnel)(req) || (0, guard_1.isPublicHost)(via.host));
 const reason = (err) => err?.code || err?.message;
 function handleRequest(req, res, ctx) {
     const host = resolveHost(req, ctx);
@@ -51,9 +53,9 @@ function handleRequest(req, res, ctx) {
             return;
         }
         const via = passThrough(req, entry) ? (0, passthrough_1.parseVia)(req.url) : undefined;
-        if (via && !(0, passthrough_1.isSameOrigin)(req)) {
+        if (via && !viaAllowed(req, via)) {
             res.writeHead(403, { "Content-Type": "text/plain; charset=utf-8" });
-            res.end("locadot: the pass-through only serves the page's own requests.\n");
+            res.end("locadot: the pass-through only serves the page's own requests, and only public hosts through a tunnel.\n");
             return;
         }
         const started = Date.now();
@@ -95,7 +97,7 @@ function handleUpgrade(req, socket, head, ctx) {
             return;
         }
         const via = passThrough(req, entry) ? (0, passthrough_1.parseVia)(req.url) : undefined;
-        if (via && !(0, passthrough_1.isSameOrigin)(req)) {
+        if (via && !viaAllowed(req, via)) {
             socket.end("HTTP/1.1 403 Forbidden\r\nConnection: close\r\n\r\n");
             return;
         }

package/dist/server/index.js

@@ -33,7 +33,7 @@ async function startCentralProxy() {
     const stats = new Map();
     const proxy = http_proxy_1.default.createProxyServer({});
     proxy.on("error", (err) => logger_1.default.warn(`proxy error: ${err.message}`));
-    proxy.on("proxyRes", (proxyRes, req, res) => (0, response_1.handleProxyResponse)(proxyRes, req, res, registry.get().hosts));
+    proxy.on("proxyRes", (proxyRes, req, res) => (0, response_1.handleProxyResponse)(proxyRes, req, res, registry.get().hosts, (host) => tunnels.state(host).url));
     const info = {
         pid: process.pid,
         version: package_json_1.version,
@@ -51,7 +51,7 @@ async function startCentralProxy() {
     const ctx = {
         proxy,
         stats,
-        lookup: (host) => registry.get().hosts[host],
+        lookup: (host) => registry.get().hosts[tunnels.hostFor(host) ?? host],
         tunnelFor: (host) => tunnels.hostFor(host),
         dashboard: (req, res) => (0, dashboard_1.handleDashboardRequest)(req, res, {
             getRegistry: registry.get,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locadot",
-  "version": "1.6.0-beta.5",
+  "version": "1.6.0-beta.6",
   "description": "Secure your local development environment with HTTPS and custom domains like dev.localhost.",
   "homepage": "https://www.npmjs.com/package/locadot",
   "main": "dist/index.js",