locadot 2.1.0-beta.0 → 2.1.0-beta.2

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## Unreleased
+
+### Added
+- Dashboard pages: every sidebar item now opens its own page (`#/overview`, `#/hosts`, `#/sharing`, `#/remote`, `#/machines`,
+  `#/logs`, `#/settings`); they are bookmarkable and work with back/forward.
+  - **Overview**: tiles for hosts, down targets, requests, public shares, remote access and connected machines, plus host health, proxy checks and recent activity.
+  - **Public sharing**: a per-host share list.
+  - **Logs**: filter, level, line count, live mode and download.
+- Settings page:
+  - HTTP/HTTPS ports with a **Restart proxy** button, which follows the dashboard to the new port.
+  - Bind address, state directory, log level and the API token (reveal/copy).
+  - Dashboard preferences: theme, refresh interval, start page, collapsed sidebar, confirm-before-remove.
+  - New-host defaults (insecure TLS, CORS) and a danger zone.
+- API: `GET/PUT /api/settings` and `POST /api/proxy/restart`.
+- Remote localhost for admins: an admin peer reaches any port on the sender's machine at `<port>.<domain>.localhost`, where
+  `<domain>.localhost` is a landing page listing that machine's shared hosts. The domain is chosen with
+  `connect --domain` or in the dashboard, and otherwise defaults to two random words (e.g. `brave-otter`). Change it with
+  `remote:domain`. The sender checks the role on every request, never exposes its own proxy ports, and can turn this off
+  with `hub:localhost off` or the dashboard switch.
+
+- Dashboard password (UI only): `locadot ui:password` sets or resets it from the terminal (scrypt hash, 0600 file), `--off` removes it,
+  and **Settings → Dashboard password** changes it in the UI. When it is set, the dashboard shows a sign-in page and never serves the API token
+  to a signed-out visitor. It uses a 7-day HttpOnly SameSite=Strict session, rate-limits wrong passwords, and adds a Sign out button to the sidebar.
+  Mapped hosts are not affected, and neither are scripts or the CLI that send `X-Locadot-Token`.
+
+### Changed
+- `<domain>.localhost` now opens the sender's own dashboard for an admin peer, with full control (hosts, sharing, peers,
+  settings), instead of a landing page; no port needed. The port picker moved to `<domain>.localhost/_locadot/ports`.
+  The page never carries the sender's API token, the API only accepts calls from that `<domain>.localhost` origin, the sender
+  checks the admin role on every request, `hub:localhost off` turns it off, and a dashboard password still asks for sign-in.
+  Senders must run this version too; an older sender answers `<domain>.localhost` with a 404.
+
+### Fixed
+- The proxy can now tell a user's `LOCADOT_HTTP_PORT`/`LOCADOT_HTTPS_PORT` from the copies the CLI pins on every spawn
+  (`LOCADOT_USER_PORTS`), so saved ports aren't reported as env-overridden.
+
 ## 2.1.0-beta.0 (2026-09-27)
 
 ### Added

package/README.md

@@ -111,18 +111,24 @@ short-lived pairing string, and the sender's mappings then show up in the receiv
 | `locadot hub:setup --domain dev.example.com` | Sender: publish through your own named tunnel on your Cloudflare domain (runs `cloudflared` login, creates the tunnel and routes DNS). The address stays the same. |
 | `locadot hub:quick` | Sender: publish on a trycloudflare URL. No account is needed, but **the URL changes if the tunnel restarts**, so receivers have to run `remote:url`. |
 | `locadot hub` / `hub:off` | Show the hub status and URL, or stop it. |
+| `locadot hub:localhost <on\|off>` | Sender: allow or block admin peers from opening this machine's dashboard and any port on its localhost. |
 | `locadot share --role viewer\|editor\|admin [--hosts a.localhost,b.localhost]` | Sender: print a pairing string. It works once and expires after 5 minutes. `--hosts` limits a viewer to those mappings. |
 | `locadot peers` / `peers:role <id> <role>` / `peers:revoke <id>` | Sender: list the connected machines, change a role, or cut one off. |
-| `locadot connect "<pairing string>" [--name alice]` | Receiver: connect and import the sender's mappings. If a name clashes, `app.localhost` becomes `app.alice.localhost`. |
-| `locadot remotes` / `remote:sync <name>` / `disconnect <name>` | Receiver: list the connections, pull new mappings, or remove the connection and its names. |
+| `locadot connect "<pairing string>" [--name alice] [--domain dev]` | Receiver: connect and import the sender's mappings. If a name clashes, `app.localhost` becomes `app.alice.localhost`. Admins get a local domain that opens the sender's dashboard and localhost (see below); `--domain` picks it, otherwise it's a random `adjective-noun`. |
+| `locadot remotes` / `remote:sync <name>` / `disconnect <name>` | Receiver: list the connections (with their domain), pull new mappings, or remove the connection and its names. |
+| `locadot remote:domain <name> [domain] [--off]` | Receiver, admin only: set the local domain for a remote's localhost, randomize it (no domain given), or remove it (`--off`). |
 | `locadot remote:alias <name> <remote host> <local host>` | Receiver: give a sender mapping another local name, e.g. `he.localhost`. |
 | `locadot remote:add\|remote:update\|remote:rm <name> …` | Receiver: change mappings on the sender (editor or admin). |
 | `locadot remote:url <name> <url>` | Receiver: point a connection at the sender's new URL. |
 
 Roles: **viewer** can only browse (optionally limited to the mappings picked on the invite). **editor** can also add and change
-mappings on the sender. **admin** can also delete them and change sharing. Traffic goes receiver → Cloudflare → sender →
+mappings on the sender. **admin** can also delete them and change sharing, and (unless the sender turned it off with
+`hub:localhost off`) open the sender's own dashboard at `https://<domain>.localhost` and manage it as if they were sitting at it,
+and reach any port on the sender's localhost at `https://<port>.<domain>.localhost` (`sender's localhost:<port>`). The port
+picker is at `https://<domain>.localhost/_locadot/ports`. The admin's browser never gets the sender's API token, so revoking or
+demoting the peer cuts off its dashboard access at once; a dashboard password on the sender still applies. Traffic goes receiver → Cloudflare → sender →
 target, so an editor can reach anything the sender's machine can reach. Only give that role to people you trust. Only hashes
-of the tokens are stored, and failed attempts are rate limited. The sender's dashboard is never reachable through the hub.
+of the tokens are stored, and failed attempts are rate limited. Only admins can open the sender's dashboard through the hub.
 The dashboard has **Remote access** and **Connected machines** cards for all of this.
 
 ### Certificates
@@ -173,9 +179,23 @@ Trust and start-at-boot may need elevation. locadot asks the OS for it (polkit o
 If that isn't possible, for example on a headless Linux box, the panel shows the exact command to run instead: `sudo locadot trust`,
 `locadot startup:enable`, and so on.
 
+### Dashboard password
+
+The dashboard is open to anyone on this machine by default. To require a password for the UI only:
+
+```sh
+locadot ui:password          # set or reset it (prompts twice; stored as an scrypt hash, 0600)
+locadot ui:password --off    # remove it
+echo "$PW" | locadot ui:password --stdin
+```
+
+You can also set, change or remove it under **Settings → Dashboard password** (changing or removing it there needs the current one).
+Only the dashboard is protected. Your mapped hosts work as before, and so do scripts and the CLI that send `X-Locadot-Token`.
+Sessions last 7 days, and changing the password signs everyone out. If you forget it, run `locadot ui:password` again in a terminal.
+
 ### JSON API (for scripts and AI agents)
 
-Everything the page does is a plain JSON API on the dashboard origin. The read routes are open to local callers. Every mutating route needs the
+Everything the page does is a plain JSON API on the dashboard origin. The read routes are open to local callers, unless a [dashboard password](#dashboard-password) is set; then they need a signed-in session or the token. Every mutating route needs the
 `X-Locadot-Token` header. Get the token with `locadot token`. It lives in `<state dir>/.locadot-token` (mode 0600) and is regenerated
 each time the proxy starts.
 
@@ -191,6 +211,15 @@ each time the proxy starts.
 | `POST /api/trust` | `{ "trusted": true }` | Trust or untrust the CA. |
 | `POST /api/logs/clear` | | Clear the log. |
 | `POST /api/proxy/stop` | | Stop the proxy. Use `locadot start` to bring it back. |
+| `GET /api/settings` | | Running ports/bind, `logLevel`, `stateDir`, `saved`/`env` overrides, and `restartRequired`. |
+| `PUT /api/settings` | `{ "httpPort": 8080, "httpsPort": 8443 }` | Save new ports to the config file (400 if invalid or equal). Takes effect after a restart. |
+| `POST /api/proxy/restart` | | Restart the proxy (e.g. to pick up saved ports). |
+| `PUT /api/settings/ui-password` | `{ "password": "…", "current": "…" }` or `{ "enabled": false, "current": "…" }` | Set, change or remove the dashboard password (`current` is required once one is set). |
+| `GET /api/hub` | | Hub status/config, plus `localhost` (sender: is localhost access on). |
+| `PUT /api/hub/localhost` | `{ "enabled": true }` | Sender: turn localhost access for admin peers on/off (400 if the hub isn't configured). |
+| `GET /api/remotes` | | Every remote (never the token), including `domain` and `localhost`. |
+| `POST /api/remotes` | `{ "string": "<pairing string>", "name": "alice", "domain": "dev" }` | Receiver: connect using a pairing string; `domain` is optional (admin only, random if omitted). |
+| `PUT /api/remotes/:name` | `{ "domain": "dev" }` or `{ "domain": "random" }` or `{ "domain": null }` | Receiver: set, randomize or remove a remote's local domain (400 invalid, 409 clash, 404 unknown). |
 
 Errors are `{ "error": "...", "hint": "<CLI command>" }` with a 4xx/5xx status.
 

package/dist/cli/commands/index.js

@@ -39,6 +39,7 @@ const files = __importStar(require("./files"));
 const system = __importStar(require("./system"));
 const tunnel = __importStar(require("./tunnel"));
 const remote = __importStar(require("./remote"));
+const ui = __importStar(require("./ui"));
 const doctor_1 = require("./doctor");
-const Commands = { ...hosts, ...proxy, ...files, ...system, ...tunnel, ...remote, doctor: doctor_1.doctor };
+const Commands = { ...hosts, ...proxy, ...files, ...system, ...tunnel, ...remote, ...ui, doctor: doctor_1.doctor };
 exports.default = Commands;

package/dist/cli/commands/remote.js

@@ -8,6 +8,7 @@ exports.hubSetup = hubSetup;
 exports.hubQuick = hubQuick;
 exports.hubManual = hubManual;
 exports.hubOff = hubOff;
+exports.hubLocalhost = hubLocalhost;
 exports.share = share;
 exports.peers = peers;
 exports.peersRole = peersRole;
@@ -15,6 +16,7 @@ exports.peersRevoke = peersRevoke;
 exports.connect = connect;
 exports.remotes = remotes;
 exports.remoteSync = remoteSync;
+exports.remoteDomain = remoteDomain;
 exports.remoteAlias = remoteAlias;
 exports.remoteUrl = remoteUrl;
 exports.remoteAdd = remoteAdd;
@@ -59,6 +61,7 @@ const apiToken = () => {
 /** Talks to the running proxy's local dashboard API on its HTTP port. */
 const dashboardRequest = (method, path, options = {}) => new Promise((resolve, reject) => {
     const data = options.body !== undefined ? JSON.stringify(options.body) : undefined;
+    const token = file_1.default.read("API_TOKEN")?.trim();
     const req = http_1.default.request({
         host: "127.0.0.1",
         port: constants_1.default.server.httpPort,
@@ -66,6 +69,8 @@ const dashboardRequest = (method, path, options = {}) => new Promise((resolve, r
         method,
         headers: {
             Host: "localhost",
+            // Reads need it too once the dashboard has a password.
+            ...(token ? { "X-Locadot-Token": token } : {}),
             ...(data ? { "Content-Type": "application/json", "Content-Length": Buffer.byteLength(data) } : {}),
             ...options.headers,
         },
@@ -153,6 +158,20 @@ async function hubOff() {
     hub_config_1.default.clear();
     (0, shared_1.print)("🔒 Remote access turned off.");
 }
+async function hubLocalhost(value) {
+    if (value !== "on" && value !== "off")
+        throw new localhost_1.InputError('❌ Use "on" or "off".');
+    requireRunning();
+    const { status, json } = await dashboardRequest("PUT", "/api/hub/localhost", {
+        headers: { "X-Locadot-Token": apiToken() },
+        body: { enabled: value === "on" },
+    });
+    if (status === 400)
+        throw new localhost_1.InputError(`❌ ${json?.error || "Set up the hub first: locadot hub:setup / hub:quick / hub:manual."}`);
+    if (status !== 200)
+        throw new localhost_1.InputError(`❌ Couldn't update (${status})${json?.error ? `: ${json.error}` : ""}.`);
+    (0, shared_1.print)(json.localhost ? "🖥️  Admin peers can now reach this machine's localhost." : "🔒 Admin peers can no longer reach this machine's localhost.");
+}
 async function share(options) {
     const role = requireRole(options.role);
     if (options.hosts && role !== "viewer") {
@@ -200,13 +219,22 @@ async function peersRevoke(id) {
     links_1.default.revoke(id);
     (0, shared_1.print)(`🗑️  Revoked peer ${id}.`);
 }
+/** After connect/sync/remote:domain: the sender's dashboard and localhost, reachable when this remote has a domain and we're admin. */
+const printDomain = (remote) => {
+    if (remote.domain && remote.role === "admin") {
+        (0, shared_1.print)(`🖥️  ${remote.sender.hostname} dashboard: ${(0, urls_1.urlFor)(`${remote.domain}.localhost`)}  (any port: ${(0, urls_1.urlFor)(`<port>.${remote.domain}.localhost`)})`);
+    }
+};
 async function connect(value, options) {
-    const { remote, mapped, skipped } = await remotes_1.default.connect(value, { name: options.name });
+    const { remote, mapped, skipped, note } = await remotes_1.default.connect(value, { name: options.name, domain: options.domain });
     (0, shared_1.print)(`✅ Connected to ${remote.name} (${remote.sender.hostname}) as ${remote.role}.`);
     for (const m of mapped)
         (0, shared_1.print)(`   ${(0, urls_1.urlFor)(m.local)}  →  ${m.host}`);
     for (const reason of skipped)
         (0, shared_1.print)(`   ⚠️  skipped: ${reason}`);
+    if (note)
+        (0, shared_1.print)(`   ⚠️  ${note}`);
+    printDomain(remote);
 }
 async function remotes(options) {
     const list = remotes_1.default.list();
@@ -223,16 +251,27 @@ async function remotes(options) {
         return;
     }
     for (const remote of list) {
-        (0, shared_1.print)(`${remote.name}  ${remote.url}  (${remote.role})`);
+        (0, shared_1.print)(`${remote.name}  ${remote.url}  (${remote.role})${remote.domain ? `  domain: ${remote.domain}.localhost` : ""}`);
         for (const alias of aliasesFor(remote.name))
             (0, shared_1.print)(`   ${(0, urls_1.urlFor)(alias.local)}  →  ${alias.host}`);
     }
 }
 async function remoteSync(name) {
-    const { mapped } = await remotes_1.default.sync(name);
+    const { remote, mapped } = await remotes_1.default.sync(name);
     (0, shared_1.print)(`✅ ${name} synced.`);
     for (const m of mapped)
         (0, shared_1.print)(`   + ${(0, urls_1.urlFor)(m.local)}  →  ${m.host}`);
+    printDomain(remote);
+}
+async function remoteDomain(name, domain, options) {
+    if (options.off) {
+        remotes_1.default.setDomain(name, null);
+        (0, shared_1.print)(`🗑️  Removed the local domain for ${name}.`);
+        return;
+    }
+    const remote = remotes_1.default.setDomain(name, domain || "random");
+    (0, shared_1.print)(`✅ ${name} domain: ${remote.domain}.localhost.`);
+    printDomain(remote);
 }
 async function remoteAlias(name, remoteHost, localHost) {
     await remotes_1.default.alias(name, remoteHost, localHost);

package/dist/cli/commands/tunnel.js

@@ -43,11 +43,12 @@ const localhost_1 = __importStar(require("../../lib/localhost"));
 const hosts_1 = __importDefault(require("../../lib/hosts"));
 const constants_1 = __importDefault(require("../../constants"));
 const tunnel_1 = require("../../proxy/tunnel");
+const file_1 = __importDefault(require("../../utils/file"));
 const shared_1 = require("../shared");
 const TUNNEL_TIMEOUT_MS = 45000;
 /** Tunnel state lives in the proxy process; ask it over the local read-only API. */
 const tunnelRows = () => new Promise((resolve, reject) => {
-    const req = http_1.default.get({ host: "127.0.0.1", port: constants_1.default.server.httpPort, path: "/api/hosts", headers: { Host: "localhost" }, timeout: 5000 }, (res) => {
+    const req = http_1.default.get({ host: "127.0.0.1", port: constants_1.default.server.httpPort, path: "/api/hosts", headers: { Host: "localhost", "X-Locadot-Token": file_1.default.read("API_TOKEN")?.trim() || "" }, timeout: 5000 }, (res) => {
         let body = "";
         res.on("data", (chunk) => (body += chunk));
         res.on("end", () => {

package/dist/cli/commands/ui.js

@@ -0,0 +1,94 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uiPassword = uiPassword;
+const readline_1 = __importDefault(require("readline"));
+const localhost_1 = require("../../lib/localhost");
+const ui_auth_1 = __importStar(require("../../lib/ui-auth"));
+const shared_1 = require("../shared");
+const readStdin = () => new Promise((resolve, reject) => {
+    let data = "";
+    process.stdin.setEncoding("utf8");
+    process.stdin.on("data", (chunk) => (data += chunk));
+    process.stdin.on("end", () => resolve(data.split(/\r?\n/)[0]));
+    process.stdin.on("error", reject);
+});
+/** Reads a line without echoing it. */
+const askHidden = (question) => new Promise((resolve) => {
+    const rl = readline_1.default.createInterface({ input: process.stdin, output: process.stdout, terminal: true });
+    const write = rl._writeToOutput.bind(rl);
+    let prompted = false;
+    rl._writeToOutput = (s) => {
+        if (!prompted) {
+            prompted = true;
+            write(s);
+        }
+        else if (s.includes("\n"))
+            write("\n");
+    };
+    rl.question(question, (answer) => {
+        rl.close();
+        resolve(answer);
+    });
+});
+/** Sets, resets or removes the dashboard password. Works whether or not the proxy is running. */
+async function uiPassword(options) {
+    if (options.off) {
+        const was = ui_auth_1.default.enabled();
+        ui_auth_1.default.clear();
+        (0, shared_1.print)(was ? "🔓 Dashboard password removed. The dashboard is open to anyone on this machine again." : "ℹ️  No dashboard password was set.");
+        return;
+    }
+    let password;
+    if (options.stdin || !process.stdin.isTTY) {
+        password = await readStdin();
+    }
+    else {
+        password = await askHidden("New dashboard password: ");
+        const again = await askHidden("Repeat it: ");
+        if (password !== again)
+            throw new localhost_1.InputError("❌ The passwords don't match.");
+    }
+    if (password.length < ui_auth_1.MIN_PASSWORD)
+        throw new localhost_1.InputError(`❌ The password must be at least ${ui_auth_1.MIN_PASSWORD} characters.`);
+    const was = ui_auth_1.default.enabled();
+    ui_auth_1.default.set(password);
+    (0, shared_1.print)(was
+        ? "🔑 Dashboard password reset. Everyone signed in has been signed out."
+        : "🔒 The dashboard now asks for this password. Scripts using the API token (X-Locadot-Token) are unaffected.");
+}

package/dist/constants/index.js

@@ -26,6 +26,21 @@ const savedPorts = () => {
     }
 };
 const envPort = (name, saved, fallback) => validPort(process.env[name]) ?? validPort(saved) ?? fallback;
+const PORT_ENV = ["LOCADOT_HTTP_PORT", "LOCADOT_HTTPS_PORT"];
+// The CLI pins both port vars on every proxy it spawns, so the proxy can't tell them from a
+// user's override. LOCADOT_USER_PORTS carries which ones the user actually set ("none" if neither).
+const userPortEnv = () => {
+    if (process.env.LOCADOT_USER_PORTS)
+        return process.env.LOCADOT_USER_PORTS;
+    return PORT_ENV.filter((name) => validPort(process.env[name]) !== undefined).join(",") || "none";
+};
+/** The port var's value only if the user set it (not the CLI's pinned copy). */
+const userEnvPort = (name) => {
+    const marker = process.env.LOCADOT_USER_PORTS;
+    if (marker && !marker.split(",").includes(name))
+        return undefined;
+    return validPort(process.env[name]);
+};
 class Constants {
 }
 Constants.paths = {
@@ -38,12 +53,16 @@ Constants.paths = {
     // Secret for the dashboard's mutating API; rotated on every proxy start.
     API_TOKEN: path_1.default.join(PACKAGE_PATH, ".locadot-token"),
     CONFIG_FILE,
+    // Optional dashboard password: scrypt hash + session signing secret (0600).
+    UI_AUTH_FILE: path_1.default.join(PACKAGE_PATH, ".locadot-ui-auth.json"),
     // Remote access. Sender: public hostname config, invites + peers (0600). Receiver: remotes (0600).
     HUB_FILE: path_1.default.join(PACKAGE_PATH, ".locadot-hub.json"),
     LINKS_FILE: path_1.default.join(PACKAGE_PATH, ".locadot-links.json"),
     REMOTES_FILE: path_1.default.join(PACKAGE_PATH, ".locadot-remotes.json"),
 };
 Constants.validPort = validPort;
+Constants.userPortEnv = userPortEnv;
+Constants.userEnvPort = userEnvPort;
 Constants.server = {
     httpPort: envPort("LOCADOT_HTTP_PORT", savedPorts().httpPort, 80),
     httpsPort: envPort("LOCADOT_HTTPS_PORT", savedPorts().httpsPort, 443),

package/dist/constants/template.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.upstreamDown = exports.proxyNotFound = void 0;
+exports.upstreamDown = exports.remoteLocalhost = exports.proxyNotFound = void 0;
 const escape_1 = require("../dashboard/escape");
 const page = (title, body, dashboardUrl) => `<!DOCTYPE html>
 <html lang="en">
@@ -62,3 +62,27 @@ const upstreamDown = (host, target, reason, dashboardUrl) => page("locadot: upst
     <code>${(0, escape_1.escapeHtml)(host)}</code> → <code>${(0, escape_1.escapeHtml)(target)}</code><br/><br/>
     ${(0, escape_1.escapeHtml)(reason)}. Is the app running?`, dashboardUrl);
 exports.upstreamDown = upstreamDown;
+/** Receiver side: `<domain>.localhost/_locadot/ports`, the port picker and shared hosts of an admin remote. */
+const remoteLocalhost = (opts) => page(`locadot: ${opts.sender} localhost`, opts.allowed
+    ? `<strong style="color: #7ee2a8;">${(0, escape_1.escapeHtml)(opts.sender)}</strong>: localhost<br/><br/>
+    Its dashboard is <a href="/">${(0, escape_1.escapeHtml)(opts.domain)}.localhost</a>.<br/>
+    Any port on that machine is at <code>${(0, escape_1.escapeHtml)(opts.portUrl.replace("PORT", "<port>"))}</code>.<br/><br/>
+    <form id="go" style="display:flex;gap:8px">
+      <input id="port" inputmode="numeric" pattern="[0-9]{1,5}" placeholder="3000" required
+        style="flex:1;padding:6px 10px;border-radius:4px;border:1px solid #444;background:#2e2e2e;color:#fff" />
+      <button style="padding:6px 14px;border-radius:4px;border:0;background:#61dafb;color:#000;font-weight:bold">Open</button>
+    </form>
+    <script>
+      document.getElementById("go").addEventListener("submit", function (e) {
+        e.preventDefault();
+        var port = document.getElementById("port").value.trim();
+        if (/^[0-9]{1,5}$/.test(port)) location.href = ${JSON.stringify(opts.portUrl)}.replace("PORT", port);
+      });
+    </script>
+    ${opts.hosts.length
+        ? `<br/>Shared hosts:<br/>${opts.hosts.map((h) => `<a href="${(0, escape_1.escapeHtml)(h.url)}">${(0, escape_1.escapeHtml)(h.local)}</a>`).join("<br/>")}`
+        : ""}`
+    : `<strong style="color: #ff6b6b;">Not available:</strong>
+    <code>${(0, escape_1.escapeHtml)(opts.domain)}.localhost</code> reaches ${(0, escape_1.escapeHtml)(opts.sender)}'s localhost only while you're an
+    admin there and it allows localhost access. Ask its owner, then run <code>locadot remote:sync ${(0, escape_1.escapeHtml)(opts.name)}</code>.`, opts.dashboardUrl);
+exports.remoteLocalhost = remoteLocalhost;